/* ===========================================================================
   Qindi — Intelligence, Applied.

   Identity: an instrument-maker's page. A quiet stone ground, graphite ink,
   one desaturated bronze used sparingly; hairline astrolabe line-work and a
   simple reticle mark. Distinction comes from composition, not colour.
   =========================================================================== */
:root {
  /* Quiet palette: neutral stone ground, graphite ink, one desaturated bronze. */
  --night:   #2A2C2F;   /* graphite — used sparingly for solid fills  */
  --paper:   #F3F2EF;
  --stone:   #EBEAE6;   /* subtle tonal section                        */
  --tone:    #E5E4DF;   /* the quietest "dark" beat                    */
  --ink:     #1D1F22;
  --ink-2:   #3E4144;
  --mute:    #66686B;   /* 5.3:1 on paper */
  --rule-l:  #D6D4CE;
  --rule-d:  #CCCAC3;
  --on-dark: #1D1F22;
  --on-dark-2:#3E4144;
  --mute-d:  #66686B;

  --accent: #8E7658;        /* desaturated bronze, used sparingly */
  --accent-text: #725C42;   /* 5.6:1 on paper */
  --accent-soft: #725C42;
  --accent-rgb: 142,118,88;

  --seq-ink: 40,42,46;
  --rail: #DAD8D2;
  --rail-dark: #CCCAC3;
  --stage-on: #1D1F22;
  --stage-off: var(--mute);
  --glyph-dim-rgb: 150,150,146;
  --bar-off-rgb: 205,203,197;
  --glyph-font: "JetBrains Mono", ui-monospace, monospace;
  --scrim-strength: 1;

  --serif: "Helvetica Neue", Helvetica, Arial, sans-serif;  /* display */
  --sans:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;  /* labels */
  --body:  "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gx: clamp(20px, 4.4vw, 112px);
  --gl: clamp(36px, 6vw, 150px);
  --sy: clamp(80px, 10vw, 168px);
  --ease: cubic-bezier(.16,.84,.06,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 72px; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.6 var(--body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"ss01","tnum" 0; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
input, textarea, select, button { font:inherit; }
::selection { background:var(--ink); color:var(--paper); }
p, h1, h2, h3, ul, ol, figure { margin:0; }
ul, ol { padding:0; list-style:none; }
em { font-style:normal; }
strong { font-weight:600; color:var(--ink); }

@keyframes tick { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes pulse { 0%,100% { opacity:.25; } 50% { opacity:1; } }
@keyframes draw { from { stroke-dashoffset:260; } to { stroke-dashoffset:0; } }
@keyframes creep { from { transform:translateY(-100%); } to { transform:translateY(900%); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes trace { from { stroke-dashoffset:1200; } to { stroke-dashoffset:0; } }

/* Reveal is CSS-owned: default VISIBLE; JS adds [data-hide]; failsafe clears. */
[data-r] { opacity:1; transform:none; transition:opacity .9s cubic-bezier(.2,.7,0,1), transform .9s cubic-bezier(.2,.7,0,1); }
[data-r][data-hide] { opacity:0; transform:translateY(16px); animation:failsafe 0s 4s forwards; }
@keyframes failsafe { to { opacity:1; transform:none; } }
[data-line] { display:block; transition:transform 1.05s var(--ease); }
.ln { display:block; overflow:hidden; padding-bottom:.04em; }

/* ---------------------------------------------------------------- type ---*/
.display { font-family:var(--serif); font-weight:400; letter-spacing:-.035em; text-wrap:balance; }
.display--hero { font-size:clamp(44px, 9.4vw, 152px); line-height:.88; letter-spacing:-.045em; margin-top:clamp(18px,2.4vw,32px); }
.display--xl { font-size:clamp(40px, 7vw, 120px); line-height:.94; }
.display--l  { font-size:clamp(34px, 5vw, 82px); line-height:.98; margin-top:24px; }
.display--m  { font-size:clamp(28px, 3.8vw, 60px); line-height:1.02; margin-top:24px; }
.display--s  { font-size:clamp(24px, 2.3vw, 36px); line-height:1.06; margin-top:14px; }
.sec-head .display, .grid-2 > .display { margin-top:0; }
.grid-2 > [data-r] > .display--l { margin-top:24px; }
.accent { color:var(--accent-text); }
[data-dark] .accent { color:var(--accent-soft); }
.struck { color:var(--mute); text-decoration:line-through; text-decoration-thickness:.03em; text-decoration-color:color-mix(in srgb, var(--ink) 50%, transparent); }

.kicker, .eyebrow, .label, .panel-head, .panel-foot, .tags, .nav-n {
  font:400 11px/1.5 var(--sans); letter-spacing:.16em; text-transform:uppercase; font-variant-numeric:tabular-nums;
}
.kicker { color:var(--mute); display:flex; align-items:center; gap:12px; }
.kicker::before { content:""; width:28px; height:1px; background:var(--accent); }
[data-dark] .kicker { color:var(--accent-soft); }
.eyebrow { color:var(--mute); display:flex; align-items:center; gap:12px; }
.eyebrow--star::before { content:""; width:7px; height:7px; border:1px solid var(--accent); border-radius:50%; }
.label { color:var(--mute); }
[data-dark] .label { color:var(--mute-d); }
.label--note { text-align:right; line-height:1.8; }
.label--list { margin-top:10px; line-height:1.8; letter-spacing:.1em; }
.accent-tx { color:var(--accent-text) !important; }
[data-dark] .accent-tx { color:var(--accent-soft) !important; }

.body { font-size:16px; line-height:1.65; color:var(--ink-2); }
.body--l { font-size:clamp(17px,1.25vw,19px); color:var(--ink); }
.body--s { font-size:14px; line-height:1.55; margin-top:6px; }
.muted { color:var(--mute); }
[data-dark] .body { color:var(--on-dark-2); }
[data-dark] .body--l { color:var(--on-dark); }
[data-dark] .muted { color:var(--mute-d); }
[data-dark] strong { color:var(--on-dark); }
.pull { font-family:var(--serif); font-size:clamp(21px,1.8vw,27px); line-height:1.25; }
.pull--rule { padding-top:20px; border-top:1px solid var(--rule-l); }
[data-dark] .pull--rule { border-color:var(--rule-d); }
.serif-m { font-family:var(--serif); font-size:clamp(19px,1.7vw,25px); line-height:1.15; }

.stack { display:flex; flex-direction:column; gap:20px; }
.stack-s { display:flex; flex-direction:column; gap:12px; }
.measure { max-width:52ch; }
.measure-w { max-width:62ch; }
.gap-top { margin-top:clamp(40px,5vw,80px); }
.gap-top-s { margin-top:clamp(22px,2.6vw,40px); }

/* ------------------------------------------------------------- buttons ---*/
.btn { display:inline-flex; align-items:center; gap:14px; font:500 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; padding:18px 24px; border:1px solid transparent; cursor:pointer; transition:background .35s, color .35s, border-color .35s; }
.btn-arrow { transition:transform .4s var(--ease); }
.btn:hover .btn-arrow { transform:translateX(5px); }
.btn--brass { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--brass:hover { background:var(--accent-text); border-color:var(--accent-text); color:var(--paper); }
.btn--ghost { color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover { border-color:var(--accent); color:var(--accent-text); }
.btn--line { color:var(--ink); border-color:var(--ink); align-self:flex-start; margin-top:auto; }
.btn--line:hover { background:var(--ink); color:var(--paper); }
.btn--sm { padding:12px 16px; font-size:11px; }

/* -------------------------------------------------------------- header ---*/
.site-header { position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px var(--gx) 14px var(--gl); background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px); color:var(--on-dark); border-bottom:1px solid var(--rule-d); }
.brand { display:flex; align-items:center; gap:12px; }
.brand-star { width:16px; height:16px; fill:none; stroke:var(--accent); stroke-width:1.2; overflow:visible; }
.wordmark { font:500 15px/1 var(--sans); letter-spacing:.34em; }
.wordmark-q { display:inline-block; min-width:.8em; color:var(--accent-soft); letter-spacing:0; margin-right:.36em; }
.primary-nav { display:flex; gap:clamp(14px,2.2vw,32px); font:400 11px/1 var(--sans); letter-spacing:.16em; color:var(--on-dark-2); }
.primary-nav a { display:flex; gap:7px; align-items:baseline; transition:color .3s; }
.primary-nav a:hover { color:var(--on-dark); }
.nav-n { font-size:9px; color:var(--accent-soft); letter-spacing:.06em; }
.progress { position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--accent); }

/* ------------------------------------------------------- spine overlays ---*/
.rail { position:absolute; left:clamp(12px,2.2vw,26px); top:0; bottom:0; width:1px; background:var(--rail); pointer-events:none; }
.spine { position:fixed; left:clamp(12px,2.2vw,26px); top:0; z-index:26; width:1px; height:0; pointer-events:none; }
.spine-node { position:absolute; left:-2.5px; top:0; width:6px; height:6px; background:var(--accent); border-radius:50%; transition:top .12s linear; }
.spine-trail { position:absolute; left:0; top:0; width:1px; height:0; background:linear-gradient(var(--accent),transparent); opacity:.6; }
.spine-fork { position:absolute; left:0; top:0; width:clamp(18px,3vw,34px); height:1px; background:var(--accent); transform-origin:left center; transform:scaleX(0); transition:transform .5s cubic-bezier(.2,.7,0,1),opacity .5s; opacity:0; }
.spine-label { position:absolute; left:clamp(22px,3.4vw,40px); top:-6px; font:400 9px/1 var(--sans); letter-spacing:.2em; color:var(--accent-text); white-space:nowrap; opacity:0; transition:opacity .4s; }
.scan { position:fixed; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:0; z-index:40; pointer-events:none; }
.seek { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.96); z-index:41; padding:14px 22px; border:1px solid var(--accent); background:color-mix(in srgb, var(--paper) 95%, transparent); color:var(--accent-text); font:400 11px/1 var(--sans); letter-spacing:.2em; transition:opacity .25s, transform .35s cubic-bezier(.2,.7,0,1); pointer-events:none; }

/* ---------------------------------------------------------------- hero ---*/
.hero { position:relative; display:flex; flex-direction:column; overflow:hidden; background:var(--paper); color:var(--ink); }
[data-hero-full] { min-height:calc(100vh - var(--header-h, 64px)); min-height:calc(100svh - var(--header-h, 64px)); }
.hero-stage { position:absolute; inset:0; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.14; filter:grayscale(1) contrast(.9); mix-blend-mode:multiply; }
.rete { position:absolute; top:50%; right:-8vw; width:min(76vw, 920px); aspect-ratio:1; transform:translateY(-52%); fill:none; }
.rete-spin { transform-origin:0 0; animation:spin 240s linear infinite; }
.r-thin { stroke:color-mix(in srgb, var(--ink) 22%, transparent); stroke-width:.5; }
.r-tick { stroke:color-mix(in srgb, var(--ink) 28%, transparent); stroke-width:.5; }
.r-ray  { stroke:color-mix(in srgb, var(--ink) 9%, transparent); stroke-width:.5; stroke-dasharray:2 4; }
.r-node { fill:var(--paper); stroke:var(--accent); stroke-width:.6; }
[data-hero-full] [data-seq] { position:absolute; inset:0 0 0 38%; width:62%; height:100%; display:block; }
.hero-scrim { position:absolute; inset:0; background:linear-gradient(90deg, color-mix(in srgb, var(--paper) 96%, transparent) 0%, color-mix(in srgb, var(--paper) 70%, transparent) 42%, rgba(243,242,239,0) 72%); }
.hero-hud { position:relative; z-index:2; display:flex; justify-content:space-between; gap:16px; padding:clamp(16px,2.2vw,26px) var(--gx) 0 var(--gl); font:400 10px/1 var(--sans); letter-spacing:.16em; color:var(--mute); }
.hud-coord { margin-left:auto; margin-right:32px; }
.hero-body { position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:center; gap:clamp(26px,3.4vw,52px); padding:clamp(24px,3vw,48px) var(--gx) clamp(24px,3vw,48px) var(--gl); }
.hero-body h1 [data-line]:last-child { }
.hero h1 .ln:last-child [data-line] { color:var(--ink); }
.hero-lower { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; }
.hero-lede { font-family:var(--serif); font-size:clamp(19px,1.6vw,25px); line-height:1.35; letter-spacing:-.015em; max-width:34ch; color:var(--on-dark); }
.hero-sub { margin-top:14px; font-size:15px; line-height:1.55; color:var(--on-dark-2); max-width:44ch; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,2.6vw,34px); }
.hero-stages { position:relative; z-index:2; display:flex; border-top:1px solid var(--rule-d); background:color-mix(in srgb, var(--paper) 80%, transparent); backdrop-filter:blur(4px); font:400 10px/1 var(--sans); letter-spacing:.16em; }
.hero-stages > div { flex:1; min-width:0; padding:14px 12px; border-right:1px solid var(--rule-d); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--stage-off); transition:color .5s; }
.hero-stages > div:last-child { border-right:0; }
.stage-n { margin-right:8px; opacity:.6; }
.hero-ticker { position:relative; z-index:2; border-top:1px solid var(--rule-d); overflow:hidden; background:var(--paper); color:var(--mute); border-bottom:1px solid var(--rule-l); }
.ticker { display:flex; width:max-content; animation:tick 46s linear infinite; }
.ticker-run { display:flex; align-items:center; gap:28px; padding:13px 14px; font:400 11px/1 var(--sans); letter-spacing:.22em; white-space:nowrap; }
.tick-star { width:8px; height:8px; fill:none; stroke:var(--accent); stroke-width:1.4; overflow:visible; }
.hero--split { min-height:auto; }

/* ------------------------------------------------------------ sections ---*/
.sec { position:relative; padding:var(--sy) var(--gx) var(--sy) var(--gl); border-top:1px solid var(--rule-l); }
.sec--stone { background:var(--stone); }
.sec--dark { background:var(--tone); color:var(--ink); }
.sec--lapis { background:var(--tone); }
.sec-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; align-items:flex-end; }
.sec-head .display--l { margin-top:24px; }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:clamp(32px,5vw,96px); }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(28px,4vw,72px); }

