/* ==================================================================
   ABC CABINETS & DESIGN — design system v2
   Dual theme: dark (espresso, default) · light (warm ivory daylight)
   Type: Cormorant (display ≥24px only) · Jost (all UI & small text)
   Signature: Materials Ledger · inlaid gold hairlines · process line
   ------------------------------------------------------------------
   RULES ENCODED HERE (do not regress):
   · No hard-coded colors below the token block — roles only.
   · Cormorant never renders below 1.5rem (24px).
   · No text below .875rem (14px); no 300-weight text anywhere.
   · Every animation is cancelled under prefers-reduced-motion.
   ================================================================== */

/* ---------- 1 · TOKENS ---------- */
:root{
  /* fixed brand constants (theme-independent) */
  --ink:      #1A1712;   /* espresso */
  --ink-2:    #211D16;
  --ink-3:    #2B251C;
  --ivory:    #F2EDE3;   /* warm ivory */
  --ivory-2:  #E9E2D3;
  --stone:    #A79A85;   /* secondary text on ink */
  --gold-bright:#C9AD6E; /* gold for dark grounds & large accents */
  --gold-mid: #A98C4B;   /* brand gold — large accents on light   */
  --gold-deep:#7E6227;   /* bronze-gold — AA text on light        */

  --font-display:"Cormorant", Georgia, serif;
  --font-body:"Jost","Century Gothic",-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.21,1);
  --wrap:1240px;
  --header-h:76px;
}

/* dark theme — the brand's designed mode (default) */
:root, :root

/* light theme — same brand in daylight */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F5F0E6;
  --bg-2:#ECE5D5;
  --surface:#FBF8F1;
  --text:var(--ink);
  --text-2:#63594A;
  --accent:var(--gold-deep);          /* AA as text on --bg */
  --accent-large:#A38645;   /* 3.05:1+ on both light grounds */
  --line:rgba(126,98,39,.38);
  --line-soft:rgba(126,98,39,.18);
  --header-bg:rgba(245,240,230,.92);
  --overlay:rgba(245,240,230,.985);
  --selection-bg:var(--gold-deep);
  --selection-fg:#F5F0E6;
  --shadow:0 24px 60px rgba(58,48,30,.18);
}

/* ---------- 2 · RESET & BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .35s var(--ease), color .35s var(--ease);
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--selection-bg); color:var(--selection-fg); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* inverse band — espresso anchor moments, identical in both themes */
.on-ink{
  background:var(--ink); color:var(--ivory);
  --bg:var(--ink); --bg-2:var(--ink-2); --surface:var(--ink-3);
  --text:var(--ivory); --text-2:var(--stone);
  --accent:var(--gold-bright); --accent-large:var(--gold-bright);
  --line:rgba(201,173,110,.34); --line-soft:rgba(201,173,110,.16);
  --selection-bg:var(--gold-bright); --selection-fg:var(--ink);
}

/* ---------- 3 · TYPE ---------- */
h1,h2,h3,.display{ font-family:var(--font-display); font-weight:400; line-height:1.08; letter-spacing:.005em; }
.display-xl{ font-size:clamp(3rem, 7vw, 5.8rem); }
.display-lg{ font-size:clamp(2.2rem, 4.6vw, 3.6rem); }
.display-md{ font-size:clamp(1.7rem, 3vw, 2.4rem); }
h4,h5,h6{ font-family:var(--font-body); }
.lede{ font-size:clamp(1.125rem, 1.6vw, 1.3rem); line-height:1.75; }
em,.accent-i{ font-family:var(--font-display); font-style:italic; font-weight:500; }
.display-xl em,.display-lg em,.display-md em{ color:var(--accent-large); }
.muted{ color:var(--text-2); }
/* utility floor: nothing smaller, nothing thinner */
small,.small{ font-size:.875rem; font-weight:400; }

.eyebrow{
  font-family:var(--font-body);
  font-size:.875rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent);
  display:flex; align-items:center; gap:1rem;
}
.eyebrow::before{ content:""; width:2.2rem; height:1px; background:var(--accent); opacity:.75; }
.eyebrow.centered{ justify-content:center; }
.eyebrow.centered::after{ content:""; width:2.2rem; height:1px; background:var(--accent); opacity:.75; }

/* ---------- 4 · LAYOUT ---------- */
.container{ width:min(var(--wrap), 100% - 3rem); margin-inline:auto; }
.section{ padding-block:clamp(4.5rem, 9vw, 8rem); }
.section-alt{ background:var(--bg-2); }
.section-head{ max-width:46rem; margin-bottom:clamp(2.5rem, 5vw, 4rem); }
.section-head .eyebrow{ margin-bottom:1.2rem; }
.section-head p{ margin-top:1.1rem; color:var(--text-2); }

/* ---------- 5 · BUTTONS & LINKS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.8rem;
  font-size:.875rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  padding:1.05rem 2.1rem; min-height:44px;
  border:1px solid var(--accent);
  color:var(--text); background:transparent;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn::after{ content:"→"; font-family:var(--font-display); font-size:1.5rem; line-height:1; letter-spacing:0; transition:transform .35s var(--ease); }
.btn:hover,.btn:focus-visible{ background:var(--accent); color:var(--bg); }
.btn:hover::after,.btn:focus-visible::after{ transform:translateX(4px); }
.btn.solid{ background:var(--accent); color:var(--bg); }
.btn.solid:hover,.btn.solid:focus-visible{ background:var(--accent-large); border-color:var(--accent-large); color:var(--ink); }
.on-ink .btn{ color:var(--ivory); }
.on-ink .btn:hover,.on-ink .btn:focus-visible{ color:var(--ink); }
.on-ink .btn.solid{ color:var(--ink); }

.text-link{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.875rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); padding-block:.55rem .3rem;
  border-bottom:1px solid var(--line);
  transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.text-link:hover,.text-link:focus-visible{ border-color:var(--accent); gap:.9rem; }

.skip-link{
  position:fixed; top:-100%; left:1rem; z-index:200;
  background:var(--accent); color:var(--bg);
  padding:.85rem 1.4rem; font-size:.875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  transition:top .3s var(--ease);
}
.skip-link:focus{ top:1rem; }

/* ---------- 6 · HEADER ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:1.1rem;
  transition:padding .4s var(--ease);
}
.site-header.scrolled{ background:var(--header-bg); border-color:var(--line-soft); } /* blur removed: it made the header a containing block for the fixed drawer */
.site-header.scrolled .container{ padding-block:.75rem; }
/* over the dark hero, header text is ivory in both themes until scrolled */
.header-on-hero:not(.scrolled){ --text:var(--ivory); --accent:var(--gold-bright); }

.brand{ display:flex; align-items:center; gap:1rem; min-height:44px; }
.brand img{ height:44px; width:auto; }
.brand-words{ display:flex; flex-direction:column; line-height:1.2; }
.brand-words b{ font-weight:600; font-size:.875rem; letter-spacing:.26em; text-transform:uppercase; color:var(--text); }
.brand-words span{ font-weight:500; font-size:.875rem; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); }

.nav-links{ display:flex; align-items:center; gap:2rem; list-style:none; }
.nav-links a:not(.btn){
  font-size:.875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text); position:relative; padding-block:.55rem;
}
.nav-links a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn):focus-visible::after,
.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-links .btn{ padding:.7rem 1.4rem; }

/* theme toggle — real button, labeled, visible on mobile */






.nav-toggle{ display:none; z-index:70; width:44px; height:44px; position:relative; }
.nav-toggle span{
  position:absolute; left:10px; right:10px; height:1.5px; background:var(--text);
  transition:transform .35s var(--ease), opacity .25s var(--ease), top .35s var(--ease);
}
.nav-toggle span:nth-child(1){ top:16px; }
.nav-toggle span:nth-child(2){ top:22px; }
.nav-toggle span:nth-child(3){ top:28px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ top:22px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ top:22px; transform:rotate(-45deg); }

/* ---------- 7 · SPLASH ---------- */
.splash{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  background:var(--bg);
  opacity:1; transition:opacity .45s var(--ease);
}
.splash img{ width:min(240px, 48vw); height:auto; opacity:0; transform:scale(.96); }
.splash.play img{ animation:splashIn .7s var(--ease) forwards; }
@keyframes splashIn{ to{ opacity:1; transform:scale(1); } }
.splash.leave{ opacity:0; pointer-events:none; }
html.splash-hold body > :not(.splash){ /* nothing hidden — page paints behind overlay */ }

/* ---------- 8 · HERO (split composition) ---------- */
.hero{
  position:relative; min-height:100svh;
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  background:var(--ink); color:var(--ivory);
  isolation:isolate; overflow:hidden;
}
@supports (min-height:100dvh){ .hero{ min-height:100dvh; } }
.hero-panel{
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--header-h) + 3rem) clamp(1.5rem,4vw,4.5rem) clamp(3.5rem,7vh,5.5rem);
  position:relative; z-index:2;
}
.hero-panel .eyebrow{ margin-bottom:1.4rem; --accent:var(--gold-bright); }
.hero-title{ max-width:14ch; color:var(--ivory); }
.hero-title em{ color:var(--gold-bright); }
.hero-sub{ margin-top:1.5rem; max-width:34rem; color:var(--stone); }
.hero-ctas{ margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:1rem; }
.hero-creds{
  margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid rgba(201,173,110,.16);
  display:flex; flex-wrap:wrap; gap:.4rem 2rem;
  font-size:.875rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--stone);
}
.hero-media{ position:relative; overflow:hidden; min-height:44vh; }
.hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@keyframes heroDrift{ from{ transform:scale(1.07); } to{ transform:scale(1); } }
.hero-media img{ animation:heroDrift 20s var(--ease) forwards; transform-origin:60% 45%; }
.hero-media::after{ /* seam blend into the espresso panel */
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(26,23,18,.55), rgba(26,23,18,0) 22%);
}
.hero-tag{
  position:absolute; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem); z-index:2;
  background:rgba(26,23,18,.78); backdrop-filter:blur(6px);
  border:1px solid rgba(201,173,110,.34);
  padding:.6rem 1rem;
  font-size:.875rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory);
}
.hero-tag b{ color:var(--gold-bright); font-weight:500; }
.hero-frame{ position:absolute; inset:clamp(12px,2vw,26px); z-index:3; border:1px solid rgba(201,173,110,.28); pointer-events:none; }
@media (max-width:900px){
  .hero:not(.hero-bleed){ grid-template-columns:1fr; grid-template-rows:minmax(46vh,auto) auto; }
  .hero:not(.hero-bleed) .hero-media{ order:-1; }
  .hero:not(.hero-bleed) .hero-panel{ padding-top:2.4rem; }
  .hero-title{ max-width:none; }
}

/* ---------- 9 · TRUST BAR (rebuilt credentials) ---------- */
.trust{ background:var(--bg); border-bottom:1px solid var(--line-soft); }
.trust .container{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-block:1.9rem; gap:1rem;
}
.trust-item{ text-align:center; padding-inline:1rem; }
.trust-item + .trust-item{ border-left:1px solid var(--line-soft); }
.trust-item b{
  display:block; font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.7rem,2.6vw,2.1rem); line-height:1.15; color:var(--text);
}
.trust-item span{
  display:block; margin-top:.3rem;
  font-size:.875rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-2);
}
.trust-item small{
  display:block; margin-top:.15rem; font-size:.875rem; color:var(--accent); letter-spacing:.06em;
}

/* ---------- 10 · INTRO ---------- */
.intro-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2.5rem,6vw,6rem); align-items:end; }
.intro-grid p{ color:var(--text-2); }
.intro-grid .text-link{ margin-top:1.8rem; }
.drop-cap::first-letter{
  font-family:var(--font-display); font-weight:500;
  font-size:3.4em; float:left; line-height:.82; padding-right:.14em; color:var(--accent-large);
}

/* ---------- 11 · SERVICE ROWS (home) ---------- */
.svc-rows{ border-top:1px solid var(--line-soft); }
.svc-row{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,4fr) auto;
  align-items:center; gap:clamp(1.5rem,4vw,4rem);
  padding-block:2.2rem;
  border-bottom:1px solid var(--line-soft);
}
.svc-row h3{ font-size:clamp(1.6rem,2.6vw,2.3rem); transition:color .3s var(--ease); }
.svc-row p{ color:var(--text-2); font-size:1rem; }
.svc-row .text-link{ justify-self:end; white-space:nowrap; }
.svc-row:hover h3,.svc-row:focus-visible h3{ color:var(--accent); }

