/* ===========================================================
   Eclipse NeuroTech — shared stylesheet
   Tone: clean & clinical (primary), warm & human (secondary)
   =========================================================== */

:root{
  --ink:#0A0D17;
  --ink-2:#10142360;
  --ink-soft:#161B2E;
  --paper:#F7F5F0;
  --paper-2:#FFFFFF;
  --cloud:#E6E3DA;
  --line:#DDD9CE;
  --text:#1A1E2B;
  --text-dim:#5C6172;
  --text-faint:#888C9C;
  --invert:#ECEEF4;
  --invert-dim:#A7ACBE;
  --amber:#F0A94B;
  --amber-soft:#F7CC8A;
  --amber-deep:#C9742B;
  --halo:rgba(240,169,75,.55);
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  font-family:"Hanken Grotesk",sans-serif;
  background:var(--paper);
  color:var(--text);
  line-height:1.6;
  font-size:17px;
  overflow-x:hidden;
}
section{scroll-margin-top:86px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.narrow{max-width:760px}

h1,h2,h3{font-family:"Fraunces",serif;font-weight:500;line-height:1.08;letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.2vw,3.05rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.6rem)}
a{color:inherit;text-decoration:none}
em{font-style:italic}

.eyebrow{
  font-family:"Spline Sans Mono",monospace;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--amber-deep);
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;opacity:.6}
.dark .eyebrow,.page-hero .eyebrow{color:var(--amber-soft)}

/* eyebrow variant: filled orange dot instead of the rule */
.dot-eyebrow{
  font-family:"Spline Sans Mono",monospace;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--amber-deep);
  display:inline-flex;align-items:center;gap:.9em;
}
.dot-eyebrow::before{content:"";width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  background:var(--amber);box-shadow:0 0 0 6px rgba(240,169,75,.14),0 0 18px 2px rgba(240,169,75,.42)}
.dark .dot-eyebrow,.page-hero .dot-eyebrow{color:var(--amber-soft)}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
}
.nav.scrolled{
  background:rgba(10,13,23,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.07);
  padding:12px 28px;
}
.brand{display:flex;align-items:center;gap:11px;font-weight:600;letter-spacing:.12em;font-size:.82rem;text-transform:uppercase;color:var(--invert);transition:color .4s var(--ease)}
/* logo file — replaces the old glyph + wordmark lockup.
   Only ever sits on dark ground (hero nav, scrolled nav, footer). */
.brand-logo{height:28px;width:auto;display:block;transition:height .4s var(--ease)}
.nav.scrolled .brand-logo{height:24px}
footer .brand-logo{height:26px}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none}
.nav-links a{font-size:.83rem;letter-spacing:.02em;color:var(--invert-dim);transition:color .25s}
.nav-links a:hover,.nav-links a.active{color:var(--amber)}
.nav-cta{
  font-size:.82rem;font-weight:600;letter-spacing:.02em;
  padding:9px 18px;border-radius:100px;
  border:1px solid rgba(236,238,244,.35);color:var(--invert);
  transition:all .3s var(--ease);
}
.nav-cta:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:30px;height:22px;position:relative}
.nav-toggle span{position:absolute;left:0;height:2px;width:100%;background:var(--invert);transition:.3s var(--ease)}
.nav-toggle span:nth-child(1){top:0}
.nav-toggle span:nth-child(2){top:10px}
.nav-toggle span:nth-child(3){top:20px}

/* ---------- HERO (landing) ---------- */
.hero{
  position:relative;background:var(--ink);color:var(--invert);
  min-height:100vh;display:flex;align-items:center;
  padding:140px 0 90px;overflow:hidden;
}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1px 1px at 18% 28%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 72% 18%,rgba(255,255,255,.35),transparent),
    radial-gradient(1px 1px at 42% 62%,rgba(255,255,255,.4),transparent),
    radial-gradient(1px 1px at 88% 52%,rgba(255,255,255,.3),transparent),
    radial-gradient(1.5px 1.5px at 30% 82%,rgba(255,255,255,.3),transparent),
    radial-gradient(1px 1px at 62% 88%,rgba(255,255,255,.25),transparent);
  opacity:.7}
.hero-grid{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;width:100%}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.6rem);margin:22px 0 0;max-width:17ch}
.hero h1 .accent{font-style:italic;color:var(--amber-soft)}
.hero h1 .nowrap{white-space:nowrap}

/* ---------- HEADLINE WORD ROLLER ----------
   A hidden in-flow "ghost" word carries the real baseline and the animated
   width; the visible words roll through a window stacked on top of it. */
.fx{position:relative;display:inline-block;line-height:1.08;vertical-align:baseline;
  transition:width .55s var(--ease)}
.fx-ghost{visibility:hidden;white-space:nowrap;line-height:1.08}
/* clips vertically only — the right edge runs free, so the italic overhang on
   the last letter is never shaved off */
.fx-mask{position:absolute;left:0;right:-.34em;top:-.16em;bottom:-.22em;overflow:hidden}
.fx-track{position:absolute;left:0;top:.025em;
  transition:transform .62s cubic-bezier(.76,0,.24,1)}
.fx-track.no-anim{transition:none}
.fx-item{display:block;height:1.35em;line-height:1.35em;white-space:nowrap}
@media(prefers-reduced-motion:reduce){
  .fx,.fx-track{transition:none}
}
.hero-sub{margin-top:26px;font-size:1.16rem;color:var(--invert-dim);max-width:46ch;line-height:1.55}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.95rem;
  padding:14px 26px;border-radius:100px;transition:all .3s var(--ease);cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--amber);color:var(--ink)}
.btn-primary:hover{background:var(--amber-soft);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(236,238,244,.3);color:var(--invert)}
.btn-ghost:hover{border-color:var(--invert);background:rgba(236,238,244,.06)}
.btn-sm{padding:11px 20px;font-size:.87rem;gap:8px}
.btn-dark{background:var(--ink);color:var(--invert)}
.btn-dark:hover{background:var(--ink-soft);transform:translateY(-2px)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* eclipse visual */
.eclipse-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:340px}
.eclipse{position:relative;width:clamp(230px,26vw,360px);aspect-ratio:1}
.eclipse .corona-spin{position:absolute;inset:-46%;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(240,169,75,.16) 40deg,transparent 90deg,rgba(247,204,138,.12) 150deg,transparent 200deg,rgba(240,169,75,.18) 280deg,transparent 330deg);
  filter:blur(14px);animation:spin 30s linear infinite;opacity:.9}
.eclipse .bloom{position:absolute;inset:-26%;border-radius:50%;
  background:radial-gradient(circle,rgba(240,169,75,.32) 30%,rgba(240,169,75,.07) 55%,transparent 70%);
  filter:blur(10px);animation:pulse 8s ease-in-out infinite}
.eclipse::before{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 2px 1px rgba(255,228,184,.95),0 0 26px 7px var(--halo),0 0 80px 26px rgba(240,169,75,.2)}
.eclipse .disc{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#262b40 0%,#0c0f1c 58%);
  box-shadow:inset -10px -12px 36px rgba(0,0,0,.65),inset 8px 8px 26px rgba(70,80,120,.18)}
.eclipse .flash{position:absolute;top:6%;right:16%;width:14px;height:14px;border-radius:50%;
  background:#fff5e3;box-shadow:0 0 8px 3px rgba(255,228,184,.9),0 0 20px 6px var(--halo);
  animation:twinkle 8s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}
@keyframes twinkle{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

/* ---------- 3D BCI HERO ANIMATION ---------- */
/* tech section two-column layout */
.tech-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:start}
.tech-body .sec-head{margin-bottom:40px}
.tech-visual{position:sticky;top:100px}
.bci-showcase{position:relative;max-width:600px;margin:14px auto 56px}
.tech-visual .bci-showcase{max-width:none;margin:0}
.bci-stage{position:relative;width:100%;height:clamp(340px,40vw,470px);z-index:3}
.bci-stage canvas{display:block;width:100%!important;height:100%!important;outline:none}
.bci-glow{position:absolute;inset:-6% -6% -6% -6%;z-index:1;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle at 52% 46%,rgba(240,169,75,.22) 0%,rgba(240,169,75,.06) 42%,transparent 66%);
  filter:blur(12px);animation:pulse 8s ease-in-out infinite}
.bci-fallback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2}
.bci-legend{position:absolute;left:0;bottom:4px;z-index:4;display:flex;flex-wrap:wrap;gap:8px 16px;
  font-family:"Spline Sans Mono",monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--invert-dim);pointer-events:none}
