/* Groundwork Sourcing — shared stylesheet
   Extracted verbatim from the original single-page site (site/index.single.html.bak).
   Tokens are FIXED per DESIGN.md — do not change values in :root. */
:root{
  --paper: oklch(0.96 0.008 90);
  --ink: oklch(0.20 0.02 260);
  --ink-70: oklch(0.20 0.02 260 / 0.64);
  --blaze: oklch(0.68 0.20 45);
  --hairline: oklch(0.85 0.01 90);
  --stamp-green: oklch(0.55 0.13 155);
  --disp: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --body: "Archivo", system-ui, -apple-system, sans-serif;
  --maxw: 1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  background:var(--paper); color:var(--ink); font-family:var(--body);
  font-size:clamp(1rem,0.96rem + 0.2vw,1.06rem); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,48px)}
.mono{font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:600}
.rule{border:0; border-top:1px solid var(--hairline)}
.blaze{color:var(--blaze)}
h1,h2,h3{font-family:var(--disp); font-weight:800; line-height:1.02; letter-spacing:-0.01em}
h2{font-size:clamp(1.7rem,1.2rem + 2.4vw,3rem); margin-bottom:.6em}
p{max-width:64ch}
.btn{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono);
  text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; font-weight:600;
  text-decoration:none; padding:.95em 1.4em; border:1.5px solid var(--ink);
  border-radius:2px; background:var(--ink); color:var(--paper); transition:transform .18s cubic-bezier(0.22,1,0.36,1), background .18s, color .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn--blaze{background:var(--blaze); border-color:var(--blaze); color:var(--ink)}
.btn--ghost{background:transparent; color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:var(--paper)}
:focus-visible{outline:3px solid var(--blaze); outline-offset:3px}

/* ---- top bar ---- */
.top{display:flex; justify-content:space-between; align-items:center; padding-block:18px; border-bottom:1px solid var(--hairline); position:relative; z-index:3}
.brand{font-family:var(--disp); font-weight:800; font-size:1.05rem; letter-spacing:.02em}
.brand small{font-family:var(--mono); font-weight:600; font-size:.6rem; letter-spacing:.14em; display:block; color:var(--ink-70); margin-top:2px}
.top nav a{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; text-decoration:none; margin-left:22px; color:var(--ink-70)}
.top nav a:hover{color:var(--ink)}
/* Multi-page site: nav now carries real navigation (not just in-page anchors),
   so on narrow screens it wraps below the brand row instead of disappearing. */
@media(max-width:720px){
  .top{flex-wrap:wrap; row-gap:14px}
  .top nav{width:100%; display:flex; flex-wrap:wrap; gap:10px 18px}
  .top nav a{margin-left:0}
}

