/* ============================================================
   Bethesda Cabinets - "Drawing Set" design system
   Concept 02 (drafting / construction-document metaphor).
   Shared across every sheet (page). Documented in
   /style-guide/drawingset.md. Edit here, not per-page.
   ============================================================ */

:root{
  /* ===== Fluid-design tokens (agency draft 2026-09-16; BC = validation site) ===== */
  --gutter:clamp(1.5rem,3.5vw,5rem);          /* per side: ~24px phone, ~50px @1440, caps ~2290px */
  --container:1920px;                          /* stops ultra-wide only; NOT the readability cap */
  --measure:65ch;                              /* readability cap, applied to text not the container */
  --section-y:clamp(3.5rem,1rem + 7vw,10rem);  /* vertical rhythm: ~56px phone, ~150px @1920 */
  --label-min:0.875rem;                        /* 14px floor for anything a visitor reads (Alex r3 item 1) */
  --chrome-min:0.8125rem;                       /* 13px floor for decorative drafting chrome (FIG/REV/sheet codes/scale notes) */
  --ink:#0E2240;          /* drafting ink (brand navy) */
  --ink-2:#34425C;
  --ink-3:#4F5A73;
  --gold:#C9A24A;         /* redline / annotation (brand gold) */
  --gold-deep:#A8842F;    /* rules, fills, borders only (3:1 on paper - not for text) */
  --gold-text:#7A5F1E;    /* text-safe gold: 5.2:1 on paper, 4.7:1 on paper-2 (WCAG AA) */
  --paper:#F2EEE4;        /* drafting paper */
  --paper-2:#E9E3D5;
  --paper-line:rgba(14,34,64,.10);
  --paper-line-2:rgba(14,34,64,.18);
  --blue-line:rgba(242,238,228,.55);  /* lines on the blueprint sheet */
  --blue-line-strong:rgba(242,238,228,.85);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Archivo',sans-serif;color:var(--ink);background:var(--paper);
  font-size:clamp(1rem,0.95rem + 0.2vw,1.2rem);
  line-height:1.5;-webkit-font-smoothing:antialiased;
  /* graph-paper grid - kept subtle so it reads as paper texture, not foreground */
  background-image:
    linear-gradient(rgba(14,34,64,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,34,64,.028) 1px,transparent 1px);
  background-size:44px 44px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:clamp(0.7rem,0.65rem + 0.15vw,0.9rem)}
.disp{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em;line-height:.98}
.wrap{width:min(100% - 2 * var(--gutter),var(--container));margin-inline:auto}
/* full-bleed grids share the fluid container: scaling gutter, cap ultra-wide only */
.fig-grid,.rev-grid,.lib-grid,.proof-grid{width:min(100% - 2 * var(--gutter),var(--container));margin-inline:auto}
.rule{height:1px;background:var(--paper-line-2)}
.tick{font-family:'IBM Plex Mono',monospace;font-size:max(var(--chrome-min),.7rem);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
/* Alternating section bands so each information block reads as its own zone
   (the dark blueprint/showroom sheets are already distinct, so skip them) */
body>section:not(.blueprint):not(.showroom):not(.brands):not(.formsheet):not(.priceband):nth-of-type(even){background:var(--paper-2)}
body>section:not(.blueprint):not(.showroom):not(.brands):not(.formsheet):not(.priceband):nth-of-type(odd){background:transparent}

/* ===== HEADER BAR (top) ===== */
.tb{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--ink);box-shadow:0 6px 20px -14px rgba(14,34,64,.35)}
.tb-inner{width:min(100% - 2 * var(--gutter),var(--container));margin-inline:auto;display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}
.brand-mark{display:inline-grid;place-items:center;width:40px;height:40px;border:1.5px solid var(--gold-deep);color:var(--ink);font-family:Georgia,'Times New Roman',serif;font-size:1.5rem;line-height:1;padding-bottom:3px;flex-shrink:0}
.brand-name{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;font-size:1.14rem;color:var(--ink);line-height:1.12;white-space:nowrap}
.brand-name small{display:block;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:max(var(--label-min),.64rem);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);margin-top:3px;white-space:nowrap}
.tb-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.tb-nav a{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.74rem);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-weight:500;white-space:nowrap;transition:color .15s}
.tb-nav a.navlink{position:relative}
.tb-nav a.navlink:hover{color:var(--gold-deep)}
.tb-nav a.navlink::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.tb-nav a.navlink:hover::after,.tb-nav a.navlink.active::after{transform:scaleX(1)}
.tb-nav a.navlink.active{color:var(--gold-deep)}
.tb-nav a.phone{color:var(--ink-2);letter-spacing:.04em}
.tb-nav a.phone:hover{color:var(--ink)}
.tb-nav a.cta{background:var(--gold);color:var(--ink);font-weight:600;padding:11px 20px;letter-spacing:.08em}
.tb-nav a.cta:hover{background:var(--ink);color:var(--paper)}

/* ===== HERO - the title sheet (homepage) ===== */
.sheet{border-bottom:1px solid var(--ink)}
.hero{position:relative;padding:0}
.hero-topband{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--ink)}
.hero-topband .htb{position:relative;margin:0;border-right:1px solid var(--ink);display:flex;flex-direction:column}
.hero-topband .htb:last-child{border-right:none}
.hero-topband .htb .img{position:relative;overflow:hidden;aspect-ratio:3 / 1.55;background:var(--paper-2)}
.hero-topband .htb .img img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.hero-topband .htb .img .corner{position:absolute;width:12px;height:12px;border:1px solid var(--paper)}
.hero-topband .htb .img .corner.tl{top:10px;left:10px;border-right:none;border-bottom:none}
.hero-topband .htb .img .corner.br{bottom:10px;right:10px;border-left:none;border-top:none}
.hero-topband .htb .cap{padding:12px 18px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.7rem);letter-spacing:.06em;color:var(--ink-2);display:flex;justify-content:space-between;gap:12px}
.hero-topband .htb .cap b{color:var(--ink);font-weight:500}
.hero-grid{display:grid;grid-template-columns:1fr minmax(20rem,34%)}
.hero-main{padding:clamp(3rem,1.5rem + 4vw,5.5rem) var(--gutter) clamp(2.5rem,1.5rem + 3vw,4rem) max(var(--gutter),calc((100vw - var(--container)) / 2));border-right:1px solid var(--ink);position:relative}
.hero-tag{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--ink);padding:7px 14px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.7rem);letter-spacing:.14em;text-transform:uppercase}
.hero-tag .sq{width:8px;height:8px;background:var(--gold)}
.hero h1{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.03em;line-height:.94;font-size:clamp(2.5rem,1rem + 4.6vw,6.5rem);max-width:16ch;margin:34px 0 0;color:var(--ink)}
.hero h1 .u{position:relative;display:inline-block}
.hero h1 .u::after{
  content:'';position:absolute;left:0;right:0;bottom:-14px;height:7px;
  border-left:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);
  border-bottom:1px solid var(--gold-deep);
}
.hero h1 .u .dim{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);background:var(--paper);padding:0 8px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--chrome-min),.66rem);letter-spacing:.1em;color:var(--gold-deep);white-space:nowrap;font-weight:500}
.hero-lead{max-width:var(--measure);margin:64px 0 0;font-size:clamp(1.05rem,0.9rem + 0.4vw,1.4rem);color:var(--ink-2);line-height:1.55}
.hero-actions{margin-top:32px;display:flex;gap:0;border:1px solid var(--ink);width:fit-content}
.hero-actions a{padding:15px 26px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.78rem);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:10px;transition:background .15s,color .15s}
.hero-actions a.primary{background:var(--ink);color:var(--paper)}
.hero-actions a.primary:hover{background:var(--gold);color:var(--ink)}
.hero-actions a.ghost{border-left:1px solid var(--ink)}
.hero-actions a.ghost:hover{background:var(--ink);color:var(--paper)}
@media(max-width:460px){.hero-actions{flex-direction:column;width:100%}.hero-actions a{justify-content:center}.hero-actions a.ghost{border-left:none;border-top:1px solid var(--ink)}}
.hero-coords{margin-top:46px;display:flex;gap:34px;flex-wrap:wrap}
.hero-coords .c .n{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.45rem;color:var(--ink);letter-spacing:-.02em}
.hero-coords .c .l{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.7rem);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}

/* the framed "figure" - one honest photo, drawing-detail style */
.hero-fig{display:flex;flex-direction:column}
.hero-fig .img{flex:1;position:relative;overflow:hidden;border-bottom:1px solid var(--ink);background:var(--paper-2);min-height:300px}
.hero-fig .img img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.hero-fig .img .corner{position:absolute;width:12px;height:12px;border:1px solid var(--paper)}
.hero-fig .img .corner.tl{top:10px;left:10px;border-right:none;border-bottom:none}
.hero-fig .img .corner.br{bottom:10px;right:10px;border-left:none;border-top:none}
.hero-fig .cap{padding:14px 18px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.7rem);letter-spacing:.06em;color:var(--ink-2);display:flex;justify-content:space-between;gap:12px}
.hero-fig .cap b{color:var(--ink);font-weight:500}

/* approval stamp */
.stamp{position:absolute;right:16px;bottom:16px;z-index:6;transform:rotate(-7deg);border:2px solid var(--gold-deep);color:var(--gold-deep);padding:10px 16px;background:rgba(242,238,228,.94);font-family:'IBM Plex Mono',monospace;text-align:center;line-height:1.25;box-shadow:0 3px 16px rgba(0,0,0,.28)}
.stamp .big{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.04em;color:var(--gold-deep)}
.stamp .sm{font-size:max(var(--chrome-min),.63rem);letter-spacing:.14em;text-transform:uppercase;margin-top:3px}

/* ===== SHEET HEADER (inner-page hero / title block) ===== */
.sheet-head{border-bottom:1px solid var(--ink);position:relative}
.sheet-head .wrap{padding-block:30px 0}
.crumbs{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.7rem);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.crumbs a:hover{color:var(--gold-deep)}
.crumbs .sep{color:var(--paper-line-2);color:var(--ink-3);opacity:.6}
.sheet-head .titleblock{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;padding:34px 0 30px}
.sheet-head .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.7rem);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.sheet-head .eyebrow .sq{width:8px;height:8px;background:var(--gold)}
.sheet-head h1{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.03em;line-height:.98;font-size:clamp(2.5rem,1rem + 4.6vw,6.5rem);max-width:16ch;color:var(--ink);margin:16px 0 0}
.sheet-head .lead{max-width:var(--measure);margin:20px 0 0;font-size:clamp(1.05rem,0.9rem + 0.4vw,1.4rem);color:var(--ink-2);line-height:1.55}
.sheet-head .sheet-no{border:1px solid var(--ink);font-family:'IBM Plex Mono',monospace;text-align:right;min-width:150px}
.sheet-head .sheet-no .r{display:flex;justify-content:space-between;gap:16px;padding:8px 12px;border-bottom:1px solid var(--paper-line-2);font-size:max(var(--label-min),.72rem);letter-spacing:.08em;text-transform:uppercase}
.sheet-head .sheet-no .r:last-child{border-bottom:none}
.sheet-head .sheet-no .r .k{color:var(--ink-3)}
.sheet-head .sheet-no .r .v{color:var(--ink);font-weight:500}

