/* ============================================================
   THE CABINET YARD  —  edit the SITE block in the script below
   for phone, email, address, hours and pricing multipliers.
   ============================================================ */

:root{
  --paper:#F5F7FA;
  --surface:#FFFFFF;
  --surface-2:#EBEFF5;
  --surface-3:#DDE4EE;
  --ink:#0E1826;
  --ink-2:#4A5668;
  --ink-3:#8593A6;
  --rule:#D8DFE9;
  --rule-strong:#BCC7D6;
  --brand:#082D56;
  --brand-2:#11406F;
  --brand-ink:#F4F8FC;
  --brass:#C2701A;
  --brass-2:#F39128;
  --ok:#2F7D4F;
  --warn:#B4651A;
  --shadow:0 1px 2px rgba(25,28,25,.08), 0 6px 18px -10px rgba(25,28,25,.28);
  --shadow-lift:0 2px 4px rgba(25,28,25,.10), 0 18px 40px -18px rgba(25,28,25,.42);
  --maxw:1240px;
  --hw-l:#D8B36A; --hw-d:#8A6528;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0B121C;
    --surface:#111B29;
    --surface-2:#182434;
    --surface-3:#1F2C3F;
    --ink:#E9EEF5;
    --ink-2:#A3B0C2;
    --ink-3:#74839A;
    --rule:#26344A;
    --rule-strong:#35465F;
    --brand:#7FB2E8;
    --brand-2:#A5CBF2;
    --brand-ink:#09121D;
    --brass:#F39128;
    --brass-2:#FFB25E;
    --ok:#6FBF8C;
    --warn:#F0A855;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -10px rgba(0,0,0,.7);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0B121C;
  --surface:#111B29;
  --surface-2:#182434;
  --surface-3:#1F2C3F;
  --ink:#E9EEF5;
  --ink-2:#A3B0C2;
  --ink-3:#74839A;
  --rule:#26344A;
  --rule-strong:#35465F;
  --brand:#7FB2E8;
  --brand-2:#A5CBF2;
  --brand-ink:#09121D;
  --brass:#F39128;
  --brass-2:#FFB25E;
  --ok:#6FBF8C;
  --warn:#F0A855;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -10px rgba(0,0,0,.7);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.9);
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:"Archivo", ui-sans-serif, system-ui, sans-serif; margin:0; text-wrap:balance; letter-spacing:-.02em; line-height:1.08; }
p{ margin:0; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
img{ max-width:100%; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; border-radius:2px; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:20px; }
.mono{ font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric:tabular-nums; }
.eyebrow{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.num{ font-variant-numeric:tabular-nums; }

/* ---------- top bar ---------- */
.topbar{ background:var(--brand); color:var(--brand-ink); font-size:12.5px; }
.topbar .wrap{ display:flex; gap:16px; align-items:center; justify-content:space-between; min-height:36px; flex-wrap:wrap; padding-block:6px; }
.topbar .tb-left{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.topbar b{ font-weight:600; }
.tb-dot{ width:5px; height:5px; border-radius:50%; background:var(--brass-2); display:inline-block; }
.tradetoggle{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:3px 10px 3px 8px; cursor:pointer; font-size:12px; }
.tradetoggle .sw{ width:26px; height:14px; border-radius:999px; background:rgba(255,255,255,.28); position:relative; transition:background .16s; }
.tradetoggle .sw::after{ content:""; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:#fff; transition:transform .16s; }
.tradetoggle[aria-pressed="true"] .sw{ background:var(--brass-2); }
.tradetoggle[aria-pressed="true"] .sw::after{ transform:translateX(12px); }

/* ---------- header ---------- */
header.site{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule); }
header.site .wrap{ display:flex; align-items:center; gap:22px; min-height:66px; }
.brandmark{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; }
.brandmark picture, .brandmark img{ display:block; }
.brandmark img{ height:40px; width:auto; }
:root[data-theme="dark"] .brandmark img{ content:url("/assets/logo-dark.png"); }
:root[data-theme="light"] .brandmark img{ content:url("/assets/logo.png"); }
footer.site .brandmark img{ height:44px; }
@media (max-width:520px){ .brandmark img{ height:32px; } }
nav.main{ display:flex; gap:2px; margin-left:auto; flex-wrap:wrap; }
nav.main a{ text-decoration:none; font-size:14px; font-weight:500; padding:7px 11px; border-radius:4px; color:var(--ink-2); white-space:nowrap; }
nav.main a:hover{ color:var(--ink); background:var(--surface-2); }
nav.main a.on{ color:var(--ink); background:var(--surface-2); box-shadow:inset 0 -2px 0 var(--brass); }
.quotebtn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--paper); border:0; border-radius:4px; padding:9px 14px; font-size:13.5px; font-weight:600; cursor:pointer; }
.quotebtn .cnt{ background:var(--brass); color:#fff; border-radius:999px; min-width:19px; height:19px; display:inline-grid; place-items:center; font-size:11px; font-weight:700; padding:0 5px; }
:root[data-theme="dark"] .quotebtn .cnt, :root:not([data-theme="light"]) .quotebtn .cnt{ color:#1A1206; }
.menubtn{ display:none; background:none; border:1px solid var(--rule-strong); border-radius:4px; padding:7px 10px; cursor:pointer; font-size:13px; }

@media (max-width: 900px){
  nav.main{ display:none; order:3; width:100%; margin-left:0; border-top:1px solid var(--rule); padding-top:8px; }
  nav.main.open{ display:flex; }
  header.site .wrap{ flex-wrap:wrap; padding-block:10px; }
  .menubtn{ display:block; margin-left:auto; }
}

/* ---------- door renderer ---------- */
.door{
  position:relative; aspect-ratio:5/7; width:100%; border-radius:2px;
  background:var(--f);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--f) 72%, #000), var(--shadow);
  overflow:hidden; isolation:isolate;
}
.door .panel{
  position:absolute; inset:var(--ry,11%) var(--rx,15%);
  background:color-mix(in srgb, var(--f) 97%, #000);
  box-shadow:
    inset 0 2px 3px -1px color-mix(in srgb, var(--f) 58%, #000),
    inset 2px 0 3px -1px color-mix(in srgb, var(--f) 66%, #000),
    inset 0 -1px 0 color-mix(in srgb, var(--f) 80%, #fff),
    inset -1px 0 0 color-mix(in srgb, var(--f) 84%, #fff);
}
.door[data-profile="slim"]{ --ry:6.5%; --rx:9%; }
.door[data-profile="double"] .panel::before{
  content:""; position:absolute; inset:9%;
  background:color-mix(in srgb, var(--f) 95%, #000);
  box-shadow:
    inset 0 2px 3px -1px color-mix(in srgb, var(--f) 56%, #000),
    inset 2px 0 3px -1px color-mix(in srgb, var(--f) 64%, #000),
    inset 0 -1px 0 color-mix(in srgb, var(--f) 80%, #fff);
}
.door[data-profile="classic"]{ --ry:10%; --rx:13%; }
.door[data-profile="classic"] .panel{
  border-radius:3px;
  background:linear-gradient(162deg,
    color-mix(in srgb, var(--f) 78%, #fff) 0%,
    var(--f) 42%,
    color-mix(in srgb, var(--f) 90%, #000) 100%);
  box-shadow:
    inset 0 0 0 6px color-mix(in srgb, var(--f) 86%, #000),
    inset 0 0 0 7px color-mix(in srgb, var(--f) 70%, #000),
    0 0 0 1px color-mix(in srgb, var(--f) 62%, #000);
}
.door[data-profile="slab"] .panel{ display:none; }
.door[data-profile="glass"]{ --ry:5%; --rx:6.5%; }
.door[data-profile="glass"] .panel{
  background:linear-gradient(128deg,
    color-mix(in srgb, var(--f) 62%, #fff) 0%,
    var(--f) 34%,
    color-mix(in srgb, var(--f) 86%, #000) 66%,
    color-mix(in srgb, var(--f) 55%, #fff) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34), inset 0 0 22px rgba(0,0,0,.18);
}
.door[data-grain="wood"]::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(91deg,
    rgba(0,0,0,.07) 0 1px, rgba(255,255,255,.05) 1px 2px,
    rgba(0,0,0,.03) 2px 5px, rgba(255,255,255,.03) 5px 9px);
}
.door[data-finish="gloss"]::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(112deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.06) 21%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,.22) 63%, rgba(255,255,255,0) 84%);
}
.door[data-finish="matte"]::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.05));
}
.door .pull{
  position:absolute; z-index:4; right:7.5%; top:24%; height:34%; width:3.2%; min-width:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--hw-d),var(--hw-l) 45%,var(--hw-d));
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.door[data-hw="black"]{ --hw-l:#5A5D60; --hw-d:#17181A; }
.door[data-hw="nickel"]{ --hw-l:#E2E6E8; --hw-d:#8B9196; }
.door[data-hw="brass"]{ --hw-l:#D8B36A; --hw-d:#8A6528; }

/* ---------- hero ---------- */
.hero{ border-bottom:1px solid var(--rule); background:
  radial-gradient(90% 120% at 12% 0%, color-mix(in srgb, var(--brand) 10%, transparent) 0%, transparent 62%),
  var(--paper); }
.hero .wrap{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:52px; align-items:center; padding-block:60px 56px; }
.hero h1{ font-size:clamp(38px,5.6vw,66px); font-weight:800; }
.hero h1 .accent{ color:var(--brand); }
.hero .lede{ margin-top:18px; font-size:17.5px; color:var(--ink-2); max-width:52ch; }
.hero .cta{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:9px; border:1px solid transparent; border-radius:4px; padding:12px 18px; font-size:14.5px; font-weight:600; text-decoration:none; cursor:pointer; background:none; }
.btn-p{ background:var(--brand); color:var(--brand-ink); }
.btn-p:hover{ background:var(--brand-2); }
.btn-s{ border-color:var(--rule-strong); color:var(--ink); background:var(--surface); }
.btn-s:hover{ border-color:var(--ink-3); }
.btn-g{ border-color:var(--rule-strong); color:var(--ink-2); }
.btn-g:hover{ color:var(--ink); border-color:var(--ink-3); }
.btn-sm{ padding:7px 12px; font-size:13px; }
.heroRack{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px 12px; align-items:start; }
.heroRack .cell{ position:relative; }
.heroRack .cell:nth-child(2){ transform:translateY(12px); }
.heroRack .cell:nth-child(4){ transform:translateY(-8px); }
.heroRack .cell:nth-child(6){ transform:translateY(10px); }
.heroRack .lbl{ margin-top:7px; font-size:11px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace; }
@media (max-width:880px){
  .hero .wrap{ grid-template-columns:1fr; gap:34px; padding-block:40px; }
  .heroRack .cell{ transform:none !important; }
}

/* ---------- spec strip ---------- */
.specstrip{ background:var(--surface); border-bottom:1px solid var(--rule); }
.specstrip .wrap{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding-block:0; }
.specstrip .it{ padding:22px 24px 22px 0; border-right:1px solid var(--rule); }
.specstrip .it:last-child{ border-right:0; }
.specstrip .it + .it{ padding-left:24px; }
.specstrip .k{ font-family:"Archivo",sans-serif; font-weight:700; font-size:15px; }
.specstrip .v{ font-size:13.5px; color:var(--ink-2); margin-top:3px; }
@media (max-width:820px){ .specstrip .wrap{ grid-template-columns:1fr 1fr; } .specstrip .it{ padding:18px 18px 18px 0 !important; border-bottom:1px solid var(--rule); } .specstrip .it:nth-child(2n){ border-right:0; padding-left:18px !important; } }
@media (max-width:460px){ .specstrip .wrap{ grid-template-columns:1fr; } .specstrip .it{ border-right:0 !important; padding-left:0 !important; } }

/* ---------- generic section ---------- */
section.band{ padding-block:58px; border-bottom:1px solid var(--rule); }
.sechead{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.sechead h2{ font-size:clamp(25px,3vw,34px); font-weight:700; }
.sechead p{ color:var(--ink-2); font-size:15px; margin-top:7px; max-width:60ch; }

/* ---------- line cards ---------- */
.linegrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(224px,1fr)); gap:18px; }
.linecard{ background:var(--surface); border:1px solid var(--rule); border-radius:5px; padding:16px; text-decoration:none; display:flex; flex-direction:column; gap:13px; transition:border-color .15s, transform .15s, box-shadow .15s; }
.linecard:hover{ border-color:var(--rule-strong); transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.linecard .doorwrap{ width:100%; }
.linecard h3{ font-size:17px; font-weight:700; }
.linecard .sub{ font-size:13px; color:var(--ink-2); }
.linecard .foot{ margin-top:auto; display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-top:10px; border-top:1px dashed var(--rule); }
.linecard .price{ font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:17px; }
.linecard .plabel{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-family:"IBM Plex Mono",monospace; }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; counter-reset:s; }
.step{ position:relative; padding-top:18px; border-top:2px solid var(--brand); }
.step .n{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--brand); font-weight:600; }
.step h3{ font-size:18px; margin-top:8px; }
.step p{ margin-top:7px; color:var(--ink-2); font-size:14.5px; }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; gap:26px; } }

/* ---------- trade band ---------- */
.tradeband{ background:var(--brand); color:var(--brand-ink); }
.tradeband .wrap{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:center; padding-block:40px; }
.tradeband h2{ font-size:clamp(23px,3vw,31px); font-weight:700; }
.tradeband p{ margin-top:10px; opacity:.85; font-size:15px; max-width:56ch; }
.tradeband .btn-p{ background:var(--brass-2); color:#231704; }
.tradeband .btn-p:hover{ background:#fff; }
@media (max-width:760px){ .tradeband .wrap{ grid-template-columns:1fr; } }

/* ---------- catalog page ---------- */
.catalog{ display:grid; grid-template-columns:232px minmax(0,1fr); gap:34px; align-items:start; padding-block:34px 60px; }
.filters{ position:sticky; top:82px; }
.fgroup{ border-bottom:1px solid var(--rule); padding-bottom:16px; margin-bottom:16px; }
.fgroup:last-child{ border-bottom:0; }
.fgroup h4{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500; margin-bottom:10px; }
.fopt{ display:flex; align-items:center; gap:9px; padding:5px 0; font-size:14px; cursor:pointer; color:var(--ink-2); }
.fopt input{ accent-color:var(--brand); width:15px; height:15px; margin:0; }
.fopt:hover{ color:var(--ink); }
.fopt .ct{ margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3); }
.swatchdot{ width:13px; height:13px; border-radius:3px; border:1px solid rgba(0,0,0,.2); }
.catbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.catbar .count{ font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink-3); }
.stylegrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr)); gap:18px; }
.stylecard{ background:var(--surface); border:1px solid var(--rule); border-radius:5px; padding:13px; text-decoration:none; display:flex; flex-direction:column; gap:11px; transition:border-color .15s, transform .15s, box-shadow .15s; }
.stylecard:hover{ border-color:var(--rule-strong); transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.stylecard .nm{ font-family:"Archivo",sans-serif; font-weight:700; font-size:15px; line-height:1.2; }
.stylecard .ln{ font-size:12px; color:var(--ink-3); margin-top:2px; }
.stylecard .pr{ margin-top:auto; padding-top:9px; border-top:1px dashed var(--rule); display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.stylecard .pr b{ font-family:"IBM Plex Mono",monospace; font-size:15px; font-weight:600; }
.stylecard .pr span{ font-size:10.5px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:900px){ .catalog{ grid-template-columns:1fr; gap:22px; } .filters{ position:static; } .fgroups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 26px; } }

/* ---------- style detail ---------- */
.detail{ padding-block:30px 60px; }
.crumb{ font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3); margin-bottom:20px; }
.crumb a{ color:var(--ink-2); text-decoration:none; }
.crumb a:hover{ color:var(--ink); }
.dtop{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:44px; align-items:start; }
.doorbig{ max-width:300px; }
.dtop h1{ font-size:clamp(30px,4vw,42px); font-weight:800; }
.dtop .lineref{ font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); font-weight:500; }
.dtop .blurb{ margin-top:14px; color:var(--ink-2); font-size:15.5px; max-width:58ch; }
.pricebox{ margin-top:22px; background:var(--surface); border:1px solid var(--rule); border-radius:5px; padding:18px 20px; display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.pricebox .big{ font-family:"IBM Plex Mono",monospace; font-size:30px; font-weight:600; line-height:1; }
.pricebox .cap{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-family:"IBM Plex Mono",monospace; }
.pricebox .msrp{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3); margin-top:5px; }
.pricebox .tradeline{ color:var(--brand); font-weight:600; font-size:14px; }
.spectable{ margin-top:24px; width:100%; border-collapse:collapse; font-size:14px; }
.spectable th{ text-align:left; font-weight:500; color:var(--ink-3); font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; padding:9px 14px 9px 0; vertical-align:top; width:36%; border-bottom:1px solid var(--rule); }
.spectable td{ padding:9px 0; border-bottom:1px solid var(--rule); color:var(--ink); }
@media (max-width:820px){ .dtop{ grid-template-columns:1fr; gap:26px; } .doorbig{ max-width:290px; } }

/* ---------- SKU table ---------- */
.skuhead{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin:48px 0 14px; flex-wrap:wrap; }
.tabs{ display:flex; gap:4px; flex-wrap:wrap; }
.tab{ border:1px solid var(--rule); background:var(--surface); border-radius:4px; padding:6px 12px; font-size:13px; cursor:pointer; color:var(--ink-2); }
.tab.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); font-weight:600; }
.tablewrap{ overflow-x:auto; border:1px solid var(--rule); border-radius:5px; background:var(--surface); }
table.sku{ width:100%; border-collapse:collapse; font-size:14px; min-width:620px; }
table.sku th{ text-align:left; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:500; padding:11px 14px; border-bottom:1px solid var(--rule); background:var(--surface-2); position:sticky; top:0; }
table.sku td{ padding:10px 14px; border-bottom:1px solid var(--rule); vertical-align:middle; }
table.sku tr:last-child td{ border-bottom:0; }
table.sku tbody tr:hover{ background:var(--surface-2); }
td.code{ font-family:"IBM Plex Mono",monospace; font-weight:600; letter-spacing:-.01em; white-space:nowrap; }
td.dim{ font-family:"IBM Plex Mono",monospace; color:var(--ink-2); font-size:13px; white-space:nowrap; }
td.money{ font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
td.money .was{ display:block; font-size:11.5px; color:var(--ink-3); text-decoration:line-through; }
td.off{ text-align:center; white-space:nowrap; font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-weight:600; color:var(--brand); }
td.act{ text-align:right; white-space:nowrap; }
.addbtn{ border:1px solid var(--rule-strong); background:var(--surface); border-radius:4px; padding:5px 11px; font-size:12.5px; font-weight:600; cursor:pointer; }
.addbtn:hover{ background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }
.addbtn.added{ background:var(--ok); border-color:var(--ok); color:#fff; }

/* ---------- 10x10 page ---------- */
.twocol{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:start; }
@media (max-width:860px){ .twocol{ grid-template-columns:1fr; gap:30px; } }
.kitplan{ background:var(--surface); border:1px solid var(--rule); border-radius:5px; padding:20px; }
.kitplan h3{ font-size:17px; }
.kitlist{ list-style:none; margin:14px 0 0; padding:0; font-size:14px; }
.kitlist li{ display:flex; gap:10px; padding:6px 0; border-bottom:1px dotted var(--rule); }
.kitlist li:last-child{ border-bottom:0; }
.kitlist .q{ font-family:"IBM Plex Mono",monospace; color:var(--ink-3); width:26px; flex:0 0 auto; }
.kitlist .c{ font-family:"IBM Plex Mono",monospace; font-weight:600; width:86px; flex:0 0 auto; }
.kitlist .d{ color:var(--ink-2); }
table.cmp{ width:100%; border-collapse:collapse; font-size:14.5px; }
table.cmp th{ text-align:left; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:500; padding:10px 12px; border-bottom:1px solid var(--rule-strong); }
table.cmp td{ padding:12px; border-bottom:1px solid var(--rule); }
table.cmp td.money{ text-align:right; font-family:"IBM Plex Mono",monospace; font-weight:600; }
table.cmp tr:hover td{ background:var(--surface-2); }
table.cmp .lnk{ text-decoration:none; font-weight:600; }
table.cmp .lnk:hover{ color:var(--brand); }
.bar{ height:6px; border-radius:3px; background:var(--brand); opacity:.85; }

/* ---------- tiers ---------- */
.tiers{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.tier{ background:var(--surface); border:1px solid var(--rule); border-radius:5px; padding:22px; display:flex; flex-direction:column; gap:12px; }
.tier.mid{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }
.tier h3{ font-size:19px; }
.tier .off{ font-family:"IBM Plex Mono",monospace; font-size:32px; font-weight:600; color:var(--brand); line-height:1; }
.tier ul{ margin:0; padding-left:18px; color:var(--ink-2); font-size:14px; display:grid; gap:6px; }
.tier .req{ font-size:12.5px; color:var(--ink-3); border-top:1px dashed var(--rule); padding-top:10px; margin-top:auto; }
@media (max-width:820px){ .tiers{ grid-template-columns:1fr; } }

/* ---------- faq ---------- */
.faq{ max-width:76ch; }
.faq details{ border-bottom:1px solid var(--rule); padding:16px 0; }
.faq summary{ font-family:"Archivo",sans-serif; font-weight:600; font-size:16.5px; cursor:pointer; list-style:none; display:flex; gap:12px; align-items:flex-start; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:"+"; font-family:"IBM Plex Mono",monospace; color:var(--brass); font-weight:600; flex:0 0 auto; }
.faq details[open] summary::before{ content:"−"; }
.faq p{ margin-top:10px; padding-left:24px; color:var(--ink-2); font-size:15px; }

/* ---------- forms ---------- */
.formgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.formgrid .full{ grid-column:1/-1; }
label.fld{ display:block; }
label.fld .lb{ display:block; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px; }
input[type=text], input[type=email], input[type=tel], select, textarea{
  width:100%; background:var(--surface); border:1px solid var(--rule-strong); border-radius:4px;
  padding:10px 11px; font:inherit; font-size:14.5px; color:var(--ink);
}
textarea{ resize:vertical; min-height:88px; }
input:focus, select:focus, textarea:focus{ border-color:var(--brand); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.hint{ font-size:12.5px; color:var(--ink-3); margin-top:6px; }
@media (max-width:620px){ .formgrid{ grid-template-columns:1fr; } }

/* ---------- quote drawer ---------- */
.scrim{ position:fixed; inset:0; background:rgba(12,16,14,.5); z-index:60; opacity:0; pointer-events:none; transition:opacity .2s; }
.scrim.on{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; right:0; bottom:0; width:min(430px,100%); background:var(--paper); z-index:61; display:flex; flex-direction:column; transform:translateX(102%); transition:transform .24s cubic-bezier(.3,.8,.3,1); box-shadow:var(--shadow-lift); }
.drawer.on{ transform:none; }
.drawer header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--rule); }
.drawer header h2{ font-size:19px; }
.xbtn{ background:none; border:1px solid var(--rule-strong); border-radius:4px; width:30px; height:30px; cursor:pointer; line-height:1; font-size:15px; }
.drawer .body{ flex:1; overflow-y:auto; padding:18px 20px; }
.qline{ display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:12px 0; border-bottom:1px solid var(--rule); }
.qline .qn{ font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:14px; }
.qline .qd{ font-size:12.5px; color:var(--ink-3); }
.qline .qp{ font-family:"IBM Plex Mono",monospace; text-align:right; font-size:14px; font-weight:600; }
.qline .qctl{ display:flex; align-items:center; gap:6px; grid-column:1/-1; }
.stepbtn{ width:26px; height:26px; border:1px solid var(--rule-strong); background:var(--surface); border-radius:4px; cursor:pointer; line-height:1; }
.stepbtn:hover{ border-color:var(--ink-3); }
.qty{ font-family:"IBM Plex Mono",monospace; min-width:26px; text-align:center; font-size:14px; }
.rm{ margin-left:auto; background:none; border:0; color:var(--ink-3); font-size:12.5px; cursor:pointer; text-decoration:underline; }
.rm:hover{ color:var(--warn); }
.empty{ text-align:center; padding:44px 10px; color:var(--ink-3); }
.empty .door{ width:84px; margin:0 auto 16px; }
.drawer footer{ border-top:1px solid var(--rule); padding:16px 20px 20px; background:var(--surface); }
.totrow{ display:flex; justify-content:space-between; align-items:baseline; font-size:14px; padding:3px 0; }
.totrow.grand{ font-size:18px; font-weight:700; font-family:"Archivo",sans-serif; padding-top:9px; margin-top:7px; border-top:1px solid var(--rule); }
.totrow .money{ font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; }
.totrow.save{ color:var(--brand); font-weight:600; }

/* ---------- misc ---------- */
.notice{ background:color-mix(in srgb, var(--brass) 14%, var(--surface)); border:1px solid color-mix(in srgb, var(--brass) 40%, var(--rule)); border-radius:5px; padding:13px 15px; font-size:13.5px; color:var(--ink-2); }
.ok-note{ background:color-mix(in srgb, var(--ok) 16%, var(--surface)); border:1px solid color-mix(in srgb, var(--ok) 45%, var(--rule)); border-radius:5px; padding:16px; font-size:14.5px; }
footer.site{ background:var(--surface); border-top:1px solid var(--rule); padding-block:44px 30px; }
.fcols{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:30px; }
.fcols h4{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500; margin-bottom:12px; }
.fcols a, .fcols p{ display:block; font-size:14px; color:var(--ink-2); text-decoration:none; padding:3px 0; }
.fcols a:hover{ color:var(--ink); }
.fbot{ margin-top:34px; padding-top:18px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3); }
@media (max-width:820px){ .fcols{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .fcols{ grid-template-columns:1fr; } }
.hidden{ display:none !important; }