/* ---- HERO: sticky split ---- */
.hero{display:grid; grid-template-columns:minmax(0,42%) minmax(0,58%); gap:0; border-bottom:1px solid var(--hairline)}
.hero__left{position:sticky; top:0; align-self:start; min-height:100vh; display:flex; flex-direction:column; justify-content:center; gap:2px; padding:56px clamp(20px,4vw,56px); border-right:1px solid var(--hairline)}
.hero__eyebrow{margin-bottom:22px; color:var(--ink-70)}
.hero h1{font-size:clamp(2.2rem,1.4rem + 4.2vw,4.6rem); margin-bottom:.5em}
.hero h1 .u{position:relative; white-space:nowrap}
.hero h1 .u::after{content:""; position:absolute; left:0; right:0; bottom:.06em; height:.10em; background:var(--blaze); transform:scaleX(0); transform-origin:left; animation:draw .7s .35s cubic-bezier(0.22,1,0.36,1) forwards}
@keyframes draw{to{transform:scaleX(1)}}
.hero__sub{color:var(--ink-70); margin-bottom:30px; max-width:42ch}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}
.hero__trust{list-style:none; margin-top:28px; display:flex; flex-wrap:wrap; gap:9px 22px; font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-70)}
.hero__trust b{color:var(--ink); font-weight:600}
.hero__trust li{position:relative; padding-left:15px}
.hero__trust li::before{content:""; position:absolute; left:0; top:.42em; width:6px; height:6px; background:var(--blaze); border-radius:1px}
/* right: ledger */
.ledger{padding:64px clamp(20px,4vw,56px)}
.ledger__cap{margin-bottom:40px}
.ledger__cap .mono{color:var(--blaze)}
.ledger h2{font-size:clamp(1.4rem,1rem + 1.6vw,2.1rem)}
.steps{list-style:none; counter-reset:s}
.step{display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:start; padding:22px 0; border-top:1px solid var(--hairline); position:relative; opacity:.38; transform:translateY(8px); transition:opacity .5s, transform .5s cubic-bezier(0.22,1,0.36,1)}
.step:last-child{border-bottom:1px solid var(--hairline)}
.step.in{opacity:1; transform:none}
.step__no{counter-increment:s; font-family:var(--mono); font-size:.72rem; font-weight:600; color:var(--ink-70); padding-top:4px}
.step__no::before{content:counter(s,decimal-leading-zero)}
.step__marker{position:absolute; left:-13px; top:26px; width:9px; height:9px; background:var(--paper); border:2px solid var(--hairline); border-radius:50%; transition:background .3s, border-color .3s, transform .3s}
.step.in .step__marker{background:var(--blaze); border-color:var(--blaze); transform:scale(1.15)}
.step__body h3{font-family:var(--disp); font-weight:700; font-size:1.05rem; margin-bottom:2px}
.step__body p{font-size:.9rem; color:var(--ink-70); max-width:44ch}
.stamp{font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.1em; color:var(--stamp-green); border:1.5px solid var(--stamp-green); border-radius:2px; padding:3px 7px; align-self:center; opacity:0; transform:scale(1.15)}
.step.in .stamp{animation:press .32s .12s cubic-bezier(0.22,1,0.36,1) forwards}
@keyframes press{to{opacity:1; transform:scale(1)}}

@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero__left{position:static; height:auto; border-right:0; border-bottom:1px solid var(--hairline); padding-block:56px}
  .ledger{padding-block:48px}
}

/* ---- answer-first capsule (AEO) — clean dark statement section ---- */
.answer{position:relative; color:var(--paper); padding-block:clamp(64px,9vw,116px); border-bottom:1px solid oklch(0.96 0.008 90 / 0.12);
  background:
    radial-gradient(120% 80% at 84% 6%, oklch(0.68 0.20 45 / 0.07), transparent 55%),
    linear-gradient(160deg, oklch(0.255 0.021 260) 0%, oklch(0.20 0.02 260) 52%, oklch(0.155 0.018 260) 100%);}
.answer .mono{color:var(--blaze)}
.answer__lede{max-width:64ch; font-size:clamp(1.2rem,1.05rem + 0.9vw,1.7rem); line-height:1.5; margin-top:18px; color:oklch(0.96 0.008 90 / 0.94)}
.answer strong{color:var(--paper)}

/* ---- proof ---- */
.proof{padding-block:clamp(48px,7vw,88px); border-bottom:1px solid var(--hairline)}
.proof__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:36px}
.proof__cell{padding:28px 26px; border-left:1px solid var(--hairline)}
.proof__cell:first-child{border-left:0; padding-left:0}
.proof__num{font-family:var(--disp); font-weight:800; font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem); font-variant-numeric:tabular-nums; line-height:1}
.proof__num .blaze{font-size:.5em; vertical-align:.35em}
.proof__lbl{font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-70); margin-top:12px; max-width:24ch}
.proof__lead{display:flex; gap:clamp(20px,4vw,48px); align-items:center; margin:30px 0 6px; padding-bottom:34px; border-bottom:1px solid var(--hairline); flex-wrap:wrap}
.proof__leadnum{font-family:var(--disp); font-weight:800; font-size:clamp(3.6rem,2rem + 7.5vw,7.4rem); line-height:.88; font-variant-numeric:tabular-nums; letter-spacing:-0.02em}
.proof__leadnum .blaze{font-size:.42em; vertical-align:.55em}
.proof__leadlbl{font-size:clamp(1.02rem,0.95rem + 0.45vw,1.3rem); color:var(--ink-70); max-width:36ch; line-height:1.45; margin:0}
.proof__leadlbl b{color:var(--ink); font-weight:600}
@media(max-width:640px){.proof__lead{gap:12px}}
@media(max-width:720px){.proof__grid{grid-template-columns:1fr} .proof__cell{border-left:0; border-top:1px solid var(--hairline); padding-left:0} .proof__cell:first-child{border-top:0}}

