/* ============================================================
   $ENGINEER — design system · DOC ENG-000 · REV B
   The palette is the animal: orange shell, bone silk, warm void.
   Cyan (--dew) is semantically locked to live data. Nothing else uses it.
   Motion contract: transform / opacity / clip-path only. No layout
   properties are ever animated. Reduced-motion renders final states.
   ============================================================ */

@font-face{font-family:"Bricolage";src:url("fonts/Bricolage.woff2") format("woff2");
  font-weight:200 800;font-display:swap;font-style:normal}
@font-face{font-family:"JBMono";src:url("fonts/JetBrainsMono.woff2") format("woff2");
  font-weight:100 800;font-display:swap;font-style:normal}
@font-face{font-family:"InstrSerif";src:url("fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight:400;font-display:swap;font-style:italic}

:root{
  --void:#0A0908; --panel:#121110; --raised:#1C1A18; --hairline:#2A2724;
  --orange:#E8622C; --orange-hi:#FF8A4C; --ember:#B33F14;
  --silk:#F2EDE4; --silk-dim:#8A837C;
  --dew:#5AD1C4; --down:#FF5A5A; --sky:#A8C6DA;
  --sol-p:#9945FF; --sol-t:#14F195;

  --display:"Bricolage",system-ui,sans-serif;
  --mono:"JBMono",ui-monospace,monospace;
  --serif:"InstrSerif",Georgia,serif;

  /* easing set — silk is critically damped: one overshoot, no wobble */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-back:cubic-bezier(.34,1.56,.64,1);
  --e-silk:cubic-bezier(.2,2.4,.3,1);
  --e-stamp:cubic-bezier(.7,0,.2,1);

  --gut:clamp(20px,4vw,64px);
  --maxw:1240px;

  /* pointer-proximity scalar — written by JS (0..1), consumed below */
  --prox:0;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.intro-lock,body.intro-lock{overflow:hidden}
body{
  background:var(--void);color:var(--silk);
  font-family:var(--mono);font-size:clamp(15px,.95rem+.2vw,17px);line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

::selection{background:var(--orange);color:#160A04}
:focus-visible{outline:1px solid var(--orange);outline-offset:3px}

/* ============================================================
   DRAFTING TABLE — the document sits on a fixed grid ground.
   Plates (--panel sections) slide over it; it shows only in void.
   Zero JS. 1px rules at low alpha; sits three layers under content.
   ============================================================ */
body::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,
      rgba(42,39,36,.34) 0 1px,transparent 1px 100px),
    repeating-linear-gradient(90deg,
      rgba(42,39,36,.34) 0 1px,transparent 1px 100px),
    repeating-linear-gradient(0deg,
      rgba(42,39,36,.14) 0 1px,transparent 1px 20px),
    repeating-linear-gradient(90deg,
      rgba(42,39,36,.14) 0 1px,transparent 1px 20px);
}

/* survey datum lines — any section carrying data-sta="001.00" gets a
   station rule + ghost station number at its top edge. Integrator wires
   the attribute; the sheet does the rest. */
section[data-sta]::before{
  content:"STA " attr(data-sta);
  position:absolute;top:0;left:var(--gut);right:var(--gut);
  border-top:1px solid var(--hairline);
  padding-top:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  color:var(--silk-dim);opacity:.35;pointer-events:none;
}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:lowercase;
  color:var(--silk-dim);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--orange);
  transform-origin:left;transition:transform .6s var(--e-out)}
.rv.in .eyebrow::before,.eyebrow:hover::before{transform:scaleX(1.6)}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  line-height:.98;text-transform:uppercase;text-wrap:balance;
  font-variation-settings:"opsz" 96}
h2{font-size:clamp(34px,2rem+3.2vw,78px);margin-bottom:20px}
h3{font-size:clamp(20px,1.1rem+.9vw,30px);letter-spacing:-.02em;
  font-variation-settings:"opsz" 48}