.bci-legend .k{display:flex;align-items:center;gap:7px}
.bci-legend .k::before{content:"";width:8px;height:8px;border-radius:50%}
.bci-legend .k-imp::before{background:#4cc4ff;box-shadow:0 0 6px 1px rgba(76,196,255,.8)}
.bci-legend .k-dura::before{background:#dfe7f4;opacity:.85}
.bci-legend .k-cortex::before{background:#c6ab9d}
.bci-hint{position:absolute;top:6px;right:2px;z-index:4;
  font-family:"Spline Sans Mono",monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--invert-dim);opacity:.7;pointer-events:none;display:flex;align-items:center;gap:7px}
.bci-hint::before{content:"";width:14px;height:14px;border:1px solid currentColor;border-radius:3px;opacity:.7}
.bci-stage.is-live ~ .bci-hint{animation:hintfade 1.2s var(--ease) 5s forwards}
@keyframes hintfade{to{opacity:0}}

.hero-tags{position:absolute;left:0;bottom:42px;z-index:3;display:flex;gap:26px;flex-wrap:wrap;
  font-family:"Spline Sans Mono",monospace;font-size:.74rem;letter-spacing:.12em;color:var(--invert-dim);text-transform:uppercase}
.hero-tags span{display:flex;align-items:center;gap:9px}
.hero-tags span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 6px var(--halo)}

/* ---------- PAGE HERO (subpages) ---------- */
.page-hero{
  position:relative;background:var(--ink);color:var(--invert);
  padding:160px 0 90px;overflow:hidden;
}
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1px 1px at 18% 38%,rgba(255,255,255,.45),transparent),
    radial-gradient(1px 1px at 72% 28%,rgba(255,255,255,.3),transparent),
    radial-gradient(1px 1px at 52% 72%,rgba(255,255,255,.35),transparent),
    radial-gradient(1.5px 1.5px at 86% 60%,rgba(255,255,255,.28),transparent);
  opacity:.7}
.page-hero .wrap{position:relative;z-index:3}
.page-hero h1{font-size:clamp(2.3rem,5vw,3.8rem);margin:20px 0 0;max-width:18ch}
.page-hero h1 .accent{font-style:italic;color:var(--amber-soft)}
.page-hero .hero-sub{margin-top:24px;font-size:1.14rem;color:var(--invert-dim);max-width:54ch;line-height:1.55}
.page-hero .halo-orb{position:absolute;top:-140px;right:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,169,75,.20),transparent 64%);filter:blur(16px);z-index:2}

/* ---------- SHARED SECTION ---------- */
.section{padding:clamp(5rem,9vw,8.5rem) 0}
.section.tight{padding:clamp(3.5rem,6vw,5.5rem) 0}
.dark{background:var(--ink);color:var(--invert);position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;top:-160px;left:-120px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,169,75,.14),transparent 64%);filter:blur(18px);pointer-events:none}
.sec-head{max-width:680px;margin-bottom:54px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .eyebrow,.sec-head.center .dot-eyebrow{justify-content:center}
.sec-head h2{margin-top:16px}
.lead{font-size:1.16rem;color:var(--text-dim);margin-top:20px;line-height:1.6}
.dark .lead{color:var(--invert-dim)}

/* mission / challenge */
.stat-row{display:flex;flex-wrap:wrap;gap:46px;margin-top:54px;padding-top:40px;border-top:1px solid var(--line)}
.stat{flex:1;min-width:180px}
.stat .num{font-family:"Fraunces",serif;font-size:clamp(2.4rem,4vw,3.2rem);line-height:1;color:var(--ink);letter-spacing:-.02em}
.stat .lbl{margin-top:12px;font-size:.95rem;color:var(--text-dim);max-width:24ch}

/* ---------- MISSION HEAD ----------
   dot eyebrow + headline | vertical rule | body copy */
.mission-head{display:grid;grid-template-columns:minmax(0,1.02fr) 1px minmax(0,.98fr);
  gap:clamp(26px,4.4vw,66px);align-items:stretch}
.mission-head-left .dot-eyebrow{margin-bottom:clamp(22px,3vw,32px)}
.mission-head h2{font-size:clamp(2.05rem,4.5vw,3.4rem);line-height:1.05;letter-spacing:-.018em;margin:0;max-width:16ch}
.mission-rule{width:1px;background:linear-gradient(180deg,transparent 0%,var(--line) 10%,var(--line) 90%,transparent 100%)}
.mission-head-right{padding-top:6px}
.mission-head-right p{color:var(--text-dim);font-size:1.1rem;line-height:1.66;margin:0 0 16px}
.mission-head-right p:last-child{margin-bottom:0}
.mission-head-right .mission-punch{font-family:"Fraunces",serif;font-style:italic;
  font-size:1.5rem;color:var(--ink);margin-top:24px}
.dark .mission-head h2{color:var(--invert)}
.dark .mission-head-right p{color:var(--invert-dim)}
.dark .mission-head-right .mission-punch{color:var(--amber-soft)}
.dark .mission-rule{background:linear-gradient(180deg,transparent,rgba(236,238,244,.22) 10%,rgba(236,238,244,.22) 90%,transparent)}
@media(max-width:900px){
  .mission-head{grid-template-columns:1fr;gap:30px}
  .mission-rule{width:100%;height:1px;background:linear-gradient(90deg,var(--line),transparent 85%)}
  .dark .mission-rule{background:linear-gradient(90deg,rgba(236,238,244,.22),transparent 85%)}
  .mission-head h2{max-width:none}
}

/* ---------- COVERFLOW CAROUSEL ---------- */
.cf{margin-top:clamp(48px,6vw,74px);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--line)}
.cf-viewport{--cf-x:30%;
  position:relative;height:360px;perspective:1500px;overflow:hidden;
  touch-action:pan-y;cursor:grab;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.cf-viewport:active{cursor:grabbing}
.cf-panel{position:absolute;top:0;left:0;right:0;margin:0 auto;
  width:min(640px,calc(100% - 56px));height:340px;
  border:1px solid var(--line);border-radius:22px;background:var(--paper-2);
  padding:clamp(30px,4vw,52px);display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 26px 60px rgba(10,13,23,.09);
  transition:transform .7s var(--ease),opacity .7s var(--ease),filter .7s var(--ease);
  will-change:transform,opacity;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.cf-panel *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.cf-panel::before{content:"";position:absolute;top:0;left:clamp(30px,4vw,52px);
  width:40px;height:3px;border-radius:0 0 3px 3px;background:var(--amber)}
.cf-panel h3{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(1.9rem,3.4vw,2.7rem);
  line-height:1.08;letter-spacing:-.018em;color:var(--ink);margin:0 0 18px;max-width:16ch}
.cf-panel p{color:var(--text-dim);font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.6;margin:0;max-width:44ch}
.cf-nav{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:32px}
.cf-dots{display:flex;gap:10px;align-items:center}
.cf-dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--amber-deep);background:transparent;
  cursor:pointer;padding:0;opacity:.5;transition:all .3s var(--ease)}
.cf-dot.on{background:var(--amber);border-color:var(--amber);opacity:1;transform:scale(1.25)}
.cf-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--paper-2);
  cursor:pointer;color:var(--text);font-size:1.05rem;display:grid;place-items:center;
  transition:all .3s var(--ease)}
.cf-btn:hover{border-color:var(--amber);color:var(--amber-deep);transform:translateY(-2px)}
@media(max-width:900px){
  .cf-viewport{--cf-x:42%;height:450px}
  .cf-panel{height:430px}
}

/* ---------- PINNED SCROLL SEQUENCE ---------- */
/* .dark carries overflow:hidden, which would turn the section into a scroll
   container and kill position:sticky. overflow:clip clips without that. */
#technology{overflow:clip}
.pin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);
  align-items:start;margin-top:clamp(44px,5vw,64px);padding-top:clamp(38px,4.5vw,56px);
  border-top:1px solid rgba(236,238,244,.16)}
.pin-stage{position:sticky;top:24vh}
.pin-title{display:flex;align-items:center;gap:14px;font-family:"Fraunces",serif;font-weight:500;
  font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.1;letter-spacing:-.02em;
  color:rgba(236,238,244,.26);margin:0 0 22px;transition:color .5s var(--ease)}
.pin-title::before{content:"";width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  background:rgba(240,169,75,.22);transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.pin-title.on::before{background:var(--amber);
  box-shadow:0 0 0 6px rgba(240,169,75,.14),0 0 20px 3px rgba(240,169,75,.5)}
.pin-title .n{font-family:"Spline Sans Mono",monospace;font-size:.74rem;letter-spacing:.2em;
  color:rgba(247,204,138,.32);flex:0 0 auto;transition:color .5s var(--ease)}
.pin-title.on{color:var(--invert)}
.pin-title.on .n{color:var(--amber)}
.pin-step{min-height:56vh;display:flex;flex-direction:column;justify-content:center;padding:18px 0}
.pin-step p{color:var(--invert-dim);font-size:clamp(1.12rem,1.8vw,1.42rem);line-height:1.58;
  max-width:44ch;margin:0;opacity:.3;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.pin-step.on p{opacity:1;transform:none}
.pin-step .mini{display:none}
@media(max-width:900px){
  .pin{grid-template-columns:1fr;gap:0}
  .pin-stage{display:none}
  .pin-step{min-height:0;padding:26px 0;border-top:1px solid rgba(236,238,244,.14)}
  .pin-step:first-child{border-top:0}
  .pin-step p{opacity:1;transform:none}
  .pin-step .mini{display:flex;align-items:center;gap:12px;font-family:"Fraunces",serif;
    font-size:1.5rem;color:var(--invert);margin-bottom:14px}
  .pin-step .mini::before{content:"";width:11px;height:11px;border-radius:50%;
    background:var(--amber);flex:0 0 auto}
  .pin-step .mini .n{font-family:"Spline Sans Mono",monospace;font-size:.7rem;
    letter-spacing:.2em;color:var(--amber)}
}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.chip{border:1px solid var(--line);background:var(--paper-2);border-radius:100px;padding:9px 18px;
  font-size:.86rem;font-weight:500;color:var(--text);display:flex;align-items:center;gap:9px}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber)}