/* ===== SPEC ROW (authorized lines / key facts) ===== */
.spec{border-bottom:1px solid var(--ink);background:var(--paper-2)}
.spec .wrap{display:grid;grid-template-columns:auto repeat(5,1fr);align-items:stretch}
.spec .label{padding:18px 24px 18px 0;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.68rem);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;border-right:1px solid var(--paper-line-2)}
.spec .b{padding:18px 22px;border-right:1px solid var(--paper-line-2);display:flex;flex-direction:column;justify-content:center}
.spec .b:last-child{border-right:none}
.spec .b .nm{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.15rem;color:var(--ink);letter-spacing:-.01em}
.spec .b .meta{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.68rem);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);margin-top:4px}
/* 4-up variant for key facts */
.spec.four .wrap{grid-template-columns:auto repeat(4,1fr)}

/* ===== SECTION HEADERS ===== */
.shead{display:grid;grid-template-columns:1fr;gap:0;align-items:baseline;padding-block:var(--section-y) clamp(2rem,1rem + 2vw,3.5rem)}
.shead .no{display:none}
.shead h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2rem,1rem + 3vw,4.5rem);max-width:22ch;letter-spacing:-.025em;color:var(--ink);line-height:1.02}
.shead .sub{grid-column:1;font-size:1.02rem;color:var(--ink-2);max-width:640px;margin-top:14px}

/* ===== BLUEPRINT - the elevation drawing ===== */
.blueprint{background:var(--ink);color:var(--paper);border-bottom:1px solid var(--ink);
  background-image:
    linear-gradient(rgba(242,238,228,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(242,238,228,.06) 1px,transparent 1px);
  background-size:32px 32px;
}
.blueprint .shead h2{color:var(--paper)}
.blueprint .shead .no{color:var(--gold)}
.blueprint .shead .sub{color:rgba(242,238,228,.72)}
.bp-stage{padding:20px 0 70px}
.bp-frame{border:1px solid var(--blue-line);padding:60px 60px 44px;position:relative}
.bp-frame .titlebar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:10px 16px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--chrome-min),.66rem);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-line-strong);border-bottom:1px solid var(--blue-line)}

/* the cabinet elevation, drawn in CSS */
.elev{position:relative;display:flex;align-items:flex-end;gap:0;height:340px;margin:0 38px}
.unit{position:relative;display:flex;flex-direction:column;justify-content:flex-end;border-left:1px solid var(--blue-line);border-right:1px solid var(--blue-line)}
.unit + .unit{border-left:none}
.wall{height:118px;border:1px solid var(--blue-line-strong);border-bottom:1px solid var(--blue-line-strong);display:flex}
.door{flex:1;border:1px solid var(--blue-line);margin:5px;position:relative}
.door::after{content:'';position:absolute;inset:5px;border:1px solid var(--blue-line)}
.door .knob{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--gold);bottom:10px}
.door.l .knob{right:9px}.door.r .knob{left:9px}
.gap{height:62px}
.counter{height:7px;background:var(--gold);margin:0 -1px;position:relative;z-index:2}
.base{height:150px;border:1px solid var(--blue-line-strong);display:flex;position:relative}
.toe{position:absolute;bottom:0;left:6px;right:6px;height:13px;border-top:1px solid var(--blue-line)}
.drawerstack{flex:1;margin:5px 5px 18px;display:flex;flex-direction:column;gap:4px}
.drawer{flex:1;border:1px solid var(--blue-line);position:relative}
.drawer::after{content:'';position:absolute;inset:4px;border:1px solid var(--blue-line)}
.drawer .knob{position:absolute;width:14px;height:3px;background:var(--gold);left:50%;top:50%;transform:translate(-50%,-50%)}
.tall .wall{display:none}
.tall .gap{display:none}
.tall .base{height:330px}
.tall .door{margin:5px}
.floor{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--blue-line-strong)}
.floor::before{content:'';position:absolute;left:0;right:0;top:0;height:14px;
  background-image:repeating-linear-gradient(45deg,var(--blue-line) 0 1px,transparent 1px 9px)}

/* dimension lines */
.dim-h{position:relative;margin:30px 38px 0;height:30px}
.dim-h .line{position:absolute;top:15px;left:0;right:0;height:1px;background:var(--gold)}
.dim-h .line::before,.dim-h .line::after{content:'';position:absolute;top:-4px;width:1px;height:9px;background:var(--gold)}
.dim-h .line::before{left:0}.dim-h .line::after{right:0}
.dim-h .val{position:absolute;left:50%;top:6px;transform:translateX(-50%);background:var(--ink);padding:0 10px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--chrome-min),.72rem);color:var(--gold);letter-spacing:.08em}
.dim-v{position:absolute;left:0;top:60px;bottom:84px;width:30px}
.dim-v .line{position:absolute;left:15px;top:0;bottom:0;width:1px;background:var(--gold)}
.dim-v .line::before,.dim-v .line::after{content:'';position:absolute;left:-4px;width:9px;height:1px;background:var(--gold)}
.dim-v .line::before{top:0}.dim-v .line::after{bottom:0}
.dim-v .val{position:absolute;top:50%;left:-6px;transform:rotate(-90deg) translateX(50%);transform-origin:left center;font-family:'IBM Plex Mono',monospace;font-size:max(var(--chrome-min),.72rem);color:var(--gold);letter-spacing:.08em;white-space:nowrap}

/* callouts */
.callouts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:54px;border:1px solid var(--blue-line)}
.callout{padding:20px 22px;border-right:1px solid var(--blue-line);display:flex;gap:14px;align-items:flex-start}
.callout:last-child{border-right:none}
.callout .ref{flex-shrink:0;width:30px;height:30px;border:1px solid var(--gold);color:var(--gold);border-radius:50%;display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-size:max(var(--chrome-min),.74rem)}
.callout .t b{font-family:'Space Grotesk',sans-serif;font-weight:600;display:block;color:var(--paper);font-size:.98rem;margin-bottom:3px}
.callout .t span{font-size:max(var(--label-min),.86rem);color:rgba(242,238,228,.62)}

/* ===== SCHEDULE (index table) ===== */
.schedule{border-bottom:1px solid var(--ink)}
.sched-table{border-top:1px solid var(--ink)}
.sched-row{display:grid;grid-template-columns:84px 1.4fr 2fr 150px 130px;align-items:center;border-bottom:1px solid var(--paper-line-2);transition:background .15s}
.sched-row:hover{background:var(--paper-2)}
.sched-row.head{background:var(--ink);color:var(--paper)}
.sched-row.head>div{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.7rem);letter-spacing:.12em;text-transform:uppercase;color:rgba(242,238,228,.7)}
.sched-row>div{padding:20px 18px;border-right:1px solid var(--paper-line-2)}
.sched-row>div:last-child{border-right:none}
.sched-row .ref{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.82rem);color:var(--gold-deep)}
.sched-row .name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.25rem;letter-spacing:-.01em;color:var(--ink)}
.sched-row .desc{font-size:.94rem;color:var(--ink-2)}
.sched-row .from{font-family:'IBM Plex Mono',monospace;font-size:.92rem;color:var(--ink)}
.sched-row .go{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.72rem);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);display:flex;align-items:center;gap:8px}
.sched-row:hover .go{color:var(--ink)}
.sched-row .desc .rowfacts{display:block;margin-top:8px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.85rem);letter-spacing:.01em;line-height:1.45;color:var(--gold-deep)}
.tablenote{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.85rem);line-height:1.5;color:var(--ink-2);margin:14px 0 0;max-width:72ch}

/* ===== DOOR LIBRARY ===== */
.library{border-bottom:1px solid var(--ink);background:var(--paper-2)}
.lib-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--paper-line-2)}
.swatch{border-right:1px solid var(--paper-line-2);border-bottom:1px solid var(--paper-line-2);padding:24px;aspect-ratio:1;display:flex;flex-direction:column;transition:background .15s}
.swatch:hover{background:var(--ink);color:var(--paper)}
.swatch .draw{flex:1;border:1.5px solid var(--ink);position:relative;margin-bottom:16px;transition:border-color .15s}
.swatch:hover .draw{border-color:var(--paper)}
.swatch .draw::after{content:'';position:absolute;inset:9px;border:1px solid var(--ink);transition:border-color .15s}
.swatch:hover .draw::after{border-color:rgba(242,238,228,.5)}
.swatch .draw .k{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--gold);right:16px;top:50%}
.swatch.shaker .draw::after{inset:13px}
.swatch.slab .draw::after{display:none}
.swatch.beaded .draw::after{inset:7px;border-style:double;border-width:3px}
.swatch.glass .draw::after{inset:9px;background:repeating-linear-gradient(45deg,transparent 0 6px,var(--paper-line) 6px 7px)}
.swatch.raised .draw::after{inset:11px;box-shadow:inset 0 0 0 3px var(--paper)}
.swatch .ref{font-family:'IBM Plex Mono',monospace;font-size:max(var(--chrome-min),.66rem);letter-spacing:.1em;color:var(--gold-deep)}
.swatch:hover .ref{color:var(--gold)}
.swatch .nm{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.02rem;margin-top:5px}
.swatch .ln{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.68rem);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.swatch:hover .ln{color:rgba(242,238,228,.6)}

/* ===== PROCESS - revision sequence ===== */
.process{border-bottom:1px solid var(--ink)}
.rev-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--paper-line-2)}
.rev{border-right:1px solid var(--paper-line-2);border-bottom:1px solid var(--paper-line-2);padding:30px 26px 36px;position:relative;min-height:230px;display:flex;flex-direction:column}
.rev .stamp-no{width:46px;height:46px;border:1.5px solid var(--ink);color:var(--ink);display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-size:.92rem;margin-bottom:22px}
.rev h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(1.25rem,1rem + 1vw,2rem);letter-spacing:-.01em;margin-bottom:10px}
.rev p{font-size:.94rem;color:var(--ink-2)}
.rev .rev-tick{margin-top:auto;font-family:'IBM Plex Mono',monospace;font-size:max(var(--chrome-min),.66rem);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);padding-top:18px}