p{max-width:62ch}
.lede{color:var(--silk-dim);font-size:clamp(16px,1rem+.25vw,19px);max-width:58ch;
  line-height:1.68}
.serif{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:-.01em}
.o{color:var(--orange)} .d{color:var(--dew)} .dim{color:var(--silk-dim)}

section{position:relative;padding-block:clamp(80px,10vw,160px)}
.panel{background:var(--panel)}
.sky{background:var(--sky)}

/* ============================================================
   DEFECT FIX 2 — dead band after the marquee.
   #scenes is a <section> containing <section class="scn"> children:
   outer padding + inner padding + .scn-pin padding stacked to ~200px
   of nothing between the marquee and the first recording. The outer
   shell and the inner plates carry no padding of their own; .scn-pin
   (sections.css) owns the internal rhythm. Border-to-border document.
   ============================================================ */
#scenes{padding-block:0}
#scenes section.scn{padding-block:0}

/* ============================================================
   INTRO — solana mark → web weave → tear reveal
   ============================================================ */
#intro{
  position:fixed;inset:0;z-index:9000;background:var(--void);
  display:grid;place-items:center;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
#intro.gone{display:none}
#introStage{position:relative;width:min(560px,86vw);aspect-ratio:1;display:grid;place-items:center}
#introCanvas{position:absolute;inset:0;width:100%;height:100%}
#solMark{position:absolute;width:min(190px,40vw);opacity:0}
#solMark path{fill:none;stroke:var(--silk);stroke-width:9;stroke-linecap:round}
#introSpider{position:absolute;width:74px;opacity:0;will-change:transform}
#introWord{
  position:absolute;bottom:-14%;left:50%;transform:translateX(-50%);
  text-align:center;opacity:0;white-space:nowrap;
}
#introWord .w{font-family:var(--display);font-weight:800;font-size:clamp(30px,7vw,60px);
  letter-spacing:.24em;color:var(--silk);display:block}
#introWord .rule{height:3px;background:var(--orange);width:0;margin:14px auto 12px}
#introWord .t{font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  color:var(--silk-dim);text-transform:uppercase;opacity:0}
#introSkip{
  position:fixed;right:22px;bottom:22px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;color:var(--silk-dim);border:1px solid var(--hairline);
  padding:9px 15px;opacity:0;transition:opacity .4s,color .2s,border-color .2s;
}
#introSkip.on{opacity:1}
#introSkip:hover{color:var(--silk);border-color:var(--orange)}

/* ============================================================
   CURSOR — a silk thread that sags behind the pointer
   ============================================================ */
#cursorCanvas{position:fixed;inset:0;z-index:8000;pointer-events:none}
#cursorDot{
  position:fixed;top:0;left:0;z-index:8001;width:9px;height:9px;border-radius:50%;
  background:var(--orange);pointer-events:none;mix-blend-mode:difference;
  transform:translate(-50%,-50%);will-change:transform;
}
#cursorDot.hot{width:34px;height:34px;background:transparent;
  border:1px solid var(--dew);mix-blend-mode:normal}
@media (hover:hover) and (pointer:fine){
  html.has-cursor,html.has-cursor *{cursor:none}
}
@media (hover:none),(pointer:coarse){#cursorCanvas,#cursorDot{display:none}}

/* ============================================================
   NAV
   ============================================================ */
header.nav{
  position:fixed;inset:0 0 auto 0;z-index:600;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:14px var(--gut);
  transition:background .4s var(--e-out),border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
header.nav.stuck{background:rgba(10,9,8,.82);backdrop-filter:blur(14px);
  border-bottom-color:var(--hairline)}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);
  font-weight:800;font-size:15px;letter-spacing:-.02em}
.brand img{width:32px;height:32px;border-radius:50%}
.nav-links{display:flex;gap:26px;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;color:var(--silk-dim)}
.nav-links a{position:relative;transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;
  background:var(--orange);transition:right .35s var(--e-out)}