/* technology flow */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:20px;
  border:1px solid rgba(236,238,244,.14);border-radius:18px;overflow:hidden}
.flow-step{padding:38px 32px;position:relative}
.flow-step:not(:last-child){border-right:1px solid rgba(236,238,244,.12)}
.flow-step .idx{font-family:"Spline Sans Mono",monospace;font-size:.78rem;color:var(--amber-soft);letter-spacing:.16em}
.flow-step h3{margin:16px 0 12px;color:var(--invert)}
.flow-step p{color:var(--invert-dim);font-size:.98rem;line-height:1.6}
.signal-bar{margin:40px 0 0;height:64px;width:100%}
.signal-bar path{fill:none;stroke:var(--amber);stroke-width:1.6;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 4.5s var(--ease) infinite}
@keyframes draw{0%{stroke-dashoffset:1400}55%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:.25}}

/* approach comparison */
.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:30px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -28px rgba(10,13,23,.35)}
.card .tag{font-family:"Spline Sans Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.card h3{margin:14px 0 14px;font-size:1.28rem}
.card p{color:var(--text-dim);font-size:.97rem}
.card.feature{background:var(--ink);color:var(--invert);border-color:var(--ink);position:relative}
.card.feature .tag{color:var(--amber-soft)}
.card.feature h3{color:var(--invert)}
.card.feature p{color:var(--invert-dim)}
.card.feature::before{content:"OUR APPROACH";position:absolute;top:-11px;left:30px;
  font-family:"Spline Sans Mono",monospace;font-size:.64rem;letter-spacing:.18em;
  background:var(--amber);color:var(--ink);padding:4px 10px;border-radius:100px;font-weight:500}
.approach-note{margin-top:46px;display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.approach-note .nbox{flex:1;min-width:240px}
.approach-note h3{font-size:1.4rem;margin-bottom:14px}
.approach-note p{color:var(--text-dim)}
.dark .approach-note h3{color:var(--invert)}
.dark .approach-note p{color:var(--invert-dim)}

/* credibility strip */
.strip{background:var(--ink-soft);color:var(--invert);padding:30px 0}
.strip .wrap{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;justify-content:center;
  font-family:"Spline Sans Mono",monospace;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--invert-dim)}
.strip b{color:var(--amber-soft);font-weight:500}
.strip .dot{width:5px;height:5px;border-radius:50%;background:var(--amber);opacity:.6}

/* ---------- ETHICS / PRINCIPLES ---------- */
.ethics{background:var(--paper);color:var(--text);position:relative;overflow:hidden}
.ethics::before{content:"";position:absolute;top:-160px;left:-120px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,169,75,.10),transparent 64%);filter:blur(18px)}
.ethics .wrap{position:relative;z-index:2}
.ethics .lead{color:var(--text-dim)}
/* ---------- BIG-TYPE ACCORDION ---------- */
.acc{margin-top:clamp(42px,5vw,60px);border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);
  padding:clamp(20px,2.6vw,32px) 0;
  font-family:"Fraunces",serif;font-weight:500;
  font-size:clamp(1.45rem,2.9vw,2.35rem);line-height:1.1;letter-spacing:-.018em;
  color:var(--text-faint);transition:color .35s var(--ease)}
.acc-item.on .acc-head,.acc-head:hover,.acc-head:focus-visible{color:var(--ink)}
.acc-head .n{font-family:"Spline Sans Mono",monospace;font-size:.74rem;letter-spacing:.2em;
  color:var(--amber-deep);flex:0 0 auto;opacity:.65;
  transition:opacity .35s var(--ease)}
.acc-item.on .acc-head .n{opacity:1}
.acc-head .t{flex:1 1 auto;min-width:0}
/* the +/× is drawn, not typed — a glyph never centres reliably inside a circle */
.acc-head .sign{position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);font-size:0;
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.acc-head .sign::before,.acc-head .sign::after{content:"";position:absolute;top:50%;left:50%;
  width:13px;height:1.5px;border-radius:1px;background:var(--text-dim);
  transform:translate(-50%,-50%);transition:background .35s var(--ease)}
.acc-head .sign::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc-item.on .acc-head .sign{background:var(--amber);border-color:var(--amber);transform:rotate(45deg)}
.acc-item.on .acc-head .sign::before,.acc-item.on .acc-head .sign::after{background:var(--ink)}
/* 0fr -> 1fr animates to the content's natural height, no JS measuring */
.acc-body{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .5s var(--ease),opacity .4s var(--ease)}
.acc-item.on .acc-body{grid-template-rows:1fr;opacity:1}
.acc-body>div{overflow:hidden;min-height:0}
.acc-body p{color:var(--text-dim);font-size:clamp(1.04rem,1.4vw,1.2rem);line-height:1.64;
  max-width:58ch;margin:0 0 clamp(22px,2.8vw,32px);
  padding-left:clamp(0px,5vw,72px)}
.dark .acc,.dark .acc-item{border-color:rgba(236,238,244,.14)}
.dark .acc-head{color:rgba(236,238,244,.34)}
.dark .acc-item.on .acc-head,.dark .acc-head:hover{color:var(--invert)}
.dark .acc-head .n{color:var(--amber-soft)}
.dark .acc-head .sign{border-color:rgba(236,238,244,.24)}
.dark .acc-head .sign::before,.dark .acc-head .sign::after{background:var(--invert-dim)}
.dark .acc-item.on .acc-head .sign::before,.dark .acc-item.on .acc-head .sign::after{background:var(--ink)}
.dark .acc-body p{color:var(--invert-dim)}

.ethics-note{margin-top:44px;padding-top:30px;border-top:1px solid var(--line);
  font-size:1.04rem;color:var(--text-dim);max-width:64ch;line-height:1.65}
.ethics-note .em{font-family:"Fraunces",serif;font-style:italic;color:var(--amber-deep)}

/* ---------- TEASER GRID (landing cross-links) ---------- */
.teasers{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px}
.teaser{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:34px 32px;
  display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.teaser:hover{transform:translateY(-4px);box-shadow:0 20px 40px -28px rgba(10,13,23,.35)}
.teaser .role{font-family:"Spline Sans Mono",monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-deep)}
.teaser h3{margin:12px 0 12px;font-size:1.36rem}
.teaser p{color:var(--text-dim);font-size:.98rem;flex:1}
.teaser .more{margin-top:22px;font-weight:600;font-size:.92rem;color:var(--amber-deep);display:inline-flex;align-items:center;gap:8px}
.teaser .more .arr{transition:transform .3s var(--ease)}
.teaser:hover .more .arr{transform:translateX(4px)}

/* team */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.member{border:1px solid rgba(236,238,244,.14);border-radius:18px;padding:34px 30px;
  transition:border-color .3s var(--ease)}
.member:hover{border-color:rgba(240,169,75,.4)}
.avatar{width:120px;height:120px;border-radius:50%;overflow:hidden;margin:0 auto 24px;
  box-shadow:0 0 0 3px rgba(240,169,75,.5),0 0 18px 4px var(--halo)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.member .role{font-family:"Spline Sans Mono",monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber-soft)}
.member h3{margin:10px 0 14px;font-size:1.3rem;color:var(--invert)}
.member p{color:var(--invert-dim);font-size:.94rem;line-height:1.55}

/* two founders — keep the cards from stretching the full width */
.team-grid.founders{grid-template-columns:repeat(2,1fr);max-width:820px;margin-inline:auto}

/* founder cards are clickable and open the bio modal */
.member.is-clickable{
  display:block;width:100%;text-align:left;cursor:pointer;font:inherit;
  background:transparent;color:inherit;-webkit-appearance:none;appearance:none;
  /* while still revealing, keep the slow scroll-in timing */
  transition:opacity .9s var(--ease),transform .9s var(--ease),
             border-color .3s var(--ease),background .3s var(--ease);
}
/* once revealed, hover should respond quickly rather than at reveal speed */
.member.is-clickable.is-visible{
  transition:transform .4s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.member.is-clickable:hover{transform:translateY(-4px);background:rgba(236,238,244,.035)}
.member.is-clickable:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.member-more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-weight:600;font-size:.88rem;color:var(--amber-soft)}
.member-more .arr{transition:transform .3s var(--ease)}
.member.is-clickable:hover .member-more .arr{transform:translateX(4px)}