/* ---------- 12 · MATERIALS LEDGER (signature) ---------- */
.ledger-grid{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(2.5rem,6vw,6rem); align-items:start;
}
.ledger-list{ list-style:none; counter-reset:mat; }
.ledger-item{ border-bottom:1px solid var(--line-soft); }
.ledger-item button{
  counter-increment:mat;
  width:100%; text-align:left;
  display:flex; align-items:baseline; gap:1.4rem;
  padding-block:1.35rem; min-height:44px;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.2rem);
  color:var(--text-2);
  transition:color .35s var(--ease), padding-left .35s var(--ease);
}
.ledger-item button::before{
  content:counter(mat, decimal-leading-zero);
  font-family:var(--font-body); font-size:.875rem; font-weight:500;
  letter-spacing:.24em; color:var(--accent); opacity:.85;
}
.ledger-item button:hover{ color:var(--text); }
.ledger-item.active button{ color:var(--accent-large); padding-left:.6rem; }
.ledger-note{
  max-height:0; overflow:hidden; color:var(--text-2); font-size:1rem;
  padding-left:calc(1.4rem + 2ch);
  transition:max-height .45s var(--ease), padding-bottom .45s var(--ease);
}
.ledger-item.active .ledger-note{ max-height:8rem; padding-bottom:1.3rem; }
.ledger-stage{ position:sticky; top:110px; }
.ledger-frame{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  border:1px solid var(--line);
  padding:clamp(10px,1.2vw,16px);
  background:var(--surface);
}
.ledger-frame img{
  position:absolute; inset:clamp(10px,1.2vw,16px);
  width:calc(100% - 2*clamp(10px,1.2vw,16px));
  height:calc(100% - 2*clamp(10px,1.2vw,16px));
  object-fit:cover; opacity:0; transition:opacity .45s var(--ease);
}
.ledger-frame img.show{ opacity:1; }
.ledger-caption{
  margin-top:1rem; display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-size:.875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--text-2);
}
.ledger-caption b{ color:var(--accent); font-weight:500; }

/* ---------- 13 · WORK / PROJECT CARDS ---------- */
.tier-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.tier-head h2{ font-size:clamp(1.7rem,3vw,2.4rem); }
.tier-head p{ color:var(--text-2); font-size:1rem; max-width:38rem; }
.badge{
  display:inline-block; padding:.3rem .7rem;
  border:1px solid var(--line);
  font-size:.875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
}
.badge.real{ background:var(--accent); color:var(--bg); border-color:var(--accent); }

.work-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1.2rem,2.4vw,2rem); }
.work-card{ position:relative; display:block; overflow:hidden; text-align:left; }
.work-card figure{ position:relative; overflow:hidden; }
.work-card img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.work-card:hover img,.work-card:focus-visible img{ transform:scale(1.03); }
.work-card figure::after{
  content:""; position:absolute; inset:0; border:1px solid var(--accent);
  opacity:0; transition:opacity .35s var(--ease); pointer-events:none;
}
.work-card:hover figure::after,.work-card:focus-visible figure::after{ opacity:.65; }
.work-card figcaption{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding-top:1rem;
}
.work-card figcaption h3{ font-size:1.5rem; }
.work-card figcaption span{ font-size:.875rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--text-2); }
.work-card .count{ font-size:.875rem; color:var(--text-2); }
.wc-a{ grid-column:span 5; } .wc-a figure{ aspect-ratio:4/5; }
.wc-b{ grid-column:span 7; } .wc-b figure{ aspect-ratio:3/2; }
.wc-c{ grid-column:span 7; } .wc-c figure{ aspect-ratio:3/2; }
.wc-d{ grid-column:span 5; } .wc-d figure{ aspect-ratio:4/5; }
.wc-4{ grid-column:span 4; } .wc-4 figure{ aspect-ratio:1/1; }
.wc-6{ grid-column:span 6; } .wc-6 figure{ aspect-ratio:3/2; }
.work-cta{ margin-top:clamp(2rem,4vw,3rem); text-align:center; }

/* ---------- 14 · GALLERY LIGHTBOX (portfolio projects) ---------- */
.lightbox{
  position:fixed; inset:0; z-index:150; display:none;
  background:var(--overlay);
}
.lightbox.open{ display:grid; grid-template-rows:auto 1fr auto; }
.lb-top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem clamp(1rem,3vw,2rem);
  border-bottom:1px solid var(--line-soft);
}
.lb-title{ font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2rem); }
.lb-kind{ margin-left:1rem; }
.lb-close{ min-width:44px; min-height:44px; display:grid; place-items:center; border:1px solid var(--line); font-size:1.4rem; line-height:1; }
.lb-close:hover,.lb-close:focus-visible{ border-color:var(--accent); color:var(--accent); }
.lb-stage{ position:relative; display:grid; place-items:center; padding:1rem; min-height:0; }
.lb-stage img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; box-shadow:var(--shadow); }
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  min-width:48px; min-height:48px; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--bg);
  font-size:1.5rem; font-family:var(--font-display);
}
.lb-nav:hover,.lb-nav:focus-visible{ border-color:var(--accent); color:var(--accent); }
.lb-prev{ left:clamp(.5rem,2vw,1.5rem); }
.lb-next{ right:clamp(.5rem,2vw,1.5rem); }
.lb-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem clamp(1rem,3vw,2rem);
  border-top:1px solid var(--line-soft);
  font-size:.875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2);
}
.lb-note{ text-transform:none; letter-spacing:0; font-weight:400; max-width:46rem; }

/* ---------- 15 · PROCESS JOURNEY (rebuilt) ---------- */
.journey{ position:relative; }
.journey-track{ position:relative; max-width:56rem; margin-inline:auto; }
.journey-line{
  position:absolute; left:19px; top:0; bottom:0; width:2px;
  background:var(--line-soft);
}
.journey-line i{
  position:absolute; left:0; top:0; width:100%; height:0;
  background:var(--accent); display:block;
}
.stage{
  position:relative; padding:0 0 clamp(2.6rem,5vw,4rem) clamp(3.6rem,6vw,4.6rem);
}
.stage:last-child{ padding-bottom:0; }
.stage-dot{
  position:absolute; left:8px; top:.35rem;
  width:24px; height:24px; border-radius:50%;
  border:1px solid var(--line); background:var(--bg);
  display:grid; place-items:center;
  transition:border-color .4s var(--ease);
}
.stage-dot::after{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--accent); opacity:0; transform:scale(.4);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.stage.lit .stage-dot{ border-color:var(--accent); }
.stage.lit .stage-dot::after{ opacity:1; transform:scale(1); }
.stage-n{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:1.5rem; color:var(--accent-large);
}
.stage h3{ font-size:clamp(1.6rem,2.6vw,2.1rem); margin:.2rem 0 .8rem; }
.stage-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(1.4rem,3vw,2.6rem); align-items:start; }
.stage p{ color:var(--text-2); margin-bottom:.9rem; }
.stage-facts{ list-style:none; border-top:1px solid var(--line-soft); }
.stage-facts li{
  display:flex; gap:1rem; justify-content:space-between;
  padding-block:.7rem; border-bottom:1px solid var(--line-soft);
  font-size:.9375rem;
}
.stage-facts li b{ font-weight:500; font-size:.875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); flex:none; }
.stage figure{ border:1px solid var(--line); padding:10px; background:var(--surface); }
.stage figure img{ aspect-ratio:4/3; width:100%; object-fit:cover; }
.stage figure figcaption{ padding-top:.6rem; font-size:.875rem; color:var(--text-2); }
.journey-cta{ margin-top:clamp(2.5rem,5vw,4rem); text-align:center; }
@media (max-width:760px){ .stage-grid{ grid-template-columns:1fr; } }

/* ---------- 16 · STATS COUNT-UP ---------- */
.stat b[data-count]{ font-variant-numeric:tabular-nums; }

/* ---------- 17 · SHOWROOM / FACT LIST ---------- */
.showroom-grid{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(2.5rem,6vw,6rem); align-items:center;
}
.showroom figure{ position:relative; border:1px solid var(--line); padding:clamp(10px,1.2vw,16px); background:var(--surface); }
.showroom figure img{ aspect-ratio:4/3; width:100%; object-fit:cover; }
.showroom figure figcaption{ padding-top:.7rem; font-size:.875rem; color:var(--text-2); }
.fact-list{ list-style:none; margin-top:2rem; border-top:1px solid var(--line-soft); }
.fact-list li{
  display:flex; justify-content:space-between; gap:2rem;
  padding-block:.95rem; border-bottom:1px solid var(--line-soft);
  font-size:1rem;
}
.fact-list li span:first-child{ font-size:.875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); align-self:center; flex:none; }
.fact-list li span:last-child{ text-align:right; color:var(--text); }
.fact-list a{ border-bottom:1px solid var(--line); transition:border-color .3s; }
.fact-list a:hover{ border-color:var(--accent); }

/* ---------- 18 · CTA ---------- */
.cta{ text-align:center; }
.cta .display-lg{ max-width:22ch; margin-inline:auto; }
.cta p{ margin-top:1.2rem; color:var(--text-2); }
.cta .hero-ctas{ justify-content:center; }

/* ---------- 19 · FOOTER ---------- */
.site-footer{ font-size:.9375rem; }
.footer-top{
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,2.5fr) minmax(0,2.5fr) minmax(0,3fr);
  gap:clamp(2rem,4vw,4rem);
  padding-block:clamp(3.5rem,6vw,5.5rem);
  border-bottom:1px solid var(--line-soft);
}
.footer-logo img{ width:min(220px,60%); }
.footer-logo p{ margin-top:1.4rem; max-width:26rem; color:var(--text-2); }
.site-footer h3{
  font-weight:600; font-size:.875rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--accent);
  margin-bottom:1.2rem;
}
.footer-nav ul{ list-style:none; }
.footer-nav li{ margin-bottom:.7rem; }
.footer-nav a{ color:var(--text-2); transition:color .3s; }
.footer-nav a:hover,.footer-nav a:focus-visible{ color:var(--text); }
.footer-contact p{ margin-bottom:.7rem; color:var(--text-2); }
.footer-contact a{ color:var(--text); border-bottom:1px solid var(--line); }
.footer-contact a:hover{ border-color:var(--accent); }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  padding-block:1.6rem; font-size:.875rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-2);
}
.footer-bottom .lic{ color:var(--accent); }

/* ---------- 20 · PAGE HERO (interior) ---------- */
.page-hero{
  padding-top:clamp(9rem,16vh,12rem);
  padding-bottom:clamp(3.5rem,7vw,6rem);
  position:relative; background:var(--bg);
}
.page-hero .eyebrow{ margin-bottom:1.3rem; }
.page-hero p{ margin-top:1.3rem; max-width:44rem; color:var(--text-2); }
.page-hero .hairline-bottom{ position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line-soft); }

/* ---------- 21 · SERVICES PAGE ---------- */
.svc-nav{
  position:sticky; top:0; z-index:40;
  background:var(--header-bg); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.svc-nav ul{ display:flex; gap:1.8rem; list-style:none; overflow-x:auto; padding-block:.2rem; scrollbar-width:none; }
.svc-nav ul::-webkit-scrollbar{ display:none; }
.svc-nav a{
  display:inline-block; padding:.9rem 0 .8rem;
  font-size:.875rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-2); white-space:nowrap; border-bottom:2px solid transparent;
}
.svc-nav a:hover,.svc-nav a:focus-visible,.svc-nav a.now{ color:var(--text); border-color:var(--accent); }
.svc-detail{ scroll-margin-top:120px; }
.svc-detail-grid{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(2.5rem,6vw,6rem); align-items:center;
}
.svc-detail-grid.flip > figure{ order:2; }
.svc-detail figure{ border:1px solid var(--line); padding:clamp(10px,1.2vw,16px); background:var(--surface); }
.svc-detail figure img{ aspect-ratio:4/5; width:100%; object-fit:cover; }
.svc-detail figure.wide img{ aspect-ratio:3/2; }
.svc-detail figure figcaption{ padding-top:.6rem; font-size:.875rem; color:var(--text-2); }
.svc-detail h2{ margin-bottom:1.1rem; }
.svc-detail .svc-body p{ color:var(--text-2); margin-bottom:1rem; }
.svc-points{ list-style:none; margin-top:1.4rem; border-top:1px solid var(--line-soft); }
.svc-points li{
  padding-block:.8rem; border-bottom:1px solid var(--line-soft);
  display:flex; gap:1rem; font-size:1rem; color:var(--text);
}
.svc-points li::before{ content:"—"; color:var(--accent); flex:none; }
.svc-band{ position:relative; min-height:52vh; display:grid; align-items:end; isolation:isolate; overflow:hidden; }
.svc-band img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.svc-band::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(26,23,18,.1), rgba(26,23,18,.82) 78%); }
.svc-band .container{ padding-block:2.2rem; color:var(--ivory); }
.svc-band .pull{ font-family:var(--font-display); font-size:clamp(1.7rem,3.4vw,2.8rem); font-style:italic; font-weight:500; max-width:26ch; }
.svc-band .src{ margin-top:.6rem; font-size:.875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-bright); }
.svc-sub{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,2rem); margin-top:2rem; }
.svc-sub-card{ border:1px solid var(--line-soft); padding:1.4rem; }
.svc-sub-card h3{ font-size:1rem; font-weight:600; letter-spacing:.08em; margin-bottom:.4rem; }
.svc-sub-card p{ font-size:.9375rem; color:var(--text-2); }
.mat-strip{ display:flex; gap:.7rem; margin-top:1.6rem; flex-wrap:wrap; }
.mat-strip a:not(.text-link){ display:block; width:64px; flex:0 0 64px; }
.mat-strip img{ width:64px; height:64px; object-fit:cover; border:1px solid var(--line); transition:transform .3s var(--ease), border-color .3s var(--ease); }
.mat-strip a:hover img,.mat-strip a:focus-visible img{ transform:scale(1.06); border-color:var(--accent); }
.faq{ margin-top:2rem; border-top:1px solid var(--line-soft); }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding-block:1rem; font-weight:500; font-size:1.0625rem; min-height:44px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--font-display); font-size:1.5rem; color:var(--accent); transition:transform .3s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .faq-a{ padding-bottom:1.1rem; color:var(--text-2); max-width:60ch; }