.nav-links a:hover{color:var(--silk)} .nav-links a:hover::after{right:0}
@media(max-width:900px){.nav-links{display:none}}

/* ============================================================
   BUTTONS — magnetic, tensile press, silk snap on release.
   Press does not depress: it resists (tensile pull). Active state
   pulls 1px against travel; release snaps back with one
   critically-damped overshoot via .squish.
   ============================================================ */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:16px 26px;border-radius:999px;border:2px solid var(--orange);
  background:var(--orange);color:#160A04;font-weight:700;
  will-change:transform;transition:background .25s,color .25s,border-color .25s,
    transform .18s var(--e-out);
}
.btn:hover{background:var(--orange-hi);border-color:var(--orange-hi)}
.btn:active{transform:translateY(1px) scale(.985);transition-duration:.06s}
.btn.ghost{background:transparent;color:var(--silk);border-color:var(--hairline)}
.btn.ghost:hover{border-color:var(--silk);background:transparent;color:var(--silk)}
.btn.squish{animation:squish .34s var(--e-back)}
@keyframes squish{0%{transform:scale(1)}35%{transform:scale(.94,1.06)}
  70%{transform:scale(1.05,.95)}100%{transform:scale(1)}}

/* glowing badge (conic mask) */
.badge{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 16px;border-radius:999px;color:var(--silk);
  background:var(--raised);isolation:isolate;
}
.badge::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--a,0deg),transparent 0 62%,var(--orange) 78%,var(--dew) 88%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin 4.5s linear infinite;
}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--dew);
  box-shadow:0 0 0 0 rgba(90,209,196,.6);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(90,209,196,0)}100%{box-shadow:0 0 0 0 rgba(90,209,196,0)}}

/* ============================================================
   HERO
   ============================================================ */
.hero{min-height:100svh;display:grid;align-items:end;padding-block:120px 0;overflow:hidden}
.hero-plate{position:absolute;inset:-8% 0 0;z-index:-2;will-change:transform}
.hero-plate img{width:100%;height:100%;object-fit:cover}
/* Two scrims, not one: a vertical wash for the nav/footer edges, plus a
   left-weighted wash so the copy column always has a dark bed to sit on
   regardless of what the photograph is doing behind it. */
.hero-veil{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(10,9,8,.90) 0%,rgba(10,9,8,.62) 32%,rgba(10,9,8,.12) 62%,rgba(10,9,8,0) 84%),
    linear-gradient(180deg,rgba(10,9,8,.70) 0%,rgba(10,9,8,.10) 30%,
      rgba(10,9,8,.42) 66%,var(--void) 100%)}
@media(max-width:760px){
  .hero-veil{background:
    linear-gradient(180deg,rgba(10,9,8,.66) 0%,rgba(10,9,8,.18) 26%,
      rgba(10,9,8,.72) 62%,var(--void) 100%)}
}
#heroWeb{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero-inner{padding-bottom:clamp(48px,7vw,96px)}
.hero h1{font-size:clamp(52px,2rem+9vw,152px);margin:18px 0 14px}
.hero h1 .dollar{color:var(--orange)}
.hero .tag{font-family:var(--mono);font-size:clamp(12px,.7rem+.5vw,15px);
  letter-spacing:.24em;text-transform:uppercase;color:var(--silk);margin-bottom:10px}
