/* ============================================================
   ETHERIUS SITE V2 — shared styles
   Tokens from design/DESIGN-SYSTEM.md, direction from lab/home-v2.
   One file for all pages; page markup carries only structure.
   ============================================================ */
:root{
  --canvas:#080808; --step:#121211; --panel:#0c0c0b;
  --accent:#cdfc54; --text:#fafafa; --muted:#e5e7eb; --edge:#2a2a28; --hover-step:#1a1a18;
  --disp:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-inout:cubic-bezier(0.83,0,0.17,1);
}
*{box-sizing:border-box}
html{background:var(--canvas)}
body{margin:0;background:var(--canvas);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--text)}
::selection{background:var(--accent);color:var(--canvas)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1360px;margin:0 auto;padding:0 48px}

/* ---------- smooth scroll shell ---------- */
/* ScrollSmoother owns #eth-smooth's position and transform (it wraps this
   element in .ScrollSmoother-wrapper at runtime). Do not position it here. */
#eth-smooth{background:var(--canvas)}

/* ---------- cursor dot ----------
   Trails ALONGSIDE the native arrow, never replaces it. Lives outside #eth-smooth
   so ScrollSmoother does not translate it. GSAP owns x/y and autoAlpha. */
#eth-cursor{position:fixed;top:0;left:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--accent);pointer-events:none;z-index:120;opacity:0;visibility:hidden;will-change:transform}
body.static #eth-cursor{display:none}

/* word ignition (practice pages) — SplitText word spans. Only colour animates; the
   words are never dimmed, so body copy stays readable at every scroll position. */
.wig{will-change:color}

/* GSDevTools bar (?dev=1 only, never in a normal visit) — must clear the boot overlay */
.gs-dev-tools{z-index:9999}
.skew{will-change:transform}

/* ---------- WebGL layer (eth-3d.js) ---------- */
#eth-gl{position:fixed;inset:0;z-index:-1;display:block;pointer-events:none}
/* The canvas sits below document content but above the root background. Making
   the GL body transparent is what keeps that negative layer visible while
   guaranteeing post pixels can never wash over type or controls. */
body.gl{background:transparent}
body.gl #eth-smooth{background:transparent}
body.static #eth-gl{display:none}

/* ---------- Tier 3 concept lab ----------
   Visible only when eth-3d.js recognizes an explicit ?concept= preview flag. */
#eth-concept{position:fixed;left:20px;bottom:18px;z-index:70;display:grid;grid-template-columns:auto auto;gap:5px 14px;align-items:baseline;padding:11px 14px;border:1px solid var(--edge);border-radius:7px;background:rgba(8,8,8,.88);color:var(--muted);pointer-events:none}
#eth-concept span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;opacity:.58}
#eth-concept span:last-child{grid-column:1/-1}
#eth-concept strong{font-family:var(--disp);font-size:13px;font-weight:600;color:var(--text)}

/* ---------- veil (page transitions) + boot (home entrance) ---------- */
#eth-veil{position:fixed;inset:0;z-index:90;background:var(--canvas);pointer-events:none}
body.static #eth-veil{display:none}
#eth-boot{position:fixed;inset:0;z-index:100;background:var(--canvas);cursor:pointer;transition:transform .8s var(--ease-inout)}
#eth-boot.lift{transform:translateY(-101%)}
body.static #eth-boot{display:none}
/* the E mark: one geometry, two scales (nav / boot), all from --ew.
   Ratios measured from the etherius_ai_logo artwork (bar .24w, gap .29w, mid .93w). */