/* ===== PROOF - margin annotations ===== */
.proof{border-bottom:1px solid var(--ink)}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--paper-line-2)}
.note{border-right:1px solid var(--paper-line-2);border-bottom:1px solid var(--paper-line-2);padding:30px 28px}
.note .stars{color:var(--gold-deep);letter-spacing:3px;font-size:.9rem}
.note blockquote{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:1.16rem;line-height:1.4;color:var(--ink);margin:16px 0 22px;letter-spacing:-.01em}
.note .by{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.72rem);letter-spacing:.06em;color:var(--ink-2);display:flex;justify-content:space-between;border-top:1px solid var(--paper-line-2);padding-top:14px}
.note .by b{color:var(--ink);font-weight:500}

/* ===== SHOWROOM (site plan callout) ===== */
.showroom{border-bottom:1px solid var(--ink);background:var(--ink);color:var(--paper)}
.showroom .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.sr-l{padding:62px 48px 62px 0}
.sr-l .ey{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.7rem);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.sr-l h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2rem,1rem + 3vw,4.5rem);max-width:22ch;letter-spacing:-.025em;margin:18px 0 22px;line-height:1.02}
.sr-l p{color:rgba(242,238,228,.72);max-width:440px;font-size:1.02rem}
.sr-spec{margin-top:32px;border-top:1px solid var(--blue-line)}
.sr-spec .r{display:grid;grid-template-columns:130px 1fr;padding:14px 0;border-bottom:1px solid var(--blue-line);font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.82rem)}
.sr-spec .r .k{color:var(--gold);letter-spacing:.08em;text-transform:uppercase;font-size:max(var(--label-min),.68rem);align-self:center}
.sr-spec .r .v{color:var(--paper)}
.sr-actions{margin-top:30px;display:flex;border:1px solid var(--paper);width:fit-content}
.sr-actions a{padding:14px 24px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.76rem);letter-spacing:.08em;text-transform:uppercase}
.sr-actions a.p{background:var(--gold);color:var(--ink)}
.sr-actions a.g{border-left:1px solid var(--paper)}
.sr-actions a.g:hover{background:var(--paper);color:var(--ink)}
.sr-r{border-left:1px solid var(--blue-line);position:relative;min-height:440px;overflow:hidden;background:#0a1830}
.sr-r img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.92)}
.sr-r .pin{position:absolute;top:48%;left:32%;transform:translate(-50%,-50%);z-index:3}
.sr-r .pin .dot{width:16px;height:16px;background:var(--gold);border-radius:50%;box-shadow:0 0 0 6px rgba(201,162,74,.25),0 0 0 14px rgba(201,162,74,.12)}
.sr-r .pin .lab{position:absolute;left:24px;top:-6px;white-space:nowrap;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.68rem);letter-spacing:.08em;text-transform:uppercase;color:var(--paper);background:rgba(10,24,48,.8);padding:5px 10px;border:1px solid var(--gold)}

/* ===== DRAFTING PROSE (inner-page body content) ===== */
.prose{border-bottom:1px solid var(--ink)}
.prose .wrap{padding-block:var(--section-y)}
.prose-grid{display:grid;grid-template-columns:1fr 320px;gap:0;align-items:start}
.prose-body{padding-right:56px;border-right:1px solid var(--paper-line-2)}
.prose-body h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.025em;line-height:1.05;color:var(--ink);margin:0 0 18px}
.prose-body h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.3rem;letter-spacing:-.01em;color:var(--ink);margin:38px 0 12px}
.prose-body p{font-size:1.04rem;color:var(--ink-2);line-height:1.62;margin:0 0 16px;max-width:var(--measure)}
.prose-body p b,.prose-body strong{color:var(--ink);font-weight:600}
.prose-body ul{list-style:none;margin:6px 0 22px;padding:0}
.prose-body ul li{position:relative;padding-left:26px;margin:0 0 11px;font-size:1.02rem;color:var(--ink-2);line-height:1.55;max-width:var(--measure)}
.prose-body ul li::before{content:'';position:absolute;left:0;top:9px;width:9px;height:9px;border:1px solid var(--gold-deep);background:var(--gold)}
.prose-aside{padding-left:30px;position:sticky;top:88px}
.aside-card{border:1px solid var(--ink);margin-bottom:18px}
.aside-card .h{background:var(--ink);color:var(--paper);padding:10px 14px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.66rem);letter-spacing:.12em;text-transform:uppercase}
.aside-card .r{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--paper-line-2);font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.8rem)}
.aside-card .r:last-child{border-bottom:none}
.aside-card .r .k{color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;font-size:max(var(--label-min),.68rem);align-self:center}
.aside-card .r .v{color:var(--ink);font-weight:500;text-align:right}
.aside-card.cta{border-color:var(--gold-deep)}
.aside-card.cta .h{background:var(--gold);color:var(--ink)}
.aside-card.cta .body{padding:16px 14px}
.aside-card.cta p{font-size:.9rem;color:var(--ink-2);margin-bottom:14px}
.aside-card.cta a{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:var(--paper);padding:13px 16px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.76rem);letter-spacing:.06em;text-transform:uppercase;transition:background .15s,color .15s}
.aside-card.cta a:hover{background:var(--gold);color:var(--ink)}

/* ===== FAQ (question headings, AIO-eligible) ===== */
.faq{border-bottom:1px solid var(--ink)}
.faq-list{border-top:1px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--paper-line-2);padding:26px 0;display:grid;grid-template-columns:auto 1fr;gap:24px}
.faq-item .q-no{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.76rem);color:var(--gold-deep);padding-top:5px}
.faq-item h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.24rem;letter-spacing:-.01em;color:var(--ink);margin-bottom:10px}
.faq-item p{font-size:1.02rem;color:var(--ink-2);line-height:1.6;max-width:var(--measure)}

/* ===== GALLERY (figure grid) ===== */
.gallery{border-bottom:1px solid var(--ink)}
.fig-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--paper-line-2)}
.fig{border-right:1px solid var(--paper-line-2);border-bottom:1px solid var(--paper-line-2)}
.fig .img{position:relative;overflow:hidden;height:240px;background:var(--paper-2)}
.fig .img img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.fig .img .corner{position:absolute;width:12px;height:12px;border:1px solid var(--paper)}
.fig .img .corner.tl{top:10px;left:10px;border-right:none;border-bottom:none}
.fig .img .corner.br{bottom:10px;right:10px;border-left:none;border-top:none}
.fig .cap{padding:13px 16px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.7rem);letter-spacing:.05em;color:var(--ink-2);display:flex;justify-content:space-between;gap:12px}
.fig .cap b{color:var(--ink);font-weight:500}

/* ===== FINAL CTA ===== */
.final{border-bottom:1px solid var(--ink);padding-block:var(--section-y)}
.final .wrap{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.final .ey{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.72rem);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.final h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.2rem,4.6vw,4rem);letter-spacing:-.03em;margin-top:16px;line-height:.98}
.final p{color:var(--ink-2);max-width:480px;margin-top:18px;font-size:1.05rem}
.final-actions{display:flex;flex-direction:column;border:1px solid var(--ink);min-width:280px}
.final-actions a{padding:22px 26px;display:flex;justify-content:space-between;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.84rem);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--paper-line-2)}
.final-actions a:last-child{border-bottom:none}
.final-actions a.p{background:var(--ink);color:var(--paper)}
.final-actions a.p:hover{background:var(--gold);color:var(--ink)}
.final-actions a:hover{background:var(--paper-2)}
.final-actions a.p:hover{background:var(--gold)}

/* ===== ESTIMATE FORM (drawing-request sheet) ===== */
.formsheet{border-bottom:1px solid var(--ink);background:var(--ink);color:var(--paper);background-image:linear-gradient(rgba(242,238,228,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(242,238,228,.05) 1px,transparent 1px);background-size:44px 44px}
.formsheet .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--blue-line)}
.fs-left{padding:48px 48px 48px 0;border-right:1px solid var(--blue-line)}
.fs-left .ey{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.7rem);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.fs-left h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.025em;margin:14px 0 18px;line-height:1.04;color:var(--paper)}
.fs-left p{color:rgba(242,238,228,.72);font-size:1.02rem;max-width:46ch;margin-bottom:16px}
.fs-form{padding:48px 0 48px 48px}
.field{margin-bottom:20px}
.field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.66rem);letter-spacing:.1em;text-transform:uppercase;color:rgba(242,238,228,.78);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;background:var(--paper);border:1px solid var(--paper-line-2);padding:12px 14px;font-family:'Archivo',sans-serif;font-size:1rem;color:var(--ink);transition:border-color .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-deep)}
.field textarea{min-height:96px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fs-form button{width:100%;background:var(--gold);color:var(--ink);border:none;padding:17px 20px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.82rem);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s}
.fs-form button:hover{background:var(--paper);color:var(--ink)}
.fs-note{margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:clamp(0.95rem,0.9rem + 0.2vw,1.05rem);letter-spacing:.04em;color:rgba(242,238,228,.75)}

/* ===== TITLEBLOCK FOOTER ===== */
.foot{background:var(--paper-2)}
.foot-block{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;border-top:1px solid var(--ink)}
.foot-block>div{padding:28px 24px;border-right:1px solid var(--paper-line-2)}
.foot-block>div:last-child{border-right:none}
.foot .foot-h{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.68rem);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.foot .fl{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.3rem;color:var(--ink);letter-spacing:-.01em;margin-bottom:6px}
.foot a{display:block;padding:5px 0;font-size:.92rem;color:var(--ink-2)}
.foot a:hover{color:var(--gold-deep)}
.foot .mono{font-size:max(var(--label-min),.84rem);color:var(--ink-2);line-height:1.7}
.foot-bar{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.foot-bar>div{padding:14px 20px;border-right:1px solid var(--paper-line-2);font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.7rem);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.foot-bar>div:last-child{border-right:none}
.foot-bar b{color:var(--ink);font-weight:500}

/* ===== BRANDS (authorized-lines logo wall, dark band) ===== */
.brands{background:var(--ink);border-bottom:1px solid var(--ink);color:var(--paper);
  background-image:linear-gradient(rgba(242,238,228,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(242,238,228,.05) 1px,transparent 1px);background-size:44px 44px}
.brands .wrap{padding-block:var(--section-y)}
.brands-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.brands-head .ey{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.7rem);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.brands-head h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.025em;color:var(--paper);line-height:1.02}
.brand-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px 46px;border:1px solid var(--blue-line);padding:32px 26px}
.brand-logo{display:flex;align-items:center;justify-content:center}
.brand-logo img{height:30px;width:auto;max-width:100%;filter:brightness(0) invert(1);opacity:.68;transition:opacity .15s}
.brand-logo:hover img{opacity:1}