.hero .sub{color:var(--silk-dim);max-width:46ch;margin-bottom:30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ============================================================
   LIVE STRIP
   DEFECT FIX 1 — the 24H cell. The data layer clears [data-eng-delta]
   to an empty string pre-launch; the value row collapsed to 0 height
   and align-items:center let the "24h" label sink below its neighbours.
   Three guards, all structural:
     · cells are fixed two-row grids — label row, value row — so a cell
       can never change height because its value changed
     · the strip aligns cells to stretch, centred by their own grid
     · an empty value renders the same em dash the markup shipped with
   ============================================================ */
.live{position:sticky;top:0;z-index:500;background:var(--panel);
  border-block:1px solid var(--hairline)}
.live-in{display:flex;align-items:stretch;gap:clamp(14px,2.4vw,38px);
  padding-block:12px;overflow-x:auto;scrollbar-width:none}
.live-in::-webkit-scrollbar{display:none}
.live-in .badge{align-self:center}
.cell{display:grid;grid-template-rows:auto 1fr;gap:4px;flex:none;align-content:center}
.cell .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--silk-dim);white-space:nowrap;line-height:1.4}
.cell .v{font-family:var(--mono);font-size:clamp(14px,.8rem+.3vw,17px);font-weight:700;
  color:var(--silk);white-space:nowrap;line-height:1.4;min-height:1.4em;
  display:flex;align-items:center}
.cell .v:empty::before{content:"—";color:var(--silk-dim);font-weight:400}
.cell .v.pending{color:var(--silk-dim)}
.cell .v.up{color:var(--dew)} .cell .v.down{color:var(--down)}
.cell.flash{animation:flash .5s ease-out}
@keyframes flash{0%{background:rgba(90,209,196,.16)}100%{background:transparent}}

/* tension-set numbers — a value arrives slack and is tensioned to
   spec: letter-spacing contracts while a gauge tick beneath it travels
   to its stop. Integrator toggles .is-set when a real value lands. */
[data-tension]{letter-spacing:.55em;transition:letter-spacing .7s var(--e-out);
  position:relative}
[data-tension]::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;
  width:100%;background:currentColor;opacity:.4;
  transform:scaleX(.15);transform-origin:left;
  transition:transform .7s var(--e-out)}
[data-tension].is-set{letter-spacing:normal}
[data-tension].is-set::after{transform:scaleX(1)}

/* ============================================================
   DIVIDERS — loaded silk, not a plain wave
   ============================================================ */
.divider{position:relative;line-height:0;pointer-events:none}
.divider svg{width:100%;height:clamp(60px,8vw,120px);display:block}
.divider.flip svg{transform:scaleY(-1)}
.drop{fill:var(--dew);opacity:.85;animation:sway 4s ease-in-out infinite alternate}
.drop:nth-child(2n){animation-duration:5.2s} .drop:nth-child(3n){animation-duration:6.1s}
@keyframes sway{from{transform:translateX(-3px)}to{transform:translateX(3px)}}

/* ============================================================
   ORIGIN / quote slab with clipped-circle spotlight
   ============================================================ */
.slab{
  position:relative;background:var(--panel);border:1px solid var(--hairline);
  border-radius:20px;padding:clamp(28px,4vw,52px);overflow:hidden;
  transform:rotate(-.7deg);max-width:860px;
}
.slab::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle 180px at var(--mx,50%) var(--my,50%),
    rgba(90,209,196,.13),transparent 70%);
  opacity:0;transition:opacity .3s;
}
.slab:hover::after{opacity:1}
.slab .q{font-family:var(--serif);font-style:italic;text-transform:none;
  font-size:clamp(22px,1.2rem+1.5vw,40px);line-height:1.28;letter-spacing:-.01em;
  color:var(--silk);margin-bottom:22px}
.slab .meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--silk-dim)}

/* ============================================================
   SPEC SHEET / anatomy — each row is a measured entry; hover runs a
   confirmation rule from key to value, the instrument re-reading it.
   ============================================================ */
.spec{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:900px){.spec{grid-template-columns:1fr}}
.spec-fig{position:relative;border-radius:20px;overflow:hidden;background:var(--panel);
  border:1px solid var(--hairline)}
.spec-fig img{width:100%;aspect-ratio:1;object-fit:cover;
  transition:transform .8s var(--e-out)}
.spec-fig:hover img{transform:scale(1.025)}
.spec-rows{display:flex;flex-direction:column}
.spec-row{position:relative;display:grid;grid-template-columns:1fr auto;gap:16px;
  align-items:baseline;padding:16px 0;border-bottom:1px solid var(--hairline)}