.logo-e{position:relative;display:block;--ew:11.5px;width:var(--ew);height:calc(var(--ew)*1.30)}
.logo-e i{position:absolute;left:0;height:calc(var(--ew)*.24);background:var(--accent)}
.logo-e i:nth-child(1){top:0;width:100%}
.logo-e i:nth-child(2){top:calc(var(--ew)*.53);width:93%}
.logo-e i:nth-child(3){top:calc(var(--ew)*1.06);width:100%}
/* boot loader: bar fills, then condenses + splits into the E (eth.js owns the motion) */
/* the bar is the E's own top bar (132px E: width 1w, height .24w), so the E grows out of it */
.eload{position:absolute;left:50%;top:50%;width:132px;height:31.68px;transform:translate(-50%,-50%)}
.eload-track{display:none}
.eload-fill{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left center}
.eload-pct{position:absolute;left:50%;top:calc(50% + 40px);transform:translateX(-50%);font-family:var(--disp);font-size:15px;font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--text);opacity:.6}
.emark{--ew:132px;position:absolute;left:50%;top:50%;margin-left:-66px;margin-top:-86px;opacity:0;will-change:transform}
.emark i{will-change:transform}
/* no-GSAP fallback: formed E, brief hold, overlay lifts */
#eth-boot.nog .eload,#eth-boot.nog .eload-pct{display:none}
#eth-boot.nog .emark{opacity:1}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- nav ---------- */
nav{opacity:0;transition:opacity .8s var(--ease-out) .1s;position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(8,8,8,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* header fixed to the top on every page; non-home pages reserve its 104px height */
body:not([data-scene="home"]) #eth-smooth{padding-top:104px}
body.booted nav{opacity:1}
body.static nav{opacity:1}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:32px 48px;max-width:1456px;margin:0 auto}
/* brand = the ETHERIUS wordmark, letterforms traced from the logo artwork
   (brand-wordmark.svg = THERIUS incl. the second E; "AI" dropped 2026-10-25, Aadvik). The first E is the live CSS
   bar-glyph (boot landing target); the SVG slides out from behind it. */
.brand{--brand-ew:11.5px;display:flex;align-items:center;text-decoration:none}
.brand>.logo-e{--ew:var(--brand-ew);flex:none;margin-right:calc(var(--ew)*.143)}
.wordmark-wrap{display:block;overflow:hidden}
.wordmark{display:block;height:calc(var(--brand-ew)*1.30);width:calc(var(--brand-ew)*8.38)}
/* Home makes the settled full lockup a dominant top-left brand moment. The same
   --brand-ew drives both pieces, so the animated E still lands pixel-exactly. */
body[data-scene="home"] .brand{--brand-ew:31px}
.nav-links{display:flex;align-items:center;gap:32px}
.navlink{font-size:14px;font-weight:500;line-height:1.4;color:var(--muted);text-decoration:none;transition:color .2s}
.navlink:hover{color:var(--text)}
.navlink[aria-current="page"]{color:var(--text)}
.letter-swap{position:relative;display:inline-block;white-space:pre}
.letter-swap::before{content:attr(data-label);visibility:hidden}
.letter-swap-current{position:absolute;inset:0;display:block;white-space:pre}
.nav-drop{position:relative}
.drop-panel{position:absolute;top:100%;left:-20px;padding-top:16px;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s var(--ease-out),transform .3s var(--ease-out)}
.nav-drop:hover .drop-panel,.nav-drop:focus-within .drop-panel{opacity:1;pointer-events:auto;transform:none}
.drop-in{background:var(--panel);border:1px solid var(--edge);border-radius:8px;padding:10px;min-width:340px;display:flex;flex-direction:column}
.drop-item{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:6px;text-decoration:none;transition:background .2s}
.drop-item:hover{background:var(--hover-step)}
.drop-name{font-family:var(--disp);font-size:15px;font-weight:600;color:var(--text)}
.drop-sub{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--muted);opacity:.55}