/* ---------- ADVISORS (light section) ---------- */
.advisor-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:8px}
.advisor-grid .advisor{display:flex;gap:22px;align-items:flex-start;
  background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:26px 26px;
  transition:opacity .9s var(--ease),transform .9s var(--ease),
             border-color .3s var(--ease),box-shadow .3s var(--ease)}
.advisor-grid .advisor.is-visible{transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.advisor:hover{border-color:rgba(240,169,75,.55);box-shadow:0 18px 36px -28px rgba(10,13,23,.35)}
/* softer halo than the founders' — it sits on paper, not on ink */
.avatar-sm{width:76px;height:76px;margin:0;flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(240,169,75,.55),0 0 12px 2px rgba(240,169,75,.22)}
.adv-txt{min-width:0}
.advisor .role{font-family:"Spline Sans Mono",monospace;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber-deep)}
.advisor h3{margin:7px 0 10px;font-size:1.16rem;color:var(--text)}
.advisor p{color:var(--text-dim);font-size:.92rem;line-height:1.55}
/* still works if the section is ever moved back onto ink */
.dark .advisor-grid .advisor{background:transparent;border-color:rgba(236,238,244,.14)}
.dark .advisor:hover{background:rgba(236,238,244,.03);box-shadow:none}
.dark .advisor .role{color:var(--amber-soft)}
.dark .advisor h3{color:var(--invert)}
.dark .advisor p{color:var(--invert-dim)}

/* ---------- PARTNER LOGOS ---------- */
/* No cards. The logos are dark marks on transparency, so the whole band is
   white and they sit straight on it. */
.partners-sec{background:var(--paper-2)}
.partners-sec .sec-head{margin-bottom:0}
.logo-row{
  display:grid;grid-template-columns:repeat(5,1fr);
  align-items:center;justify-items:center;
  gap:clamp(28px,5vw,64px);
  margin-top:64px;
}
/* height cap keeps the near-square marks from towering over the wide wordmarks */
.logo-row img{max-width:100%;max-height:60px;width:auto;height:auto;object-fit:contain;display:block}

/* ---------- FOUNDER BIO MODAL ---------- */
.bio-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:28px}
.bio-overlay[hidden]{display:none}
.bio-backdrop{position:absolute;inset:0;background:rgba(6,8,15,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .32s var(--ease)}
.bio-overlay.is-open .bio-backdrop{opacity:1}
.bio-modal{
  position:relative;z-index:2;
  width:min(760px,100%);max-height:min(86vh,900px);overflow-y:auto;
  background:var(--ink-soft);color:var(--invert);
  border:1px solid rgba(236,238,244,.16);border-radius:22px;
  padding:clamp(30px,4vw,46px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
  opacity:0;transform:translateY(18px) scale(.98);
  transition:opacity .34s var(--ease),transform .34s var(--ease);
}
.bio-modal[hidden]{display:none}
.bio-overlay.is-open .bio-modal{opacity:1;transform:none}
.bio-close{position:absolute;top:16px;right:18px;width:38px;height:38px;border-radius:50%;
  background:rgba(236,238,244,.07);border:1px solid rgba(236,238,244,.16);color:var(--invert-dim);
  font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .25s var(--ease)}
.bio-close:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
/* the modal sits on ink, so the halo goes back to full strength */
.bio-head .avatar-sm{box-shadow:0 0 0 2px rgba(240,169,75,.45),0 0 14px 3px rgba(240,169,75,.32)}
.bio-head{display:flex;align-items:center;gap:20px;padding-right:44px;
  padding-bottom:24px;margin-bottom:26px;border-bottom:1px solid rgba(236,238,244,.14)}
.bio-head .role{font-family:"Spline Sans Mono",monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber-soft)}
.bio-head h3{margin-top:8px;font-size:clamp(1.3rem,2.4vw,1.62rem);color:var(--invert)}
.bio-body p{color:var(--invert-dim);font-size:.97rem;line-height:1.7;margin-bottom:18px}
.bio-body p:last-child{margin-bottom:0}
/* scrollbar inside the modal */
.bio-modal::-webkit-scrollbar{width:10px}
.bio-modal::-webkit-scrollbar-thumb{background:rgba(236,238,244,.18);border-radius:10px;
  border:3px solid var(--ink-soft)}
body.bio-open{overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .bio-backdrop,.bio-modal{transition:none}
}

/* history (about) */
.history{max-width:760px}
.history .placeholder{margin-top:28px;border:1px dashed var(--line);border-radius:18px;
  padding:40px 36px;background:var(--paper-2);color:var(--text-dim)}
.history .placeholder h3{font-size:1.2rem;color:var(--text);margin-bottom:12px}
.timeline{margin-top:34px;border-left:1px solid var(--line);padding-left:30px;display:flex;flex-direction:column;gap:30px}
.tl-item{position:relative}
.tl-item::before{content:"";position:absolute;left:-37px;top:6px;width:11px;height:11px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 4px var(--paper)}
.tl-item .yr{font-family:"Spline Sans Mono",monospace;font-size:.78rem;letter-spacing:.12em;color:var(--amber-deep)}
.tl-item h3{font-size:1.16rem;margin:6px 0 6px}
.tl-item p{color:var(--text-dim);font-size:.96rem}

/* patients (warm) */
.patients{background:linear-gradient(170deg,#FBF4E9 0%,#F8EFE0 100%);position:relative;overflow:hidden}
.patients::before{content:"";position:absolute;top:-120px;right:-120px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,169,75,.22),transparent 65%);filter:blur(18px)}
.patients .wrap{position:relative;z-index:2}
.patients h2{max-width:18ch}
.patients .lead{color:#6b5b43;max-width:54ch}
.patients .fineprint{margin-top:30px;font-size:.9rem;color:#8a7a5f;max-width:60ch;line-height:1.6;
  padding-top:22px;border-top:1px solid rgba(201,116,43,.25)}
.warm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.warm-card{background:rgba(255,255,255,.6);border:1px solid rgba(201,116,43,.18);border-radius:18px;padding:30px 28px}
.warm-card h3{font-size:1.2rem;margin-bottom:10px;color:#4a3c28}
.warm-card p{color:#6b5b43;font-size:.96rem}

/* ---------- BLOG INDEX ---------- */
.post-list{display:flex;flex-direction:column;gap:22px}
.post-card{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  background:var(--paper-2);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  transition:opacity .9s var(--ease),transform .9s var(--ease),
             border-color .3s var(--ease),box-shadow .4s var(--ease);
}
.post-card.is-visible{transition:transform .4s var(--ease),border-color .3s var(--ease),box-shadow .4s var(--ease)}
.post-card:hover{transform:translateY(-4px);border-color:rgba(240,169,75,.55);
  box-shadow:0 24px 46px -32px rgba(10,13,23,.4)}
.post-card-img{position:relative;overflow:hidden;background:var(--cloud);min-height:240px}
.post-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.post-card:hover .post-card-img img{transform:scale(1.04)}
.post-card-body{padding:clamp(28px,3.4vw,40px);display:flex;flex-direction:column;justify-content:center}
.post-card-body h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:14px 0 12px}
.post-card-body p{color:var(--text-dim);font-size:1rem;line-height:1.6}
.post-card .more{margin-top:24px;font-weight:600;font-size:.92rem;color:var(--amber-deep);
  display:inline-flex;align-items:center;gap:8px}
.post-card .more .arr{transition:transform .3s var(--ease)}
.post-card:hover .more .arr{transform:translateX(4px)}

/* shared date/category line */
.post-meta{font-family:"Spline Sans Mono",monospace;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-faint);display:flex;align-items:center;gap:.7em;flex-wrap:wrap}
.post-meta .sep{opacity:.6}
.page-hero .post-meta{color:var(--amber-soft)}

/* ---------- BLOG POST ---------- */
.post-hero .post-back{margin-bottom:26px}
.post-back{display:inline-flex;align-items:center;gap:9px;
  font-family:"Spline Sans Mono",monospace;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber-soft);transition:color .25s}
.post-back .arr{transition:transform .3s var(--ease)}
.post-back:hover{color:var(--amber)}
.post-back:hover .arr{transform:translateX(-4px)}
.post-foot .post-back{color:var(--amber-deep)}

.post{max-width:720px;margin:0 auto}
.post > p{font-size:1.09rem;line-height:1.72;color:var(--text-dim);margin-bottom:24px}
.post-standfirst{font-family:"Fraunces",serif;font-size:clamp(1.25rem,2.2vw,1.5rem)!important;
  font-style:italic;line-height:1.45!important;color:var(--text)!important;
  margin-bottom:40px!important}
.post h2{font-size:clamp(1.5rem,2.8vw,2rem);margin:48px 0 20px}
.post a:not(.btn):not(.post-back){color:var(--amber-deep);border-bottom:1px solid rgba(201,116,43,.35);
  transition:border-color .25s}
.post a:not(.btn):not(.post-back):hover{border-bottom-color:var(--amber-deep)}

.post-figure{margin:44px 0;width:100%}
/* figures break out of the prose column on wide screens */
@media(min-width:1000px){
  .post-figure{width:calc(100% + 180px);margin-left:-90px}
}
.post-figure img{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--line)}
.post-figure figcaption{margin-top:14px;font-size:.88rem;line-height:1.55;color:var(--text-faint);
  text-align:center;max-width:60ch;margin-inline:auto}