/* ---- generic section ---- */
.sec{padding-block:clamp(48px,7vw,88px); border-bottom:1px solid var(--hairline)}
.sec__k{color:var(--blaze); margin-bottom:18px; display:block}
.two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:start}
@media(max-width:820px){.two{grid-template-columns:1fr; gap:36px}}
.lede{font-size:clamp(1.1rem,1rem + 0.7vw,1.4rem)}
.mech{list-style:none; margin-top:8px}
.mech li{padding:16px 0; border-top:1px solid var(--hairline); display:flex; gap:14px}
.mech li::before{content:"—"; color:var(--blaze); font-family:var(--mono)}
.cats{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.cat{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; border:1px solid var(--hairline); border-radius:2px; padding:8px 12px}
.cats__lede{margin-top:22px}

/* ---- us vs a typical agent (honest comparison, not icon cards) ---- */
.vs{margin-top:36px; border-top:2px solid var(--ink)}
.vs__row{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--hairline)}
.vs__cell{padding:18px clamp(14px,2.4vw,26px)}
.vs__cell:first-child{border-right:1px solid var(--hairline); color:var(--ink-70)}
.vs__row--head .vs__cell{padding-block:14px}
.vs__h{font-family:var(--mono); text-transform:uppercase; letter-spacing:.07em; font-size:.72rem; font-weight:600; display:block}
.vs__row--head .vs__cell:first-child .vs__h{color:var(--ink-70)}
.vs__row--head .vs__cell:last-child .vs__h{color:var(--blaze)}
.vs__cell p{font-size:.92rem; line-height:1.5; margin:0}
.vs__cell:last-child p{font-weight:500}
@media(max-width:640px){.vs__cell{padding:14px 12px} .vs__cell p{font-size:.86rem}}

/* ---- founder note ---- */
.founder .two{align-items:start}
.founder p{font-size:clamp(1.05rem,1rem + 0.5vw,1.35rem); line-height:1.5}
.founder .sig{font-family:var(--mono); text-transform:uppercase; letter-spacing:.07em; font-size:.72rem; font-weight:600; color:var(--ink-70); margin-top:20px}

/* ---- what you get back + risk reversal (inside dark inquiry) ---- */
.getback{list-style:none; margin:2px 0 30px; max-width:760px; border-top:1px solid oklch(0.96 0.008 90 / 0.22)}
.getback li{padding:16px 0; border-bottom:1px solid oklch(0.96 0.008 90 / 0.22); display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline}
.getback .n{font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; font-weight:600; color:oklch(0.96 0.008 90 / 0.55)}
.getback p{margin:0; max-width:62ch; font-size:1rem; color:oklch(0.96 0.008 90 / 0.92)}
.risk{margin-top:20px; max-width:60ch; font-size:.9rem; line-height:1.6; color:oklch(0.96 0.008 90 / 0.75)}
.risk strong{color:var(--paper); font-weight:600}

/* ---- FAQ ---- */
.faq details{border-top:1px solid var(--hairline); padding:4px 0}
.faq details:last-of-type{border-bottom:1px solid var(--hairline)}
.faq summary{list-style:none; cursor:pointer; font-family:var(--disp); font-weight:700; font-size:clamp(1.05rem,1rem + 0.4vw,1.3rem); padding:22px 40px 22px 0; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:6px; top:20px; font-family:var(--mono); color:var(--blaze); font-size:1.3rem; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 24px; color:var(--ink-70)}