/* ---------- buttons + links ---------- */
.btn{display:inline-block;background:var(--accent);color:var(--canvas);border-radius:9999px;padding:18px 38px;font-size:14px;font-weight:600;letter-spacing:.02em;text-decoration:none;transition:background .2s;will-change:transform}
.btn:hover{background:var(--text);color:var(--canvas)}
.btn-nav{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 26px;font-size:13px;line-height:1}
.ulink{font-size:15px;font-weight:500;color:var(--text);text-decoration:none;border-bottom:1px solid var(--edge);padding-bottom:4px;transition:color .2s,border-color .2s}
.ulink:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding:120px 48px 80px;overflow:hidden}
.hero-sub{min-height:88vh}
.glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 30% 62%,rgba(205,252,84,.055) 0%,rgba(205,252,84,.015) 45%,transparent 75%)}
.hero-in{position:relative;max-width:1360px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:48px}
.page-index{display:flex;align-items:center;gap:14px}
.page-index .idx{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--accent);letter-spacing:.04em}
.page-index .lbl{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
h1{font-family:var(--disp);font-weight:700;margin:0}
.h1-home{font-size:clamp(4.2rem,10.5vw,10.5rem);line-height:.96;letter-spacing:-.035em;max-width:12ch}
.h1-page{font-size:clamp(3.4rem,8vw,8rem);line-height:.98;letter-spacing:-.035em;max-width:14ch}
.acc{color:var(--accent)}
.hero-copy{display:flex;flex-direction:column;gap:40px;max-width:56ch}
.hero-copy p{font-size:clamp(1.0625rem,1.35vw,1.25rem);font-weight:350;line-height:1.7;letter-spacing:.005em;color:var(--muted);margin:0}
.cta-row{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;flex-wrap:wrap}
.scroll-hint{font-family:var(--mono);font-size:11.5px;color:var(--muted);opacity:.4;letter-spacing:.08em}
.ghost-num{position:absolute;right:24px;top:4%;font-family:var(--disp);font-size:clamp(16rem,28vw,28rem);font-weight:700;line-height:1;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(250,250,250,.07);user-select:none;pointer-events:none}

/* ---------- reveal machinery ---------- */
/* SplitText output: .line-mask is the clip wrapper (the plugin sets
   overflow:clip inline), .line is the line itself. The padding /
   negative-margin pair keeps descenders visible inside the clip.
   GSAP owns the transform — no CSS transition here. */
.line-mask{padding-bottom:.12em;margin-bottom:-.12em}
.line{display:block}
body.static .line{transform:none}
.fade{opacity:0;transform:translateY(34px)}
body.static .fade{opacity:1;transform:none}
.rule{height:1px;background:var(--edge);transform:scaleX(0);transform-origin:left center}
body.static .rule{transform:scaleX(1)}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;padding:22px 0}
.track{display:flex;width:max-content;will-change:transform}
.tk{display:flex;align-items:center;gap:34px;padding-right:34px}
.tk span{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;color:var(--muted);opacity:.5;white-space:nowrap}
.tk i{width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.5}

/* ---------- sections ---------- */
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:.55;display:flex;align-items:center;gap:14px}
.eyebrow::after{content:'';height:1px;width:56px;background:var(--edge)}
.sect{padding:120px 48px 200px}
.sect-tall{padding:220px 48px 200px}
.band{background:var(--step);padding:150px 48px 160px}
.cta-sect{padding:220px 48px}
.sect-head{display:flex;flex-direction:column;gap:26px}
.h2-band{font-family:var(--disp);font-size:clamp(2.4rem,4.6vw,4rem);font-weight:700;letter-spacing:-.025em;line-height:1.05;margin:0;max-width:20ch}
.h2-sect{font-family:var(--disp);font-size:clamp(2.2rem,4.2vw,3.6rem);font-weight:700;letter-spacing:-.025em;line-height:1.05;margin:0;max-width:22ch}
.h2-cta{font-family:var(--disp);font-size:clamp(2.8rem,6vw,5.6rem);font-weight:700;line-height:1;letter-spacing:-.035em;margin:0;max-width:16ch}
.h2-cta-home{font-size:clamp(3rem,7.5vw,7rem);max-width:14ch}
.cta-p{font-size:1.125rem;font-weight:350;line-height:1.65;color:var(--muted);max-width:46ch;margin:0}

/* ---------- practice / service rows ---------- */
.prow{display:grid;grid-template-columns:90px 1fr auto;align-items:baseline;gap:32px;padding:44px 12px;text-decoration:none;color:var(--text);transition:background .3s}
.prow-lg{grid-template-columns:110px 1fr auto;padding:52px 12px}
.prow:hover{background:var(--step)}
.pnum{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--muted);transition:color .4s}
.prow.livehit .pnum{color:var(--accent)}
.pmid{display:flex;flex-direction:column;gap:10px}
.pname{font-family:var(--disp);font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-.02em;line-height:1.1;transition:transform .5s var(--ease-out)}
.pname-lg{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.025em;line-height:1.08}
.prow:hover .pname{transform:translateX(10px)}
.pline{font-size:1.0625rem;font-weight:350;line-height:1.65;color:var(--muted);max-width:56ch}
.psvc{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--muted);opacity:.5}
.ptag{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--muted);opacity:.55;white-space:nowrap}
.parr{font-size:26px;color:var(--muted);opacity:.4;transition:transform .3s var(--ease-out),color .3s,opacity .3s}
.prow:hover .parr{transform:translateX(10px);color:var(--accent);opacity:1}