.spec-row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--e-out)}
.spec-row:hover::after{transform:scaleX(1)}
.spec-row .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--silk-dim);transition:color .3s}
.spec-row:hover .k{color:var(--silk)}
.spec-row .v{font-family:var(--display);font-weight:700;font-size:clamp(16px,1rem+.4vw,22px);
  letter-spacing:-.02em;text-align:right}
.spec-row .v em{font-style:normal;color:var(--orange)}

/* ============================================================
   WEAVE — 300vh sticky scroll scene, video scrubbed by scroll
   ============================================================ */
.weave{height:320vh;position:relative}
.weave-stick{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.weave-stick video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.85}
.weave-veil{position:absolute;inset:0;background:
  linear-gradient(180deg,var(--void) 0%,transparent 22%,transparent 62%,var(--void) 100%)}
.weave-copy{position:relative;text-align:center;max-width:640px;padding-inline:var(--gut)}
.weave-copy h2{margin-bottom:14px}
.weave-steps{display:flex;gap:0;justify-content:center;margin-top:34px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.weave-steps span{padding:8px 14px;color:var(--silk-dim);border-bottom:2px solid var(--hairline);
  transition:color .3s,border-color .3s}
.weave-steps span.on{color:var(--orange);border-bottom-color:var(--orange)}
.weave-bar{position:absolute;left:0;bottom:0;height:2px;background:var(--orange);width:0}

/* ============================================================
   LAWS — stacked feature cards that scroll-stack.
   Plate separation: the pinned sheet beneath reads as paper under
   paper — a grown drop shadow, compositor-safe.
   ============================================================ */
.stack{display:flex;flex-direction:column;gap:22px}
.law{
  position:sticky;top:96px;background:var(--panel);border:1px solid var(--hairline);
  border-radius:22px;padding:clamp(24px,3.4vw,44px);display:grid;
  grid-template-columns:1fr .8fr;gap:clamp(20px,3vw,44px);align-items:center;
  box-shadow:0 18px 44px rgba(0,0,0,.42);
  transition:transform .5s var(--e-out),border-color .3s;
}
.law:nth-child(1){top:96px} .law:nth-child(2){top:112px}
.law:nth-child(3){top:128px} .law:nth-child(4){top:144px}
.law:hover{border-color:rgba(232,98,44,.5)}
.law.accent{background:linear-gradient(150deg,var(--orange),var(--ember));border-color:transparent;color:#160A04}
.law.accent .lede,.law.accent .eyebrow{color:rgba(22,10,4,.72)}
.law.accent .eyebrow::before{background:#160A04}
.law-fig{border-radius:14px;overflow:hidden;border:1px solid var(--hairline);background:var(--void)}
.law.accent .law-fig{border-color:rgba(22,10,4,.25)}
.law-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .8s var(--e-out)}
.law:hover .law-fig img{transform:scale(1.03)}
@media(max-width:820px){.law{grid-template-columns:1fr;position:relative;top:auto!important;
  box-shadow:none}}

/* ============================================================
   GALLERY — cursor clip reveal, colour under a spotlight
   ============================================================ */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}
.shot{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--hairline);
  aspect-ratio:1;background:var(--panel);transition:border-color .3s}
.shot:hover{border-color:rgba(232,98,44,.4)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot .base{filter:grayscale(1) contrast(1.08) brightness(.62)}
.shot .colour{
  -webkit-mask:radial-gradient(circle 150px at var(--mx,-999px) var(--my,-999px),#000 0 52%,transparent 100%);
  mask:radial-gradient(circle 150px at var(--mx,-999px) var(--my,-999px),#000 0 52%,transparent 100%);
}
.shot.revealed .colour{-webkit-mask:none;mask:none}
.shot cap,.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--silk-dim);background:linear-gradient(transparent,rgba(10,9,8,.9))}

/* ============================================================
   FORGE
   ============================================================ */
.forge{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
@media(max-width:900px){.forge{grid-template-columns:1fr}}
.forge-stage{border:1px solid var(--hairline);border-radius:18px;overflow:hidden;background:var(--panel)}
#forgeCanvas{width:100%;height:auto;display:block}
.forge-panel{display:flex;flex-direction:column;gap:12px}
.field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--silk-dim);margin-bottom:7px}
.field input,.field select{width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid var(--hairline);background:var(--raised);color:var(--silk);
  font-family:var(--mono);font-size:13px;outline:none;
  transition:border-color .25s}