.rules { display:flex; flex-direction:column; border-top:1px solid var(--rule-l); }
.rules li { display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--rule-l); font:400 11px/1.5 var(--sans); letter-spacing:.14em; color:var(--mute); }
.li-star { flex:none; width:10px; height:10px; fill:none; stroke:var(--accent); stroke-width:1.3; overflow:visible; }

/* panels: an instrument plate — hairline, labelled corners */
.panel { position:relative; border:1px solid var(--rule-l); background:color-mix(in srgb, var(--surface) 35%, transparent); }
.panel::before, .panel::after { content:""; position:absolute; width:7px; height:7px; border-color:var(--accent); border-style:solid; pointer-events:none; }
.panel::before { top:-1px; left:-1px; border-width:1px 0 0 1px; }
.panel::after { bottom:-1px; right:-1px; border-width:0 1px 1px 0; }
.panel--tint { background:var(--surface); }
[data-dark] .panel { border-color:var(--rule-d); background:color-mix(in srgb, var(--surface) 40%, transparent); }
.panel-head, .panel-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 12px; padding:11px 16px; color:var(--mute); font-size:10px; }
.panel-head { border-bottom:1px solid var(--rule-l); }
.panel-foot { border-top:1px solid var(--rule-l); letter-spacing:.08em; text-transform:none; font-size:12px; font-weight:400; }
[data-dark] .panel-head, [data-dark] .panel-foot { color:var(--mute-d); border-color:var(--rule-d); }