/* ---- inquiry ---- */
.inq{background:var(--ink); color:var(--paper)}
.inq .wrap{padding-block:clamp(52px,7vw,96px)}
.inq h2{color:var(--paper)}
.inq .mono{color:var(--blaze)}
.inq__sub{color:oklch(0.96 0.008 90 / 0.8); margin:14px 0 34px; max-width:56ch}
form{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:760px}
.f-full{grid-column:1/-1}
label{display:block; font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:oklch(0.96 0.008 90 / 0.7); margin-bottom:8px}
input,select,textarea{width:100%; background:transparent; border:1px solid oklch(0.96 0.008 90 / 0.28); border-radius:2px; color:var(--paper); font-family:var(--body); font-size:.98rem; padding:.8em .9em}
input:focus,select:focus,textarea:focus{border-color:var(--blaze); outline:none}
select option{color:#111}
textarea{min-height:96px; resize:vertical}
.f-actions{grid-column:1/-1; display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:6px}
.f-note{font-family:var(--mono); font-size:.64rem; letter-spacing:.04em; color:oklch(0.96 0.008 90 / 0.55); max-width:44ch}
@media(max-width:640px){form{grid-template-columns:1fr}}
.f-status{font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; padding:12px 14px; border-radius:2px; margin-top:4px}
.f-status.ok{background:oklch(0.55 0.13 155 / 0.18); color:oklch(0.88 0.09 155); border:1px solid oklch(0.55 0.13 155 / 0.5)}
.f-status.err{background:oklch(0.68 0.20 45 / 0.16); color:oklch(0.86 0.12 45); border:1px solid oklch(0.68 0.20 45 / 0.5)}

/* ---- footer ---- */
footer{padding-block:44px}
.foot{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start}
.foot .mono{color:var(--ink-70); line-height:1.9; font-size:.68rem}
.foot .brand{font-size:1.2rem}

/* ---- QC: protection ladder (baseline + at-cost add-ons) ---- */
.qc-stages{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:32px; border:1px solid var(--hairline); border-radius:2px; overflow:hidden}
.qc-stage{padding:20px 18px; border-left:1px solid var(--hairline)}
.qc-stage:first-child{border-left:0}
.qc-stage__k{font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--blaze)}
.qc-stage__n{font-family:var(--disp); font-weight:700; font-size:1.02rem; margin:6px 0 4px}
.qc-stage__d{font-size:.82rem; color:var(--ink-70); line-height:1.45; margin:0}
.qc-stage--base{background:oklch(0.55 0.13 155 / 0.08)}
.qc-stage--base .qc-stage__k{color:var(--stamp-green)}
.qc-stage__img{display:block; width:calc(100% + 36px); margin:-20px -18px 14px; aspect-ratio:4/3; object-fit:cover; border-bottom:1px solid var(--hairline)}
@media(max-width:820px){.qc-stages{grid-template-columns:1fr 1fr} .qc-stage{border-top:1px solid var(--hairline)} .qc-stage:nth-child(odd){border-left:0} .qc-stage:nth-child(1),.qc-stage:nth-child(2){border-top:0}}
@media(max-width:480px){.qc-stages{grid-template-columns:1fr} .qc-stage{border-left:0; border-top:1px solid var(--hairline)} .qc-stage:first-child{border-top:0}}
.qc-base{margin-top:26px; padding:18px 20px; border-left:3px solid var(--stamp-green); background:oklch(0.55 0.13 155 / 0.06)}
.qc-base p{margin:0} .qc-base b{font-family:var(--disp); font-weight:700}
.ladder{margin-top:30px; border-top:2px solid var(--ink)}
.ladder__tag{display:inline-block; font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-70); border:1.5px solid var(--hairline); border-radius:2px; padding:3px 8px; margin:14px 0 2px}
.ladder__row{display:grid; grid-template-columns:38px minmax(0,32%) 1fr; align-items:center; border-bottom:1px solid var(--hairline)}
.ladder__dots{display:flex; gap:3px; padding-left:2px}
.ladder__dots i{display:block; width:6px; height:6px; border-radius:1px; background:var(--hairline); font-style:normal}
.ladder__dots i.on{background:var(--blaze)}
.ladder__cell{padding:16px clamp(14px,2.2vw,22px)}
.ladder__cell--name{border-right:1px solid var(--hairline); font-family:var(--disp); font-weight:700; font-size:.98rem}
.ladder__cell p{font-size:.9rem; color:var(--ink-70); margin:0; line-height:1.5}
.ladder__note{margin-top:18px; font-size:.92rem; line-height:1.55; max-width:66ch}
.ladder__note b{color:var(--ink); font-weight:600}
@media(max-width:560px){
  .ladder__row{grid-template-columns:26px 1fr}
  .ladder__cell--name{grid-column:2; border-right:0; border-bottom:1px solid var(--hairline)}
  .ladder__cell:not(.ladder__cell--name){grid-column:1/-1}
}
.qc-guide{list-style:none; margin-top:26px}
.qc-guide li{padding:14px 0; border-top:1px solid var(--hairline); display:grid; grid-template-columns:minmax(0,40%) 1fr; gap:14px; align-items:baseline}
.qc-guide li:last-child{border-bottom:1px solid var(--hairline)}
.qc-guide .when{font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-70)}
.qc-guide .rec{font-weight:500; font-size:.94rem}
@media(max-width:560px){.qc-guide li{grid-template-columns:1fr; gap:4px}}
/* QC inline proof — real inspection loop + stills */
.qc-proof{margin:30px 0 4px; max-width:780px}
.qc-video{position:relative; border:1px solid var(--hairline); border-radius:2px; overflow:hidden; background:var(--ink); aspect-ratio:16/9; margin:0}
.qc-video__el{display:block; width:100%; height:100%; object-fit:cover}
.qc-video__wm{position:absolute; top:9px; right:11px; font-family:var(--mono); font-size:.56rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:oklch(0.96 0.008 90 / 0.72); text-shadow:0 1px 3px oklch(0.20 0.02 260 / 0.6)}
.qc-cap{position:absolute; left:0; bottom:0; background:oklch(0.20 0.02 260 / 0.74); color:oklch(0.96 0.008 90 / 0.92); padding:7px 12px; font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.05em}
.qc-cap::before{content:"● "; color:var(--blaze)}
/* factory walk-through featured video + on-brand captions */
.fv-video{max-width:860px; margin:30px 0 0; aspect-ratio:16/9}
.fv-video video{display:block; width:100%; height:100%; object-fit:cover; background:var(--ink)}
video::cue{background:oklch(0.155 0.018 260 / 0.82); color:oklch(0.96 0.008 90 / 0.97); font-family:"Archivo", system-ui, sans-serif; line-height:1.35}
/* QC media — featured stage + thumbnail selector (click a thumb → swaps into stage) */
#qc-stage{position:absolute; inset:0}
#qc-stage video, #qc-stage .qc-stage__img{display:block; width:100%; height:100%; object-fit:cover}
.qc-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; max-width:780px}
.qc-thumb{position:relative; padding:0; border:1px solid var(--hairline); border-radius:2px; overflow:hidden; background:var(--hairline); cursor:pointer; aspect-ratio:4/3; transition:border-color .15s, opacity .15s}
.qc-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.qc-thumb:hover{opacity:.9}
.qc-thumb.is-active{border-color:var(--blaze); border-width:2px}
.qc-thumb__badge{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--paper); font-size:1.05rem; text-shadow:0 1px 4px oklch(0.20 0.02 260 / 0.7); pointer-events:none}
@media(max-width:560px){.qc-thumbs{gap:6px}}
:focus-visible{outline:3px solid var(--blaze); outline-offset:3px}