/* ---------- 22 · ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2.5rem,6vw,6rem); }
.about-grid figure{ border:1px solid var(--line); padding:clamp(10px,1.2vw,16px); background:var(--surface); }
.about-grid figure img{ aspect-ratio:4/5; width:100%; object-fit:cover; }
.about-grid figure figcaption{ padding-top:.6rem; font-size:.875rem; color:var(--text-2); }
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem); }
.value{ padding-top:1.4rem; border-top:1px solid var(--line); }
.value h3{ font-size:1.5rem; margin-bottom:.5rem; }
.value p{ color:var(--text-2); font-size:1rem; }
.area-cloud{ margin-top:1.6rem; line-height:2.15; color:var(--text-2); font-size:1rem; }
.area-cloud b{ font-weight:500; color:var(--text); }
.area-cloud span::after{ content:" · "; color:var(--accent); }
.area-cloud span:last-child::after{ content:""; }

/* ---------- 23 · CONTACT ---------- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2.5rem,6vw,6rem); align-items:start; }
.form-card{ border:1px solid var(--line); padding:clamp(1.6rem,3.5vw,3rem); background:var(--surface); }
.field{ margin-bottom:1.4rem; }
.field label{
  display:block; font-size:.875rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.55rem;
}
.field input,.field select,.field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  color:var(--text); font:inherit; padding:.65rem .1rem; min-height:44px;
  transition:border-color .3s var(--ease);
  border-radius:0; appearance:none;
}
.field select{ background-image:linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%); background-position:calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size:5px 5px; background-repeat:no-repeat; }
.field select option{ color:var(--ink); background:var(--ivory); }
.field textarea{ min-height:7.5rem; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--accent); }
.field .err{ display:none; margin-top:.45rem; font-size:.875rem; color:var(--accent); }
.field.invalid .err{ display:block; }
.field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:var(--accent); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.form-card .btn{ width:100%; justify-content:center; margin-top:.4rem; }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }
.form-note{ margin-top:1.1rem; font-size:.875rem; color:var(--text-2); }

/* thank-you / 404 */
.center-page{ min-height:72vh; display:grid; place-items:center; text-align:center; padding-top:6rem; }
.center-page .eyebrow{ justify-content:center; }

/* ---------- 24 · REVEAL / MOTION SYSTEM ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }
.rule-draw{ position:relative; }
.rule-draw::before{
  content:""; position:absolute; top:0; left:0; height:1px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease) .1s;
}
.rule-draw.in::before{ transform:scaleX(1); }

/* ---------- 25 · MOBILE NAV ---------- */
@media (max-width:900px){
  .nav-toggle{ display:block; }
   /* stays outside the menu */
  .site-header .container{ gap:.4rem; }
  .nav-links{
    position:fixed; inset:0; z-index:65;
    flex-direction:column; justify-content:center; align-items:flex-start; gap:.4rem;
    background:#17140F;                    /* solid: nothing may show through */
    padding:calc(var(--header-h) + 2rem) clamp(1.4rem,7vw,3rem) 2.5rem;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
  }
  .nav-links.open{ opacity:1; visibility:visible; }
  .nav-links li{ width:100%; border-bottom:1px solid rgba(245,240,230,.1); }
  .nav-links li:last-child{ border-bottom:0; }
  .nav-links a:not(.btn){
    display:block; width:100%; padding:.85rem 0;
    font-family:var(--font-display); font-size:clamp(1.5rem,6.5vw,2rem);
    letter-spacing:.02em; text-transform:none; color:var(--ivory);
  }
  .nav-links a:not(.btn)::after{ display:none; }
  .nav-links .btn{ margin-top:1.4rem; width:100%; justify-content:center; color:var(--ivory); border-color:var(--accent); padding:1rem 1.2rem; }
  .nav-links .btn:hover{ background:var(--accent); color:var(--ink); }
}

/* header recedes while the drawer is open; the X stays reachable */
@media (max-width:900px){
  body:has(.nav-links.open) .site-header{ background:transparent; border-bottom:0; }
  body:has(.nav-links.open) .site-header .brand,
  body:has(.nav-links.open) .site-header .brand-words{ opacity:0; pointer-events:none; }
  .nav-toggle span{ background:var(--ink); }
  body:has(.nav-links.open) .nav-toggle span{ background:var(--ivory); }
}