.bridge { display:grid; grid-template-columns:1fr auto 1fr; }
.bridge-side { padding:clamp(20px,2.2vw,30px); display:flex; flex-direction:column; justify-content:center; gap:10px; }
.bridge-axis { position:relative; width:1px; background:var(--rule-d); overflow:hidden; }
.bridge-pulse { position:absolute; left:-1px; width:3px; height:14px; background:var(--accent); animation:creep 4.2s linear infinite; }
.surfaces { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); border-top:1px solid var(--rule-d); font:400 11px/1.4 var(--sans); letter-spacing:.06em; color:var(--ink-2); }
.surfaces > div { padding:16px 14px; border-right:1px solid var(--rule-d); border-bottom:1px solid var(--rule-d); margin:0 -1px -1px 0; }

/* model */
.flow { margin-top:clamp(32px,4vw,64px); padding:clamp(18px,2.4vw,32px); }
.flow-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1.2vw,18px); }
.flow-step { padding:18px 16px; border:1px solid var(--rule-l); }
.flow-label { margin-top:10px; font-family:var(--serif); font-size:clamp(15px,1.3vw,20px); line-height:1.2; }
.flow-stems > div { height:34px; margin-left:24px; border-left:1px dashed var(--accent); opacity:.7; }
.flow-branch { display:flex; align-items:center; gap:18px; padding:18px 16px; background:var(--night); color:var(--paper); }
.flow-branch .label { color:var(--accent-soft) !important; }
[data-flow] { transition:border-color .5s, background .5s; }
.flow-step[data-on] { border-color:var(--ink); background:var(--paper); }
[data-flow="4"] { opacity:.85; transition:opacity .6s; }
[data-flow="4"][data-on] { opacity:1; }

.stages { margin-top:clamp(28px,3vw,48px); border-bottom:1px solid var(--rule-l); }
.stage-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr); gap:clamp(20px,3vw,56px); padding:clamp(28px,3.2vw,46px) 0; border-top:1px solid var(--rule-l); }
.stage-row:first-child { border-top-color:var(--ink); }
.stage-row--venture { grid-template-columns:minmax(0,1fr) minmax(0,2.15fr); background:var(--tone); color:var(--ink); padding-left:clamp(18px,2vw,32px); padding-right:clamp(18px,2vw,32px); border-top:0; }
.stage-row--venture .label { color:var(--accent-soft) !important; }
.stage-row--venture .body { color:var(--ink-2); }
.tags { display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start; color:var(--mute); font-size:10px; }
.tags span { border:1px solid var(--rule-l); padding:8px 11px; border-radius:999px; }

/* sovereignty */
.owns { display:flex; flex-direction:column; border-left:1px solid var(--accent); padding-left:20px; gap:6px; font-family:var(--serif); font-size:clamp(21px,2vw,28px); line-height:1.2; }
.dep-grid { display:grid; grid-template-columns:repeat(5,1fr); }
.dep-grid > div { padding:20px 10px; border-right:1px solid var(--rule-l); font:400 10px/1.35 var(--sans); letter-spacing:.1em; }
.dep-grid > div:last-child { border-right:0; }
[data-dep] { transition:background .45s, color .45s; }
[data-dep][data-on] { background:var(--night); color:var(--paper); }
.dep-axis { align-items:center; font-weight:500; text-transform:uppercase; font-size:10px; letter-spacing:.12em; }
.dep-line { flex:1; height:1px; background:linear-gradient(90deg, var(--rule-l), var(--accent)); }
.control-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 16px; border-bottom:1px solid var(--rule-l); }
.control-row:last-child { border-bottom:0; }
.pulse-star { width:10px; height:10px; fill:none; stroke:var(--accent); stroke-width:1.3; overflow:visible; animation:pulse 3.2s ease-in-out infinite; }
.ref-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.ref-grid > div { padding:clamp(18px,2vw,28px); border-right:1px solid var(--rule-l); }
.ref-grid > div:last-child { border-right:0; }
.ref-grid .serif-m { margin-top:12px; }
[data-ref] { transition:background .5s; }
[data-ref][data-on] { background:var(--surface); }