/* ---- premium scroll-scrub layer (desktop, motion-ok) ---- */
/* film/paper grain — static SVG, zero JS/GPU, subtle tactility */
body::after{content:""; position:fixed; inset:0; z-index:9; pointer-events:none; opacity:.032; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* inspection gauge on sticky hero-left — count of checkpoints passed, bound to scroll */
.hero__gauge{margin-top:24px; font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-70)}
.hero__gauge b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.hero__gaugebar{margin-top:9px; height:2px; background:var(--hairline); position:relative; max-width:280px; overflow:hidden}
.hero__gaugefill{position:absolute; inset:0; background:var(--blaze); transform:scaleX(0); transform-origin:left}
/* signature step — the DUPRO "caught during production" beat */
.step--sig .step__body h3::after{content:"← caught here, during production"; display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; color:var(--blaze); margin-top:5px; font-weight:600; opacity:0; transform:translateX(-5px); transition:opacity .45s .1s cubic-bezier(0.22,1,0.36,1), transform .45s .1s cubic-bezier(0.22,1,0.36,1)}
.step--sig.in .step__body h3::after{opacity:1; transform:none}
html.scrub-on .step{transition:none}   /* GSAP drives opacity/transform inline — no double-animate */

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .step{opacity:1; transform:none}
  .stamp{opacity:1; transform:none}
  .step__marker{background:var(--blaze); border-color:var(--blaze)}
  .hero h1 .u::after{transform:scaleX(1)}
  .hero__gaugefill{transform:scaleX(1)}
  .step--sig .step__body h3::after{opacity:1; transform:none}
}