.post-quote{margin:44px 0;padding:4px 0 4px 28px;border-left:2px solid var(--amber)}
.post-quote p{font-family:"Fraunces",serif;font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.45rem);line-height:1.5;color:var(--text)}

.post-foot{margin-top:56px;padding-top:28px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.post-tags{font-family:"Spline Sans Mono",monospace;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint)}

/* ---------- BLOG (empty state, kept for reuse) ---------- */
.empty-state{border:1px dashed var(--line);border-radius:18px;background:var(--paper-2);
  padding:64px 40px;text-align:center;max-width:680px;margin:0 auto}
.empty-state .glyph-lg{width:54px;height:54px;border-radius:50%;margin:0 auto 24px;
  background:radial-gradient(circle at 38% 34%,#2a2f45,#0b0e1a 65%);
  box-shadow:0 0 0 1px rgba(240,169,75,.5),0 0 16px 2px var(--halo)}
.empty-state h3{font-size:1.5rem;margin-bottom:14px}
.empty-state p{color:var(--text-dim);max-width:44ch;margin:0 auto}

/* ---------- CAREERS ---------- */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.value{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:30px 28px}
.value .vnum{font-family:"Spline Sans Mono",monospace;font-size:.74rem;letter-spacing:.16em;color:var(--amber-deep)}
.value h3{margin:12px 0 10px;font-size:1.18rem}
.value p{color:var(--text-dim);font-size:.95rem}

/* ---------- EDITORIAL LIST ----------
   Ported from the experiments page (option 2), minus the numerals.
   Full-width rows separated by hairlines: headline left, copy right.
   Add .numbered on .edlist to bring the outlined figures back. */
.edlist{margin-top:clamp(48px,6vw,76px);border-top:1px solid var(--line)}
.edrow{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(20px,3.6vw,52px);
  padding:clamp(34px,4.4vw,54px) 0;
  border-bottom:1px solid var(--line);
  align-items:start;
  transition:opacity .9s var(--ease),transform .9s var(--ease),background .35s var(--ease);
}
.edrow.is-visible{transition:background .35s var(--ease)}
.edrow:hover{background:rgba(240,169,75,.045)}
.edrow h3{
  font-family:"Fraunces",serif;font-weight:500;
  font-size:clamp(1.6rem,2.8vw,2.25rem);
  line-height:1.1;letter-spacing:-.015em;
  color:var(--ink);margin:0;
}
.edrow p{color:var(--text-dim);font-size:1.1rem;line-height:1.62;margin:0;max-width:48ch}
.edrow p + p{margin-top:14px}
/* a row whose copy runs to several paragraphs wraps them in a div so they
   stay inside the one column */
.edrow > div{min-width:0}
.dark .edlist,.dark .edrow{border-color:rgba(236,238,244,.14)}
.dark .edrow h3{color:var(--invert)}
.dark .edrow p{color:var(--invert-dim)}

/* optional numerals — the original three-column form */
.edlist.numbered .edrow{grid-template-columns:minmax(0,9rem) minmax(0,1fr) minmax(0,1.1fr)}
.edrow .num{
  font-family:"Fraunces",serif;font-size:clamp(2.6rem,5vw,4.1rem);line-height:.9;
  color:transparent;-webkit-text-stroke:1px var(--amber-deep);
  opacity:.65;letter-spacing:-.03em;transition:all .35s var(--ease);
}
.edrow:hover .num{color:var(--amber);-webkit-text-stroke-color:transparent;opacity:1}

.roles{margin-top:8px;display:flex;flex-direction:column;gap:14px}
.role-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:24px 28px;
  transition:border-color .3s var(--ease)}
.role-row:hover{border-color:var(--amber)}
.role-row .rmeta{font-family:"Spline Sans Mono",monospace;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint);margin-top:6px}
.role-row h3{font-size:1.18rem}
.role-row .apply{font-weight:600;font-size:.9rem;color:var(--amber-deep);white-space:nowrap}

/* ---------- CONTACT FORM ---------- */
.contact{background:var(--ink);color:var(--invert);position:relative;overflow:hidden}
.contact::after{content:"";position:absolute;top:-100px;right:-140px;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,169,75,.15),transparent 64%);filter:blur(18px);pointer-events:none}
.contact .wrap{position:relative;z-index:2}
.contact h2{max-width:16ch}
.contact .lead{color:var(--invert-dim)}
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:54px}
.pcard{border:1px solid rgba(236,238,244,.16);border-radius:18px;padding:30px;
  display:flex;flex-direction:column;transition:background .3s var(--ease)}
.pcard:hover{background:rgba(236,238,244,.04)}
.pcard .role{font-family:"Spline Sans Mono",monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-soft)}
.pcard h3{margin:12px 0 10px;color:var(--invert);font-size:1.22rem}
.pcard p{color:var(--invert-dim);font-size:.94rem;margin-bottom:24px}
.pcard p:last-child{margin-bottom:0}
/* pinned to the bottom so the three cards' buttons line up */
.pcard .btn{align-self:flex-start;margin-top:auto}
.contact-cta{margin-top:56px;display:flex;flex-wrap:wrap;align-items:center;gap:22px;
  padding-top:44px;border-top:1px solid rgba(236,238,244,.14)}
.contact-cta .em{font-family:"Fraunces",serif;font-size:clamp(1.4rem,3vw,2rem);font-style:italic}
.contact-cta a.mail{color:var(--amber-soft);border-bottom:1px solid rgba(247,204,138,.4);padding-bottom:2px}
.contact-cta a.mail:hover{color:var(--amber)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.form-card{background:var(--paper-2);border:1px solid var(--line);border-radius:22px;padding:40px clamp(26px,4vw,44px)}
.field{display:flex;flex-direction:column;margin-bottom:20px}
.field.full{grid-column:1/-1}
.field label{font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--text);margin-bottom:9px;
  display:flex;align-items:center;gap:6px}
.field label .req{color:var(--amber-deep)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:1rem;color:var(--text);
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(240,169,75,.18)}
.field textarea{min-height:150px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-actions{margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.form-note{font-size:.86rem;color:var(--text-faint);max-width:38ch}
.contact-aside h3{font-size:1.4rem;margin-bottom:14px}
.contact-aside p{color:var(--invert-dim);margin-bottom:22px}
.contact-aside .info{display:flex;flex-direction:column;gap:18px;margin-top:30px}
.contact-aside .info .row .k{font-family:"Spline Sans Mono",monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber-soft);margin-bottom:6px}
.contact-aside .info .row a,.contact-aside .info .row span{color:var(--invert)}
.contact-aside .info .row a:hover{color:var(--amber-soft)}

/* ---------- CONTACT PAGE (redesign) ---------- */
.contact-layout{display:grid;grid-template-columns:1.12fr .88fr;gap:26px;align-items:start;margin-top:4px}
.contact-side{display:flex;flex-direction:column;gap:20px}

.fc-head{margin-bottom:28px}
.fc-head h2{font-size:clamp(1.5rem,3vw,2rem);max-width:none}
.fc-head p{color:var(--text-dim);font-size:.97rem;margin-top:10px;max-width:46ch}

.side-card{position:relative;overflow:hidden;background:var(--ink);color:var(--invert);
  border-radius:22px;padding:clamp(28px,3.4vw,36px)}
.side-card::after{content:"";position:absolute;top:-90px;right:-90px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,169,75,.18),transparent 64%);filter:blur(16px);pointer-events:none}
.side-card>*{position:relative;z-index:2}
.side-card .eyebrow{color:var(--amber-soft)}
.email-big{display:inline-block;margin-top:16px;font-family:"Fraunces",serif;
  font-size:clamp(1.2rem,2.4vw,1.55rem);color:var(--invert);
  border-bottom:1px solid rgba(247,204,138,.35);padding-bottom:3px;transition:color .25s var(--ease)}
.email-big:hover{color:var(--amber-soft)}
.side-resp{margin-top:18px;color:var(--invert-dim);font-size:.94rem;max-width:36ch}
.side-meta{display:flex;flex-wrap:wrap;gap:22px 44px;margin-top:28px;padding-top:24px;
  border-top:1px solid rgba(236,238,244,.14)}