/* ---------- practice cards (scroll-scrubbed accordion, home) ---------- */
.pcards{display:flex;flex-direction:column;gap:16px}
.pcard{position:relative;display:block;border-radius:22px;padding:0 56px;overflow:hidden;text-decoration:none;color:var(--text);background:#131312;border:1px solid rgba(42,42,40,0);cursor:pointer}
.pcard-head{position:relative;z-index:2;display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:44px 0 40px}
.pcard-name{font-family:var(--disp);font-size:clamp(1.9rem,3.2vw,2.8rem);font-weight:700;letter-spacing:-.02em;line-height:1.05;color:rgb(150,150,147)}
.pcard-num{font-family:var(--mono);font-size:15px;font-weight:500;color:rgb(125,125,120)}
/* arrow replaces the number (Aadvik, 2026-09-05; white since 2026-09-06): centred on the card's right edge
   whatever the card's current (scrubbed) height */
.pcard-arr{position:absolute;z-index:3;right:56px;top:50%;transform:translateY(-50%);font-size:28px;line-height:1;color:var(--text);transition:transform .3s var(--ease-out)}
.pcard:hover .pcard-arr{transform:translate(8px,-50%)}
.pcard-body{position:relative;z-index:2;height:0;overflow:hidden}
.pcard-body-in{max-width:54ch;display:flex;flex-direction:column;gap:18px;padding-bottom:52px;opacity:0;transform:translateY(24px)}
.pcard-line{font-size:1.0625rem;font-weight:350;line-height:1.65;color:var(--muted);margin:0}
.pcard-svc{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--muted);opacity:.55}
.pcard-visual{position:absolute;top:0;bottom:0;right:0;width:52%;z-index:1;opacity:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to left,black 45%,transparent 100%);mask-image:linear-gradient(to left,black 45%,transparent 100%)}
.pv-studio{background:
  repeating-linear-gradient(90deg,rgba(250,250,250,.11) 0 26px,rgba(250,250,250,0) 26px 68px),
  linear-gradient(to left,rgba(250,250,250,.07),rgba(250,250,250,0) 75%),
  radial-gradient(ellipse 70% 90% at 85% 50%,rgba(205,252,84,.05),transparent 70%)}
.pv-growth{background:
  conic-gradient(from 115deg at 58% 50%,rgba(250,250,250,.12) 0 50deg,rgba(250,250,250,0) 50deg 360deg),
  conic-gradient(from 115deg at 82% 50%,rgba(250,250,250,.09) 0 50deg,rgba(250,250,250,0) 50deg 360deg),
  radial-gradient(ellipse 70% 90% at 85% 50%,rgba(205,252,84,.05),transparent 70%)}
.pv-ops{background:
  repeating-radial-gradient(circle at 78% 130%,rgba(250,250,250,0) 0 52px,rgba(250,250,250,.10) 52px 55px),
  radial-gradient(ellipse 70% 90% at 85% 50%,rgba(205,252,84,.05),transparent 70%)}
.pv-systems{background:
  repeating-linear-gradient(0deg,rgba(250,250,250,.07) 0 1px,rgba(250,250,250,0) 1px 36px),
  repeating-linear-gradient(90deg,rgba(250,250,250,.07) 0 1px,rgba(250,250,250,0) 1px 36px),
  radial-gradient(ellipse 70% 90% at 85% 50%,rgba(205,252,84,.06),transparent 70%)}