/* ============================================================
   MULTI-PAGE ADDITIONS (2026-07-12) — same tokens, new components
   for the site-wide nav, subpage intros, and the home hub links.
   No new colors/fonts introduced; reuses --ink/--blaze/--hairline etc.
   ============================================================ */

/* nav: current-page + CTA emphasis */
.top nav a[aria-current="page"]{color:var(--ink); text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--hairline)}
.top nav a.cta{color:var(--blaze)}

/* subpage intro (Quality/Factory/Make/About) — answer-first lede under an eyebrow + h1 */
.pagehero{padding-block:clamp(56px,8vw,96px); border-bottom:1px solid var(--hairline)}
.pagehero__eyebrow{margin-bottom:18px; display:block}
.pagehero h1{font-size:clamp(2rem,1.4rem + 2.8vw,3.6rem); margin-bottom:.5em; max-width:16ch}
.pagehero p{color:var(--ink-70); font-size:clamp(1.05rem,1rem + 0.5vw,1.3rem); max-width:62ch; line-height:1.55}
.pagehero p strong{color:var(--ink); font-weight:600}

/* home hub — ledger-style rows linking to subpages (no icon cards; matches .ladder/.mech language) */
.hub{margin-top:32px; border-top:2px solid var(--ink)}
.hub__row{display:grid; grid-template-columns:minmax(0,30%) 1fr auto; gap:18px; align-items:center; padding:24px 4px; border-bottom:1px solid var(--hairline); text-decoration:none; color:inherit}
.hub__row:hover{background:oklch(0.20 0.02 260 / 0.03)}
.hub__k{font-family:var(--disp); font-weight:700; font-size:1.1rem}
.hub__k small{display:block; font-family:var(--mono); font-weight:600; font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; color:var(--blaze); margin-bottom:4px}
.hub__d{font-size:.92rem; color:var(--ink-70); margin:0; max-width:48ch}
.hub__arrow{font-family:var(--mono); color:var(--blaze); font-size:1.1rem; transition:transform .18s cubic-bezier(0.22,1,0.36,1)}
.hub__row:hover .hub__arrow{transform:translateX(5px)}
@media(max-width:640px){.hub__row{grid-template-columns:1fr auto; row-gap:6px} .hub__d{grid-column:1/-1}}

/* factory: placeholder media slot — real footage lands later, copy skeleton only for now */
.slot{position:relative; border:1.5px dashed var(--hairline); border-radius:2px; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; background:oklch(0.20 0.02 260 / 0.03); text-align:center; padding:24px}
.slot__label{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-70); max-width:34ch; margin:0 auto}
.slot__label b{display:block; color:var(--ink); font-family:var(--disp); font-size:.9rem; letter-spacing:0; text-transform:none; margin-bottom:6px}

/* what-we-make: category rows (ledger list, not icon cards) — legacy, superseded by .make-grid below */
.make-cats{list-style:none; margin-top:32px; border-top:2px solid var(--ink)}
.make-cats li{display:grid; grid-template-columns:minmax(0,30%) 1fr; gap:18px; padding:22px 0; border-bottom:1px solid var(--hairline)}
.make-cats .k{font-family:var(--disp); font-weight:700; font-size:1.05rem}
.make-cats p{color:var(--ink-70); font-size:.94rem; margin:0; max-width:52ch}
@media(max-width:640px){.make-cats li{grid-template-columns:1fr; gap:4px}}
.make-stills{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:26px; max-width:780px}
.make-stills img{width:100%; height:220px; object-fit:cover; border:1px solid var(--hairline); border-radius:2px; display:block}
@media(max-width:560px){.make-stills{grid-template-columns:1fr} .make-stills img{height:180px}}