.side-meta .k{font-family:"Spline Sans Mono",monospace;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber-soft)}
.side-meta .v{color:var(--invert);font-size:.98rem;margin-top:6px}

.patient-note{background:rgba(240,169,75,.07);border:1px solid rgba(201,116,43,.22);
  border-radius:22px;padding:clamp(26px,3vw,32px)}
.patient-note .k{font-family:"Spline Sans Mono",monospace;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber-deep)}
.patient-note h3{font-size:1.18rem;margin:12px 0 10px}
.patient-note p{color:var(--text-dim);font-size:.95rem}
.patient-note a{color:var(--amber-deep);border-bottom:1px solid rgba(201,116,43,.45);padding-bottom:1px}
.patient-note a:hover{color:var(--text)}

@media (max-width:900px){
  .contact-layout{grid-template-columns:1fr;gap:20px}
}

/* ---------- FOOTER ---------- */
footer{background:#070912;color:var(--invert-dim);padding:50px 0 40px;font-size:.86rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center}
footer .brand{color:var(--invert)}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a:hover{color:var(--amber-soft)}
.legal{width:100%;margin-top:30px;padding-top:24px;border-top:1px solid rgba(236,238,244,.1);
  font-size:.78rem;color:var(--text-faint);line-height:1.6}

/* reveal animation */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.hero .reveal,.page-hero .reveal{opacity:0;transform:translateY(22px);animation:rise 1s var(--ease) forwards}
.hero .d1,.page-hero .d1{animation-delay:.1s}.hero .d2,.page-hero .d2{animation-delay:.25s}
.hero .d3,.page-hero .d3{animation-delay:.4s}.hero .d4,.page-hero .d4{animation-delay:.55s}
.hero .d5,.page-hero .d5{animation-delay:.7s}
@keyframes rise{to{opacity:1;transform:none}}

/* responsive */
@media(max-width:1080px){
  .logo-row{grid-template-columns:repeat(3,1fr);row-gap:48px}
}
@media(max-width:900px){
  .post-card{grid-template-columns:1fr}
  .post-card-img{min-height:0;aspect-ratio:16/10}
  .post-card-img img{position:static;height:100%}
  .edrow,.edlist.numbered .edrow{grid-template-columns:1fr;gap:14px}
  .team-grid.founders,.advisor-grid{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr;gap:10px}
  .eclipse-stage{order:-1;min-height:260px;margin-bottom:10px}
  .tech-grid{grid-template-columns:1fr}
  .tech-visual{position:static;order:-1}
  .flow,.compare,.team-grid,.partner-grid,.teasers,.warm-grid,.values-grid,.form-grid{grid-template-columns:1fr}
  .flow-step:not(:last-child){border-right:0;border-bottom:1px solid rgba(236,238,244,.12)}
  .hero-tags{position:static;margin-top:48px}
  .form-row{grid-template-columns:1fr}
}
@media(max-width:760px){
  .logo-row{grid-template-columns:repeat(2,1fr);gap:38px 26px;margin-top:46px}
  .logo-row img{max-height:48px}
  .advisor{gap:18px}
  .avatar-sm{width:64px;height:64px}
  .bio-overlay{padding:0}
  .bio-modal{max-height:100vh;height:100%;width:100%;border-radius:0;border:0}
  .bio-head{flex-direction:column;align-items:flex-start;gap:16px;padding-right:0}
  .stat-row{gap:34px}
}

/* ---------- MOBILE MENU ----------
   The desktop menu runs out of room before 900px, so the burger takes over
   there rather than at 760px. When open, the bar simply wraps and the links
   stack underneath it — no absolute positioning, nothing to keep in sync. */
@media(max-width:900px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:block}

  .nav.open{
    flex-wrap:wrap;
    background:rgba(10,13,23,.97);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 18px 40px -24px rgba(0,0,0,.9);
    padding-bottom:18px;
    max-height:100vh;overflow-y:auto;
  }
  .nav.open .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    order:3;width:100%;margin-top:12px;padding-top:6px;
    border-top:1px solid rgba(236,238,244,.12);
  }
  .nav.open .nav-links a,
  .nav.open.scrolled .nav-links a{
    display:block;padding:15px 2px;font-size:1.02rem;color:var(--invert);
  }
  .nav.open .nav-links a.active{color:var(--amber)}
  .nav.open .nav-cta{
    display:inline-block;order:4;margin:12px 2px 4px;padding:12px 24px;font-size:.92rem;
  }
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ===========================================================
   SCROLLYTELLING — the cost of penetrating the cortex
   (technology.html: #probe, #epi, #risk)
   =========================================================== */
:root{
  --risk:#A8423C;
  --risk-deep:#8C332E;
  --risk-tint:rgba(168,66,60,.10);
  --safe:#C9742B;
}

.scly{background:var(--ink);color:var(--invert);position:relative}
.scly-track{position:relative;height:560vh}
.scly.short .scly-track{height:300vh}
/* the epidural act carries ten years of copy, so it gets more scroll to do it in */
#epi .scly-track{height:600vh}
#signal .scly-track{height:460vh}
.scly-stage{position:sticky;top:0;height:100vh;min-height:560px;overflow:hidden}
.scly-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* readability scrim behind the copy column */
.scly-scrim{position:absolute;inset:0;pointer-events:none;z-index:2;
  /* reaches a little further right than before — the copy column now starts
     after the number rail, so the text sits deeper into the frame */
  background:linear-gradient(100deg,rgba(10,13,23,.92) 0%,rgba(10,13,23,.74) 30%,rgba(10,13,23,.14) 52%,transparent 66%)}
.scly-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 190px 60px rgba(10,13,23,.72)}

/* ---- copy column ---- */
.scly-ui{position:absolute;inset:0;z-index:4;display:flex;align-items:center;pointer-events:none}
/* widened only by the rail + gap, so the text column itself is unchanged */
.scly-copy{position:relative;width:min(38.5rem,54%);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(22px,3vw,48px);align-items:start}
.scly-col{min-width:0}
.scly-chapters{position:relative;min-height:19rem}
.scly-tag{font-family:"Spline Sans Mono",monospace;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--amber-soft);
  display:flex;align-items:center;gap:.85em;white-space:nowrap;margin-bottom:2rem}
.scly-tag::before{content:"";width:11px;height:11px;border-radius:50%;flex:0 0 auto;
  background:var(--amber);
  box-shadow:0 0 0 5px rgba(240,169,75,.14),0 0 16px 2px rgba(240,169,75,.45)}

.scly-chapter{position:absolute;top:0;left:0;right:0;
  opacity:0;transform:translateY(18px);filter:blur(5px);
  transition:opacity .62s var(--ease),transform .62s var(--ease),filter .62s var(--ease);
  will-change:opacity,transform}
.scly-chapter.on{opacity:1;transform:none;filter:none}
.scly-chapter .ch-label{font-family:"Spline Sans Mono",monospace;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amber);opacity:.9;display:block;margin-bottom:14px}
.scly-chapter h2{font-size:clamp(1.9rem,3.3vw,2.85rem);color:var(--invert);margin:0 0 18px;max-width:15ch}
.scly-chapter h2 .accent{font-style:italic;color:var(--amber-soft)}
.scly-chapter p{color:var(--invert-dim);font-size:1.04rem;line-height:1.62;max-width:40ch;margin:0}
/* the closing line of an act — a statement, not a footnote */
.scly-chapter .fine{margin-top:26px;padding-left:18px;border-left:2px solid rgba(240,169,75,.55);
  font-family:"Fraunces",serif;font-style:italic;text-transform:none;letter-spacing:-.012em;
  font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.34;color:var(--amber-soft);max-width:27ch}

/* ---- legibility over the render ----
   The copy sits on anything from near-black (Act I) to lit tissue (Act II),
   so instead of darkening the frame further, each element carries its own
   halo: a tight 3px core for edge definition and a wide pool for separation.
   Same technique .scly-hud already uses, so nothing is hidden. */
.scly-tag,
.scly-cue,
.scly-chapter .ch-label,
.scly-chapter h2,
.scly-chapter p,
.scly-chapter .fine,
.numrail .slot b{
  text-shadow:0 0 3px rgba(4,6,12,.95),
              0 1px 14px rgba(4,6,12,.92),
              0 0 38px rgba(4,6,12,.8)}

/* ---- persistent chapter-number rail (clickable) ---- */
/* screen-reader-only label */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.numrail{position:relative;display:flex;flex-direction:column;
  gap:clamp(14px,1.8vw,22px);padding-top:.1em;
  pointer-events:auto}   /* .scly-ui disables pointer events; the rail opts back in */
.numrail .slot{position:relative;height:2.5rem;min-width:2.2rem;
  display:flex;align-items:center;
  background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
  -webkit-appearance:none;appearance:none;cursor:pointer}