/* ---------- 26 · RESPONSIVE ---------- */
@media (max-width:1024px){
  .intro-grid,.ledger-grid,.showroom-grid,.about-grid,.contact-grid,.svc-detail-grid{ grid-template-columns:1fr; }
  .svc-detail-grid.flip > figure{ order:0; }
  .ledger-stage{ position:static; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .wc-a,.wc-b,.wc-c,.wc-d,.wc-6{ grid-column:span 6; }
  .wc-4{ grid-column:span 6; }
  .svc-sub{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .trust .container{ grid-template-columns:1fr 1fr; row-gap:1.4rem; }
  .trust-item:nth-child(3){ border-left:0; }
  .svc-row{ grid-template-columns:1fr; gap:.6rem; padding-block:1.8rem; }
  .svc-row .text-link{ justify-self:start; margin-top:.4rem; }
  .footer-top{ grid-template-columns:1fr; }
  .wc-a,.wc-b,.wc-c,.wc-d,.wc-4,.wc-6{ grid-column:span 12; }
  .field-row{ grid-template-columns:1fr; }
}

/* ---------- 27 · REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .rule-draw::before{ transform:scaleX(1); }
  .hero-media img{ animation:none; transform:none; }
  .splash{ display:none; }
  .journey-line i{ height:100% !important; }
  .stage .stage-dot{ border-color:var(--accent); }
  .stage .stage-dot::after{ opacity:1; transform:scale(1); }
}

/* ---------- 26 · UTILITIES (theme-conditional assets, anchor offsets) ---------- */
html:not(.splash-hold) .splash{ display:none; }
[id]{ scroll-margin-top:calc(var(--header-h) + 1.25rem); }

/* ---------- 27 · PORTFOLIO TIERS ---------- */
.tier-note{ max-width:62ch; color:var(--text-2); margin-bottom:clamp(1.8rem,3.5vw,2.6rem); }
.studies-grid{ grid-template-areas:none; grid-template-columns:repeat(3,1fr); }
.studies-grid .work-card{ grid-area:auto; }
.studies-grid .work-card img{ aspect-ratio:4/3; object-fit:cover; }
.lb-viz{
  color:var(--gold-bright); text-decoration:none; font-weight:500;
  border-bottom:1px solid rgba(201,173,110,.4);
}
.lb-viz:hover,.lb-viz:focus-visible{ border-bottom-color:var(--gold-bright); }
@media (max-width:1024px){ .studies-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .studies-grid{ grid-template-columns:1fr; } }

/* ---------- 28 · MATERIAL VISUALIZER ---------- */
.viz-layout{
  display:grid; grid-template-columns:minmax(280px,340px) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem); align-items:start;
}
.viz-rail{ position:sticky; top:calc(var(--header-h) + 1rem); max-height:calc(100vh - var(--header-h) - 2rem); overflow:auto; padding-right:.5rem; }
.viz-rail::-webkit-scrollbar{ width:6px; }
.viz-rail::-webkit-scrollbar-thumb{ background:var(--line-soft); }
.viz-group{ margin-bottom:1.8rem; }
.viz-group > h2{
  font-family:var(--font-body); font-size:.875rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  margin-bottom:.8rem; display:flex; justify-content:space-between; align-items:baseline;
}
.viz-group > h2 small{ color:var(--text-2); letter-spacing:.06em; text-transform:none; font-weight:400; }
.chipset{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem; }
.chip{
  padding:.3rem .7rem; border:1px solid var(--line-soft);
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.chip[aria-pressed="true"], .chip:hover{ border-color:var(--accent); color:var(--text); }
.swatch-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
.swatch{
  position:relative; display:block; width:100%; aspect-ratio:1;
  border:1px solid var(--line-soft); padding:0; overflow:hidden;
  background-size:cover; background-position:center;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.swatch:hover,.swatch:focus-visible{ border-color:var(--accent); transform:translateY(-2px); }
.swatch[aria-pressed="true"]{ border:2px solid var(--accent); }
.swatch[aria-pressed="true"]::after{
  content:"✓"; position:absolute; right:4px; bottom:2px;
  font-size:.8rem; color:var(--accent); background:var(--bg); padding:0 .25rem;
}
.swatch img{ width:100%; height:100%; object-fit:cover; display:block; }
.swatch.hexonly{ background:var(--surface); }
.swatch .hexdot{ position:absolute; inset:18%; border-radius:50%; border:1px solid rgba(0,0,0,.15); }
.viz-hidden{ display:none !important; }
.sel-note{ font-size:.875rem; color:var(--text-2); min-height:1.2em; margin-top:.3rem; }

/* board */
.viz-board{ border:1px solid var(--line); background:var(--surface); padding:clamp(1rem,2.5vw,2rem); }
.board-grid{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(1rem,2vw,1.6rem); align-items:start;
}
.board-door{ position:relative; border:1px solid var(--line-soft); background:#fff; }
.board-door > img{ display:block; width:100%; height:auto; }
.board-hw{
  position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
  mix-blend-mode:multiply; pointer-events:none;
}
.board-scale{
  position:absolute; left:.6rem; bottom:.5rem;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#7a6f5d;
  background:rgba(255,255,255,.8); padding:.15rem .45rem;
}
.board-side{ display:flex; flex-direction:column; gap:1rem; }
.board-counter{ position:relative; border:1px solid var(--line-soft); aspect-ratio:8/5; overflow:hidden; }
.board-counter img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.board-counter .fallback{ position:absolute; inset:0; }
.board-shelf{ position:relative; border:1px solid var(--line-soft); aspect-ratio:8/3; overflow:hidden; }
.board-shelf img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.board-tag{
  position:absolute; left:.5rem; bottom:.4rem;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:#F2EDE3; background:rgba(26,23,18,.72); padding:.15rem .5rem;
}
.palette{ display:grid; grid-template-columns:repeat(5,1fr); height:38px; border:1px solid var(--line-soft); }
.palette i{ display:block; }
.spec-card{ border:1px solid var(--line); padding:1.1rem 1.2rem; background:var(--bg); }
.spec-card h2{ font-size:clamp(1.4rem,2.4vw,1.8rem); margin-bottom:.5rem; }
.spec-card dl{ display:grid; grid-template-columns:auto 1fr; gap:.25rem .9rem; font-size:.9rem; }
.spec-card dt{ letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; color:var(--text-2); padding-top:.22em; }
.spec-card dd{ color:var(--text); }
.advice{ border-left:2px solid var(--accent-large); padding:.15rem 0 .15rem .9rem; margin-top:.9rem; }
.advice p{ font-size:.875rem; color:var(--text-2); margin:.3rem 0; }
.board-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.1rem; }
.board-actions .btn{ font-size:.8rem; padding:.65rem 1.1rem; }
.saved-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; }
.saved-look{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--line-soft); padding:.35rem .6rem; font-size:.8rem; color:var(--text-2);
}
.saved-look i{ width:14px; height:14px; display:inline-block; border:1px solid rgba(0,0,0,.2); }
.saved-look button{ color:var(--accent); font-size:.8rem; }
.saved-look .x{ color:var(--text-2); }

/* picks */
.picks-scroll{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:.8rem; overflow-x:auto; padding-bottom:.5rem; scrollbar-width:thin; }
.pick-card{ border:1px solid var(--line-soft); padding:.9rem; text-align:left; transition:border-color .25s var(--ease); }
.pick-card:hover,.pick-card:focus-visible{ border-color:var(--accent); }
.pick-chips{ display:flex; gap:.35rem; margin-bottom:.6rem; }
.pick-chips i{ width:26px; height:26px; display:block; border:1px solid rgba(0,0,0,.18); background-size:cover; background-position:center; }
.pick-card b{ display:block; font-family:var(--font-display); font-size:1.15rem; font-weight:500; color:var(--text); }
.pick-card span{ font-size:.82rem; color:var(--text-2); display:block; margin-top:.25rem; }

/* reference renders */
.refs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.refs-grid figure{ position:relative; border:1px solid var(--line-soft); }
.refs-grid img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.refs-grid figcaption{
  position:absolute; left:0; right:0; bottom:0;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:#F2EDE3; background:rgba(26,23,18,.72); padding:.25rem .5rem;
}
.viz-form-note{ font-size:.875rem; color:var(--text-2); }
.viz-success{ border:1px solid var(--accent); padding:1.2rem 1.4rem; }
.viz-success h3{ margin-bottom:.5rem; }

@media (max-width:960px){
  .viz-layout{ grid-template-columns:1fr; }
  .viz-rail{ position:static; max-height:none; overflow:visible; order:2; }
  .viz-stage{ order:1; position:sticky; top:var(--header-h); z-index:5; background:var(--bg); padding-bottom:.6rem; }
  .board-grid{ grid-template-columns:1fr; }
  .swatch-grid{ grid-template-columns:repeat(5,1fr); }
  .refs-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .swatch-grid{ grid-template-columns:repeat(4,1fr); }
  .refs-grid{ grid-template-columns:1fr 1fr; }
}

/* homepage teaser */
.viz-teaser-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.teaser-board{ border:1px solid var(--line); background:var(--surface); padding:1.1rem; display:grid; grid-template-columns:7fr 5fr; gap:.8rem; }
.teaser-door{ border:1px solid var(--line-soft); background:#fff; position:relative; }
.teaser-door img{ display:block; width:100%; height:auto; transition:opacity .5s var(--ease); }
.teaser-side{ display:flex; flex-direction:column; gap:.6rem; }
.teaser-counter{ aspect-ratio:8/5; border:1px solid rgba(0,0,0,.15); transition:background-color .5s var(--ease); }
.teaser-hwname{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); }
.teaser-name{ font-family:var(--font-display); font-size:1.3rem; color:var(--accent); min-height:1.4em; }
@media (max-width:900px){ .viz-teaser-grid{ grid-template-columns:1fr; } }

/* ===== V3 One-Kitchen Configurator ===== */
.viz-hero .lede { max-width: 62ch; }
.configurator { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 2.5rem; padding-block: 2rem 4rem; align-items: start; }
.cfg-stage { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: var(--bg-2); margin: 0; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.stage-img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .stage-img { transition: none; } }
.render-badge { position: absolute; top: 12px; left: 12px; z-index: 2; font: 500 .72rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #F5F0E6; background: rgba(26,23,18,.72); padding: .45em .8em; border-radius: 999px; }
.cfg-scenes { position: absolute; bottom: 12px; right: 12px; z-index: 2; display: flex; gap: 6px; }
.scene-btn { font: 500 .78rem/1 var(--font-body); padding: .5em .9em; border-radius: 999px; border: 1px solid rgba(245,240,230,.4); background: rgba(26,23,18,.6); color: #F5F0E6; cursor: pointer; }
.scene-btn.is-on { background: var(--accent); border-color: var(--accent); color: #1A1712; }
.cfg-caption { margin: .8rem 2px 0; font-size: .92rem; color: var(--text-2); }
.cfg-group { margin-bottom: 1.9rem; }
.cfg-h { font-size: 1.05rem; margin-bottom: .75rem; font-family: var(--font-body); font-weight: 600; letter-spacing: .01em; }
.sel-pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 10px; }
.sel-label { display: flex; flex-direction: column; gap: 5px; font: 500 .74rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
.cfg-select { width: 100%; padding: .7em 2.2em .7em .8em; border-radius: 8px; border: 1px solid var(--line); background-color: var(--bg-2); color: var(--text); font: 400 .95rem/1.2 var(--font-body); cursor: pointer; appearance: none; background-repeat: no-repeat; background-position: right .7em center; background-size: 10px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23A38645' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); }
.cfg-select option { background: var(--bg-2); color: var(--text); }
.cfg-select:hover { border-color: var(--accent); }
.cfg-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick-preview { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: start; margin-top: 1rem; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.pick-preview img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; }
.cfg-note { font-size: .85rem; color: var(--text-2); margin: 0; }
.slab-name { font-weight: 600; margin: 0 0 .25rem; }
.slab-note { font-size: .84rem; color: var(--text-2); margin: 0 0 .35rem; }
.slab-honest { font-size: .76rem; color: var(--accent); margin: 0; }
.hw-card { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; margin-top: 1rem; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.hw-shot { width: 132px; height: 132px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 8px; }
.hw-shot img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hw-none { font-size: .78rem; color: #4a463f; text-align: center; margin: 0; padding: 6px; }
.hw-kicker { font: 500 .68rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); margin: 0 0 .3rem; }
.hw-name { font-weight: 600; margin: 0 0 .3rem; }
.hw-note { font-size: .82rem; color: var(--text-2); margin: 0; }
.cfg-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.4rem; }
.viz-cta { padding-bottom: 4.5rem; }
.viz-cta-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 2.5rem; padding: 2rem; border: 1px solid var(--line); border-radius: 16px; }
.dv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.dv-grid label, .dv-msg { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; }
.dv-msg { margin-bottom: 14px; }
.hidden-field { position: absolute; left: -9999px; }
@media (max-width: 1024px) {
  .configurator { grid-template-columns: 1fr; gap: 2rem; }
  .viz-cta-inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dv-grid { grid-template-columns: 1fr; }
  .sel-pair { grid-template-columns: 1fr; }
  .hw-card { grid-template-columns: 104px 1fr; }
  .hw-shot { width: 104px; height: 104px; }
}

/* ===== V3 homepage teaser (one-kitchen) ===== */
.teaser-stage { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.teaser-stage img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .5s ease; }
.teaser-caption { position: absolute; bottom: 12px; left: 12px; font: 500 .78rem/1 var(--font-body, "Jost", sans-serif); color: #F5F0E6; background: rgba(26,23,18,.72); padding: .5em .9em; border-radius: 999px; }
/* ===== V3 services + header polish ===== */
@media (min-width: 901px) and (max-width: 1180px) { .nav-links { gap: 1.1rem; } .nav-links a:not(.btn) { font-size: .82rem; } .nav-links .btn { padding: .6rem 1rem; } }
.svc-band { max-height: 520px; overflow: hidden; }
@media (max-width: 1024px) { .svc-band { max-height: 420px; } }
.cfg-h { font-size: 1.05rem; margin-bottom: .7rem; font-family: var(--font-body, "Jost", sans-serif); font-weight: 600; letter-spacing: .01em; }
.hw-shot img.is-detail { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.hw-shot:has(img.is-detail) { padding: 0; background: transparent; }

/* ===== V3 hero assembly sequence ===== */
.hero-assembly { position: relative; }
.hero-assembly img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease, ease); transform: scale(1.04); }
.hero-assembly img.is-on { opacity: 1; }
.hero-assembly.is-done img.is-on { transform: scale(1); transition: opacity .9s var(--ease, ease), transform 14s linear; }
.hero-assembly .render-badge { position: absolute; top: 12px; left: 12px; z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .hero-assembly img { transition: none; transform: none; }
}
.hero-assembly video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; z-index: 1; }
.hero-assembly.video-live video { opacity: 1; }
.hero-assembly.video-ended video { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero-assembly video { display: none; } }
.hero-play { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%,-50%); display: inline-flex; align-items: center; gap: 8px; padding: .75em 1.3em; border-radius: 999px; border: 1px solid rgba(245,240,230,.45); background: rgba(26,23,18,.62); color: #F5F0E6; font: 500 .85rem/1 var(--font-body); cursor: pointer; backdrop-filter: blur(4px); }
.hero-play:hover { background: rgba(26,23,18,.8); border-color: var(--accent); }
.hero-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hero-assembly.video-live video { display: block; opacity: 1; } }

/* ===== V3.6 light-only + header/CTA legibility ===== */
/* Header always sits on ivory: no transparent-over-hero state */
.site-header { background: var(--header-bg, #F5F0E6); border-bottom: 1px solid var(--line-soft); }
.site-header .logo img, .site-header .brand img { filter: none; }
/* Right-size the header CTA: one line, normal weight */
.nav-links .btn {
  padding: .62em 1.15em; font-size: .78rem; letter-spacing: .09em;
  white-space: nowrap; border-width: 1px; line-height: 1;
}
.nav-links .btn::after { font-size: 1.05rem; margin-left: .35em; }
/* Ghost/secondary buttons on dark panels must use ivory ink */
.on-ink .btn:not(.solid) { color: var(--ivory); border-color: rgba(245,240,230,.55); }
.on-ink .btn:not(.solid):hover, .on-ink .btn:not(.solid):focus-visible { background: var(--accent); border-color: var(--accent); color: var(--ink); }
/* Footer logo is always the light mark on espresso */
.footer-logo img { max-width: 220px; height: auto; opacity: 1; }

/* ===== V3.7 visualizer: wider stage, cleaner CTA, print spec sheet ===== */
.configurator { grid-template-columns: minmax(0,2.1fr) minmax(0,1fr); gap: 2.2rem; }
@media (min-width: 1400px) { .configurator { grid-template-columns: minmax(0,2.4fr) minmax(0,1fr); } }
.cfg-stage { box-shadow: 0 24px 60px rgba(26,23,18,.18); }
.sel-solo { display: flex; flex-direction: column; gap: 5px; }
.cfg-actions .btn { width: 100%; justify-content: center; }

.viz-cta-inner { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 3rem; padding: clamp(1.6rem,3vw,2.6rem); background: var(--bg-2); border-radius: 18px; }
.viz-cta-copy h2 { margin: .2rem 0 .7rem; }
.viz-cta-points { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .55rem; }
.viz-cta-points li { position: relative; padding-left: 1.4rem; font-size: .92rem; color: var(--text-2); }
.viz-cta-points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.viz-cta-call { margin-top: 1.3rem; font-size: .92rem; color: var(--text-2); }
.viz-cta-call a { color: var(--accent); font-weight: 500; }
.viz-cta form label { font: 500 .72rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
.viz-cta input, .viz-cta textarea { width: 100%; padding: .75em .85em; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font: 400 .95rem/1.3 var(--font-body); }
.viz-cta input:focus-visible, .viz-cta textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.viz-cta .btn { margin-top: .3rem; }

/* print spec sheet: hidden on screen, the whole page when printing */
.spec-sheet { display: none; }
@media print {
  body * { visibility: hidden !important; }
  .spec-sheet, .spec-sheet * { visibility: visible !important; }
  .spec-sheet { display: block !important; position: absolute; inset: 0; padding: 0; background: #fff; color: #1A1712; }
  .sp-head { display: flex; align-items: center; gap: 16px; border-bottom: 2px solid #C9AD6E; padding-bottom: 12px; margin-bottom: 18px; }
  .sp-head img { width: 120px; height: auto; }
  .sp-title { font: 600 20px/1.2 Georgia, serif; margin: 0; }
  .sp-sub { font: 400 11px/1.4 Arial, sans-serif; color: #6b6355; margin: 4px 0 0; }
  .sp-render { width: 100%; height: auto; border-radius: 8px; break-inside: avoid; }
  .sp-badge { font: 400 10px/1.4 Arial, sans-serif; color: #6b6355; margin: 8px 0 18px; }
  .sp-specs { display: grid; gap: 14px; margin: 0 0 20px; }
  .sp-specs div { border-bottom: 1px solid #e6e0d4; padding-bottom: 10px; }
  .sp-specs dt { font: 600 10px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8a7c5f; margin-bottom: 4px; }
  .sp-specs dd { margin: 0; }
  .sp-specs strong { display: block; font: 600 15px/1.3 Georgia, serif; }
  .sp-specs span { display: block; font: 400 11px/1.4 Arial, sans-serif; color: #6b6355; }
  .sp-specs em { display: block; font: italic 400 11px/1.5 Georgia, serif; color: #4a463f; margin-top: 3px; }
  .sp-foot { border-top: 1px solid #e6e0d4; padding-top: 10px; font: 400 10px/1.5 Arial, sans-serif; color: #6b6355; }
  @page { margin: 14mm; }
}

/* ===== V3.7 credentials moved to footer ===== */
.footer-creds { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1rem,3vw,2.4rem); padding-bottom: clamp(1.6rem,3vw,2.4rem); margin-bottom: clamp(1.6rem,3vw,2.4rem); border-bottom: 1px solid rgba(245,240,230,.16); }
.footer-creds div { display: flex; flex-direction: column; gap: .3rem; }
.footer-creds b { font: 500 1.06rem/1.1 var(--font-display); color: var(--accent); letter-spacing: .01em; }
.footer-creds span { font: 400 .78rem/1.35 var(--font-body); color: rgba(245,240,230,.72); letter-spacing: .02em; }
@media (max-width: 780px) { .footer-creds { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 1.3rem; } }

/* text link inside a swatch strip must not inherit the 64px swatch width */
.mat-strip { align-items: center; }
.mat-strip .text-link { width: auto; flex: 0 1 auto; white-space: normal; max-width: 22ch; margin-left: .6rem; line-height: 1.35; }
@media (max-width: 620px) { .mat-strip .text-link { flex-basis: 100%; margin-left: 0; margin-top: .8rem; max-width: none; } }

/* ===== V3.8 portfolio filter bar ===== */
.pf-controls { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; padding-top: clamp(1.4rem,3vw,2.2rem); }
.pf-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-tab { padding: .62em 1.15em; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-2); font: 500 .82rem/1 var(--font-body); letter-spacing: .04em; cursor: pointer; transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); }
.pf-tab:hover { border-color: var(--accent); color: var(--text); }
.pf-tab.is-on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.pf-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-count { font: 400 .82rem/1 var(--font-body); color: var(--text-2); margin: 0; letter-spacing: .03em; }
.work-card[hidden] { display: none !important; }

/* ===== V3.8 contact: quick-contact strip + form card ===== */
.quick-contact { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; padding-block: clamp(1.2rem,3vw,2rem) 0; }
.qc-card { display: flex; flex-direction: column; gap: .28rem; padding: 1.15rem 1.3rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); text-decoration: none; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.qc-card:hover, .qc-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.qc-k { font: 500 .7rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .11em; color: var(--accent); }
.qc-v { font: 500 1.06rem/1.25 var(--font-display); color: var(--text); }
.qc-n { font: 400 .82rem/1.35 var(--font-body); color: var(--text-2); }
@media (max-width: 820px) { .quick-contact { grid-template-columns: 1fr; } }
.on-ink .form-card { background: rgba(245,240,230,.05); border: 1px solid rgba(245,240,230,.16); border-radius: 16px; padding: clamp(1.4rem,3vw,2.2rem); }
.on-ink .form-card input, .on-ink .form-card select, .on-ink .form-card textarea { background: rgba(245,240,230,.06); border: 1px solid rgba(245,240,230,.22); color: var(--ivory); border-radius: 8px; padding: .72em .85em; width: 100%; }
.on-ink .form-card input:focus-visible, .on-ink .form-card select:focus-visible, .on-ink .form-card textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.on-ink .form-card label { color: rgba(245,240,230,.78); font: 500 .72rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.on-ink .form-card option { background: #1A1712; color: #F5F0E6; }

/* ===== V3.8 two-tone control ===== */
.tone-row { display: flex; gap: 8px; margin: .9rem 0 .8rem; }
.tone-btn { flex: 1; padding: .6em 1em; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--text-2); font: 500 .82rem/1 var(--font-body); cursor: pointer; transition: all .25s var(--ease); }
.tone-btn:hover { border-color: var(--accent); color: var(--text); }
.tone-btn.is-on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.tone-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cfg-select:disabled { opacity: .45; cursor: not-allowed; }

/* ===== V3.9 hero/header legibility, splash removal ===== */
/* hero panel is espresso: secondary button must be ivory, not ink */
.hero-panel .btn:not(.solid) { color: var(--ivory); border-color: rgba(245,240,230,.55); }
.hero-panel .btn:not(.solid):hover, .hero-panel .btn:not(.solid):focus-visible { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.hero-panel .btn.solid { color: var(--ink); }
/* header sits on ivory sitewide */
.site-header, .site-header.header-on-hero { background: #F5F0E6; border-bottom: 1px solid var(--line-soft); }
.site-header .brand-words b, .site-header .brand-words span { color: var(--ink); }
.site-header .nav-links a:not(.btn) { color: var(--ink-2); }
.site-header .nav-links a:not(.btn):hover { color: var(--accent); }
.site-header .nav-links .btn { color: var(--ink); border-color: var(--accent); }
.site-header .nav-links .btn:hover { background: var(--accent); color: #F5F0E6; }
.site-header .brand img { width: auto; height: 38px; }
/* splash fully retired */
.splash { display: none !important; }

/* ===== V3.10 fullscreen intro film ===== */
html.intro-on, html.intro-on body { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 9999; background: #0d0b08; display: none; opacity: 1; transition: opacity .65s var(--ease, ease); }
html.intro-on .intro { display: block; }
.intro video { width: 100%; height: 100%; object-fit: cover; display: block; }
.intro-skip { position: absolute; bottom: clamp(1.2rem,4vw,2.4rem); right: clamp(1.2rem,4vw,2.4rem); z-index: 2; padding: .7em 1.3em; border-radius: 999px; border: 1px solid rgba(245,240,230,.45); background: rgba(13,11,8,.55); color: #F5F0E6; font: 500 .78rem/1 var(--font-body); letter-spacing: .09em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(4px); transition: background .25s ease, border-color .25s ease; }
.intro-skip:hover { background: rgba(13,11,8,.85); border-color: var(--accent); }
.intro-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .intro { display: none !important; } }

/* ===== V3.11 intro exit: FLIP landing ===== */
.intro { background: #0d0b08; transition: background-color .7s ease; }
.intro.is-landing { background: transparent; pointer-events: none; }
.intro-stage { position: absolute; inset: 0; overflow: hidden; }
.intro-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.intro.is-landing .intro-stage {
  transition: transform 1.15s cubic-bezier(.22,1,.36,1), border-radius 1.15s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 24px 60px rgba(26,23,18,.28);
}
.intro-freeze { display: none; }
.intro-skip.is-gone { opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.intro.intro-leave { opacity: 0; pointer-events: none; transition: opacity 1.25s cubic-bezier(.4,0,.2,1); }

/* hero hidden while the film is still on screen */
html.intro-on .hero-panel > * { opacity: 0; transform: translateY(16px); }
html.intro-on .hero-media { opacity: 1; }
/* during the landing the real hero image stays hidden — the film is standing in for it */
html.intro-landing .hero-media { opacity: 1; }
/* the moment the film lands, the real image takes over on the identical frame */
html.intro-landed .hero-media { opacity: 1 !important; transform: none !important; animation: none !important; }

/* panel copy rises while the film flies in */
html.intro-done .hero-panel > * { animation: heroRise .9s cubic-bezier(.22,1,.36,1) both; }
html.intro-done .hero-panel > *:nth-child(1) { animation-delay: .15s; }
html.intro-done .hero-panel > *:nth-child(2) { animation-delay: .29s; }
html.intro-done .hero-panel > *:nth-child(3) { animation-delay: .43s; }
html.intro-done .hero-panel > *:nth-child(4) { animation-delay: .57s; }
html.intro-done .hero-panel > *:nth-child(5) { animation-delay: .71s; }
html.intro-done .hero-panel > *:nth-child(6) { animation-delay: .83s; }
@keyframes heroRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* reduced motion or no JS: hero renders plainly, no choreography */
html.intro-instant .hero-panel > *,
html.intro-instant .hero-media { opacity: 1 !important; transform: none !important; animation: none !important; }
/* safety: if the overlay ever fails to clear, the hero must not stay hidden */
html:not(.intro-on) .hero-panel > *, html:not(.intro-on) .hero-media { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html.intro-on .hero-panel > *, html.intro-on .hero-media,
  html.intro-done .hero-panel > *, html.intro-done .hero-media,
  html.intro-landing .hero-media { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ===== V3.11b hero frames: landing frame -> lived-in ===== */
.hero-assembly { position: relative; overflow: hidden; }
.hero-frame-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s cubic-bezier(.4,0,.2,1); }
.hero-frame-img.is-on { opacity: 1; }
#hero-final.is-on { animation: heroBreathe 22s ease-out forwards; }
@keyframes heroBreathe { from { transform: scale(1.035); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero-frame-img { transition: none; }
  #hero-final.is-on { animation: none; transform: none; }
}

/* ===== V3.12 hero: full-bleed image + floating card ===== */
.hero-bleed { position: relative; display: block; min-height: min(94vh, 900px); padding: 0; overflow: hidden; }
.hero-bleed .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.hero-bleed .hero-frame-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* legibility insurance: a soft vignette under the card, never across the room */
.hero-bleed::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, rgba(26,23,18,.55) 0%, rgba(26,23,18,.22) 34%, transparent 58%); }
.hero-card {
  position: absolute; z-index: 2; left: clamp(1.1rem, 5vw, 5rem); bottom: clamp(1.6rem, 6vh, 5rem);
  width: min(46ch, calc(100% - 2.2rem)); background: rgba(20,17,13,.93); color: var(--ivory);
  border: 1px solid rgba(201,173,110,.22); border-radius: 16px;
  padding: clamp(1.5rem, 3.2vw, 2.6rem); backdrop-filter: blur(6px);
  box-shadow: 0 30px 70px rgba(0,0,0,.38);
}
.hero-card .eyebrow { color: var(--accent); }
.hero-card .hero-title { color: var(--ivory); margin: .7rem 0 0; font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.06; }
.hero-card .hero-title em { color: var(--accent); }
.hero-card .hero-sub { color: rgba(245,240,230,.82); margin-top: 1rem; font-size: clamp(.95rem, 1.15vw, 1.05rem); max-width: 42ch; }
.hero-card .hero-ctas { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hero-card .btn:not(.solid) { color: var(--ivory); border-color: rgba(245,240,230,.5); }
.hero-card .btn:not(.solid):hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.hero-card .hero-creds { display: flex; gap: 1.3rem; flex-wrap: wrap; margin: 1.5rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid rgba(245,240,230,.16); font: 500 .68rem/1 var(--font-body); letter-spacing: .13em;
  text-transform: uppercase; color: rgba(245,240,230,.62); }
.hero-bleed .render-badge { z-index: 3; top: calc(var(--header-h) + 14px); left: clamp(1.1rem, 5vw, 5rem); }
.hero-bleed .hero-tag { position: absolute; z-index: 3; right: clamp(1.1rem, 5vw, 5rem); bottom: clamp(1.6rem, 6vh, 5rem);
  background: rgba(20,17,13,.82); color: var(--ivory); padding: .7em 1.2em; border-radius: 999px;
  border: 1px solid rgba(201,173,110,.3); font: 400 .78rem/1 var(--font-body); letter-spacing: .06em; text-decoration: none;
  backdrop-filter: blur(4px); transition: border-color .25s var(--ease), background .25s var(--ease); }
.hero-bleed .hero-tag b { color: var(--accent); font-weight: 500; }
.hero-bleed .hero-tag:hover { border-color: var(--accent); background: rgba(20,17,13,.95); }
@media (max-width: 820px) {
  .hero-bleed { min-height: 88vh; }
  .hero-card { left: 0; right: 0; bottom: 0; width: auto; border-radius: 16px 16px 0 0; border-bottom: 0; }
  .hero-bleed .hero-tag { display: none; }
  .hero-bleed::after { background: linear-gradient(180deg, rgba(26,23,18,.35) 0%, transparent 40%, rgba(26,23,18,.55) 100%); }
}
/* the card supplies its own padding — cancel the legacy split-hero panel rules */
.hero-bleed .hero-card.hero-panel { padding: clamp(1.5rem, 3.2vw, 2.6rem); display: block; }
.hero-bleed.hero { display: block; grid-template-columns: none; background: var(--ink); }
.hero-bleed .hero-card .eyebrow { margin-bottom: 0; }

/* =========================================================
   V3.13 · MOBILE PASS
   Fixes: oversized type inside narrow containers (overlap),
   grids that never collapsed, and full-bleed hero on phones.
   ========================================================= */

/* --- 1. nothing may push the page sideways --- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg, canvas { max-width: 100%; }

@media (max-width: 900px) {
  /* --- 2. typography: the real cause of overlapping words --- */
  .display-xl { font-size: clamp(2rem, 8.5vw, 3rem); line-height: 1.08; }
  .display-lg { font-size: clamp(1.75rem, 7vw, 2.6rem); line-height: 1.12; }
  .display-md { font-size: clamp(1.45rem, 5.6vw, 2.1rem); line-height: 1.15; }
  h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
  .eyebrow { font-size: .66rem; letter-spacing: .16em; line-height: 1.5; }
  .lede { font-size: 1rem; line-height: 1.6; }

  /* --- 3. every two/three/four-column grid becomes one --- */
  .intro-grid, .stage-grid, .about-grid, .contact-grid,
  .viz-teaser-grid, .viz-cta-inner, .configurator,
  .svc-row, .ledger-grid, .board-grid { grid-template-columns: 1fr !important; }
  .svc-sub, .values-grid, .refs-grid { grid-template-columns: 1fr 1fr !important; }
  .studies-grid, .work-grid { grid-template-columns: 1fr !important; grid-template-areas: none !important; }
  .work-card { grid-area: auto !important; }
  .palette { grid-template-columns: repeat(5, 1fr); height: 30px; }

  /* --- 4. header + nav --- */
  .site-header .container { gap: .6rem; }
  .site-header .brand img { height: 30px; }
  .site-header .brand-words { font-size: .62rem; letter-spacing: .12em; }
  .nav-links .btn { padding: .55em .9em; font-size: .7rem; }
}

/* --- 5. hero on phones: image on top, card below, nothing overlapping --- */
@media (max-width: 820px) {
  .hero-bleed { min-height: auto; display: flex; flex-direction: column; }
  .hero-bleed .hero-media { position: relative; inset: auto; height: 52vh; min-height: 300px; }
  .hero-bleed::after { display: none; }
  .hero-card {
    position: relative; left: auto; right: auto; bottom: auto; width: auto;
    margin: -2.6rem 1rem 0; border-radius: 16px; padding: 1.5rem 1.3rem;
    backdrop-filter: none; background: rgba(20,17,13,.97);
  }
  .hero-card .hero-title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .hero-card .hero-sub { font-size: .95rem; }
  .hero-card .hero-ctas { flex-direction: column; align-items: stretch; gap: .55rem; }
  .hero-card .hero-ctas .btn { width: 100%; justify-content: center; padding: .95rem 1.2rem; font-size: .76rem; letter-spacing: .14em; }
  .hero-card .hero-creds { gap: .8rem 1rem; font-size: .62rem; letter-spacing: .1em; }
  .hero-bleed .render-badge { top: 12px; left: 12px; font-size: .6rem; }
}

@media (max-width: 620px) {
  /* --- 6. visualizer: stage first, controls stacked and reachable --- */
  .configurator { gap: 1.4rem; padding-block: 1.2rem 2.4rem; }
  .cfg-stage-col { order: 1; }
  .cfg-controls { order: 2; }
  .sel-pair { grid-template-columns: 1fr; gap: 12px; }
  .cfg-select { font-size: 16px; }            /* 16px stops iOS zooming on focus */
  .tone-row { flex-direction: column; }
  .pick-preview { grid-template-columns: 56px 1fr; gap: 10px; }
  .pick-preview img { width: 56px; height: 56px; }
  .cfg-scenes { bottom: 8px; right: 8px; }
  .scene-btn { font-size: .7rem; padding: .45em .75em; }
  .cfg-caption { font-size: .84rem; }

  /* --- 7. forms: full width, no iOS zoom --- */
  .dv-grid { grid-template-columns: 1fr; }
  .viz-cta input, .viz-cta textarea,
  .form-card input, .form-card select, .form-card textarea { font-size: 16px; }
  .viz-cta-inner { padding: 1.3rem 1.1rem; gap: 1.6rem; }
  .btn { padding: .9rem 1.4rem; font-size: .76rem; letter-spacing: .14em; }

  /* --- 8. portfolio filter --- */
  .pf-controls { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .pf-tabs { width: 100%; }
  .pf-tab { flex: 1 1 auto; text-align: center; font-size: .76rem; padding: .55em .8em; }

  /* --- 9. services: kill the narrow-column text stacking --- */
  .svc-sub { grid-template-columns: 1fr !important; }
  .mat-strip { gap: .5rem; }
  .mat-strip .text-link { flex-basis: 100%; margin: .7rem 0 0; max-width: none; }
  .svc-nav ul { gap: 1.1rem; }

  /* --- 10. footer --- */
  .footer-creds { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  .footer-creds b { font-size: .95rem; }
  .footer-creds span { font-size: .72rem; }

  /* --- 11. intro film on phones --- */
  .intro-skip { bottom: 1rem; right: 1rem; padding: .8em 1.2em; font-size: .72rem; }
}

/* --- 12. very small screens --- */
@media (max-width: 380px) {
  .container { width: min(var(--wrap), 100% - 1.6rem); }
  .hero-card { margin-inline: .7rem; padding: 1.25rem 1.05rem; }
  .footer-creds { grid-template-columns: 1fr; }
  .svc-sub, .values-grid, .refs-grid { grid-template-columns: 1fr !important; }
}
/* about page still uses the four-up trust band — collapse it on phones */
@media (max-width: 820px) { .trust .container { grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; } .trust-item + .trust-item { border-left: 0; } }
@media (max-width: 420px) { .trust .container { grid-template-columns: 1fr; } }

/* =========================================================
   V3.13b · MOBILE FIXES FROM DEVICE SCREENSHOTS
   ========================================================= */

/* --- collapse at 1024, not 900: tablets were still splitting --- */
@media (max-width: 1024px) {
  .configurator, .viz-cta-inner, .values-grid, .svc-sub,
  .stage-grid, .board-grid, .viz-teaser-grid { grid-template-columns: 1fr !important; }
  .refs-grid { grid-template-columns: 1fr 1fr !important; }
  .studies-grid, .work-grid { grid-template-columns: repeat(2, 1fr) !important; grid-template-areas: none !important; }
  .work-card { grid-area: auto !important; }
}
@media (max-width: 760px) {
  .studies-grid, .work-grid { grid-template-columns: 1fr !important; }
}

/* --- label/value rows stacked: they were colliding mid-sentence --- */
@media (max-width: 760px) {
  .stage-facts li { flex-direction: column; gap: .3rem; align-items: flex-start; }
  .stage-facts li b { font-size: .7rem; letter-spacing: .12em; }
  .fact-list li { flex-direction: column; gap: .25rem; align-items: flex-start; }
}

/* --- every CTA pair stacks to equal full-width buttons --- */
@media (max-width: 760px) {
  .hero-ctas, .journey-cta, .work-cta, .cta .container > div,
  .cta-row, .band-ctas { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; }
  .hero-ctas .btn, .journey-cta .btn, .work-cta .btn,
  .cta .btn, .cta-row .btn, .band-ctas .btn,
  .section.cta .btn {
    width: 100%; justify-content: center; text-align: center;
    padding: 1rem 1.1rem; font-size: .74rem; letter-spacing: .12em; line-height: 1.25;
  }
  .btn::after { font-size: 1.1rem; }
}

/* --- the render badge was landing on top of the hero copy --- */
@media (max-width: 820px) {
  .hero-bleed .hero-media { position: relative; overflow: hidden; }
  .hero-bleed .render-badge { position: absolute; top: 10px; left: 10px; bottom: auto; z-index: 4; }
  .hero-card { z-index: 5; }
}

/* --- visualizer on small screens --- */
@media (max-width: 1024px) {
  .cfg-stage-col { order: 1; }
  .cfg-controls { order: 2; }
  .cfg-stage { aspect-ratio: 16/10; }
  .cfg-caption { font-size: .9rem; line-height: 1.4; }
  .pick-preview { grid-template-columns: 64px 1fr; }
  .pick-preview img { width: 64px; height: 64px; }
  .slab-note, .cfg-note { font-size: .85rem; line-height: 1.5; }
  .viz-cta-copy { max-width: none; }
  .viz-cta-points li { font-size: .9rem; }
}

/* --- request form: fields were half-width beside a squeezed text column --- */
@media (max-width: 1024px) {
  .viz-cta form { width: 100%; }
  .dv-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .dv-grid { grid-template-columns: 1fr; } }

/* nav-open class mirrors the :has() rules for browsers without :has (older Safari) */
@media (max-width: 900px) {
  html.nav-open .site-header { background: transparent; border-bottom: 0; }
  html.nav-open .site-header .brand,
  html.nav-open .site-header .brand-words { opacity: 0; pointer-events: none; }
  html.nav-open .nav-toggle span { background: var(--ivory); }
  html.nav-open, html.nav-open body { overflow: hidden; }
}

/* =========================================================
   V3.13c · MENU CONTRAST + RIGHT DRAWER + CREDENTIAL TYPE
   ========================================================= */

@media (max-width: 900px) {
  /* 1. beat the .site-header rule that was forcing dark ink onto a dark drawer */
  .site-header .nav-links a:not(.btn),
  html.nav-open .site-header .nav-links a:not(.btn) { color: var(--ivory) !important; }
  .site-header .nav-links a:not(.btn):hover,
  .site-header .nav-links a:not(.btn):focus-visible { color: var(--accent) !important; }
  .site-header .nav-links .btn { color: var(--ivory) !important; border-color: var(--accent); }
  .site-header .nav-links .btn:hover { background: var(--accent); color: var(--ink) !important; }

  /* 2. drawer slides in from the RIGHT instead of filling the screen */
  .nav-links {
    inset: 0 0 0 auto;                     /* right-anchored */
    width: min(84vw, 340px);
    justify-content: flex-start;
    padding: calc(var(--header-h) + 1.4rem) 1.5rem 2rem;
    gap: 0;
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(.22,1,.36,1), opacity .28s ease, visibility .38s;
    box-shadow: -24px 0 60px rgba(0,0,0,.4);
    backdrop-filter: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a:not(.btn) { font-size: 1.35rem; padding: .8rem 0; }
  .nav-links li { border-bottom-color: rgba(245,240,230,.12); }

  /* dim the page behind the drawer */
  html.nav-open body::before {
    content: ""; position: fixed; inset: 0; z-index: 64;
    background: rgba(13,11,8,.62);
  }

  /* 3. close button pinned top-right, always above the drawer */
  .nav-toggle { position: relative; }
  html.nav-open .nav-toggle {
    position: fixed; top: .7rem; right: clamp(1rem, 5vw, 1.6rem); z-index: 80;
  }
  html.nav-open .site-header { background: transparent; }
}

/* --- 4. credentials: body font, lining numerals, readable at any size --- */
.footer-creds b, .trust-item b, .hero-creds span, .stat, .stat span {
  font-family: var(--font-body) !important;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .04em;
}
.footer-creds div { gap: .35rem; }
.footer-creds b { font-size: .98rem; font-weight: 600; color: var(--accent); line-height: 1.2; }
.footer-creds span { font-size: .78rem; line-height: 1.45; color: rgba(245,240,230,.74); letter-spacing: .03em; text-transform: none; }
.trust-item b { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 600; }
.trust-item span { font-size: .78rem; letter-spacing: .1em; }

/* --- 5. showroom fact rows: labels and values aligned, no orphan digits --- */
.fact-list li { gap: .5rem; }
@media (max-width: 900px) {
  .fact-list li { flex-direction: column; align-items: flex-start !important; text-align: left !important; }
  .fact-list li > span { text-align: left !important; width: 100%; }
  .fact-list li > span:first-child { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
  .fact-list li > span:last-child { font-size: .95rem; line-height: 1.5; overflow-wrap: break-word; }
}

/* blur was softening type on mobile — remove it wherever it sat over text */
@media (max-width: 900px) {
  .hero-card { backdrop-filter: none !important; background: rgba(20,17,13,.97); }
  .intro-skip { backdrop-filter: none; background: rgba(13,11,8,.8); }
  .hero-bleed .hero-tag { backdrop-filter: none; }
  .nav-links, .nav-links * { backdrop-filter: none !important; }
}

/* hero secondary link row */
.hero-card .hero-links { margin: .9rem 0 0; }
.hero-card .hero-links .text-link { color: rgba(245,240,230,.8); border-bottom-color: rgba(245,240,230,.3); font-size: .82rem; }
.hero-card .hero-links .text-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 760px) { .hero-card .hero-links { text-align: center; margin-top: .8rem; } }

/* =========================================================
   V3.13e · DRAWER CONTAINING-BLOCK FIX
   .site-header.scrolled used backdrop-filter: blur(12px).
   A filtered ancestor becomes the containing block for
   position:fixed, so once the page was scrolled the drawer
   was trapped inside the header's box (short panel, links
   spilling out) and the blur softened everything under it.
   The header is opaque ivory now, so the blur bought nothing.
   ========================================================= */
.site-header.scrolled { backdrop-filter: none !important; background: #F5F0E6; }
.site-header { backdrop-filter: none !important; filter: none !important; }

/* belt and braces: the drawer must escape any ancestor box */
@media (max-width: 900px) {
  .nav-links {
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
    height: 100dvh; max-height: 100dvh;
  }
  html.nav-open .site-header { background: transparent !important; }
}

/* =========================================================
   V3.14 · TYPE FITTING, MENU POSITION, INTRO FRAMING,
           HERO BUTTONS, BRAND LOCKUP
   ========================================================= */

/* --- 1. stop mid-word hyphen breaks ("materi-als") --- */
h1, h2, h3, .display-xl, .display-lg, .display-md {
  hyphens: manual !important; -webkit-hyphens: manual !important;
  overflow-wrap: break-word; word-break: normal;
}
@media (max-width: 900px) {
  .page-hero h1, .viz-hero h1 { font-size: clamp(1.75rem, 7.2vw, 2.4rem); line-height: 1.14; }
  .viz-hero .lede, .page-hero .lede { font-size: .95rem; line-height: 1.6; }
}

/* --- 2. hamburger sits hard right --- */
@media (max-width: 900px) {
  .site-header .container { justify-content: flex-start; gap: .75rem; }
  .site-header .brand { margin-right: auto; }
  .nav-toggle { order: 9; margin-left: auto; flex: none; }
  .site-header nav { order: 10; flex: 0 0 auto; width: 0; }
}

/* --- 3. intro film fills the phone screen (contain left dead space) --- */
@media (max-aspect-ratio: 1/1) {
  .intro { background: #0d0b08; }
  .intro-stage { position: absolute; inset: 0; display: block; }
  .intro-stage video {
    position: absolute; inset: 0;
    width: 100%; height: 100%; max-height: none;
    object-fit: cover; object-position: 50% 50%;
  }
}

/* --- 4. hero buttons: equal width, one line, aligned --- */
.hero-card .hero-ctas { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.hero-card .hero-ctas .btn {
  width: 100%; justify-content: space-between; text-align: left;
  padding: 1rem 1.3rem; font-size: .78rem; letter-spacing: .12em; line-height: 1.2;
  white-space: nowrap;
}
@media (min-width: 900px) {
  .hero-card .hero-ctas { grid-template-columns: 1fr 1fr; }
  .hero-card .hero-ctas .btn { font-size: .72rem; letter-spacing: .1em; padding: .95rem 1.1rem; }
}
@media (max-width: 420px) {
  .hero-card .hero-ctas .btn { font-size: .72rem; letter-spacing: .08em; padding: .95rem 1rem; }
}

/* --- 5. brand lockup: even baseline, no phantom gap from letter-spacing --- */
.brand { gap: .65rem; }
.brand-words { line-height: 1.15; gap: .1rem; }
.brand-words b, .brand-words span {
  font-size: .78rem; letter-spacing: .22em; margin-right: -.22em;  /* cancel trailing track */
  white-space: nowrap;
}
.brand-words b { font-weight: 600; }
@media (max-width: 900px) { .brand img { height: 34px; } .brand-words b, .brand-words span { font-size: .64rem; letter-spacing: .18em; margin-right: -.18em; } }

/* =========================================================
   V3.15 · HERO BUTTON, WORK GRID, VISUALIZER LAYOUT
   ========================================================= */

/* --- 1. hero buttons: label + arrow travel together, centred --- */
.hero-card .hero-ctas .btn {
  justify-content: center; text-align: center; gap: .7rem;
}
.hero-card .hero-ctas .btn::after { margin-left: 0; }

/* --- 2. selected work: one consistent crop, editorial framing --- */
.work-card figure { aspect-ratio: 4 / 3; background: var(--bg-2); }
.work-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-card figure::before {                      /* soft gradient so captions sit on tone */
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%; z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(20,17,13,.42));
  opacity: 0; transition: opacity .4s var(--ease); pointer-events: none;
}
.work-card:hover figure::before, .work-card:focus-visible figure::before { opacity: 1; }
.work-card:hover img, .work-card:focus-visible img { transform: scale(1.045); }
.work-grid .work-card figcaption { padding-top: .85rem; }
/* the feature tile earns a wider crop */
.work-grid .wc-a figure, .work-grid .wc-b figure { aspect-ratio: 3 / 2; }

/* --- 3. visualizer: stage on top at full width, controls in a row beneath --- */
@media (min-width: 1025px) {
  .configurator { grid-template-columns: 1fr; gap: 1.8rem; }
  .cfg-stage-col { width: 100%; }
  .cfg-stage { aspect-ratio: 16 / 9; max-height: 74vh; }
  .cfg-stage-col .cfg-caption { text-align: center; font-size: 1rem; margin-top: 1rem; }
  .cfg-controls {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.2rem, 2.4vw, 2.2rem); align-items: start;
    border-top: 1px solid var(--line); padding-top: 1.8rem;
  }
  .cfg-controls .cfg-group { margin-bottom: 0; }
  .cfg-controls .cfg-actions { grid-column: 3; align-self: end; margin-top: 0; }
  .cfg-controls .cfg-group:nth-of-type(2) { grid-column: 2; }
  .pick-preview { margin-top: .9rem; }
}
@media (min-width: 1400px) {
  .configurator { grid-template-columns: 1fr; }
  .cfg-stage { max-height: 78vh; }
}

/* =========================================================
   V3.15b · MENU FREEZE FIX
   .site-header{z-index:60} creates a stacking context, so the
   drawer's z-index:65 could never rise above body::before at 64.
   The dim layer was therefore ON TOP of the menu, eating clicks
   and darkening it. Dim drops below the header; header rises.
   ========================================================= */
@media (max-width: 900px) {
  html.nav-open body::before { z-index: 50; background: rgba(13,11,8,.6); }
  html.nav-open .site-header { z-index: 90 !important; }
  .nav-links { z-index: 5; }              /* within the header's context */
  html.nav-open .nav-toggle { z-index: 12; }
  .nav-links, .nav-links a, .nav-links .btn { pointer-events: auto; }
}

/* portrait intro: keep the frame edge-to-edge on every phone height */
@media (max-width: 900px) and (orientation: portrait) {
  .intro, .intro-stage { width: 100vw; height: 100dvh; height: 100svh; }
  .intro-stage video { width: 100vw; height: 100dvh; height: 100svh; object-fit: cover; }
  .intro-skip { bottom: max(1rem, env(safe-area-inset-bottom)); right: 1rem; }
}

/* =========================================================
   V3.16 · SELECTED WORK — dark gallery + material chips
   ========================================================= */
.work-band { background: var(--ink); color: var(--ivory); padding-block: clamp(3.5rem,7vw,6rem); }
.work-band .section-head h2 { color: var(--ivory); }
.work-band .eyebrow { color: var(--accent); }
.work-gallery { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1.4rem,3vw,2.6rem); }
.work-gallery .work-card { display: block; text-decoration: none; }
.work-gallery figure { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 12px; margin: 0; background: #0f0d0a; }
.work-gallery figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.work-gallery .work-card:hover img, .work-gallery .work-card:focus-visible img { transform: scale(1.05); }
.work-gallery figure::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(201,173,110,0); border-radius: 12px; transition: border-color .35s var(--ease); }
.work-gallery .work-card:hover figure::after { border-color: rgba(201,173,110,.55); }
.render-badge.sm { position: absolute; top: 10px; left: 10px; font-size: .58rem; padding: .38em .7em; }
.wc-meta { padding-top: 1rem; }
.wc-meta h3 { font-family: var(--font-display); font-size: clamp(1.1rem,1.8vw,1.4rem); font-weight: 500; color: var(--ivory); margin: 0; }
.wc-badge { font: 500 .68rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(245,240,230,.55); margin: .35rem 0 0; }
.wc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: .85rem 0 0; padding: 0; }
.wc-chips li { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .7rem .35rem .35rem; border: 1px solid rgba(245,240,230,.18); border-radius: 999px; }
.wc-chips img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.wc-chips .chip-dot { width: 18px; height: 18px; border-radius: 50%; margin-left: .15rem; border: 1px solid rgba(0,0,0,.2); }
.wc-chips span { font: 400 .74rem/1 var(--font-body); letter-spacing: .04em; color: rgba(245,240,230,.8); }
@media (max-width: 760px) { .work-gallery { grid-template-columns: 1fr; } }

/* =========================================================
   V3.16b · HERO BUTTONS, VISUALIZER ACTIONS, CREDENTIALS
   ========================================================= */

/* --- 1. hero CTAs: side by side only when there is genuinely room --- */
.hero-card .hero-ctas { grid-template-columns: 1fr; }
@media (min-width: 1200px) {
  .hero-card { width: min(52ch, calc(100% - 2.2rem)); }
  .hero-card .hero-ctas { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .hero-card .hero-ctas .btn { padding: 1rem .9rem; font-size: .7rem; letter-spacing: .07em; gap: .5rem; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .hero-card .hero-ctas { grid-template-columns: 1fr; }   /* stack rather than cramp */
  .hero-card .hero-ctas .btn { padding: 1rem 1.4rem; font-size: .76rem; letter-spacing: .1em; }
}

/* --- 2. visualizer controls: two even columns, action bar spanning both --- */
@media (min-width: 1025px) {
  .cfg-controls { grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; }
  .cfg-controls .cfg-group { grid-column: auto; }
  .cfg-controls .cfg-actions {
    grid-column: 1 / -1; margin-top: .4rem; padding-top: 1.4rem;
    border-top: 1px solid var(--line); display: flex; justify-content: center;
  }
  .cfg-controls .cfg-actions .btn { width: min(420px, 100%); justify-content: center; gap: .7rem; }
}
/* even, matched control widths everywhere */
.sel-pair { grid-template-columns: 1fr 1fr; gap: 12px; }
.tone-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: .9rem 0 .8rem; }
.tone-btn { width: 100%; padding: .7em 1em; }
.cfg-select, .tone-btn { height: 46px; }
.cfg-select { padding-block: 0; }
#pair-wrap { margin-top: .2rem; }

/* --- 3. one credentials treatment, used on every page --- */
.trust { background: var(--bg); border-block: 1px solid var(--line-soft); }
.trust .container {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(1rem,3vw,2.4rem); padding-block: clamp(1.6rem,3.2vw,2.4rem);
}
.trust-item { text-align: left; padding-inline: 0; display: flex; flex-direction: column; gap: .3rem; }
.trust-item + .trust-item { border-left: 1px solid var(--line-soft); padding-left: clamp(1rem,3vw,2.4rem); }
.trust-item b {
  font-family: var(--font-body) !important; font-weight: 600;
  font-size: clamp(1rem,1.5vw,1.15rem); line-height: 1.2; color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: .03em;
}
.trust-item .stat, .trust-item .stat span { font-size: inherit !important; color: inherit !important; font-weight: inherit !important; }
.trust-item span:not(.stat) {
  font: 400 .8rem/1.45 var(--font-body); letter-spacing: .03em;
  text-transform: none; color: var(--text-2); margin-top: 0;
}
.trust-item small { display: none; }
@media (max-width: 820px) {
  .trust .container { grid-template-columns: 1fr 1fr; gap: 1.3rem 1rem; }
  .trust-item + .trust-item { border-left: 0; padding-left: 0; }
  .trust-item:nth-child(3), .trust-item:nth-child(4) { padding-top: 1.1rem; border-top: 1px solid var(--line-soft); }
}
@media (max-width: 420px) { .trust .container { grid-template-columns: 1fr; } .trust-item:nth-child(2) { padding-top: 1.1rem; border-top: 1px solid var(--line-soft); } }

/* footer credentials: same rhythm, inverted */
.footer-creds div { gap: .3rem; }
.footer-creds b { font-size: 1rem; font-weight: 600; letter-spacing: .03em; }
.footer-creds span { font-size: .8rem; line-height: 1.45; }

/* =========================================================
   V3.16c · MOBILE BRAND LOCKUP + FOOTER CREDENTIAL SPACING
   ========================================================= */

/* --- 1. keep "Cabinets & Design" on phones, just smaller --- */
@media (max-width: 560px) {
  .brand-words { display: flex !important; }
  .brand { gap: .5rem; }
  .brand img { height: 30px; }
  .brand-words b, .brand-words span { font-size: .55rem; letter-spacing: .15em; margin-right: -.15em; line-height: 1.3; }
}
@media (max-width: 380px) {
  .brand img { height: 26px; }
  .brand-words b, .brand-words span { font-size: .5rem; letter-spacing: .12em; margin-right: -.12em; }
}

/* --- 2. credentials need air between the section above and the footer --- */
.footer-creds {
  padding-top: clamp(2.2rem, 5vw, 3.4rem);
  padding-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
  border-top: 1px solid rgba(245,240,230,.1);
  border-bottom: 1px solid rgba(245,240,230,.16);
}
.site-footer { padding-top: clamp(2.4rem, 5vw, 3.6rem); }
@media (max-width: 820px) {
  .footer-creds { padding-top: clamp(2rem, 7vw, 2.8rem); row-gap: 1.5rem; }
}

/* =========================================================
   V3.17 · VISUALIZER — presets, pin & compare, inspector
   ========================================================= */

/* presets */
.preset-group { grid-column: 1 / -1; }
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-btn {
  padding: .6em 1.1em; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--text-2); cursor: pointer;
  font: 500 .8rem/1 var(--font-body); letter-spacing: .04em;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.preset-btn:hover { border-color: var(--accent); color: var(--text); }
.preset-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* stage tools */
.stage-tools { position: absolute; top: 12px; right: 12px; z-index: 4; display: flex; gap: 6px; }
.stage-tool {
  padding: .5em .95em; border-radius: 999px; border: 1px solid rgba(245,240,230,.4);
  background: rgba(26,23,18,.68); color: #F5F0E6; cursor: pointer;
  font: 500 .72rem/1 var(--font-body); letter-spacing: .07em;
}
.stage-tool:hover { background: rgba(26,23,18,.9); border-color: var(--accent); }
.stage-tool[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.stage-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* compare */
.stage-pin { display: none; z-index: 2; opacity: 1 !important; }
.cmp-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(245,240,230,.9); z-index: 3; transform: translateX(-1px); }
.cmp-handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(245,240,230,.95);
  background: rgba(26,23,18,.72); cursor: ew-resize; display: grid; place-items: center; touch-action: none;
}
.cmp-handle span { width: 14px; height: 2px; background: #F5F0E6; box-shadow: 0 -5px 0 #F5F0E6, 0 5px 0 #F5F0E6; }
.cmp-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cmp-labels { display: flex; justify-content: space-between; gap: 1rem; margin: .7rem 2px 0; font: 500 .76rem/1.3 var(--font-body); color: var(--text-2); }
.cmp-labels span:first-child::before { content: "Pinned · "; color: var(--accent); }
.cmp-labels span:last-child { text-align: right; }
.cmp-labels span:last-child::before { content: "Current · "; color: var(--accent); }

/* inspector */
.viz-lightbox { position: fixed; inset: 0; z-index: 9998; background: rgba(13,11,8,.96); display: grid; grid-template-rows: auto 1fr auto; padding: clamp(.8rem,2vw,1.6rem); }
.viz-lightbox[hidden] { display: none; }
.vl-close { position: absolute; top: clamp(.6rem,2vw,1.2rem); right: clamp(.6rem,2vw,1.2rem); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(245,240,230,.35); background: rgba(26,23,18,.6); color: #F5F0E6; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.vl-close:hover { border-color: var(--accent); }
.vl-caption { color: #F5F0E6; font: 500 .82rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .7rem; padding-right: 56px; }
.vl-scroll { overflow: auto; -webkit-overflow-scrolling: touch; display: grid; place-items: center; border-radius: 10px; }
.vl-scroll img { max-width: none; width: auto; height: auto; display: block; }
@media (max-width: 900px) { .vl-scroll img { width: 180%; } }
.vl-hint { color: rgba(245,240,230,.55); font: 400 .74rem/1 var(--font-body); text-align: center; margin: .7rem 0 0; }

/* =========================================================
   V3.18 · VISUAL PRESETS, SHORTLIST COMPARE, DETAIL HOTSPOTS
   ========================================================= */

/* visual presets */
.preset-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.preset-btn { display: flex; flex-direction: column; gap: .5rem; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.preset-thumb { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/9; background: var(--bg-2); }
.preset-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.preset-btn:hover .preset-thumb { border-color: var(--accent); }
.preset-btn:hover .preset-thumb img { transform: scale(1.06); }
.preset-name { font: 500 .78rem/1.2 var(--font-body); letter-spacing: .04em; color: var(--text-2); }
.preset-btn:hover .preset-name { color: var(--text); }
.preset-btn:focus-visible .preset-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 700px) { .preset-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* shortlist rail */
.shortlist { margin-top: 1.1rem; }
.shortlist-head { font: 500 .7rem/1 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--text-2); margin: 0 0 .6rem; }
.shortlist-row { display: flex; gap: .7rem; flex-wrap: wrap; }
.sl-item { position: relative; width: 168px; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: var(--bg-2); }
.sl-item.is-comparing { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sl-thumb { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.sl-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; display: block; }
.sl-name { display: block; font: 400 .72rem/1.3 var(--font-body); color: var(--text-2); margin-top: .4rem; }
.sl-cmp { margin-top: .45rem; width: 100%; padding: .4em; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--text-2); font: 500 .7rem/1 var(--font-body); letter-spacing: .06em; cursor: pointer; }
.sl-cmp[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.sl-rm { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--accent); color: var(--bg); font-size: .9rem; line-height: 1; cursor: pointer; }

/* compare labels carry chips */
.cmp-labels span { display: inline-flex; align-items: center; gap: .45rem; }
.cmp-labels img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.cmp-labels .chip-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); }
.cmp-labels b { font-weight: 500; }

/* hotspots */
.hotspots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hotspot { position: absolute; transform: translate(-50%,-50%); pointer-events: auto; background: none; border: 0; cursor: zoom-in; padding: 6px; }
.hs-dot { display: block; width: 15px; height: 15px; border-radius: 50%; background: rgba(245,240,230,.92); box-shadow: 0 0 0 6px rgba(201,173,110,.35); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.hotspot:hover .hs-dot, .hotspot:focus-visible .hs-dot { transform: scale(1.15); box-shadow: 0 0 0 9px rgba(201,173,110,.5); }
.hs-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; background: rgba(20,17,13,.92); color: #F5F0E6; font: 500 .68rem/1 var(--font-body); letter-spacing: .06em; padding: .5em .8em; border-radius: 999px; opacity: 0; transition: opacity .25s var(--ease); pointer-events: none; }
.hotspot:hover .hs-tip, .hotspot:focus-visible .hs-tip { opacity: 1; }
.stage.is-comparing .hotspots { display: none; }
@media (max-width: 700px) { .hs-tip { display: none; } }

/* inspector extras */
.vl-note { color: rgba(245,240,230,.85); font: 400 .9rem/1.5 var(--font-body); margin: 0 0 .8rem; max-width: 70ch; padding-right: 56px; }
.vl-note b { color: var(--accent); font-weight: 600; }
.vl-samples { display: flex; gap: .8rem; justify-content: center; margin-top: .8rem; }
.vl-samples figure { margin: 0; text-align: center; }
.vl-samples img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(245,240,230,.25); }
.vl-samples figcaption { font: 400 .68rem/1.3 var(--font-body); color: rgba(245,240,230,.65); margin-top: .35rem; max-width: 90px; }

/* =========================================================
   V3.18b · VISUALIZER CONTROL GRID — even columns, aligned rows
   The V3.16b rule ".cfg-controls .cfg-group { grid-column: auto }"
   outranked ".preset-group { grid-column: 1 / -1 }", so the presets
   were trapped in column one and left a gap beneath them.
   ========================================================= */
@media (min-width: 1025px) {
  .cfg-controls {
    grid-template-columns: repeat(2, minmax(0,1fr));
    align-items: stretch;
    column-gap: clamp(1.4rem, 3vw, 2.6rem);
    row-gap: clamp(1.6rem, 3vw, 2.4rem);
  }
  /* presets own the full width, above both control columns */
  .cfg-controls .preset-group { grid-column: 1 / -1 !important; }
  .cfg-controls .preset-group .preset-row { grid-template-columns: repeat(4, minmax(0,1fr)); max-width: 720px; }

  /* the two control groups sit side by side and share a baseline */
  .cfg-controls .cfg-group:not(.preset-group) {
    display: flex; flex-direction: column;
    padding-top: 1.4rem; border-top: 1px solid var(--line);
  }
  /* description panels drop to the bottom so both columns end level */
  .cfg-controls .cfg-group:not(.preset-group) .pick-preview { margin-top: auto; }

  .cfg-controls .cfg-actions { grid-column: 1 / -1; }
}

/* consistent control heights and even button pairs at every width */
.sel-pair, .tone-row { align-items: end; }
.sel-label { min-height: 0; }
.tone-row { margin-top: .8rem; }
.cfg-group h2.cfg-h { margin-bottom: .9rem; }
.pick-preview { align-items: center; }
#pair-wrap { margin-top: .8rem; }



/* =========================================================
   V3.19b · CONTROL GRID — presets left, door + counter right
   ========================================================= */
@media (min-width: 1025px) {
  .cfg-controls {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: start;
    column-gap: clamp(1.6rem, 3.4vw, 3rem);
    row-gap: clamp(1.6rem, 3vw, 2.4rem);
  }
  /* left: the look board, spanning both control rows */
  .cfg-controls .preset-group {
    grid-column: 1 !important; grid-row: 1 / span 2;
    padding-top: 1.4rem; border-top: 1px solid var(--line);
  }
  .cfg-controls .preset-group .preset-row {
    grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; max-width: none;
  }
  /* right: door style over countertop */
  .cfg-controls .cfg-group:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  .cfg-controls .cfg-group:nth-of-type(3) { grid-column: 2; grid-row: 2; }
  .cfg-controls .cfg-group:not(.preset-group) {
    display: block; padding-top: 1.4rem; border-top: 1px solid var(--line);
  }
  .cfg-controls .cfg-group:not(.preset-group) .pick-preview { margin-top: 1rem; }
  /* action moves to the right column, flush with where the dropdowns begin */
  .cfg-controls .cfg-actions {
    grid-column: 2; grid-row: 3; margin: 0; padding-top: 1.4rem;
    border-top: 1px solid var(--line); display: block; max-width: none;
    justify-self: stretch;
  }
  .cfg-controls .cfg-actions .btn { width: auto; min-width: 320px; justify-content: center; }
}
/* six looks: three rows of two in the left column */
@media (min-width: 1025px) {
  .cfg-controls .preset-group .preset-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 12px; }
}
@media (max-width: 1024px) { .preset-row { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 700px)  { .preset-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* =========================================================
   V3.20 · TWO-TONE ELEVATED — visual pairings, diagram, copy
   ========================================================= */
.tone-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
.tone-btn { font-size: .76rem; padding: .7em .6em; }

.tone-panel { margin-top: 1rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.tone-explain { display: grid; grid-template-columns: 62px 1fr; gap: .95rem; align-items: center; }
.tone-diagram { display: grid; grid-template-rows: 1fr 1fr; gap: 4px; width: 62px; }
.td-box { display: block; height: 34px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.td-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-upper { height: 30px; }
.td-lower { height: 38px; }
.tone-copy { font: 400 .84rem/1.5 var(--font-body); color: var(--text-2); margin: 0; }
.tone-copy b { color: var(--text); font-weight: 600; }

.tone-label { font: 500 .66rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); margin: 1.1rem 0 .6rem; }
.pair-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.pair-tile { display: flex; flex-direction: column; gap: .45rem; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: pointer; text-align: center; }
.pair-tile:hover { border-color: var(--accent); }
.pair-tile.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pair-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pt-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 2px; border-radius: 6px; overflow: hidden; }
.pt-half { display: block; height: 26px; overflow: hidden; }
.pt-half img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-name { font: 400 .66rem/1.3 var(--font-body); color: var(--text-2); }
.pt-name em { display: block; font-style: normal; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: .1rem 0; }
.pair-tile.is-on .pt-name { color: var(--text); }
@media (max-width: 1024px) { .pair-grid { grid-template-columns: repeat(6, minmax(0,1fr)); } }
@media (max-width: 700px)  { .pair-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .tone-row { grid-template-columns: 1fr; } }

/* =========================================================
   V3.20b · MOBILE INTRO EXIT — less scale jump, longer settle
   ========================================================= */
@media (max-width: 820px) {
  /* a taller hero narrows the gap between full-screen film and the hero box */
  .hero-bleed .hero-media { height: 62vh; min-height: 340px; }
  /* the film recedes rather than simply vanishing */
  .intro.intro-leave .intro-stage { transform: scale(.985); transition: transform 1.4s cubic-bezier(.4,0,.2,1); }
  /* the hero image keeps moving as the film clears, so motion never stops */
  html.intro-done .hero-media { animation: heroSettleIn 1.8s cubic-bezier(.22,1,.36,1) both; }
}
.intro.intro-leave { transition: opacity 1.4s cubic-bezier(.4,0,.2,1); }
@keyframes heroSettleIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .intro.intro-leave .intro-stage { transform: none; transition: none; }
  html.intro-done .hero-media { animation: none; }
}