/* Fields on Home are non-routing modules for now (2026-09-05 handoff): same card, no pointer lie */
.pcard:not(a){cursor:default}
.pcard h3{margin:0}
body.static .pcard{background:#050504;border-color:#2a2a28}
body.static .pcard-name{color:#fafafa}
body.static .pcard-num{color:#cdfc54}
body.static .pcard-body{height:auto}
body.static .pcard-body-in{opacity:1;transform:none}
body.static .pcard-visual{opacity:.85}

/* ---------- step columns (process grids) ---------- */
.steps-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.steps-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px}
.step{display:flex;flex-direction:column;gap:16px}
.step .snum{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--muted);opacity:.6}
.step .snum.on{color:var(--accent);opacity:1}
.step .sname{font-family:var(--disp);font-size:1.5rem;font-weight:600;letter-spacing:-.01em}
.step .sbody{font-size:1.0625rem;font-weight:350;line-height:1.6;color:var(--muted)}

/* ---------- growth pipeline ---------- */
.pipe{background:var(--panel);border:1px solid var(--edge);border-radius:8px;padding:64px 56px 48px}
.pipe-row{display:flex;align-items:flex-start}
.stg{display:flex;flex-direction:column;gap:18px;min-width:0}
.stg-top{display:flex;align-items:center}
.stg-dot{width:12px;height:12px;border-radius:50%;border:1px solid #3a3a36;background:transparent;flex:none;transition:background .4s,border-color .4s,box-shadow .4s}
.stg-line{flex:1;height:1px;background:var(--edge);margin:0 10px}
.stg-meta{display:flex;flex-direction:column;gap:6px;padding-right:16px}
.stg-num{font-family:var(--mono);font-size:12px;font-weight:500;color:#93938b;transition:color .4s}
.stg-name{font-family:var(--disp);font-size:clamp(1rem,1.4vw,1.25rem);font-weight:600;letter-spacing:-.01em;color:#a9a9a1;transition:color .4s}
.stg-out{font-family:var(--mono);font-size:11.5px;color:var(--muted);opacity:.45}
.pipe-status{display:flex;align-items:center;gap:10px;margin-top:52px;border-top:1px solid var(--edge);padding-top:24px}
.pipe-status .arrow{color:var(--accent);font-size:12px}
.pipe-status .txt{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--muted)}

/* ---------- studio gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.wcard{display:flex;flex-direction:column;gap:14px}
.wslot{aspect-ratio:4/5;border:1px dashed var(--edge);border-radius:8px;display:flex;align-items:center;justify-content:center;transition:border-color .3s,transform .5s var(--ease-out)}
.wcard:hover .wslot{border-color:#3a3a36;transform:translateY(-6px)}
.wslot span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);opacity:.4}
.wcap{font-family:var(--mono);font-size:12px;color:var(--muted);opacity:.55;transition:color .3s,opacity .3s}
.wcard:hover .wcap{color:var(--text);opacity:.85}

/* ---------- how-we-work stages ---------- */
.stage-row{display:grid;grid-template-columns:110px 1fr 320px;gap:40px;padding:56px 12px;align-items:start;transition:background .3s}
.stage-row:hover{background:var(--step)}
.stage-name{font-family:var(--disp);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0 0 14px}
.stage-body{font-size:1.0625rem;font-weight:350;line-height:1.65;color:var(--muted);max-width:56ch;margin:0}
.stage-side{display:flex;flex-direction:column;gap:14px}
.stage-side .lbl{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);opacity:.65}
.stage-side .dlv{font-family:var(--mono);font-size:12.5px;font-weight:500;line-height:1.9;color:var(--muted);opacity:.7;white-space:pre-line}
.stage-side .tl{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--accent);letter-spacing:.04em}

/* ---------- engagement models ---------- */
.models{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.model{padding:8px 0 8px 28px}
.model.managed{border-left:2px solid var(--accent)}
.model.handoff{border-left:2px solid var(--edge)}
.model h3{font-family:var(--disp);font-size:1.5rem;font-weight:600;letter-spacing:-.01em;margin:0 0 14px}
.model p{font-size:1.0625rem;font-weight:350;line-height:1.65;color:var(--muted);margin:0 0 18px}
.model .terms{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--muted);opacity:.55;letter-spacing:.04em}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.expect{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--edge)}
.expect .n{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--accent)}
.expect .t{font-size:1.0625rem;font-weight:350;line-height:1.6;color:var(--muted)}
.cal-panel{background:var(--panel);border:1px solid var(--edge);border-radius:8px;min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.cal-panel .ph{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);opacity:.45}