/* what-we-make: bento category grid — 6 category cards + 2 real production stills,
   hand-placed (bespoke, per DESIGN.md), varied weight so it doesn't read as a
   mechanical 3-col icon grid. Photos are generic floor/rack shots, honestly
   captioned — never labeled as a specific category. */
.make-grid{display:grid; grid-template-columns:1fr; gap:10px; margin-top:32px}
.make-card{border:1px solid var(--hairline); border-radius:2px; padding:22px clamp(18px,2.4vw,26px); display:flex; flex-direction:column; justify-content:center; min-height:104px}
.make-card__k{font-family:var(--disp); font-weight:700; font-size:1.05rem}
.make-card p{color:var(--ink-70); font-size:.86rem; margin:6px 0 0; max-width:34ch}
.make-card--lead{background:oklch(0.68 0.20 45 / 0.07); border-color:var(--blaze)}
.make-card--lead .make-card__k{font-size:clamp(1.2rem,1rem + 0.6vw,1.5rem)}
.make-card--lead p{max-width:none; font-size:.92rem}
.make-photo{position:relative; border:1px solid var(--hairline); border-radius:2px; overflow:hidden}
.make-photo img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:3/4}
.make-photo--wide img{aspect-ratio:21/6}
/* desktop: bento — hand-placed named areas, only where there's room for the asymmetry to read */
@media(min-width:761px){
  .make-grid{grid-template-columns:repeat(3,1fr);
    grid-template-areas:"c1 c1 pA" "c2 c3 pA" "c4 c5 c6" "pB pB pB"}
  .make-grid > :nth-child(1){grid-area:c1}
  .make-grid > :nth-child(2){grid-area:c2}
  .make-grid > :nth-child(3){grid-area:pA}
  .make-grid > :nth-child(4){grid-area:c3}
  .make-grid > :nth-child(5){grid-area:c4}
  .make-grid > :nth-child(6){grid-area:c5}
  .make-grid > :nth-child(7){grid-area:c6}
  .make-grid > :nth-child(8){grid-area:pB}
  .make-card--lead p{max-width:44ch}
}

/* ============================================================
   HOME REDESIGN — INFOGRAPHICS (2026-07-12b) — same tokens.
   Gap-flow diagram, condensed QC pipeline, reviews, invoice card,
   proof image pairing, founder portrait. No new colors/fonts.
   ============================================================ */

/* gap-flow: "order placed -> [gap: nobody watches] -> container loaded" */
.gapflow{display:flex; flex-wrap:wrap; align-items:stretch; margin-top:28px; border:1px solid var(--hairline); border-radius:2px; overflow:hidden}
.gapflow__node{flex:1 1 150px; display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--disp); font-weight:700; font-size:1.05rem; padding:26px 18px; background:var(--paper)}
.gapflow__arrow{display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:1.1rem; color:var(--ink-70); padding:0 4px; flex:0 0 auto}
.gapflow__arrow--blaze{color:var(--blaze)}
.gapflow__gap{flex:1.7 1 230px; padding:22px; background:oklch(0.68 0.20 45 / 0.08); border-left:1px dashed var(--hairline); border-right:1px dashed var(--hairline); display:flex; flex-direction:column; justify-content:center; gap:6px}
.gapflow__gap .mono{color:var(--blaze)}
.gapflow__gap p{margin:0; font-weight:600; font-size:.95rem; max-width:none}
@media(max-width:720px){
  .gapflow{flex-direction:column}
  .gapflow__arrow{padding:8px 0; transform:rotate(90deg)}
  .gapflow__gap{border-left:0; border-right:0; border-top:1px dashed var(--hairline); border-bottom:1px dashed var(--hairline)}
}