/* ===== DOOR-STYLE + MATERIAL CATALOGS ===== */
.doorstyles,.materials{border-bottom:1px solid var(--ink)}
.doorcat{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--paper-line-2)}
.doorcat .d{border-right:1px solid var(--paper-line-2);border-bottom:1px solid var(--paper-line-2);padding:16px 16px 14px;display:flex;flex-direction:column;text-align:center}
.doorcat .d img{width:100%;height:150px;object-fit:contain;mix-blend-mode:multiply}
.doorcat .d .nm{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.66rem);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-top:10px}
.matgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--paper-line-2)}
.matgrid .m{border-right:1px solid var(--paper-line-2);border-bottom:1px solid var(--paper-line-2)}
.matgrid .m img{width:100%;height:140px;object-fit:cover;display:block}
.matgrid .m .nm{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.64rem);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);padding:10px 12px}
.edgerow{display:flex;gap:30px;flex-wrap:wrap;margin:6px 0 24px}
.edgerow figure{margin:0}
.edgerow svg{width:118px;height:64px;display:block}
.edgerow svg path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.edgerow svg line{stroke:var(--gold-deep);stroke-width:2.5}
.edgerow figcaption{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.64rem);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:7px;text-align:center}

/* ===== RESPONSIVE ===== */
@media(max-width:1180px){
  .tb-nav{gap:18px}
  .tb-nav a{font-size:max(var(--label-min),.7rem)}
}
@media(max-width:1080px){
  /* Mobile hero order (Alex r4-B): text first, then the band, then the beside-H1 figure.
     display:contents unwraps .hero-grid so .hero-main and .hero-fig become flex children of .hero and can be ordered around the band. */
  .hero{display:flex;flex-direction:column}
  .hero-grid{display:contents}
  .hero-main{order:1;border-right:none;border-bottom:1px solid var(--ink)}
  .hero-topband{order:2}
  .hero-fig{order:3;flex-direction:column}
  .hero-fig .img{flex:none;height:300px}
  .hero-topband{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero-topband .htb{border-right:1px solid var(--ink);border-bottom:none;min-width:0}
  .hero-topband .htb:last-child{border-right:none}
  .hero-topband .htb .img{aspect-ratio:16 / 10}
  .hero-topband .htb .cap{padding:10px 12px;font-size:max(var(--chrome-min),.62rem);gap:8px}
  .stamp{right:18px;bottom:18px}
  .lib-grid{grid-template-columns:repeat(3,1fr)}
  .spec .wrap,.spec.four .wrap{grid-template-columns:1fr 1fr}
  .spec .label{grid-column:1/-1;border-right:none;border-bottom:1px solid var(--paper-line-2)}
  .prose-grid{grid-template-columns:1fr}
  .prose-body{padding-right:0;border-right:none}
  .prose-aside{padding-left:0;position:static;margin-top:38px}
}
@media(max-width:1080px){
  .tb-nav a.navlink{display:none}
}
@media(max-width:360px){
  /* 320 fit: collapse the brand lockup to the B mark, tighten the CTA, so brand + Free Estimate + hamburger fit without overflow (320 reflow gate) */
  .tb-inner{gap:10px}
  .brand-name{display:none}
  .tb-nav a.cta{padding:11px 12px;letter-spacing:.04em}
}
@media(max-width:400px){
  /* with 14px label floors the 2-col spec cells no longer fit 320; stack to one column */
  .spec .wrap,.spec.four .wrap{grid-template-columns:1fr}
  .spec .b{border-right:none;border-bottom:1px solid var(--paper-line-2)}
  body .foot-bar{grid-template-columns:1fr}
  body .foot-bar>div{border-right:none;border-bottom:1px solid var(--paper-line-2)}
}
@media(max-width:860px){
  .tb-nav a.phone{display:none}
  .rev-grid,.proof-grid,.fig-grid{grid-template-columns:1fr 1fr}
  .sched-row{grid-template-columns:54px 1fr;grid-auto-rows:auto}
  .sched-row .desc,.sched-row .from{display:none}
  .sched-row.head .desc,.sched-row.head .from{display:none}
  .showroom .wrap,.final .wrap,.foot-block,.formsheet .wrap{grid-template-columns:1fr}
  .sr-l{padding:48px 0}
  .sr-r{border-left:none;border-top:1px solid var(--blue-line);min-height:300px}
  .callouts{grid-template-columns:1fr}
  .foot-bar{grid-template-columns:1fr 1fr}
  .bp-frame{padding:50px 20px 30px}
  .elev{margin:0 10px;height:280px}
  .sheet-head .titleblock{grid-template-columns:1fr}
  .sheet-head .sheet-no{margin-top:8px}
  .fs-left{padding:40px 0;border-right:none;border-bottom:1px solid var(--blue-line)}
  .fs-form{padding:40px 0}
}
@media(max-width:560px){
  .lib-grid{grid-template-columns:1fr 1fr}
  .rev-grid,.proof-grid,.fig-grid{grid-template-columns:1fr}
  .hero-coords{gap:22px}
  .field-row{grid-template-columns:1fr}
}

/* ============================================================
   Accessibility, focus, mobile-nav and reflow hardening
   (2026-09-17 compliance pass - appended so later rules win by
   source order; see design-review-2026-09-16.md)
   ============================================================ */

/* --- 1.4.3 contrast: gold used as TEXT gets the text-safe token;
       the original --gold-deep stays on borders, rules and fills --- */
.brand-name small,
.tb-nav a.navlink:hover,.tb-nav a.navlink.active,
.sheet-head .eyebrow,
.crumbs a:hover,
.spec .b .meta,
.sched-row .ref,.sched-row .go,
.swatch .ref,
.rev .rev-tick,
.note .stars,
.faq-item .q-no,
.final .ey,
.foot a:hover{color:var(--gold-text)}

/* --- 2.4.7 focus visible: form fields get a real ring (gold on the
       dark form sheet = well over 3:1 against the navy surround) --- */
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold)
}
/* keep a clearly visible ring on every interactive element */
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* --- 2.5.8 tap targets: bring the small mono links up to 44px on
       touch / narrow widths --- */
@media(max-width:980px){
  .foot a{padding:11px 0;min-height:44px;display:flex;align-items:center}
  .foot .mono a{display:inline-flex;align-items:center;min-height:44px}
  .foot-bar a{min-height:44px}
  .tb-nav a.cta{padding:13px 18px;min-height:44px;display:inline-flex;align-items:center}
}

/* --- Mobile navigation drawer (drawingset.md §7) --- */
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--ink);
  width:44px;height:44px;padding:0;cursor:pointer;flex-direction:column;
  align-items:center;justify-content:center;gap:5px}
.nav-toggle-bar{display:block;width:20px;height:2px;background:var(--ink)}
.drawer-overlay{position:fixed;inset:0;background:rgba(14,34,64,.5);z-index:70}
.drawer-overlay[hidden]{display:none}
.nav-drawer{position:fixed;top:0;right:0;bottom:0;width:min(84vw,320px);z-index:80;
  background:var(--paper);border-left:1px solid var(--ink);
  box-shadow:-12px 0 32px -18px rgba(14,34,64,.5);
  padding:0 0 24px;overflow-y:auto;display:flex;flex-direction:column}
.nav-drawer[hidden]{display:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 18px;border-bottom:1px solid var(--ink)}
.drawer-title{font-size:max(var(--label-min),.7rem);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.drawer-close{background:none;border:none;font-size:1.1rem;color:var(--ink);
  width:44px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.nav-drawer a{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.82rem);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);padding:0 18px;min-height:52px;
  display:flex;align-items:center;border-bottom:1px solid var(--paper-line-2)}
.nav-drawer a:hover{background:var(--paper-2);color:var(--gold-text)}
.nav-drawer a.drawer-cta{background:var(--gold);color:var(--ink);font-weight:600;margin-top:8px;border-bottom:none}
.nav-drawer a.drawer-phone{color:var(--ink-2)}
@media(max-width:1080px){
  .nav-toggle{display:flex}
}
@media(min-width:1081px){
  .nav-drawer,.drawer-overlay{display:none!important}
}

/* --- 1.4.10 reflow: no horizontal scroll at 320px --- */
/* Mobile brand lockup (Alex r4-A): one-line wordmark that fits beside Free Estimate + hamburger, nothing clipped; 320 collapse-to-B stays. */
@media(max-width:600px){
  .tb-inner{gap:12px}
  .brand{gap:10px}
  .brand-name{font-size:clamp(0.9rem,2.7vw + 0.25rem,1.14rem)}
  .tb-nav a.cta{padding:10px 13px;font-size:.8125rem;letter-spacing:.03em}
}
@media(max-width:420px){
  .brand-name small{display:none}
  .lib-grid{grid-template-columns:1fr}
}
html{overflow-x:clip;font-size:100%}

/* --- prefers-reduced-motion --- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   2026-09-17 final design pass (pre-client):
   eyebrow/kicker removal - heading rhythm; approval stamp moved
   off the hero photo onto the caption bar (paper).
   ============================================================ */
/* headings that lost an eyebrow above them close the gap */
.hero h1{margin-top:0}
.sheet-head h1{margin-top:0}
.final h2{margin-top:0}
.sr-l h2{margin-top:0}
.fs-left h2{margin-top:0}

/* approval stamp - now on the FIG.01 caption bar (paper), still rotated,
   text-safe gold (>=4.5:1 on paper), never over the photograph */
.hero-fig .cap{position:relative}
.hero-fig .cap.stamped{min-height:104px;padding-right:158px;align-items:center}
.stamp{position:absolute;top:50%;right:14px;bottom:auto;
  transform:translateY(-50%) rotate(-7deg);
  border:2px solid var(--gold-text);color:var(--gold-text);background:var(--paper);
  padding:7px 13px;font-family:'IBM Plex Mono',monospace;text-align:center;
  line-height:1.25;box-shadow:0 2px 10px rgba(14,34,64,.12);z-index:4}
.stamp .big{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.9rem;
  letter-spacing:.04em;color:var(--gold-text)}
.stamp .sm{font-size:max(var(--chrome-min),.6rem);letter-spacing:.12em;text-transform:uppercase;margin-top:3px;color:var(--gold-text)}
@media(max-width:420px){
  .hero-fig .cap.stamped{align-items:flex-start;min-height:auto;padding:14px 18px 82px}
  .stamp{top:auto;bottom:14px;right:50%;transform:translateX(50%) rotate(-7deg)}
}