/* ---------- proof ---------- */
.proof-quote{font-family:var(--disp);font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:500;line-height:1.3;letter-spacing:-.015em;max-width:34ch;margin:0;color:var(--text);opacity:.9}
.logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.logo-slot{border:1px dashed var(--edge);padding:30px 10px;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);opacity:.4}
.ph-note{font-family:var(--mono);font-size:11px;color:var(--muted);opacity:.35}

/* ---------- FAQ accordion (home) ----------
   Same hairline-row grammar as .prow: mono number, display-face question, mono glyph.
   The .rule hairlines between rows scrub in exactly as the practice rows do. eth.js
   owns open/close (GSAP height when motion is on, instant toggle when static). */
.faq-item{transition:background .3s}
.faq-item:hover{background:var(--step)}
.faq-q{margin:0}
.faq-btn{display:grid;grid-template-columns:90px 1fr auto;align-items:baseline;gap:32px;width:100%;padding:36px 12px;background:none;border:0;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.faq-num{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--muted);transition:color .4s}
.faq-btn[aria-expanded="true"] .faq-num{color:var(--accent)}
.faq-text{font-family:var(--disp);font-size:clamp(1.3rem,2vw,1.7rem);font-weight:600;letter-spacing:-.015em;line-height:1.2;transition:transform .5s var(--ease-out)}
.faq-item:hover .faq-text{transform:translateX(10px)}
.faq-icon{font-family:var(--mono);font-size:22px;line-height:1;color:var(--muted);opacity:.4;transition:transform .4s var(--ease-out),color .3s,opacity .3s;display:inline-block}
.faq-btn[aria-expanded="true"] .faq-icon{transform:rotate(45deg);color:var(--accent);opacity:1}
.faq-panel{overflow:hidden}
.faq-a{font-size:1.0625rem;font-weight:350;line-height:1.65;color:var(--muted);max-width:56ch;margin:0 12px 40px calc(90px + 32px + 12px)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--edge)}
.foot-grid{max-width:1360px;margin:0 auto;padding:80px 48px 40px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;align-items:start}
.foot-brand{display:flex;flex-direction:column;gap:22px}
footer .brand,body[data-scene="home"] footer .brand{--brand-ew:11.5px}
.foot-line{font-size:15px;font-weight:350;line-height:1.6;color:var(--muted);max-width:30ch;margin:0}
.foot-col{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.foot-h{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:.55;margin-bottom:8px}
.foot-in{max-width:1360px;margin:0 auto;padding:40px 48px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.foot-in .c{font-family:var(--mono);font-size:12.5px;color:var(--muted);opacity:.6}
.foot-links{display:flex;gap:30px;flex-wrap:wrap}
.flink{font-size:13px;color:var(--muted);text-decoration:none;opacity:.7;transition:opacity .2s,color .2s}
.flink:hover{opacity:1;color:var(--accent)}
.ghostmark{overflow:hidden;padding:0 48px 8px}
.ghostmark div{font-family:var(--disp);font-size:clamp(5rem,12.5vw,12rem);font-weight:700;letter-spacing:.04em;line-height:1;text-align:center;transform:translateY(8%);color:transparent;-webkit-text-stroke:1px rgba(250,250,250,.10);user-select:none;pointer-events:none}

#eth-replay{position:fixed;right:18px;bottom:16px;z-index:60;font-family:var(--mono);font-size:11px;color:var(--muted);opacity:.45;background:none;border:1px solid var(--edge);border-radius:6px;padding:6px 10px;cursor:pointer;transition:opacity .2s,color .2s}
#eth-replay:hover{opacity:1;color:var(--accent)}
body.static #eth-replay{display:none}

@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important}}
@media (max-width:960px){
  body[data-scene="home"] .nav-links .navlink{display:none}
}
@media (max-width:900px){
  body[data-scene="home"] .brand{--brand-ew:clamp(11.5px,calc(8.6vw - 21px),31px)}
  .nav-links .navlink{display:none}
  .hero{min-height:78vh}
  .prow,.prow-lg{grid-template-columns:56px 1fr auto;padding:36px 4px}
  .pcard{padding:0 28px}
  .pcard-head{padding:32px 0 28px}
  .pcard-arr{right:28px}
  .pcard-visual{width:72%}
  .steps-3,.steps-4{grid-template-columns:1fr;gap:36px}
  .gallery{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage-row{grid-template-columns:56px 1fr;gap:24px}
  .stage-row .stage-side{grid-column:2}
  .models{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:48px}
  .ghost-num{display:none}
  .faq-btn{grid-template-columns:56px 1fr auto;gap:20px;padding:28px 4px}
  .faq-a{margin:0 4px 32px calc(56px + 20px + 4px)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:40px;padding:64px 48px 32px}
  .foot-brand{grid-column:1/-1}
}

/* ---------- field pages (create / scale / automate / evolve), added 2026-10-25 ----------
   Scoped to the four field pages: the two-sentence hero H1 sits one sentence per line, rows
   stack their output tag under the text on phones, and a quiet "next field" link loops the
   four pages (Create, Scale, Automate, Evolve). */
.h1-field{max-width:none;font-size:clamp(2.6rem,6vw,6rem);line-height:1.02}
.next-field{padding:0 48px 140px}
.next-field a{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:150px 90px 1fr auto;align-items:baseline;gap:32px;padding:44px 12px;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);text-decoration:none;color:var(--text)}
.nf-lbl{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:.55}
.nf-num{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--accent)}
.nf-name{font-family:var(--disp);font-size:clamp(1.9rem,3.2vw,2.8rem);font-weight:700;letter-spacing:-.02em;line-height:1.05;transition:transform .5s var(--ease-out)}
.nf-arr{font-size:28px;line-height:1;transition:transform .3s var(--ease-out)}
.next-field a:hover .nf-name{transform:translateX(10px)}
.next-field a:hover .nf-arr{transform:translateX(8px)}
@media (max-width:900px){
  .fp-rows .prow{grid-template-columns:56px 1fr;row-gap:14px}
  .fp-rows .ptag{grid-column:2;white-space:normal}
  .next-field{padding:0 48px 100px}
  .next-field a{grid-template-columns:56px 1fr auto;gap:14px 20px;padding:32px 4px}
  .nf-lbl{grid-column:1/-1}
  /* Scale's six-stage pipeline: stages stack as a vertical list on phones */
  .pipe{padding:36px 24px 28px}
  .pipe-row{flex-direction:column;gap:18px}
  .pipe .stg{flex:none!important;flex-direction:row;align-items:center;gap:16px}
  .pipe .stg-line{display:none}
  .pipe .stg-meta{flex-direction:row;align-items:baseline;gap:12px;padding-right:0}
  .pipe-status{margin-top:32px}
}