.field input:focus,.field select:focus{border-color:var(--orange)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips button{padding:8px 13px;border-radius:999px;border:1px solid var(--hairline);
  font-family:var(--mono);font-size:11px;color:var(--silk-dim);transition:.2s}
.chips button:hover{color:var(--silk);border-color:var(--orange)}

/* ============================================================
   CA + footer
   ============================================================ */
.ca{display:inline-flex;align-items:center;gap:14px;max-width:100%;
  border:1px solid var(--hairline);background:var(--panel);border-radius:999px;
  padding:12px 12px 12px 22px;transition:border-color .25s}
.ca:hover{border-color:var(--orange)}
.ca code{font-family:var(--mono);font-size:13px;color:var(--silk);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca .cp{flex:none;padding:9px 15px;border-radius:999px;background:var(--orange);
  color:#160A04;font-family:var(--mono);font-size:11px;letter-spacing:.12em;font-weight:700}
footer{border-top:1px solid var(--hairline);padding-block:44px;color:var(--silk-dim)}
.foot-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.sol-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;color:var(--silk-dim)}
.sol-badge svg{width:16px;height:auto}

/* marquee */
.mq{overflow:hidden;border-block:1px solid var(--hairline);background:var(--panel);padding-block:13px}
.mq-t{display:flex;gap:40px;white-space:nowrap;animation:slide 34s linear infinite;
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--silk-dim)}
.mq-t b{color:var(--orange);font-weight:400}
@keyframes slide{to{transform:translateX(-50%)}}
@media (hover:hover){.mq:hover .mq-t{animation-play-state:paused}}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--e-out),transform .8s var(--e-out)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s} .rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:900;
  background:var(--raised);border:1px solid var(--orange);border-radius:999px;
  padding:11px 20px;font-family:var(--mono);font-size:12px;opacity:0;pointer-events:none;
  transition:.25s var(--e-out)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   HERO additions — CA chip, social row, scroll cue
   ============================================================ */
.hero-ca{margin:22px 0 26px}
.ca-chip{
  display:inline-flex;align-items:center;gap:12px;
  border:1px solid var(--hairline);background:rgba(18,17,16,.72);
  backdrop-filter:blur(8px);border-radius:999px;padding:10px 10px 10px 18px;
  transition:border-color .25s var(--e-out),transform .25s var(--e-out);
}
.ca-chip:hover{border-color:var(--orange);transform:translateY(-2px)}
.ca-chip .ca-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--silk-dim)}
.ca-chip code{font-family:var(--mono);font-size:13px;color:var(--silk);
  max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-chip .ca-copy{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  font-weight:700;color:#160A04;background:var(--orange);border-radius:999px;padding:7px 13px}
[data-launch="pending"] .ca-chip .ca-copy{background:var(--hairline);color:var(--silk-dim)}

.hero-social{display:flex;gap:10px;margin-top:26px}
.hero-social a{
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--hairline);color:var(--silk-dim);
  background:rgba(18,17,16,.6);backdrop-filter:blur(8px);
  transition:color .22s,border-color .22s,transform .22s var(--e-out);
}
.hero-social a svg{width:17px;height:17px}
.hero-social a:hover{color:var(--orange);border-color:var(--orange);transform:translateY(-3px)}
.hero-social a[aria-disabled="true"],.hero-social a[href="#"]{opacity:.42;pointer-events:none}

.hero-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  width:24px;height:38px;border:1px solid var(--hairline);border-radius:999px;
  display:grid;place-items:start center;padding-top:7px}