/* ============================================================
   2026-09-18 grouped header navigation (dropdowns + drawer accordions)
   ============================================================ */
.tb-nav{gap:22px}
.nav-group{position:relative;display:inline-flex;align-items:center}
.tb-nav .navbtn{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.74rem);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);font-weight:500;background:none;border:none;
  padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  height:64px;line-height:1;white-space:nowrap}
.tb-nav .navbtn .caret{font-size:max(var(--chrome-min),.7em);transition:transform .15s}
.tb-nav .navbtn:hover,.tb-nav .navbtn:focus-visible,
.tb-nav .navbtn[aria-expanded="true"],
.tb-nav .navbtn.active,.tb-nav a.navlink.active{color:var(--gold-text)}
.tb-nav .navbtn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.submenu{position:absolute;top:64px;left:0;min-width:224px;background:var(--paper);
  border:1px solid var(--ink);box-shadow:0 14px 30px -14px rgba(14,34,64,.5);padding:6px 0;z-index:70}
.submenu[hidden]{display:none}
.submenu a{display:block;padding:10px 18px;font-family:'IBM Plex Mono',monospace;
  font-size:max(var(--label-min),.72rem);letter-spacing:.03em;color:var(--ink);white-space:nowrap}
.submenu a:hover,.submenu a:focus-visible,.submenu a.active{background:var(--paper-2);color:var(--gold-text)}
.nav-group:last-of-type .submenu{left:auto;right:0}

.drawer-acc{border-bottom:1px solid var(--paper-line-2)}
.drawer-accbtn{width:100%;background:none;border:none;cursor:pointer;font-family:'IBM Plex Mono',monospace;
  font-size:max(var(--label-min),.82rem);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  padding:0 18px;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.drawer-accbtn:hover,.drawer-accbtn[aria-expanded="true"],.drawer-accbtn.active{color:var(--gold-text)}
.drawer-accbtn .caret{transition:transform .15s}
.drawer-accbtn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.drawer-sub[hidden]{display:none}
.drawer-sub a{display:flex;align-items:center;min-height:48px;padding:0 18px 0 34px;
  font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.76rem);letter-spacing:.03em;text-transform:none;
  color:var(--ink-2);border-top:1px solid var(--paper-line-2)}
.drawer-sub a:hover,.drawer-sub a.active{background:var(--paper-2);color:var(--gold-text)}

@media(max-width:1180px){ .tb-nav{gap:15px} .tb-nav .navbtn{font-size:max(var(--label-min),.7rem)} }
@media(max-width:1080px){ .tb-nav .nav-group,.tb-nav a.navlink,.tb-nav a.phone{display:none} }

/* ===== 2026-09-18 footer About / Partners / Contact row (live parity) ===== */
.foot-about{display:grid;grid-template-columns:1.7fr 1fr 1.3fr;border-top:1px solid var(--ink)}
.foot-about>div{padding:28px 24px;border-right:1px solid var(--paper-line-2)}
.foot-about>div:last-child{border-right:none}
.foot-about p{font-size:.9rem;color:var(--ink-2);line-height:1.62;margin:0 0 10px}
.foot-about a{display:block;padding:4px 0;font-size:.9rem;color:var(--ink-2)}
.foot-about a:hover{color:var(--gold-text)}
.foot-about .mono{font-size:max(var(--label-min),.82rem);line-height:1.85}
.foot-about .mono a{display:inline;padding:0}
@media(max-width:860px){
  .foot-about{grid-template-columns:1fr}
  .foot-about>div{border-right:none;border-bottom:1px solid var(--paper-line-2)}
}

/* ===== 2026-09-20 homepage category H1 subhead ===== */
.hero-sub{font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:-.01em;
  font-size:clamp(1.1rem,1.9vw,1.5rem);line-height:1.3;color:var(--ink-2);
  max-width:560px;margin:28px 0 0}

/* ============================================================
   Distribution-pass components (2026-09-24): shared across pages.
   Photo tiles, general-notes FAQ sheet, schedule thumbnails,
   elevation general-notes + stamp, project-notes panel.
   ============================================================ */
.hero-fig .img img{width:100%;height:100%;object-fit:cover}
/* Room/service photo tiles */
.roomsched{border-bottom:1px solid var(--ink)}
.room-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--paper-line-2);width:min(100% - 2 * var(--gutter),var(--container));margin-inline:auto}
.roomtile{border-right:1px solid var(--paper-line-2);border-bottom:1px solid var(--paper-line-2);display:flex;flex-direction:column;padding-bottom:24px;transition:background .15s}
.roomtile:hover{background:var(--paper-2)}
.roomtile .plan{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink);border-bottom:1px solid var(--paper-line-2)}
.roomtile .plan img{width:100%;height:100%;object-fit:cover}
.roomtile .rm-tag{position:absolute;top:10px;left:10px;z-index:2;background:rgba(14,34,64,.82);border:1px solid var(--gold);padding:4px 8px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.6rem);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.roomtile h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.2rem;letter-spacing:-.01em;color:var(--ink);margin:22px 24px 8px}
.roomtile p{font-size:.96rem;color:var(--ink-2);line-height:1.55;margin:0 24px;flex:1}
.roomtile .rt-go{margin:20px 24px 0;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.72rem);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)}
.roomtile:hover .rt-go{color:var(--ink)}
/* Schedule photo-thumbnail column */
.sched-row .thumb{padding:10px 14px}
.sched-row .thumb img{width:100%;height:72px;object-fit:cover;border:1px solid var(--paper-line-2)}
/* General-notes FAQ sheet */
.gnotes{border-bottom:1px solid var(--ink)}
.gnotes-bar{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--ink);border-bottom:1px solid var(--paper-line-2);padding:12px 0;width:min(100% - 2 * var(--gutter),var(--container));margin-inline:auto;font-family:'IBM Plex Mono',monospace;font-size:max(var(--chrome-min),.68rem);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.gnotes-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;border-left:1px solid var(--paper-line-2);width:min(100% - 2 * var(--gutter),var(--container));margin-inline:auto}
.gnote{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px 26px;border-right:1px solid var(--paper-line-2);border-bottom:1px solid var(--paper-line-2)}
.gnote .gn-no{font-family:'IBM Plex Mono',monospace;font-size:max(var(--chrome-min),.72rem);color:var(--gold-deep);padding-top:4px;letter-spacing:.03em}
.gnote h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.08rem;letter-spacing:-.01em;color:var(--ink);margin-bottom:8px;line-height:1.28}
.gnote p{font-size:.95rem;color:var(--ink-2);line-height:1.55}
/* Elevation general-notes + issue-for-review stamp */
.bp-notes{margin-top:46px;display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;border-top:1px solid var(--blue-line);padding-top:30px}
.bp-notes .bpn-h{font-family:'IBM Plex Mono',monospace;font-size:max(var(--chrome-min),.66rem);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.bp-notes p{color:rgba(242,238,228,.75);max-width:660px;font-size:1rem;line-height:1.6}
.bp-stamp{flex-shrink:0;border:2px solid var(--gold);padding:15px 22px;text-align:center;line-height:1.3;transition:background .15s}
.bp-stamp b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.98rem;color:var(--paper);letter-spacing:-.01em}
.bp-stamp span{display:block;margin-top:5px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--chrome-min),.63rem);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.bp-stamp:hover{background:var(--gold)}
.bp-stamp:hover b,.bp-stamp:hover span{color:var(--ink)}
/* Project-notes titleblock panel (navy showroom) */
.projnotes{margin-top:34px;border:1px solid var(--blue-line)}
.projnotes h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:-.01em;color:var(--paper);padding:18px 16px 0;margin:0}
.projnotes p{color:rgba(242,238,228,.72);padding:8px 16px 16px;font-size:.94rem;max-width:none;margin:0}
.projnotes .pn-cap{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--blue-line);font-family:'IBM Plex Mono',monospace;font-size:max(var(--chrome-min),.64rem);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
/* Maker "about" notes sit on the light paper section, so the dark-panel defaults left the copy invisible (light-on-light) — Santiago's "mostly air" (Alex r4-batch1 item 4b). Make it readable on light and tighten the section rhythm. */
.maker .shead{padding-block:clamp(2rem,1.2rem + 2vw,3rem) 18px}
.maker .projnotes{border-color:var(--paper-line-2);margin-top:20px}
.maker .projnotes h3{color:var(--ink)}
.maker .projnotes p{color:var(--ink-2)}
.maker .projnotes .pn-cap{color:var(--gold-deep);border-top-color:var(--paper-line-2)}
@media(max-width:860px){
  .room-grid{grid-template-columns:1fr}
  .gnotes-list{grid-template-columns:1fr}
  .bp-notes{grid-template-columns:1fr;gap:22px}
  .bp-stamp{justify-self:start}
  #cabinets .sched-row{grid-template-columns:84px 1fr}
  #cabinets .sched-row.head{display:none}
  #cabinets .sched-row .ref{display:none}
  #cabinets .sched-row .thumb{grid-column:1;grid-row:1 / span 3;padding:14px 0}
  #cabinets .sched-row .thumb img{height:96px}
  #cabinets .sched-row .name{grid-column:2;grid-row:1;padding-bottom:2px}
  #cabinets .sched-row .desc{display:block;grid-column:2;grid-row:2;font-size:max(var(--label-min),.86rem);padding-top:2px;border-right:none}
  #cabinets .sched-row .go{grid-column:2;grid-row:3;padding-top:6px}
}

.sr-spec .v{overflow-wrap:anywhere}