/* ---------- phone menu (eth.js adds the button), added 2026-10-25 ----------
   Shown where the nav links hide: 900px and below, 960px and below on Home. The open
   panel hangs from the fixed header (nav is its containing block). */
.nav-menu{display:none;margin-left:20px;padding:8px 0;background:none;border:0;font:inherit;font-size:14px;font-weight:500;line-height:1.4;color:var(--text);cursor:pointer}
@media (max-width:960px){
  body[data-scene="home"] .nav-menu{display:inline-block}
  body[data-scene="home"] nav:not(.menu-open) .btn-nav{display:none}
  .nav-links{margin-left:auto}
  nav.menu-open .nav-links{position:absolute;top:100%;left:0;right:0;height:100svh;flex-direction:column;align-items:flex-start;gap:26px;padding:40px max(24px,6vw);background:var(--canvas);border-top:1px solid var(--edge)}
  nav.menu-open .nav-links .navlink{display:block;font-family:var(--disp);font-size:2rem;font-weight:600;letter-spacing:-.02em;color:var(--text)}
  nav.menu-open .btn-nav{margin-top:14px}
}
@media (max-width:900px){
  .nav-menu{display:inline-block}
  nav:not(.menu-open) .btn-nav{display:none}   /* the closed phone header is brand + Menu; the CTA lives in the panel */
}