.hero-scroll span{width:3px;height:7px;border-radius:2px;background:var(--orange);
  animation:scrollcue 1.9s var(--e-out) infinite}
@keyframes scrollcue{0%{transform:translateY(0);opacity:1}
  70%{transform:translateY(15px);opacity:0}100%{transform:translateY(0);opacity:0}}
@media(max-width:760px){.hero-scroll{display:none}.ca-chip code{max-width:52vw}}

.live-note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--silk-dim);
  padding:0 var(--gut) 12px}
.live-note:empty{display:none}

/* ============================================================
   Disabled / pre-launch CTAs
   The data layer dims the LABEL when a link has no destination yet; if the
   fill stays solid orange that lands as grey-on-orange and fails contrast.
   A pending CTA becomes a ghost button instead — still readable, visibly
   not-yet-actionable, and it never traps focus.
   ============================================================ */
.btn[aria-disabled="true"],
a.btn:not([href]),
.btn[data-eng-link][aria-disabled="true"]{
  background:transparent !important;
  border-color:var(--hairline) !important;
  color:var(--silk) !important;
  opacity:.72;
  cursor:default;
}
.btn[aria-disabled="true"]:hover{
  transform:none !important;
  background:transparent !important;
  border-color:var(--hairline) !important;
}
/* the primary CTA keeps a hint of its identity while pending */
.hero-cta .btn:first-child[aria-disabled="true"]{
  border-color:rgba(232,98,44,.45) !important;
  color:var(--orange-hi) !important;
}

/* ============================================================
   FX HOOKS — DOC ENG-000 · SHEET 2
   Pure-CSS effect vocabulary keyed to data attributes. Wiring is the
   integrator's job: add the attribute, the sheet does the work.
   Every effect is transform / opacity / clip-path / mask only.
   ============================================================ */

/* dimension callout — hovering any element carrying data-dim draws its
   measurement along the top edge: a hairline extends, the value stamps
   in --mono. Integrator populates data-dim (e.g. "W 348") once on
   load/resize, or hard-codes a real dimension. */
[data-dim]{position:relative}
[data-dim]::before{
  content:"";position:absolute;left:0;right:0;top:-9px;height:1px;
  background:var(--silk-dim);opacity:0;transform:scaleX(0);
  transition:transform .4s var(--e-out),opacity .3s;pointer-events:none;
}
[data-dim]::after{
  content:attr(data-dim);position:absolute;top:-24px;left:50%;
  transform:translate(-50%,4px);opacity:0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--silk-dim);white-space:nowrap;
  transition:transform .4s var(--e-out),opacity .3s;pointer-events:none;
}
[data-dim]:hover::before{opacity:.7;transform:scaleX(1)}
[data-dim]:hover::after{opacity:1;transform:translate(-50%,0)}
@media (hover:none){[data-dim]::before,[data-dim]::after{display:none}}

/* vibration sense — an element "feels" the pointer before contact.
   JS writes --prox (0..1, inverse distance within ~160px) on the
   element; the tick-frame shiver scales with it. On contact (:hover)
   everything goes still — located. */
[data-fx~="vibration"]{position:relative}
[data-fx~="vibration"]::after{
  content:"";position:absolute;inset:-2px;border:1px solid var(--orange);
  border-radius:inherit;pointer-events:none;
  opacity:calc(var(--prox,0) * .35);
  animation:quiver .09s steps(2) infinite;
}
[data-fx~="vibration"]:hover::after{animation-play-state:paused;opacity:.5;
  transform:none}
@keyframes quiver{
  0%{transform:translate(calc(var(--prox,0)*1.5px),calc(var(--prox,0)*-1.5px))}
  100%{transform:translate(calc(var(--prox,0)*-1.5px),calc(var(--prox,0)*1.5px))}
}