/* Brand schedule (descriptions stay visible on mobile) - reusable across brand pages */
.sched-table.brands4 .sched-row{grid-template-columns:60px 1.3fr 3fr 120px}
.sched-table.brands4 .sched-row.head{grid-template-columns:60px 1.3fr 3fr 120px}
/* Construction / material type cards */
.typecards{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--paper-line-2);width:min(100% - 2 * var(--gutter),var(--container));margin-inline:auto}
.typecard{border-right:1px solid var(--paper-line-2);border-bottom:1px solid var(--paper-line-2);padding:26px 24px}
.typecard .typedraw{height:118px;border:1.5px solid var(--ink);position:relative;margin:0 0 18px;background:var(--paper-2)}
.typecard .typedraw::after{content:'';position:absolute;border:1px solid var(--ink);background:var(--paper)}
.typecard .typedraw.inset::after{inset:16px}
.typecard .typedraw.partial::after{inset:9px}
.typecard .typedraw.full::after{inset:3px}
.typecard .typedraw.vanity{display:flex;align-items:center;justify-content:center;padding:12px}
.typecard .typedraw.vanity::after{content:none}
.typecard .typedraw.vanity svg{width:auto;height:86px;max-width:100%;stroke:var(--ink);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.typecard .typedraw.vanity svg .gd{fill:var(--gold-deep);stroke:none}
.typecard .typedraw .k{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold-deep);top:50%;transform:translateY(-50%)}
.typecard .typedraw.inset .k{right:23px}
.typecard .typedraw.partial .k{right:16px}
.typecard .typedraw.full .k{right:10px}
/* Material swatch image box on the Countertop Materials cards (Alex r4 item 2): sized like the typedraw box so the cards align with the drafting-set language */
.typecard .matfig{height:118px;border:1.5px solid var(--ink);margin:0 0 18px;overflow:hidden;background:var(--paper-2);display:flex}
.typecard .matfig img{width:100%;height:100%;object-fit:cover;display:block;min-width:0}
.typecard .matfig picture{display:block;width:100%;height:100%}
.typecard .matfig.trio img{width:33.3333%;border-right:1px solid var(--paper)}
.typecard .matfig.trio img:last-child{border-right:none}
.typecard h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.15rem;letter-spacing:-.01em;color:var(--ink);margin-bottom:10px}
.typecard p{font-size:.92rem;color:var(--ink-2);line-height:1.5;margin-bottom:12px}
.typecard .pc{font-size:max(var(--label-min),.86rem);color:var(--ink-2);line-height:1.5;margin-top:8px}
.typecard .pc b{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.66rem);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);display:block;margin-bottom:2px}
@media(max-width:860px){
  .typecards{grid-template-columns:1fr}
  .sched-table.brands4 .sched-row{grid-template-columns:60px 1fr}
  .sched-table.brands4 .sched-row.head{display:none}
  .sched-table.brands4 .sched-row .ref{grid-column:1;grid-row:1}
  .sched-table.brands4 .sched-row .name{grid-column:2;grid-row:1}
  .sched-table.brands4 .sched-row .desc{display:block;grid-column:1 / -1;grid-row:2;border-right:none;padding-top:0;font-size:.88rem}
  .sched-table.brands4 .sched-row .go{grid-column:2;grid-row:1;justify-self:end}
}

/* Finish / colorway index inside a type card (carries brand finish names) */
.typecard .finlist{list-style:none;margin-top:14px;columns:2;column-gap:20px}
.typecard .finlist li{font-family:'IBM Plex Mono',monospace;font-size:clamp(0.95rem,0.9rem + 0.2vw,1.05rem);letter-spacing:.01em;color:var(--ink-2);padding:6px 0;border-bottom:1px solid var(--paper-line);break-inside:avoid;max-width:var(--measure)}
@media(max-width:600px){.typecard .finlist{columns:1}}

/* ============================================================
   Photo hero for inner (sheet-head) pages + photo band (2026-09-25)
   ============================================================ */
.sheet-head.photo .sh-grid{display:grid;grid-template-columns:1fr 430px;gap:0;align-items:stretch;padding:30px 0 0}
.sheet-head.photo .sh-main,.sheet-head.photo .hero-fig{min-width:0}
.sheet-head.photo .sh-main{padding:8px 44px 44px 0;border-right:1px solid var(--ink);display:flex;flex-direction:column}
.sheet-head.photo .sh-main h1{margin:6px 0 0}
.sheet-head.photo .sh-main .sub{margin-top:12px}
.sheet-head.photo .sh-main .lead{margin-top:18px}
.sheet-head.photo .sh-main .sheet-no{text-align:left;margin-top:auto;max-width:300px}
.sheet-head.photo .sh-main .sheet-no .r{justify-content:space-between}
.sheet-head.photo .hero-fig{padding-left:44px;border-left:1px solid var(--ink);margin-left:-1px}
.photoband{border-bottom:1px solid var(--ink)}
.photoband .pb-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--paper-line-2);width:min(100% - 2 * var(--gutter),var(--container));margin-inline:auto}
.photoband.duo .pb-grid{grid-template-columns:repeat(2,1fr)}
.photoband .fig{border-right:1px solid var(--paper-line-2);border-bottom:1px solid var(--paper-line-2);display:flex;flex-direction:column;min-width:0}
.photoband .fig .img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.photoband .fig .img img{width:100%;height:100%;object-fit:cover}
.photoband .fig .img .corner{position:absolute;width:12px;height:12px;border:1px solid var(--paper)}
.photoband .fig .img .corner.tl{top:10px;left:10px;border-right:none;border-bottom:none}
.photoband .fig .img .corner.br{bottom:10px;right:10px;border-left:none;border-top:none}
.photoband .fig .cap{padding:12px 16px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.68rem);letter-spacing:.06em;color:var(--ink-2);display:flex;justify-content:space-between;gap:12px}
.photoband .fig .cap b{color:var(--ink);font-weight:500}
@media(max-width:860px){
  .sheet-head.photo .sh-grid{grid-template-columns:1fr}
  .sheet-head.photo .sh-main{border-right:none;padding-right:0;padding-bottom:28px}
  .sheet-head.photo .hero-fig{padding-left:0;border-left:none;margin-left:0;border-top:1px solid var(--ink)}
  .sheet-head.photo .hero-fig .img{height:300px}
  .photoband .pb-grid,.photoband.duo .pb-grid{grid-template-columns:1fr}
}

/* ===== Brand logos where a brand is named (monochrome drafting ink on paper; .knock = white on navy) ===== */
.blogo{width:auto;max-width:100%;height:auto;display:block;object-fit:contain;filter:brightness(0);opacity:.85}
.blogo.knock{filter:brightness(0) invert(1)}
.sheet-head.photo .sh-main .blogo{height:38px;width:auto;align-self:flex-start;margin:14px 0 2px}
.maker .shead .blogo,.typesec .shead .blogo{height:26px;margin-top:10px}
.projnotes .blogo{height:24px;margin:2px 0 10px}
.sched-row .name .blogo{height:18px;margin-bottom:6px}
.sched-row .name.emblem-row{display:flex;align-items:center;gap:12px}
.sched-row .name.emblem-row .blogo.emblem{height:30px;width:auto;margin:0;filter:none;opacity:1}
.foot .blogo{height:13px;display:inline-block;margin-right:9px;vertical-align:middle;opacity:.55}
.brandline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:4px}
.brandline .blogo{height:22px;display:inline-block}
.brandline .blogo-txt{display:inline-block;vertical-align:middle;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.15rem;letter-spacing:-.01em;color:var(--ink);opacity:.85}
.brandline span{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.82rem);letter-spacing:.02em;color:var(--ink-2)}
.brandchips .b .blogo{height:16px;margin:0 auto 6px}
.spec .b .blogo{height:1.5rem;width:auto;max-width:100%;object-fit:contain;align-self:flex-start;margin:0 0 8px;opacity:.8}

/* ===== Blueprint elevation: scale-to-fit as one unit + mobile rhythm ===== */
.bp-fit{position:relative;overflow:hidden}
.bp-draw{position:relative;width:max-content;transform-origin:top left;will-change:transform}
.bp-draw .dim-v{top:0;bottom:60px}
.blueprint .bp-stage{padding-block:clamp(0.9rem,0.5rem + 1.5vw,1.25rem) clamp(1.5rem,0.5rem + 5.2vw,4.375rem)}
.blueprint .callouts{margin-top:clamp(1.25rem,0.5rem + 3.9vw,3.375rem)}
.blueprint .bp-notes{margin-top:clamp(1.1rem,0.4rem + 3.3vw,2.875rem);padding-top:clamp(0.85rem,0.4rem + 2vw,1.875rem)}
/* Spacing audit (Santiago, batch 1 item 5): blueprint + final-CTA sections read as "too much space" for their word count.
   Tighten the padding around the drawing (the drawing itself is fixed-px and stays intact) and the CTA band. */