/* capabilities */
.cap-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:clamp(24px,3vw,56px); margin-top:clamp(32px,4vw,60px); align-items:start; }
.cap-list { border-top:1px solid var(--ink); }
.cap-row { display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; padding:20px 10px; border-bottom:1px solid var(--rule-l); cursor:default; transition:background .3s, padding .4s var(--ease); }
.cap-n { font:400 11px/2 var(--sans); letter-spacing:.1em; color:var(--accent-text); }
[data-cap]:hover, [data-cap]:focus-visible { background:var(--surface); outline:none; padding-left:18px; }
[data-cap]:focus-visible { box-shadow:inset 2px 0 0 var(--accent); }
.cap-panel { position:sticky; top:92px; }
.cap-canvas { position:relative; height:clamp(260px,30vw,380px); background-image:linear-gradient(var(--rule-f) 1px, transparent 1px), linear-gradient(90deg, var(--rule-f) 1px, transparent 1px); background-size:24px 24px; background-position:center; }
.cap-canvas::after { content:""; position:absolute; inset:0; background:radial-gradient(closest-side, color-mix(in srgb, var(--surface) 40%, transparent), var(--surface)); pointer-events:none; }
[data-capdiag] { opacity:0; transition:opacity .4s; z-index:1; }
[data-capdiag][data-on] { opacity:1; }
.dg-accent { stroke:var(--accent); stroke-width:1.1; }
.dg-ink { stroke:var(--ink); }
.dg-faint { stroke:#9AA0B5; }

/* proof */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.stat-grid > div { padding:28px 18px; border-right:1px solid var(--rule-l); }
.stat { font-family:var(--serif); font-size:clamp(40px,4.4vw,66px); line-height:1; margin-bottom:12px; }

/* ventures */
.fly-row { display:grid; grid-template-columns:28px minmax(5.5em,auto) 1fr; align-items:baseline; gap:18px; padding:20px 16px; border-bottom:1px solid var(--rule-l); transition:background .5s; }
[data-dark] .fly-row { border-color:var(--rule-d); }
.fly-title { font-family:var(--serif); font-size:clamp(22px,2.2vw,32px); line-height:1.1; }
.fly-row.is-accent .fly-title, .fly-row.is-accent .label { color:var(--accent-soft); }
.fly-row .body--s { margin:0; }
.fly-spin { display:inline-block; color:var(--accent-soft); }
[data-fly][data-on] { background:var(--surface); }
[data-dark] [data-fly][data-on] { background:color-mix(in srgb, var(--surface) 55%, transparent); }

/* build */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(16px,2vw,28px); margin-top:30px; }
.card { position:relative; display:flex; flex-direction:column; gap:20px; padding:clamp(28px,3vw,48px); border:1px solid var(--rule-l); background:color-mix(in srgb, var(--surface) 50%, transparent); transition:border-color .4s, transform .5s var(--ease); }
.card:hover { border-color:var(--ink); }
.card .display--s { margin-top:0; }
.card-n { position:absolute; top:clamp(20px,2vw,32px); right:clamp(20px,2vw,32px); font:400 11px/1 var(--sans); letter-spacing:.16em; color:var(--mute); }
.card-list { display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--mute); }
.card-list li { padding-left:18px; position:relative; }
.card-list li::before { content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border:1px solid var(--accent); border-radius:50%; }

/* people */
.natives { display:flex; flex-direction:column; gap:10px; font-size:15px; color:var(--mute); }
.natives li { padding-bottom:10px; border-bottom:1px solid var(--rule-l); }
.natives .strong { color:var(--ink); font-weight:500; border-bottom:0; }
.multi { display:flex; flex-direction:column; gap:6px; font-family:var(--serif); font-size:clamp(22px,2.2vw,32px); line-height:1.15; }

/* why */
.why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(32px,5vw,88px); margin-top:26px; align-items:start; }
.why-grid .display--m { margin-top:0; }
.portrait-frame { position:relative; border:1px solid var(--rule-l); padding:12px; overflow:hidden; }
.portrait img { display:block; width:100%; height:auto; filter:grayscale(.85) sepia(.15) contrast(1.02); mix-blend-mode:multiply; }

.portrait-grid { position:absolute; inset:12px; width:calc(100% - 24px); height:calc(100% - 24px); fill:none; stroke:color-mix(in srgb, var(--paper) 45%, transparent); stroke-width:.25; z-index:1; vector-effect:non-scaling-stroke; }
.portrait-grid * { vector-effect:non-scaling-stroke; stroke-width:1; }
.portrait figcaption { margin-top:12px; letter-spacing:.1em; line-height:1.6; }
.strip { margin-top:clamp(32px,4vw,60px); display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); border:1px solid var(--rule-l); counter-reset:s; font:400 10px/1.4 var(--sans); letter-spacing:.14em; color:var(--mute); text-transform:uppercase; }
.strip li { padding:18px 12px; border-right:1px solid var(--rule-l); counter-increment:s; }
.strip li::before { content:counter(s, decimal-leading-zero); display:block; margin-bottom:8px; color:var(--accent-text); }
.strip li:last-child { border-right:0; color:var(--ink); }

/* principles */
.principles { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0 clamp(20px,3vw,48px); margin-top:clamp(32px,4vw,60px); }
.principles li { display:flex; flex-direction:column; gap:14px; padding:26px 0 30px; border-top:1px solid var(--ink); font-family:var(--serif); font-size:clamp(19px,1.6vw,23px); line-height:1.3; }

/* closing */
.sec--close { padding-top:clamp(96px,11vw,190px); overflow:hidden; }
.close-star { position:absolute; right:-8vw; top:-10vw; width:min(46vw,600px); height:min(46vw,600px); fill:none; stroke:color-mix(in srgb, var(--ink) 14%, transparent); stroke-width:.04; overflow:visible; pointer-events:none; animation:spin 300s linear infinite reverse; }
.sec--close > *:not(.close-star):not(.rail) { position:relative; }
.intake-body { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(18px,2.4vw,36px); padding:clamp(22px,3vw,40px); }
.field { display:flex; flex-direction:column; gap:10px; font:400 10px/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--mute-d); }
.field input, .field textarea, .field select { padding:14px 13px; background:var(--surface); border:1px solid var(--rule-d); color:var(--ink); font:400 16px/1.5 var(--body); letter-spacing:0; text-transform:none; resize:vertical; border-radius:0; transition:border-color .3s; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 1px var(--accent); }
.field textarea::placeholder { color:#8A8B8D; }
.intake-side { display:flex; flex-direction:column; gap:14px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
[data-disc] { border:1px solid var(--rule-d); padding:9px 13px; border-radius:999px; font:400 11px/1 var(--sans); letter-spacing:.06em; color:var(--mute-d); transition:border-color .4s, color .4s, background .4s; }
[data-disc][data-on] { border-color:var(--accent); color:var(--accent-text); background:color-mix(in srgb, var(--ink) 8%, transparent); }
.intake-note { margin-top:auto; padding-top:14px; border-top:1px solid var(--rule-d); font-size:13px; line-height:1.6; color:var(--mute-d); }
.doors { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); border-top:1px solid var(--rule-d); }
[data-door] { text-align:left; padding:22px 20px; border:0; border-right:1px solid var(--rule-d); background:transparent; color:var(--mute-d); cursor:pointer; transition:background .35s, color .35s; }
[data-door]:last-child { border-right:0; }
[data-door]:hover { color:var(--on-dark); }
[data-door][data-on] { background:var(--surface); color:var(--ink); }
[data-door][data-on] .label { color:var(--accent-text) !important; }
.door-title { display:block; margin-top:12px; font-family:var(--serif); font-size:clamp(20px,1.9vw,27px); line-height:1.15; }
[data-panel] { display:none; }
[data-panel][data-on] { display:grid; }
.intake-form { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(16px,2vw,28px); padding:clamp(22px,3vw,40px); border-top:1px solid var(--rule-d); }
.form-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.form-actions .label { text-transform:none; letter-spacing:.02em; font-size:13px; font-weight:400; }
.site-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; align-items:center; margin-top:clamp(64px,8vw,128px); padding-top:26px; border-top:1px solid var(--rule-d); }
.foot-nav { display:flex; flex-wrap:wrap; gap:clamp(14px,2.4vw,32px); font:400 11px/1 var(--sans); letter-spacing:.14em; color:var(--mute); }
.foot-nav a:hover { color:var(--ink); }

/* [data-seek] state */
[data-seek] { display:none; opacity:0; }
[data-seek][data-on] { display:block; opacity:1; }

/* link underline draw (in-page links that are not buttons) */
.foot-nav a, .primary-nav a { background-image:linear-gradient(var(--accent),var(--accent)); background-size:0% 1px; background-repeat:no-repeat; background-position:left bottom; padding-bottom:4px; transition:background-size .45s cubic-bezier(.2,.7,0,1), color .3s; }
.foot-nav a:hover, .primary-nav a:hover { background-size:100% 1px; }