.numrail .slot b{font-family:"Fraunces",serif;font-weight:500;font-size:2.5rem;line-height:1;
  letter-spacing:-.04em;color:rgba(236,238,244,.2);
  transform:scale(.46);transform-origin:left center;
  transition:transform .55s cubic-bezier(.2,.9,.25,1),color .55s var(--ease)}
.numrail .slot.on b{color:var(--amber);transform:scale(1.55)}
.numrail .slot:hover b{color:rgba(240,169,75,.72);transform:scale(.62)}
.numrail .slot.on:hover b{color:var(--amber);transform:scale(1.55)}
.numrail .slot:focus-visible{outline:none}
.numrail .slot:focus-visible b{color:var(--amber)}
.numrail .slot:focus-visible::before{background:var(--amber);height:26px;margin-top:-13px}
.numrail .slot::before{content:"";position:absolute;left:-16px;top:50%;width:2px;height:12px;
  margin-top:-6px;border-radius:2px;background:rgba(236,238,244,.18);
  transition:height .5s var(--ease),margin-top .5s var(--ease),
             background .5s var(--ease),box-shadow .5s var(--ease)}
.numrail .slot.on::before{height:34px;margin-top:-17px;background:var(--amber);
  box-shadow:0 0 14px 2px rgba(240,169,75,.55)}
/* acts II and III run on the green timeline */
#epi .numrail .slot.on b,#signal .numrail .slot.on b{color:#8FE3C0}
#epi .numrail .slot:hover b,#signal .numrail .slot:hover b{color:rgba(143,227,192,.75)}
#epi .numrail .slot.on:hover b,#signal .numrail .slot.on:hover b{color:#8FE3C0}
#epi .numrail .slot:focus-visible b,#signal .numrail .slot:focus-visible b{color:#8FE3C0}
#epi .numrail .slot:focus-visible::before,#signal .numrail .slot:focus-visible::before{background:#8FE3C0}
#epi .numrail .slot.on::before,#signal .numrail .slot.on::before{background:#8FE3C0;
  box-shadow:0 0 14px 2px rgba(143,227,192,.5)}

/* ---- instrument read-out ---- */
.scly-hud{
  --hud-top:58vh; --hud-right:30px; --hud-scale:1.18; --hud-width:168px;
  position:absolute;right:var(--hud-right);top:var(--hud-top);z-index:5;pointer-events:none;
  font-family:"Spline Sans Mono",monospace;text-align:right;
  min-width:var(--hud-width);padding:16px 18px 17px;border-radius:3px;
  text-shadow:0 1px 12px rgba(6,9,16,.9),0 0 3px rgba(6,9,16,.7)}
/* the scrim overshoots the text block so it fades out rather than ending on an edge */
.scly-hud.bk-scrim::before{content:"";position:absolute;z-index:-1;
  inset:-74px -54px -64px -132px;pointer-events:none;
  background:radial-gradient(118% 108% at 74% 48%,
    rgba(7,10,19,.90) 0%,rgba(7,10,19,.72) 38%,rgba(7,10,19,.30) 68%,rgba(7,10,19,0) 100%)}
.scly-hud.bk-card{background:rgba(8,11,20,.74);border:1px solid rgba(236,238,244,.18);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.scly-hud .hud-yr{font-size:calc(1.72rem * var(--hud-scale));font-weight:500;
  color:#FFFFFF;letter-spacing:.03em;line-height:1;
  /* Act II scales this past year 5; grow leftward so the read-out stays
     pinned to the right edge of the frame */
  transform-origin:100% 50%}
.scly-hud .hud-day{font-size:calc(1.02rem * var(--hud-scale));font-weight:500;
  color:var(--amber-soft);letter-spacing:.05em;line-height:1.2;margin-top:7px;min-height:1.2em}
.scly-hud .hud-note{margin-top:14px;font-size:calc(.66rem * var(--hud-scale));letter-spacing:.12em;
  text-transform:uppercase;color:var(--invert);opacity:.92;max-width:22ch;margin-left:auto;line-height:1.65}

/* ---- progress rail + scroll cue ---- */
.scly-rail{position:absolute;left:14px;top:22vh;bottom:22vh;width:2px;z-index:5;
  background:rgba(236,238,244,.13);border-radius:2px;overflow:hidden}
.scly-rail span{display:block;width:100%;height:100%;background:linear-gradient(180deg,var(--amber),var(--amber-deep));
  transform-origin:top center;transform:scaleY(0)}
.scly-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;
  font-family:"Spline Sans Mono",monospace;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--invert-dim);display:flex;align-items:center;gap:10px;animation:cuefade 1s var(--ease) 6s forwards}
.scly-cue::after{content:"";width:1px;height:26px;background:linear-gradient(180deg,var(--amber),transparent);
  animation:cuedrop 2.1s var(--ease) infinite}
@keyframes cuedrop{0%{transform:translateY(-8px);opacity:0}40%{opacity:1}100%{transform:translateY(10px);opacity:0}}
@keyframes cuefade{to{opacity:0;visibility:hidden}}

/* ---- the two acts, tinted apart ---- */
#epi .scly-scrim{background:linear-gradient(100deg,rgba(10,13,23,.94) 0%,rgba(12,16,30,.74) 26%,rgba(10,13,23,.12) 48%,transparent 62%)}
#epi .scly-tag{color:#8FE3C0}
#epi .scly-chapter .num{color:#8FE3C0}
#epi .scly-rail span{background:linear-gradient(180deg,#8FE3C0,#3F9B7A)}
#signal .scly-scrim{background:linear-gradient(100deg,rgba(10,13,23,.96) 0%,rgba(11,15,27,.86) 28%,rgba(10,13,23,.46) 44%,rgba(10,13,23,.10) 56%,transparent 66%)}
#signal .scly-tag{color:#8FE3C0}
#signal .scly-chapter .num{color:#8FE3C0}
#signal .scly-rail span{background:linear-gradient(180deg,#8FE3C0,#3F9B7A)}
#signal .scly-chapter sup a{color:var(--amber);border-bottom:1px solid rgba(240,169,75,.4)}

/* ===========================================================
   RISK COMPARISON
   =========================================================== */
.risk{background:var(--paper);position:relative;overflow:hidden}
.risk::before{content:"";position:absolute;top:-180px;right:-140px;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(168,66,60,.10),transparent 66%);filter:blur(18px);pointer-events:none}
.risk .wrap{position:relative;z-index:2}

.risk-legend{display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;margin:0 0 12px;
  font-family:"Spline Sans Mono",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.risk-legend span{display:flex;align-items:center;gap:9px}
.risk-legend i{width:26px;height:9px;border-radius:2px;display:block}
.risk-legend .l-them i{background:var(--risk)}
.risk-legend .l-us i{background:var(--amber);box-shadow:0 0 0 1px rgba(201,116,43,.5)}

.risk-table{margin-top:34px;border-top:1px solid var(--line)}
.riskrow{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:6px 34px;
  padding:26px 0;border-bottom:1px solid var(--line);align-items:center;
  opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.riskrow.done{opacity:1;transform:none}
.rr-name{font-family:"Fraunces",serif;font-size:1.12rem;color:var(--ink);line-height:1.3;letter-spacing:-.01em}
.rr-name sup{font-family:"Spline Sans Mono",monospace;font-size:.58em;color:var(--amber-deep);
  margin-left:3px;vertical-align:super;font-weight:500}
.rr-name sup a{border-bottom:1px dotted rgba(201,116,43,.6)}
.rr-name sup a:hover{color:var(--risk)}
.rr-sub{display:block;margin-top:6px;font-family:"Spline Sans Mono",monospace;font-size:.68rem;
  line-height:1.5;letter-spacing:.01em;color:var(--text-faint);max-width:30ch}
.rr-bars{display:flex;flex-direction:column;gap:9px;min-width:0}
.rr-bar{display:grid;grid-template-columns:minmax(0,1fr) 8.8rem;align-items:center;gap:14px}
.rr-meta{display:flex;align-items:baseline;justify-content:flex-end;gap:8px;min-width:0}
.rr-tag{font-family:"Spline Sans Mono",monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);white-space:nowrap}
.rr-track{position:relative;height:22px;border-radius:3px;background:rgba(10,13,23,.05);overflow:hidden}
.rr-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px}
.rr-them .rr-fill{background:linear-gradient(90deg,var(--risk-deep),var(--risk))}
.rr-us .rr-fill{background:linear-gradient(90deg,var(--amber-deep),var(--amber));
  box-shadow:0 0 12px 1px rgba(240,169,75,.55)}
.rr-val{font-family:"Spline Sans Mono",monospace;font-size:1rem;font-weight:500;letter-spacing:.02em;
  text-align:right;font-variant-numeric:tabular-nums}
.rr-them .rr-val{color:var(--risk)}
.rr-us .rr-val{color:var(--amber-deep)}
/* title left, detail right, hairline between — same split as the mission head,
   and it reuses .mission-rule so the divider behaves identically on mobile */