.blueprint .shead{padding-block:clamp(2.5rem,1.5rem + 2.5vw,4rem) clamp(1rem,0.6rem + 1vw,1.5rem)}
.blueprint .bp-stage{padding-block:4px clamp(1.5rem,0.8rem + 2.4vw,2.75rem)}
.blueprint .callouts{margin-top:clamp(1rem,0.5rem + 1.6vw,1.75rem)}
@media(min-width:1081px){ .bp-frame{padding:48px 48px 32px} }
.final{padding-block:clamp(2.75rem,1.5rem + 3.5vw,5rem)}
/* /ai-info/ plain fact sheet (LLM-facing; seo-aio playbook section 8) */
.aiinfo{border-bottom:1px solid var(--ink)}
.aiinfo .ai-body{max-width:var(--measure);padding-block:clamp(2rem,1rem + 3vw,4rem)}
.aiinfo h2{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);color:var(--ink);margin:2.2rem 0 .8rem;padding-top:1.2rem;border-top:1px solid var(--paper-line-2)}
.aiinfo h2:first-child{margin-top:0;padding-top:0;border-top:0}
.aiinfo p,.aiinfo li,.aiinfo dd{color:var(--ink-2);font-size:1.02rem;line-height:1.6}
.aiinfo ul{padding-left:1.15rem;margin:0}
.aiinfo li{margin:.35rem 0}
.aiinfo a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.aiinfo .ai-facts{display:grid;grid-template-columns:minmax(7rem,max-content) 1fr;gap:.55rem 1.4rem;margin:0}
.aiinfo .ai-facts dt{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.72rem);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);padding-top:.2rem}
.aiinfo .ai-facts dd{margin:0}
.aiinfo .ai-note{margin-top:1rem;font-size:.95rem}
.aiinfo .ai-quote{margin:1rem 0;padding:14px 18px;border-left:3px solid var(--gold);background:var(--paper-2);color:var(--ink-2);font-size:1rem;line-height:1.6}
.aiinfo .ai-quote cite{display:block;margin-top:.5rem;font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.72rem);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
@media(max-width:480px){.aiinfo .ai-facts{grid-template-columns:1fr;gap:.15rem}.aiinfo .ai-facts dd{margin-bottom:.6rem}}
/* Form handler (Santiago batch 2): honeypot, Turnstile slot, submit status */
.fs-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.formsheet .cf-turnstile,.askq .cf-turnstile{margin:4px 0 14px;min-height:65px;max-width:100%;min-width:0}
.formsheet .wrap>*{min-width:0}
.fs-status{margin:0 0 12px;font-size:.95rem;line-height:1.45;color:var(--paper)}
.fs-status.error{color:#ffb4a8}
.askq-status{margin:0 0 12px;font-size:.92rem;line-height:1.45;color:var(--ink)}
/* Product strip (invisacook "Invisa Cooktop options", Santiago batch 1 item 6): product shots on a white plate, uncropped */
.prodstrip{border-bottom:1px solid var(--ink)}
.prodgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--paper-line-2);width:min(100% - 2 * var(--gutter),var(--container));margin-inline:auto}
.prodgrid .p{border-right:1px solid var(--paper-line-2);border-bottom:1px solid var(--paper-line-2);min-width:0;display:flex;flex-direction:column}
.prodgrid .p img{width:100%;height:auto;aspect-ratio:4 / 3;object-fit:contain;background:#fff;display:block}
.prodgrid .p .nm{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.7rem);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding:12px 16px;border-top:1px solid var(--paper-line-2)}
@media(max-width:1080px){ .prodgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:600px){ .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.photoband.wide .fig .img{aspect-ratio:16 / 9}
.photoband .fig .img.contain{background:#fff}
.photoband .fig .img.contain img{object-fit:contain}
@media(max-width:600px){ .photoband.wide .pb-grid{grid-template-columns:1fr} }
/* title-only step cards (showroom "How to buy"): no body-text min-height; stamp beside a one-line title */
.rev:not(:has(p)){min-height:0;padding:24px 26px;flex-direction:row;align-items:center;gap:16px}
.rev:not(:has(p)) .stamp-no{margin-bottom:0;flex-shrink:0}
.rev:not(:has(p)) h3{font-size:clamp(1.05rem,0.9rem + 0.5vw,1.35rem);margin-bottom:0}
@media(max-width:600px){
  .bp-frame{padding:0 14px 20px}
  .bp-frame .titlebar{position:static;border-bottom:1px solid var(--blue-line);margin:0 -14px 16px;padding:9px 14px;gap:12px;flex-wrap:wrap}
  .callout{padding:11px 14px;gap:11px}
  .callout .ref{width:24px;height:24px;font-size:max(var(--chrome-min),.68rem)}
}
@media(max-width:480px){ .bp-frame .titlebar span:last-child{display:none} }
/* ===== Order box (Alex r2 item 4): boxed drafting CTA panel ===== */
.orderbox{display:flex;justify-content:space-between;align-items:center;gap:clamp(1rem,0.5rem + 2vw,2.5rem);flex-wrap:wrap;border:1px solid var(--ink);background:var(--paper-2);padding:clamp(1.25rem,0.8rem + 1.4vw,2rem)}
.orderbox .ob-text{margin:0;max-width:var(--measure);color:var(--ink-2);font-size:clamp(1rem,0.95rem + 0.2vw,1.15rem);line-height:1.5}
.orderbox .ob-btn{flex-shrink:0;background:var(--gold);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:max(var(--label-min),.8rem);letter-spacing:.08em;text-transform:uppercase;padding:14px 26px;white-space:nowrap;transition:background .15s,color .15s}
.orderbox .ob-btn:hover{background:var(--ink);color:var(--paper)}
/* ===== Ask a Quick Question band (Alex r2 item 3): slim drafting CTA between hero and body ===== */
.askband{border-bottom:1px solid var(--ink);background:var(--paper-2)}
.askband .wrap{display:flex;justify-content:space-between;align-items:center;gap:clamp(0.9rem,0.5rem + 2vw,2rem);flex-wrap:wrap;padding-block:clamp(1.75rem,1rem + 2.4vw,3.5rem)}
.askband .ab-text{margin:0;color:var(--ink-2);font-size:clamp(0.98rem,0.93rem + 0.2vw,1.12rem)}
.askband .ab-btn{flex-shrink:0;background:var(--ink);color:var(--paper);font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:max(var(--label-min),.76rem);letter-spacing:.09em;text-transform:uppercase;padding:12px 24px;white-space:nowrap;transition:background .15s,color .15s}
.askband .ab-btn:hover{background:var(--gold);color:var(--ink)}
/* ===== Lightbox (Alex r2 item 5) ===== */
.lb-overlay{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;z-index:3}
.lb-trigger{width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:inherit;cursor:zoom-in}
dialog.lb{border:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100dvh;padding:0;margin:0;overflow:hidden}
dialog.lb::backdrop{background:rgba(14,34,64,.94)}
.lb .lb-fig{margin:0;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:6vh 7vw}
.lb .lb-img{max-width:88vw;max-height:80vh;width:auto;height:auto;object-fit:contain;box-shadow:0 12px 44px rgba(0,0,0,.55)}
.lb .lb-cap{font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.78rem);color:var(--paper);letter-spacing:.04em;text-align:center;max-width:80ch;margin:0}
.lb .lb-x{position:fixed;z-index:2;background:rgba(242,238,228,.14);color:var(--paper);border:1px solid rgba(242,238,228,.45);width:52px;height:52px;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s,border-color .15s}
.lb .lb-x:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.lb .lb-close{top:18px;right:18px}
.lb .lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb .lb-next{right:18px;top:50%;transform:translateY(-50%)}
@media(max-width:560px){.lb .lb-x{width:44px;height:44px;font-size:1.3rem}.lb .lb-prev{left:8px}.lb .lb-next{right:8px}.lb .lb-close{top:10px;right:10px}}

/* Ask a Quick Question dialog (Alex r4-C) — shared native <dialog>, paper panel, full-screen <480 */
dialog.askq{border:1px solid var(--ink);background:var(--paper);color:var(--ink);width:min(92vw,520px);max-width:92vw;max-height:90dvh;padding:0;overflow:auto;box-shadow:0 20px 60px -20px rgba(14,34,64,.5);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}
dialog.askq::backdrop{background:rgba(14,34,64,.72)}
.askq-body{padding:clamp(22px,3vw,40px);position:relative}
.askq-x{position:absolute;top:10px;right:10px;background:transparent;border:1px solid var(--ink);width:40px;height:40px;font-size:1.1rem;line-height:1;cursor:pointer;color:var(--ink);display:grid;place-items:center;transition:background .15s,color .15s;z-index:2}
.askq-x:hover{background:var(--ink);color:var(--paper)}
.askq-title{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;font-size:1.6rem;color:var(--ink);margin:0}
.askq-title:focus{outline:none}
.askq-sub{margin:8px 0 22px;color:var(--ink-2);font-size:1rem;line-height:1.5}
.askq .field label{color:var(--ink-2)}
.askq .field input,.askq .field textarea{min-height:44px}
.askq .field textarea{min-height:92px}
.askq-err{display:block;margin-top:6px;color:#b3261e;font-size:.9rem;line-height:1.4}
.askq-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.askq-submit{width:100%;background:var(--gold);color:var(--ink);border:1px solid var(--ink);font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:max(var(--label-min),.8rem);letter-spacing:.08em;text-transform:uppercase;padding:14px 20px;min-height:48px;cursor:pointer;transition:background .15s,color .15s}
.askq-submit:hover{background:var(--ink);color:var(--paper)}
.askq-note{margin-top:12px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.72rem);letter-spacing:.04em;color:var(--ink-3);text-align:center}
.askq-success{text-align:center;padding:24px 0 8px}
.askq-success p{color:var(--ink-2);margin-top:10px;font-size:1.05rem}
.askq-done{margin-top:22px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);font-family:'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;padding:12px 28px;min-height:44px;cursor:pointer;transition:background .15s,color .15s}
.askq-done:hover{background:var(--gold);color:var(--ink)}
@media(max-width:480px){
  dialog.askq{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;top:0;left:0;transform:none}
  .askq-body{padding:64px 20px 36px;min-height:100%;box-sizing:border-box}
}

/* ============================================================
   Drafting-chrome toggle (Alex r3 item 1)
   Default: chrome annotations show. To strip them site-wide,
   add data-chrome="off" to <body>: one switch, no markup changes.
   Covers the decorative drafting LABELS (the --chrome-min set):
   REV ticks, door/sheet codes (S-04), sheet section numbers,
   scale notes, "General notes" caps, drafting ticks, gallery/
   project note numbers. Leaves photo-caption FIG prefixes (they
   ride inside readable captions) and structural graphics (the
   AUTHORIZED stamp, blueprint dimension LINES) in place.
   ============================================================ */
body[data-chrome="off"] .rev-tick,
body[data-chrome="off"] .swatch .ref,
body[data-chrome="off"] .shead .no,
body[data-chrome="off"] .hero h1 .u .dim,
body[data-chrome="off"] .dim-h .val,
body[data-chrome="off"] .dim-v .val,
body[data-chrome="off"] .gnotes-bar,
body[data-chrome="off"] .bp-notes .bpn-h,
body[data-chrome="off"] .bp-frame .titlebar,
body[data-chrome="off"] .bp-stamp span,
body[data-chrome="off"] .callout .ref,
body[data-chrome="off"] .tick,
body[data-chrome="off"] .gnote .gn-no,
body[data-chrome="off"] .projnotes .pn-cap{display:none}

/* ===== Demo video (Invisacook, 2026-10-06): click-to-play, 16:9 box reserved, nothing loads until play ===== */
.demo{border-bottom:1px solid var(--paper-line-2)}
.demo .shead{padding-block:clamp(2rem,1.2rem + 2vw,3rem) 18px}
.demo .vfig{margin:0 0 clamp(2rem,1.2rem + 2vw,3rem);border:1px solid var(--paper-line-2)}
.demo video{display:block;width:100%;height:auto;aspect-ratio:16 / 9;background:var(--ink);object-fit:contain}
.demo video:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.demo .vfig figcaption{padding:13px 16px;font-family:'IBM Plex Mono',monospace;font-size:max(var(--label-min),.7rem);letter-spacing:.05em;color:var(--ink-2);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.demo .vfig figcaption b{color:var(--ink);font-weight:500}

/* 2026-10-12 PM: brand logo strip inside the "General notes · brands" box (countertops, cabinets).
   It sat flush against the box edge at 22px with 16px gaps, so six logos read as one crowded line.
   Now an even grid of cells, padded like the box text, logos at one visual height. */
.projnotes .brandline{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 44px;align-items:center;justify-items:start;padding:14px 16px 22px;margin:0}
.projnotes .brandline .blogo{height:30px;width:auto;max-width:100%;margin:0;object-fit:contain;object-position:left center}
.projnotes .brandline .blogo[src*="/msi."],.projnotes .brandline .blogo[src*="/emerstone."]{height:40px}
@media (max-width:600px){.projnotes .brandline{grid-template-columns:repeat(2,1fr);gap:22px 28px}.projnotes .brandline .blogo{height:26px}.projnotes .brandline .blogo[src*="/msi."],.projnotes .brandline .blogo[src*="/emerstone."]{height:34px}}

/* 2026-10-12 PM (pre-prod QA): the hamburger shrank to 22px at 390/414 and was clipped at 375 because .nav-toggle
   could flex-shrink. Keep it 44px, keep "Free Estimate" on one line, and between 373 and 480px show "Estimate" only
   so the wordmark, button and menu all fit. Swept 320 to 1080 in Chromium and WebKit: no overflow, nothing clipped. */
.nav-toggle{flex-shrink:0}
.tb-nav a.cta{white-space:nowrap}
@media(max-width:372px){.tb-inner{gap:10px}.brand-name{display:none}.tb-nav a.cta{padding:11px 12px;letter-spacing:.04em}}
@media(min-width:373px) and (max-width:480px){.tb-inner{gap:8px}.brand{gap:8px}.cta-free{display:none}}

/* 2026-10-13 PM: privacy policy page, many short sections, so smaller section heads than the marketing prose. */
.prose-body.policy{border-right:0;padding-right:0}
.prose-body.policy h2{font-size:clamp(1.25rem,2vw,1.5rem);margin:34px 0 10px}
.prose-body.policy h2:first-child{margin-top:0}
.prose-body.policy a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* Consent banner clearance (see nav.js, SC 2.4.11). */
html{scroll-padding-bottom:var(--consent-h,0px)}
body{padding-bottom:var(--consent-h,0px)}

/* 2026-10-13 PM (Alex: "text in Transform your kitchen is sticking out"): bullet lists inside a notes box
   (kitchen, bathroom, home remodeling) had browser-default styling, so the bullets hung outside the box border
   and the text ran larger than the box copy. Keep them inside the box, same size and colour as the notes text. */
.projnotes ul,.projnotes ol{list-style:none;margin:0;padding:0 16px 12px;display:grid;gap:8px}
.projnotes li{position:relative;padding-left:20px;font-size:.94rem;line-height:1.5;color:rgba(242,238,228,.72)}
.projnotes li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;background:var(--gold)}
.maker .projnotes li{color:var(--ink-2)}
.maker .projnotes li::before{background:var(--gold-deep)}

/* ===== 2026-10-13 PM: visual review fixes (batches B and C) ===== */
/* Header CTA: inside the flex button (481-980px) the space inside .cta-free collapsed ("FREEESTIMATE"). */
.tb-nav a.cta{column-gap:.35em}
/* Grids that leave an empty ruled cell: size the grid to its item count. */
@media(min-width:861px){
  .rev-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
  .typecards:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
}
@media(min-width:561px) and (max-width:860px){
  .fig-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
}
@media(min-width:861px){ .gnotes-list > li:last-child:nth-child(odd){grid-column:1/-1} }
/* Hero spec box: breathing room under the lead text and the quote button. */
.sheet-head .sh-main .hero-actions{margin-bottom:24px}
.sheet-head .sh-main .lead:has(+ .sheet-no){margin-bottom:24px}
/* Bathroom remodeling hero: keep the vanity in frame. */
.hero-fig .img img.pos-left{object-position:4% 60%}
/* Captions: no single word left alone on the second line ("Old Georgetown / Rd"). */
.fig .cap span,.fig .cap b,.hero-fig .cap span,.hero-fig .cap b{text-wrap:balance}
/* Stacked footer columns: drop the leftover vertical rules. */
@media(max-width:860px){ .foot-block>div{border-right:none;border-bottom:1px solid var(--paper-line-2)} .foot-block>div:last-child{border-bottom:none} }
/* Breadcrumb on phones: keep "Home /" with the page name, shorten the page name if needed. */
@media(max-width:480px){ .crumbs{flex-wrap:nowrap;min-width:0} .crumbs > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} }
/* Showroom map pin label and long email on phones. */
@media(max-width:560px){
  .sr-r .pin .lab{left:24px;right:auto;top:-6px;white-space:normal;width:max-content;max-width:min(170px,46vw);text-align:left}
  .showroom .r .v,.sr-l .r .v{overflow-wrap:anywhere;font-size:max(var(--chrome-min),.72rem)}
}
/* Quick-question dialog fits a 375x812 screen without scrolling the close button away. */
@media(max-width:480px){ .askq-body{padding:18px 18px 16px} .askq-sub{margin:6px 0 14px} .askq .field{margin-bottom:10px} .askq .cf-turnstile{margin:2px 0 10px} }
/* Wholesale "The brands we carry": logos large enough to read on navy. */
.brand-row{gap:28px 56px}
.brand-row .brand-logo img{height:42px;width:auto;max-width:190px;opacity:.95}
.schedule .wrap > .tablenote:last-child{margin-bottom:0;padding-bottom:calc(var(--section-y) * .5)}
.foot .blogo{opacity:.8}
/* Invisacook hero/about logo: the mark is small at the default height. */
.sheet-head.photo .sh-main .blogo[src*="invisacook"],.maker .blogo[src*="invisacook"]{height:52px}