/* condensed QC pipeline (home) — real stills, IQC -> OQC */
.qcflow{display:flex; flex-wrap:wrap; gap:0; margin-top:28px; border-top:2px solid var(--ink)}
.qcflow__step{flex:1 1 140px; text-decoration:none; color:inherit; border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline); display:flex; flex-direction:column}
.qcflow__step:last-child{border-right:0}
.qcflow__step img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-bottom:1px solid var(--hairline)}
.qcflow__meta{padding:12px 14px}
.qcflow__k{color:var(--blaze); display:block; margin-bottom:3px}
.qcflow__lbl{font-size:.82rem; font-weight:500}
.qcflow__step:hover img{opacity:.88}
@media(max-width:720px){.qcflow__step{flex:1 1 44%} .qcflow__step:nth-child(2n){border-right:0}}
@media(max-width:420px){.qcflow__step{flex:1 1 100%; border-right:0}}

/* reviews — two asymmetric quote treatments, not identical cards */
.reviews__grid{display:grid; grid-template-columns:1.3fr 1fr; gap:28px; margin-top:32px; align-items:start}
.review{padding-top:22px; border-top:1px solid var(--hairline)}
.review--a{border-top:3px solid var(--blaze); padding-top:24px}
.review--a p{font-family:var(--disp); font-weight:700; font-size:clamp(1.08rem,1rem + 0.5vw,1.4rem); line-height:1.35; max-width:none; margin:0}
.review--b p{color:var(--ink-70); font-size:1rem; max-width:50ch; margin:0}
.review footer{margin-top:16px; color:var(--ink-70); font-style:normal}
.reviews__lede{margin-top:14px; max-width:60ch; color:var(--ink-70); font-size:1.02rem; line-height:1.5}
.review__metric{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 10px; margin:0 0 14px !important; font-family:var(--disp); font-weight:800; line-height:1; max-width:none !important}
.review__from{font-size:1.5rem; color:var(--ink-70); text-decoration:line-through; text-decoration-color:var(--hairline)}
.review__arrow{color:var(--blaze); font-size:1.2rem}
.review__to{font-size:2rem; color:var(--blaze)}
.review__unit{font-family:var(--mono); font-weight:600; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-70); align-self:center}
.reviews__note{margin-top:26px; padding-top:18px; border-top:1px solid var(--hairline); max-width:72ch; color:var(--ink-70); font-size:.95rem; line-height:1.55}
@media(max-width:760px){.reviews__grid{grid-template-columns:1fr}}

/* example at-cost invoice, paired with a finished-goods still */
.invoice-wrap{display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(24px,4vw,48px); margin-top:32px; align-items:center}
.invoice-wrap img{width:100%; height:100%; max-height:320px; object-fit:cover; border:1px solid var(--hairline); border-radius:2px; display:block}
.invoice{border:1px solid var(--hairline); border-radius:2px; overflow:hidden}
.invoice__tag{background:var(--ink); color:var(--paper); padding:10px 16px; font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.07em}
.invoice__row{display:grid; grid-template-columns:1.1fr 1.3fr auto; gap:10px; padding:13px 16px; border-top:1px solid var(--hairline); align-items:baseline; font-size:.86rem}
.invoice__row--head{font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:.62rem; color:var(--ink-70); border-top:0}
.invoice__row--total{font-weight:700; background:oklch(0.55 0.13 155 / 0.07)}
.invoice__row--total span:last-child{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--stamp-green)}
@media(max-width:760px){.invoice-wrap{grid-template-columns:1fr} .invoice-wrap img{max-height:220px}}
@media(max-width:480px){.invoice__row{grid-template-columns:1fr; gap:2px} .invoice__row--head{display:none}}

/* proof: capacity stat paired with a floor still + MOQ one-liner */
.proof__img{width:180px; height:132px; object-fit:cover; border:1px solid var(--hairline); border-radius:2px; flex-shrink:0; margin-left:auto}
.proof__moq{margin-top:18px; color:var(--ink-70)}
@media(max-width:540px){.proof__img{margin-left:0; width:140px; height:104px}}

/* about: founder portrait */
.founder__portrait{width:100%; max-width:320px; aspect-ratio:4/5; object-fit:cover; border:1px solid var(--hairline); border-radius:2px; display:block; margin-bottom:22px}
.founder__team{margin-top:14px; font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-70)}