/* Honeypot: off-screen, out of tab order and a11y tree via markup. */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.skip-link { position:absolute; left:-9999px; top:0; z-index:60; padding:14px 20px; background:var(--ink); color:var(--paper); font:500 12px/1 var(--sans); letter-spacing:.14em; }
.skip-link:focus { left:0; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* ----------------------------------------------------------- responsive ---*/
@media (max-width: 1100px) {
  .hud-coord { display:none; }
}
@media (max-width: 900px) {
  [data-primary-nav] { display:none !important; }
  [data-hero-full] [data-seq] { inset:0; width:100%; }
  .rete { right:-40vw; width:120vw; top:40%; opacity:.8; }
  .hero-scrim { background:linear-gradient(180deg, color-mix(in srgb, var(--paper) 60%, transparent) 0%, color-mix(in srgb, var(--paper) 86%, transparent) 45%, color-mix(in srgb, var(--paper) 92%, transparent) 100%); }
  .hero-lower { flex-direction:column; align-items:flex-start; }
  .label--note { text-align:left; }
}
@media (max-width: 760px) {
  .grid-2, .grid-3, .cap-grid, .cards, .why-grid, .intake-body { grid-template-columns:minmax(0,1fr); }
  .hero-stages { display:grid; grid-template-columns:repeat(3,1fr); }
  .hero-stages > div:nth-child(-n+3) { border-bottom:1px solid var(--rule-d); }
  .hero-stages > div:nth-child(3n) { border-right:0; }
  .flow-grid { grid-template-columns:repeat(2,1fr); }
  .flow-stems { display:none; }
  .dep-grid { grid-template-columns:repeat(2,1fr); }
  .dep-grid > div { border-bottom:1px solid var(--rule-l); }
  .stage-row, .stage-row--venture { grid-template-columns:minmax(0,1fr); }
  .ticker { animation-duration:30s; }
  .fly-row { grid-template-columns:28px 1fr; }
  .fly-row .body--s { grid-column:2; }
  .bridge { grid-template-columns:minmax(0,1fr); }
  .bridge-axis { width:auto; height:1px; }
  .bridge-pulse { display:none; }
}
@media (max-width: 560px) {
  .flow-grid, .dep-grid, .principles, .doors { grid-template-columns:minmax(0,1fr); }
  [data-door] { border-right:0; border-bottom:1px solid var(--rule-d); }
  .cap-panel { position:static; }
  [data-hero-cta] > a { flex:1 1 100%; justify-content:center; }
  .site-header { gap:12px; padding-left:18px; padding-right:18px; }
  [data-header-cta] { font-size:10px; letter-spacing:.1em; padding:11px 12px; white-space:nowrap; }
  [data-header-cta] .btn-arrow { display:none; }
  .hero-hud span:first-child { max-width:70%; }
  .strip li { border-right:0; border-bottom:1px solid var(--rule-l); }
  .ref-grid > div, .stat-grid > div { border-right:0; border-bottom:1px solid var(--rule-l); }
}
@media (hover: none) { [data-cap] { cursor:pointer; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-r] { opacity:1 !important; transform:none !important; }
  [data-capdiag="0"] { opacity:1; }
}

/* ===========================================================================
   v3 — monochrome, editorial, scroll-led.

   Two themes, one set of tokens. Dark sections carry the dark tokens on their
   own (the no-JS fallback). With v3.js running (html[data-v3]) sections go
   transparent and the whole page inverts as a dark section crosses the
   viewport's midline; the tokens are registered so the swap cross-fades.
   =========================================================================== */
@property --paper   { syntax:'<color>'; inherits:true; initial-value:#F4F4F2; }
@property --ink     { syntax:'<color>'; inherits:true; initial-value:#0C0D0F; }
@property --ink-2   { syntax:'<color>'; inherits:true; initial-value:#3A3B3E; }
@property --mute    { syntax:'<color>'; inherits:true; initial-value:#696A6D; }
@property --rule-l  { syntax:'<color>'; inherits:true; initial-value:#D6D6D2; }
@property --surface { syntax:'<color>'; inherits:true; initial-value:#FFFFFF; }

:root {
  --paper:#F4F4F2; --stone:#F4F4F2; --tone:#F4F4F2; --surface:#FFFFFF;
  --ink:#0C0D0F; --ink-2:#3A3B3E; --mute:#696A6D; --rule-l:#D6D6D2; --rule-d:#D6D6D2; --rule-f:#EAEAE7;
  --on-dark:#0C0D0F; --on-dark-2:#3A3B3E; --mute-d:#696A6D; --night:#0C0D0F;
  /* the one tiny accent: a signal dot, used by the spine, progress and focus */
  --signal:#8C8C88;
  --accent:#8C8C88; --accent-text:#696A6D; --accent-soft:#8C8C88; --accent-rgb:140,140,136;
  --seq-ink:150,150,148; --rail:transparent; --rail-dark:transparent;
  --stage-on:currentColor; --stage-off:#7A7B7E; --glyph-dim-rgb:130,130,128; --bar-off-rgb:110,110,108;
  --wipe: cubic-bezier(.77,0,.18,1);
}
html:not([data-v3]) [data-dark], html[data-v3] [data-dark].lit, html[data-v3] .site-header[data-invert] {
  --paper:#0B0C0E; --surface:#141518; --ink:#F2F2F0; --ink-2:#B4B5B8; --mute:#8E8F93;
  --rule-l:#26272B; --rule-d:#26272B; --rule-f:#18191C;
  --on-dark:#F2F2F0; --on-dark-2:#B4B5B8; --mute-d:#8E8F93; --night:#F2F2F0;
}
html { background:var(--paper); color:var(--ink);
  }
body { background:transparent; color:var(--ink); }
html:not([data-v3]) [data-dark] { background:var(--paper); color:var(--ink); }
html[data-v3] .sec, html[data-v3] .hero, html[data-v3] .sec--stone, html[data-v3] .sec--dark, html[data-v3] .sec--lapis { background:transparent; }
.sec, .sec--dark { border-top:0; }
.rail { display:none; }

/* ------------------------------------------------------------- type ---*/
.display { letter-spacing:-.045em; font-weight:400; }
.display--hero { font-size:clamp(52px, 12.2vw, 212px); line-height:.86; letter-spacing:-.055em; }
.display--xl { font-size:clamp(46px, 9vw, 160px); line-height:.9; letter-spacing:-.05em; }
.display--l  { font-size:clamp(38px, 6.6vw, 116px); line-height:.92; letter-spacing:-.048em; }
.display--m  { font-size:clamp(30px, 4.6vw, 76px); line-height:.98; }
.display--s  { font-size:clamp(24px, 2.4vw, 38px); }
.accent { color:var(--mute); }
[data-dark] .accent { color:var(--ink); }
.struck { color:var(--mute); opacity:.55; text-decoration-color:currentColor; }
.kicker::before { background:var(--ink); width:20px; }
.kicker { color:var(--ink-2); }
[data-dark] .kicker { color:var(--ink-2); }
.pull, .serif-m, .owns, .multi, .fly-title, .door-title, .principles li, .stat, .flow-label { letter-spacing:-.025em; }
.sec { padding-top:clamp(110px,14vw,220px); padding-bottom:clamp(110px,14vw,220px); }
.accent-tx, [data-dark] .accent-tx { color:var(--ink) !important; }
.tags span, [data-disc] { border-radius:0; }

/* ----------------------------------------------------------- header ---*/
.site-header { margin:8px; border:1px solid var(--rule-l); border-radius:4px; top:8px; background:color-mix(in srgb, var(--paper) 82%, transparent); padding:12px 16px 12px 20px; }
.brand-star { stroke:var(--ink); }
.nav-n { color:var(--mute); }
.primary-nav, .primary-nav a { color:var(--ink-2); }
.btn--brass, [data-header-cta] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--brass:hover { background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost, .btn--line { color:var(--ink); border-color:var(--rule-l); }
.btn--ghost:hover, .btn--line:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.progress, .spine-node { background:var(--signal) !important; }
.spine-trail { background:linear-gradient(var(--signal),transparent); opacity:.4; }

/* ------------------------------------------------------------- hero ---*/
.hero { margin-top:-66px; padding-top:66px; }
[data-hero-full] { min-height:100vh; min-height:100svh; }
.hero-video { opacity:.16; mix-blend-mode:normal; filter:grayscale(1) contrast(1.05); }
html:not([data-invert]) .hero-video { mix-blend-mode:multiply; }
.hero-scrim { background:linear-gradient(90deg, color-mix(in srgb, var(--paper) 96%, transparent) 0%, color-mix(in srgb, var(--paper) 72%, transparent) 46%, transparent 78%), linear-gradient(0deg, var(--paper) 0%, transparent 22%); }
.r-thin, .r-tick { stroke:color-mix(in srgb, var(--ink) 16%, transparent); stroke-width:.4; }
.r-ray { stroke:color-mix(in srgb, var(--ink) 7%, transparent); }
.r-node { fill:var(--paper); stroke:color-mix(in srgb, var(--ink) 40%, transparent); }
.hero-stages, .hero-ticker { background:transparent; backdrop-filter:none; border-color:var(--rule-l); color:var(--mute); }
.hero-stages > div { border-color:var(--rule-l); }
.tick-star { stroke:var(--mute); }
.hero-sub, .hero-hud { color:var(--mute); }

/* ------------------------------------------- panels / rows / surfaces ---*/
.panel::before, .panel::after { border-color:var(--ink); }
.panel, [data-dark] .panel { background:transparent; }
.panel--tint, .card, .flow-step[data-on], [data-ref][data-on], [data-cap]:hover, [data-cap]:focus-visible, [data-fly][data-on], [data-dark] [data-fly][data-on] { background:var(--surface); }
.flow-branch, [data-dep][data-on] { background:var(--ink); color:var(--paper); }
.flow-branch .label { color:var(--paper) !important; opacity:.7; }
.stage-row--venture { background:var(--ink); color:var(--paper); }
.stage-row--venture .body, .stage-row--venture .label { color:var(--paper) !important; opacity:.78; }
.cap-list, .stage-row:first-child, .principles li { border-top-color:var(--ink); }
.dg-faint { stroke:var(--mute); }
.field textarea::placeholder { color:var(--mute); }
.portrait-frame { border-color:var(--rule-l); }
.portrait img { filter:grayscale(1) contrast(1.08); mix-blend-mode:normal; }
.close-star { stroke:color-mix(in srgb, var(--ink) 10%, transparent); }
[data-disc][data-on] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
[data-door][data-on] { background:var(--ink); color:var(--paper); }
[data-door][data-on] .label { color:var(--paper) !important; opacity:.7; }
:focus-visible { outline-color:var(--ink); }

/* ===================================================== motion system ===
   One vocabulary for every transition. Defaults are the END state, so with
   no JS, a failed observer or reduced motion, everything is visible. */
:root {
  --e-out: cubic-bezier(.16,1,.3,1);     /* entries: fast start, long settle */
  --e-io:  cubic-bezier(.77,0,.18,1);    /* wipes + theme inversion          */
  --wipe:  var(--e-io);
  --d-1: .3s;  --d-2: .6s;  --d-3: .9s;  --d-4: 1.2s;
  --stagger: 70ms;
}
/* v3 owns entry motion: neutralise site.js's legacy fade-up and line slide so
   nothing animates twice. */
html[data-v3] [data-r][data-hide] { opacity:1; transform:none; animation:none; }
html[data-v3] [data-line] { transform:none !important; transition:none !important; }

/* 0. Inversion: every themed token crossfades on the same curve and clock. */
@property --rule-d   { syntax:'<color>'; inherits:true; initial-value:#D6D6D2; }
@property --rule-f   { syntax:'<color>'; inherits:true; initial-value:#EAEAE7; }
@property --mute-d   { syntax:'<color>'; inherits:true; initial-value:#696A6D; }
@property --on-dark  { syntax:'<color>'; inherits:true; initial-value:#0C0D0F; }
@property --on-dark-2{ syntax:'<color>'; inherits:true; initial-value:#3A3B3E; }
@property --night    { syntax:'<color>'; inherits:true; initial-value:#0C0D0F; }
html[data-v3] .sec--dark, html[data-v3] .site-header { transition-property:--paper,--surface,--ink,--ink-2,--mute,--rule-l,--rule-d,--rule-f,--mute-d,--on-dark,--on-dark-2,--night,background-color,border-color,color;
  transition-duration:var(--d-4); transition-timing-function:var(--e-io); }

/* Shared delay hook: v3.js sets --i per entry batch. */
html[data-v3] .is-in, html[data-v3] .is-in::before { transition-delay:calc(var(--i, 0) * var(--stagger)); }

/* 1. Section hairline draws left→right. */
.sec::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--rule-l); transform-origin:left; transform:scaleX(1); transition:transform var(--d-4) var(--e-io); }
html[data-v3] .sec.pre::before { transform:scaleX(0); }

/* 2. Every wipe opens left→right: headlines (per line), plates, cards, portrait. */
html[data-v3] h2.display .ln, html[data-v3] h3.display--m,
html[data-v3] .panel, html[data-v3] .card, html[data-v3] .portrait-frame { clip-path:inset(0 0 0 0); }
html[data-v3] h2.display .ln, html[data-v3] h3.display--m { transition:clip-path var(--d-3) var(--e-io); }
html[data-v3] .panel, html[data-v3] .portrait-frame { transition:clip-path var(--d-4) var(--e-io); }
html[data-v3] .card { transition:clip-path var(--d-4) var(--e-io), border-color var(--d-1) var(--e-out); }
html[data-v3] .pre .ln, html[data-v3] h2.display.pre .ln, html[data-v3] h3.display--m.pre,
html[data-v3] .panel.pre, html[data-v3] .card.pre, html[data-v3] .portrait-frame.pre { clip-path:inset(0 100% 0 0); }
html[data-v3] h2.display .ln:nth-child(2) { transition-delay:calc(var(--i,0) * var(--stagger) + var(--stagger)); }
html[data-v3] h2.display .ln:nth-child(3) { transition-delay:calc(var(--i,0) * var(--stagger) + 2 * var(--stagger)); }
html[data-v3] h2.display .ln:nth-child(4) { transition-delay:calc(var(--i,0) * var(--stagger) + 3 * var(--stagger)); }
.portrait-frame img { transform:scale(1); transition:transform var(--d-4) var(--e-out); }
html[data-v3] .portrait-frame.pre img { transform:scale(1.06); }

/* 3. List rows rise in sequence; hover feedback keeps its own fast clock. */
html[data-v3] .stage-row, html[data-v3] .principles li, html[data-v3] .rules li {
  transition:opacity var(--d-3) var(--e-out), transform var(--d-3) var(--e-out); }
html[data-v3] .cap-row { transition:opacity var(--d-3) var(--e-out), transform var(--d-3) var(--e-out), background var(--d-1) var(--e-out), padding var(--d-2) var(--e-out); }
html[data-v3] .pre-row { opacity:0; transform:translateY(16px); }
html[data-v3] .is-in:hover, html[data-v3] .cap-row:focus-visible { transition-delay:0s; }

/* 4. Pinned model: stage titles hold beneath the floating header. */
@media (min-width: 900px) {
  .stage-row > div:first-child { position:sticky; top:104px; align-self:start; }
}

@media (max-width: 760px) {
  .site-header { margin:6px; top:6px; }
  .hero { margin-top:-62px; padding-top:62px; }
}
@media (prefers-reduced-motion: reduce) {
  html { transition:none; }
  html[data-v3] .pre, html[data-v3] .pre .ln, html[data-v3] .pre-row, html[data-v3] .pre img, html[data-v3] .sec::before {
    clip-path:none !important; opacity:1 !important; transform:none !important; transition:none !important; }
}
@media (max-width: 600px) { .display--hero { font-size:clamp(36px, 11vw, 80px); letter-spacing:-.05em; } }


/* ============================================================ v4 =======
   Grid, index, hero, Engineering chapters, local dark. Same motion tokens. */

/* 5. One 12-column grid. --col is a column, --gut a gutter; spans are
      expressed with them so every headline ends on a column line. */
:root { --gut:clamp(16px,2vw,32px); --col:calc((100vw - var(--gl) - var(--gx) - 11 * var(--gut)) / 12); }
.display--xl { max-width:calc(10 * var(--col) + 9 * var(--gut)); }
.display--l  { max-width:calc(9 * var(--col) + 8 * var(--gut)); }
.display--m  { max-width:calc(8 * var(--col) + 7 * var(--gut)); }
.display--hero { max-width:none; }
.measure { max-width:calc(5 * var(--col) + 4 * var(--gut)); min-width:min(100%,36ch); }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gut); }
  .grid-2 > :nth-child(odd)  { grid-column:1 / span 5; }
  .grid-2 > :nth-child(even) { grid-column:7 / span 6; }
  .g12 { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gut); }
}

/* 2. Live section index + header progress. */
.progress { height:2px; bottom:-1px; background:var(--ink) !important; opacity:.85; transition:background-color var(--d-1) var(--e-out); }
.sec-index { display:flex; align-items:baseline; gap:8px; font:500 10px/1 var(--sans); letter-spacing:.16em; color:var(--mute); margin-left:auto; margin-right:18px; white-space:nowrap; }
.sec-index-n, .sec-index-name { display:inline-block; overflow:hidden; height:1.1em; }
.sec-index-n > span, .sec-index-name > span { display:inline-block; color:var(--ink); transition:transform var(--d-2) var(--e-out), opacity var(--d-2) var(--e-out); }
.sec-index-name > span { color:var(--ink-2); max-width:24ch; overflow:hidden; text-overflow:ellipsis; }
.sec-index [data-roll="out"] { transform:translateY(-110%); opacity:0; transition-duration:0s; }
.sec-index [data-roll="in"] { transform:translateY(110%); opacity:0; transition-duration:0s; }
.primary-nav a[aria-current="true"] { color:var(--ink); background-size:100% 1px; }
@media (max-width: 1180px) { .sec-index-name { display:none; } }
@media (max-width: 760px)  { .sec-index { margin-right:10px; } }

/* 3. Hero: one mono label, headline owns the width, letter field recedes. */
.hero-hud { visibility:hidden; height:0; padding-top:0; overflow:hidden; }
.hero-body > div:first-child { width:100%; }
.hero [data-seq] { opacity:.38; -webkit-mask-image:linear-gradient(90deg, transparent 52%, #000 92%); mask-image:linear-gradient(90deg, transparent 52%, #000 92%); }

/* 6. Dark is local: Engineering and Closing fill with black from their top
      hairline downward when they reach the viewport midline. */
html[data-v3] .sec--dark { isolation:isolate; color:var(--ink); }
html[data-v3] .sec--dark::after { content:""; position:absolute; inset:0; z-index:-1; background:#0B0C0E; clip-path:inset(0 0 100% 0); transition:clip-path var(--d-4) var(--e-io); pointer-events:none; }
html[data-v3] .sec--dark.lit::after { clip-path:inset(0 0 calc(100% - var(--fill, 100%)) 0); }
main { overflow-x:clip; }
html[data-v3] .sec--dark::before { z-index:1; }
html[data-v3] .site-header[data-invert] { background:color-mix(in srgb, var(--paper) 80%, transparent); }

/* 1 + 4. Engineering: pinned three-chapter stage over a full-bleed plate. */
.eng-chapters { list-style:none; margin:0; padding:0; display:grid; gap:28px; }
.eng-chapters li { display:grid; gap:14px; align-content:start; }
.eng-chapters .label { color:var(--mute); }
.eng-plate { margin:clamp(40px,5vw,72px) calc(-1 * var(--gx)) 0 calc(-1 * var(--gl)); border-left:0; border-right:0; }
.plate-bar { position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding:12px var(--gx) 12px var(--gl); border-bottom:1px solid var(--rule-l); font:500 10px/1 var(--sans); letter-spacing:.16em; color:var(--mute); }
.plate-id { display:flex; gap:10px; align-items:center; }
.plate-dot { width:6px; height:6px; border-radius:50%; background:var(--mute); transition:background-color var(--d-2) var(--e-out); }
.plate-tabs { display:flex; justify-content:center; gap:4px; }
.plate-tabs span { padding:6px 10px; border:1px solid transparent; transition:color var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out); }
.plate-prog { position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--ink); transform-origin:left; transform:scaleX(var(--p,1)); }
.eng-plate .bridge { padding:0 var(--gx) 0 var(--gl); background-image:linear-gradient(var(--rule-f) 1px, transparent 1px), linear-gradient(90deg, var(--rule-f) 1px, transparent 1px); background-size:32px 32px; }
.eng-plate .bridge-side { padding:clamp(24px,3vw,44px) 0; }
.eng-plate .bridge-side + .bridge-axis + .bridge-side { padding-left:clamp(24px,3vw,44px); }
.eng-plate .surfaces { grid-template-columns:repeat(7,minmax(0,1fr)); padding:0 calc(var(--gx) - 1px) 0 var(--gl); }
.eng-plate .surfaces > div { display:flex; flex-direction:column; gap:10px; padding:16px 14px 18px; }
.surf-n { color:var(--mute); font-size:9px; }
.eng-plate .bridge-side, .eng-plate .surfaces > div { transition:opacity var(--d-2) var(--e-out), color var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out); }
@media (max-width: 899px) {
  .eng-plate .surfaces { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plate-bar { grid-template-columns:1fr auto; } .plate-tabs { display:none; }
  .eng-plate .bridge-side + .bridge-axis + .bridge-side { padding-left:0; }
}

/* Pinned behaviour: desktop, JS on, motion allowed. Everything else gets the
   static stacked layout above with all chapters visible. */
@media (min-width: 900px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  html[data-v3] .sec--eng { padding-top:0; padding-bottom:0; }
  html[data-v3] .eng-track { height:300vh; position:relative; }
  html[data-v3] .eng-stage { position:sticky; top:0; height:100vh; height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:92px 0 0; }
  html[data-v3] .eng-copy { flex:1; align-items:end; padding-bottom:8px; }
  html[data-v3] .eng-head { grid-column:1 / span 7; }
  html[data-v3] .eng-head .display--l { font-size:min(5.2vw, 6.6vh); margin-top:20px; }
  html[data-v3] .eng-chapters { grid-column:8 / span 5; display:grid; grid-template-areas:"c"; }
  html[data-v3] .eng-chapters li { grid-area:c; opacity:0; transform:translateY(16px); transition:opacity var(--d-2) var(--e-out), transform var(--d-2) var(--e-out); }
  html[data-v3] .eng-plate { margin-top:clamp(28px,4vh,56px); margin-bottom:0; border-bottom:0; }
  html[data-v3] .eng-plate .bridge-side .serif-m { font-size:clamp(22px,2.2vw,34px); }
  [data-chapter="0"] [data-ch="0"], [data-chapter="1"] [data-ch="1"], [data-chapter="2"] [data-ch="2"] { opacity:1 !important; transform:none !important; }
  [data-chapter] [data-tab] { color:var(--mute); }
  [data-chapter="0"] [data-tab="0"], [data-chapter="1"] [data-tab="1"], [data-chapter="2"] [data-tab="2"] { color:var(--ink); border-color:var(--rule-l); }
  /* plate states per chapter */
  [data-chapter="0"] [data-side="1"], [data-chapter="0"] .surfaces > div { opacity:.28; }
  [data-chapter="1"] [data-side="0"] { opacity:.4; }
  [data-chapter="1"] .surfaces > div { background-color:var(--surface); color:var(--ink); transition-delay:calc(var(--k) * var(--stagger)); }
  [data-chapter="0"] .bridge-pulse, [data-chapter="1"] .bridge-pulse { animation-play-state:paused; opacity:0; }
  [data-chapter="2"] .plate-dot { background:var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-v3] .sec--dark::after { transition:none; }
  .sec-index span { transition:none !important; }
}

/* v4b: the hero is dark from first paint (lit on load, no wipe), then hands
   off to the first light section via the header's normal token crossfade. */
html[data-v3] .hero[data-dark] { background:var(--paper); color:var(--ink); }
.hero[data-dark] .hero-video { mix-blend-mode:normal; }
html[data-v3] .site-header:not([data-ready]) { transition:none; }

/* v4c: Cipher Block mark beside the original mono wordmark. Mark height
   ≈ 1.2× the wordmark size; frame/tail follow ink, core follows the dim Q. */
.brand-mark { width:18px; height:18px; flex:none; overflow:visible; }
.brand { gap:12px; }


/* ============================================================ v4d =======
   Responsive pass: touch menu, safe areas, tap targets, pin rules. */
:root {
  --gx: max(clamp(20px, 4.4vw, 112px), calc(env(safe-area-inset-right) + 16px));
  --gl: max(clamp(36px, 6vw, 150px), calc(env(safe-area-inset-left) + 20px));
}
.site-header { margin-left:max(8px, env(safe-area-inset-left)); margin-right:max(8px, env(safe-area-inset-right)); top:max(8px, env(safe-area-inset-top)); }
.brand, .wordmark, [data-header-cta] { white-space:nowrap; flex:none; }
.site-footer, footer { padding-bottom:max(24px, env(safe-area-inset-bottom)); }

/* Hero headline is capped by height too, so landscape phones and short
   windows don't get a headline taller than the screen. */
.display--hero { font-size:clamp(36px, min(12.2vw, 24vh), 212px); }

/* Menu: the inline nav needs ~1180px; below that it becomes a sheet. */
.menu-btn { display:none; width:44px; height:44px; flex:none; position:relative; border:1px solid var(--rule-l); background:transparent; cursor:pointer; padding:0; }
.menu-btn span { position:absolute; left:13px; right:13px; height:1px; background:var(--ink); transition:transform var(--d-1) var(--e-out); }
.menu-btn span:first-child { top:18px; } .menu-btn span:last-child { top:25px; }
html[data-menu] .menu-btn span:first-child { transform:translateY(3.5px) rotate(45deg); }
html[data-menu] .menu-btn span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
@media (max-width: 1180px) {
  .menu-btn { display:block; }
  [data-primary-nav] { display:none !important; }
  html[data-menu] [data-primary-nav] { display:flex !important; position:absolute; left:-1px; right:-1px; top:calc(100% + 6px); flex-direction:column; gap:0; padding:8px 0; background:var(--paper); border:1px solid var(--rule-l); border-radius:4px; }
  html[data-menu] [data-primary-nav] a { min-height:52px; align-items:center; padding:0 20px; border-bottom:1px solid var(--rule-f); font-size:12px; background-image:none; }
  html[data-menu] [data-primary-nav] a:last-child { border-bottom:0; }
  .site-header { gap:10px; }
  .sec-index { margin-right:4px; }
}
@media (max-width: 400px) { .sec-index { display:none; } }

/* Tap targets on touch. */
@media (pointer: coarse) {
  .brand { min-height:44px; }
  [data-header-cta] { min-height:44px; }
  .foot-nav a { display:inline-flex; align-items:center; min-height:44px; }
}
@media (max-width: 600px) { .display--hero { font-size:clamp(32px, 10.6vw, 80px); } }
@media (pointer: coarse) { .primary-nav a { min-height:44px; align-items:center; } }
@media (max-width: 1180px) { .menu-btn { order:10; } [data-header-cta] { margin-left:auto; } .sec-index { order:5; margin-left:0; } }

/* v4e: hero stage labels fit at phone widths without truncation. */
@media (max-width: 560px) {
  .hero-stages { font-size:9px; letter-spacing:.06em; }
  .hero-stages > div { padding:12px 8px; overflow:visible; text-overflow:clip; white-space:normal; line-height:1.3; }
  .stage-n { margin-right:5px; }
}

/* Intake submission states (site.js initIntakeSubmit). Once sent, the fields
   give way to the confirmation so the form cannot be submitted twice. */
.form-status { grid-column:1/-1; margin:0; }
.form-status a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.intake-form[data-state="sending"] .btn { opacity:.6; cursor:progress; }
.intake-form[data-state="sent"] > :not([data-form-status]) { display:none; }