/* title-block stamp — a plate header does not fade in, it certifies:
   arrives at 103% / 40% opacity, snaps to rest in ~340ms with a
   one-frame --ember flash on its underline. Integrator adds .stamped
   (IntersectionObserver), or the scroll-timeline block below drives it
   with zero JS where supported. */
[data-fx~="stamp"]{position:relative;opacity:0;transform:scale(1.03);
  transform-origin:left bottom}
[data-fx~="stamp"].stamped{animation:stamp .34s var(--e-stamp) forwards}
@keyframes stamp{
  0%{opacity:.4;transform:scale(1.03)}
  60%{opacity:1;transform:scale(.995)}
  100%{opacity:1;transform:scale(1)}
}
[data-fx~="stamp"].stamped::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--ember);opacity:0;animation:certify .5s steps(1) 1;
  pointer-events:none;
}
@keyframes certify{0%{opacity:1}30%{opacity:0}}

/* shine — one diagonal sheen pass on hover. Cards, chips, figures. */
[data-fx~="shine"]{position:relative;overflow:hidden}
[data-fx~="shine"]::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(242,237,228,.07) 50%,transparent 60%);
  transform:translateX(-120%);
}
[data-fx~="shine"]:hover::before{transition:transform .9s var(--e-out);
  transform:translateX(120%)}

/* border-beam — the badge's conic tracer, generalised to any rounded box */
[data-fx~="border-beam"]{position:relative;isolation:isolate}
[data-fx~="border-beam"]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--a,0deg),transparent 0 70%,var(--orange) 86%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin 6s linear infinite;pointer-events:none;
}

/* dot-grid — registration-dot ground for a plate interior */
[data-fx~="dot-grid"]{
  background-image:radial-gradient(rgba(138,131,124,.14) 1px,transparent 1px);
  background-size:22px 22px;
}

/* spotlight — --mx/--my driven wash; same writer site.js already uses
   for .slab/.shot. Integrator extends the site.js selector list with
   [data-fx~="spotlight"]. Orange, never cyan: decorative. */
[data-fx~="spotlight"]{position:relative}
[data-fx~="spotlight"]::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle 200px at var(--mx,50%) var(--my,50%),
    rgba(232,98,44,.09),transparent 70%);
  opacity:0;transition:opacity .3s;
}
[data-fx~="spotlight"]:hover::after{opacity:1}

/* tilt — paper-under-glass. JS writes --rx/--ry in deg (small: ±2). */
[data-fx~="tilt"]{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .3s var(--e-out);will-change:transform;
}

/* magnetic — JS writes --magx/--magy in px (small: ±6); clears to rest. */
[data-fx~="magnetic"]{
  transform:translate(var(--magx,0px),var(--magy,0px));
  transition:transform .35s var(--e-silk);
}

/* ============================================================
   SCROLL-TIMELINE ENHANCEMENT — decorative layer only.
   Where the engine supports it, plate furniture (stamp headers, datum
   lines) animates off the element's own viewport transit with zero JS.
   Firefox and older engines keep the IntersectionObserver path in
   motion.js / site.js — same end state. fill-mode both is mandatory:
   without it elements snap to the unstyled state at range boundaries.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()) and (animation-range: 0% 100%){
    section[data-sta]::before{
      animation:datum-draw linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 60%;
    }
    [data-fx~="stamp"]:not(.stamped){
      animation:stamp .34s var(--e-stamp) both;
      animation-timeline:view();
      animation-range:entry 20% entry 45%;
    }
  }
}
@keyframes datum-draw{
  from{clip-path:inset(0 100% 0 0);opacity:0}
  to{clip-path:inset(0 0 0 0);opacity:.35}
}

/* ============================================================
   REDUCED MOTION — the document renders assembled. No exceptions.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  [data-fx~="stamp"]{opacity:1;transform:none}
  [data-tension]{letter-spacing:normal}
  [data-tension]::after{transform:scaleX(1)}
  [data-fx~="vibration"]::after{display:none}
  .mq-t{animation:none;transform:none}
}