.risk-foot{margin-top:clamp(38px,4.5vw,58px);padding-top:clamp(30px,3.5vw,44px);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
  gap:clamp(24px,4vw,62px);align-items:stretch}
.risk-foot h3{font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.06;
  letter-spacing:-.018em;margin:0;max-width:14ch}
.risk-foot .rf-body{padding-top:6px}
.risk-foot p{color:var(--text-dim);font-size:1.06rem;line-height:1.6;margin:0 0 10px}
.risk-foot p:last-child{margin-bottom:0}
.risk-foot .rf-close{margin-top:22px;font-family:"Fraunces",serif;font-style:italic;
  font-size:1.3rem;line-height:1.35;color:var(--ink)}
@media(max-width:900px){
  .risk-foot{grid-template-columns:1fr;gap:26px}
  .risk-foot h3{max-width:none}
}

/* references collapse away by default — the summary is the toggle */
.refs{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.refs>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:12px;
  font-family:"Spline Sans Mono",monospace;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-dim);font-weight:500;padding:9px 15px;border:1px solid var(--line);border-radius:3px;
  background:var(--paper-2);transition:border-color .2s var(--ease),color .2s var(--ease)}
.refs>summary::-webkit-details-marker{display:none}
.refs>summary::after{content:"+";font-size:.95rem;line-height:0;color:var(--amber-deep);
  transition:transform .2s var(--ease)}
.refs[open]>summary::after{content:"–"}
.refs>summary:hover{border-color:var(--amber-deep);color:var(--text)}
.refs>summary:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}
.refs .refs-hint{color:var(--text-faint);letter-spacing:.14em}
.refs ol{list-style:none;counter-reset:r;display:flex;flex-direction:column;gap:10px;max-width:78ch;margin-top:22px}
.refs li{counter-increment:r;position:relative;padding-left:30px;font-size:.86rem;line-height:1.6;color:var(--text-dim)}
.refs li::before{content:counter(r);position:absolute;left:0;top:1px;
  font-family:"Spline Sans Mono",monospace;font-size:.7rem;color:var(--amber-deep)}
.refs li a{border-bottom:1px solid rgba(201,116,43,.35);color:var(--text)}
.refs li a:hover{border-bottom-color:var(--amber-deep);color:var(--amber-deep)}
.refs li.todo{color:var(--amber-deep);border-left:2px solid rgba(201,116,43,.45);padding-left:14px;margin-left:16px}
.refs li.todo::before{content:"7"}
.refs .disclaim{margin-top:20px;font-size:.8rem;color:var(--text-faint);max-width:74ch;line-height:1.65;font-style:italic}

/* ---------- scrollytelling: responsive ---------- */
@media(max-width:1000px){
  .scly-copy{width:min(33rem,58%)}
  .scly-hud{--hud-right:18px;--hud-scale:1;--hud-width:184px;padding:13px 14px 14px}
}
@media(max-width:760px){
  .scly-track{height:520vh}
  .scly.short .scly-track{height:280vh}
  .scly-stage{min-height:620px}
  .scly-ui{align-items:flex-end;padding-bottom:0}
  .scly-copy{width:100%;gap:22px}
  .scly-chapters{min-height:15.5rem}
  .numrail{gap:11px;padding-top:.05em}
  .numrail .slot{height:1.7rem}
  .numrail .slot b{font-size:1.7rem}
  .numrail .slot::before{left:-10px;height:9px;margin-top:-4.5px}
  .numrail .slot.on::before{height:22px;margin-top:-11px}
  .scly-scrim{background:linear-gradient(0deg,rgba(10,13,23,.97) 0%,rgba(10,13,23,.93) 22%,rgba(10,13,23,.34) 38%,transparent 52%)}
  #epi .scly-scrim,#signal .scly-scrim{background:linear-gradient(0deg,rgba(10,13,23,.97) 0%,rgba(10,13,23,.93) 22%,rgba(10,13,23,.34) 38%,transparent 52%)}
  #epi .scly-track{height:560vh}
  #signal .scly-track{height:420vh}
  .scly-tag{margin-bottom:16px}
  .scly-chapter{top:0}
  .scly-chapter h2{font-size:clamp(1.6rem,6.4vw,2.1rem);max-width:18ch}
  .scly-chapter p{font-size:.97rem;max-width:46ch}
  .scly-hud{--hud-top:40vh;--hud-right:12px;--hud-scale:.82;--hud-width:150px;padding:11px 12px 12px}
  .scly-hud .hud-note{display:none}
  .scly-rail{left:8px;top:16vh;bottom:34vh}
  .scly-cue{display:none}
  .riskrow{grid-template-columns:1fr;gap:14px}
  .rr-bar{grid-template-columns:minmax(0,1fr) 7.4rem;gap:10px}
  .rr-name{font-size:1.04rem}
  .rr-sub{max-width:none;font-size:.64rem}
  .rr-tag{font-size:.55rem;letter-spacing:.1em}
}
@media(prefers-reduced-motion:reduce){
  .scly-track{height:auto}
  .scly-stage{position:relative;height:86vh}
  .scly-chapter{position:relative;opacity:1;transform:none;filter:none}
}

/* ===========================================================
   FINISHING TOUCHES
   Accessibility, touch targets and small-screen safety.
   Added last so these rules win over anything above them.
   =========================================================== */

/* ---- Skip link ----
   Invisible until a keyboard user tabs to it, then it appears
   top-left and jumps past the menu straight to the content. */
.skip-link{
  position:fixed;top:0;left:0;z-index:300;
  transform:translateY(-120%);
  background:var(--amber);color:var(--ink);
  font-weight:600;font-size:.9rem;letter-spacing:.01em;
  padding:13px 22px;border-radius:0 0 12px 0;
  transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* ---- Visible keyboard focus everywhere ----
   Mouse users never see this; keyboard users always can. */
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
.dark :focus-visible,.hero :focus-visible,.nav :focus-visible,footer :focus-visible{
  outline-color:var(--amber-soft);
}
/* Landing on #main from the skip link should not hide content under the bar. */
#main{scroll-margin-top:90px}

/* ---- Touch targets ----
   Apple and Google both ask for ~44px. The burger's bars stay 30x22,
   but its tappable area is padded out to a comfortable size. */
.nav-toggle{
  width:44px;height:44px;padding:11px 7px;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle span{width:calc(100% - 14px);left:7px}
.nav-toggle span:nth-child(1){top:11px}
.nav-toggle span:nth-child(2){top:21px}
.nav-toggle span:nth-child(3){top:31px}
.nav.open .nav-toggle span:nth-child(1){top:21px;transform:rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){top:21px;transform:rotate(-45deg)}

@media(max-width:900px){
  /* carousel arrows and dots become finger-sized */
  .cf-btn{min-width:44px;min-height:44px}
  .cf-dot{min-width:22px;min-height:22px}
  /* footer links get room to breathe so they are not a wall of tiny text */
  .foot-links{gap:14px 22px}
  .foot-links a{display:inline-block;padding:6px 0}
  /* accordion headers are already large; make sure the hit area is too */
  .acc-head{min-height:56px}
}

/* ---- Mobile viewport height ----
   100vh on a phone includes the browser's address bar, so a full-height
   hero gets clipped. svh is the *small* viewport height — the honest one.
   Browsers that don't know svh keep the 100vh line above. */
@supports (height: 100svh){
  .hero{min-height:100svh}
  .scly-stage{height:100svh}
}

/* ---- Small-screen safety ----
   Long unbroken strings (URLs, emails, DOIs) must not force the page wide. */
body{overflow-wrap:break-word}
.mail,.refs li a,.post-body a{word-break:break-word}
/* Nothing should ever be able to push the layout sideways. */
img,svg,video,canvas,table{max-width:100%}

/* Stop the page scrolling behind an open mobile menu. */
body.nav-open{overflow:hidden}

/* ---- Homepage headline on small screens ----
   "Restoring <rolling word>" is held on one line by .nowrap, which looks
   right on a wide screen but is too long for a phone. Because the page
   hides horizontal overflow, an unwrappable line would be cut off rather
   than scrollable — so below 600px the line is allowed to break. */
@media(max-width:600px){
  .hero h1 .nowrap{white-space:normal}
  .hero h1{font-size:clamp(2rem,8.4vw,2.9rem);max-width:none}
}

@media(max-width:420px){
  /* the very narrowest phones: trim the outer gutter a little */
  .wrap{padding-inline:20px}
  .nav{padding-inline:20px}
}

/* ---- Print ----
   Someone will print the technology page for a meeting one day. */
@media print{
  .nav,.nav-toggle,.skip-link,footer,.bci-showcase,.eclipse-stage,
  .cf-nav,.scly-hud,.scly-rail,.scly-cue{display:none!important}
  *{background:#fff!important;color:#000!important;box-shadow:none!important}
  a{text-decoration:underline}
  .section{padding:18px 0!important}
  .reveal{opacity:1!important;transform:none!important}
}