/* ===== 2026-10-13 PM: visual review fixes (batch A) ===== */
/* Kitchen cabinets brand table on phones: "Learn more" printed on top of the brand name. */
@media(max-width:860px){ .sched-table.brands4 .sched-row .go{grid-column:1 / -1;grid-row:3;justify-self:start;padding:0 16px 14px} }
/* Home hero FIG. 03: the AUTHORIZED stamp covered the caption. */
.hero-fig .cap.stamped{padding-right:215px}
/* Stacked tablet/phone layouts: drop half-height vertical rules, separate with horizontal ones. */
@media(max-width:860px){
  .spec .b{border-right:none;border-bottom:1px solid var(--paper-line-2)}
  .sched-row .name{border-right:none}
  .callout{border-right:none;border-bottom:1px solid var(--blue-line)}
  .typecard .typedraw:not(.vanity){max-width:220px}
}
/* Two-photo galleries use two columns, not two of three. */
@media(min-width:561px){ .fig-grid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)} }
/* Door library: names reserve two lines so every drawing in a row is the same height. */
.swatch .nm{min-height:2.5em;line-height:1.25}
.lib-grid .swatch .ln{min-height:2.7em;line-height:1.35}
/* Door drawings two-up on phones instead of one per screen. */
@media(max-width:560px){ .lib-grid{grid-template-columns:1fr 1fr} .lib-grid .swatch{padding:14px} }
/* Compact brand marks (Invisacook, MSI) read as small next to wordmarks. */
.brand-row .brand-logo img[src*="invisacook"],.brand-row .brand-logo img[src*="/msi."]{height:58px}

/* 2026-10-13 PM (SEO parity): live H2/H3 keyword lines restored as real headings. .kh keeps them looking exactly
   as they did as p/div: reset browser heading defaults; their own class rules still set size and spacing. */
:where(.kh){font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;margin:0;font-family:inherit}
.sched-row>h3.kh{padding:20px 18px;border-right:1px solid var(--paper-line-2)}
@media(max-width:860px){ .sched-row>h3.kh{border-right:none} }

/* 2026-10-13 PM (Alex: quote form took too long to reach): on phones and tablets the quote page skips its hero
   photo and shows the form fields right under "Tell us about the project.", with the explanation and steps after. */
@media(max-width:860px){
  .sheet-head:has(+ .formsheet) .hero-fig{display:none}
  .formsheet .fs-left{display:contents}
  .formsheet .fs-left h2{order:1;padding-top:36px;margin-bottom:4px}
  .formsheet .fs-form{order:2;padding:16px 0 32px}
  .formsheet .fs-left > p,.formsheet .fs-left > ul{order:3}
  .formsheet .fs-left > p:first-of-type{border-top:1px solid var(--blue-line);padding-top:28px}
  .formsheet .wrap{padding-bottom:28px}
}

/* 2026-10-14 PM: links inside hero and section copy must look like links (built-ins "stock cabinet lines"). */
.sh-main p a,.shead .sub a,.gnote p a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* 2026-10-14 PM: built-ins starting price, impossible to miss (Alex). */
.sheet-head .sh-main .price-flag{margin:18px 0 0;display:inline-block;padding:10px 16px;border:1.5px solid var(--ink);border-left:6px solid var(--gold-deep);background:var(--paper);font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(1.1rem,1rem + .5vw,1.35rem);color:var(--ink);line-height:1.3}
.sheet-head .sh-main .price-flag strong{font-weight:700}
.priceband{background:var(--ink);color:var(--paper);border-bottom:1px solid var(--ink)}
.priceband .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3vw,48px);align-items:center;padding-block:clamp(28px,2rem + 1.5vw,52px)}
.pb-fig{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.6rem,1.4rem + 4vw,5rem);letter-spacing:-.035em;line-height:1;color:var(--gold)}
.pb-text p{margin:0;color:rgba(242,238,228,.78);max-width:58ch;font-size:1rem;line-height:1.55}
.pb-text .pb-lead{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.2rem,1rem + .8vw,1.6rem);color:var(--paper);margin-bottom:6px;letter-spacing:-.01em}
.pb-alt{display:flex;flex-direction:column;gap:4px;padding:16px 20px;border:1px solid rgba(242,238,228,.45);color:var(--paper);min-width:220px}
.pb-alt span{font-size:.95rem;color:rgba(242,238,228,.78)}
.pb-alt b{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:max(var(--label-min),.82rem);letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.pb-alt:hover,.pb-alt:focus-visible{background:rgba(242,238,228,.08)}
@media(max-width:860px){ .priceband .wrap{grid-template-columns:1fr} .pb-alt{min-width:0} }

/* 2026-10-14 Alex: on tablet and phone the Estimate button sits beside the menu button. .tb-nav and .nav-toggle both had
   margin-left:auto, so the free space was split and the button floated mid-bar (151px gap at 768). */
@media(max-width:1080px){.nav-toggle{margin-left:0}}
@media(min-width:601px) and (max-width:1080px){.tb-inner{gap:10px}}
/* 320px: swatch columns could not shrink below their labels, so the door row ran 11px off screen. */
@media(max-width:560px){ .lib-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .lib-grid .swatch{min-width:0;overflow-wrap:anywhere} }
/* 2026-10-14 Alex: homepage hero stats are three and always share one row. Columns size to their content and shrink
   together on narrow screens (labels wrap under their numbers) instead of wrapping to a new row. */
.hero-coords{display:grid;grid-template-columns:repeat(3,minmax(0,max-content));column-gap:34px;justify-content:start}
@media(max-width:560px){ .hero-coords{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px} .hero-coords .c .n{font-size:1.25rem} .hero-coords .c .l{letter-spacing:.02em} }