/* ==========================================================================
   Lever Dynamis v2 — scroll-discovery homepage
   Mechanic studied from sedna.com: one photograph held sticky for ~4 screens
   while headline/panel pairs scroll up over it, threaded by hairlines.
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--g-04); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{ max-width:100%; display:block }
a{ color:inherit }

.mono{
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; line-height:1;
}

/* ── Badge: black pill, mono label ── */
.badge{
  display:inline-flex; align-items:center; height:28px;
  background:var(--ink); color:#fff; border-radius:60px; padding:0 12px;
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
.badge--light{ background:rgba(255,255,255,.14); color:#fff;
  border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(8px) }

/* ══════════════════════════════════════════════════════════
   NAV — glass bar, glass mega-menu
   ══════════════════════════════════════════════════════════ */
.nav{
  position:fixed; top:42px; left:calc(var(--pad) + 22px); right:calc(var(--pad) + 22px); z-index:100;
  height:var(--nav-h); display:grid;
  grid-template-columns:auto 1fr auto;   /* brand left, menu grouped right with the button */
  align-items:center; gap:24px; padding:0 12px 0 22px;
  border-radius:14px;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(14px) saturate(170%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 10px 40px -16px rgba(1,16,31,.35);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.nav.is-solid{
  background:rgba(250,250,251,.92); border-color:var(--line-soft);
  box-shadow:0 10px 34px -20px rgba(10,12,18,.30);
}
.nav-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; justify-self:start }
.nav-brand img{ height:24px; width:auto }
.nav-brand b{
  font-family:var(--f-display); font-weight:800; font-size:16px;
  letter-spacing:-.02em; color:var(--ink); white-space:nowrap;
}
.nav-brand b i{ font-style:normal; color:var(--orange) }
/* homepage: white mark + DYNAMIS while the bar is glass over the photograph, ink once solid */
.nav--photo:not(.is-solid) .nav-brand img{ filter:brightness(0) invert(1) }
.nav--photo:not(.is-solid) .nav-brand b{ color:#fff }
.nav-brand img, .nav-brand b{ transition:filter .35s ease, color .35s ease }

.nav-menu{ display:flex; align-items:center; gap:2px; justify-self:end }
.nav-cta{ justify-self:end; display:flex; align-items:center; gap:8px }
.nav-item{ position:relative }
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:var(--r-btn);
  font-family:var(--f-display); font-weight:600; font-size:15px;
  color:var(--ink); text-decoration:none; white-space:nowrap;
  background:none; border:0; cursor:pointer;
}
.nav-link:hover, .nav-link.is-active{ color:var(--blue) }
.nav-link svg{ transition:transform .25s var(--ease) }
.nav-item[data-open="true"] .nav-link svg{ transform:rotate(180deg) }
.nav-item[data-open="true"] .nav-link{ color:var(--blue) }

/* Mega panel — hangs off the floating bar, centred under its trigger.
   Ours is a two-column list with a live status rail, not a four-cell strip. */
.nav-panel{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  display:none; width:520px; padding:10px;
  border:1px solid rgba(255,255,255,.5); border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.80));
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 26px 64px -22px rgba(1,16,31,.42);
}
.nav-item[data-open="true"] .nav-panel{ display:block }
.nav-panel a{
  display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:start;
  padding:14px 14px; border-radius:8px; text-decoration:none;
  transition:background .18s ease;
}
.nav-panel a:hover{ background:var(--blue-wash) }
.nav-panel a .n{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.08em;
  color:var(--blue); padding-top:3px;
}
.nav-panel a strong{
  display:block; font-family:var(--f-display); font-weight:800;
  font-size:15px; color:var(--ink); margin-bottom:2px;
}
.nav-panel a span{ font-size:13px; color:var(--ink-muted); line-height:1.45 }
.nav-panel .rail{
  display:flex; align-items:center; gap:8px; margin-top:6px;
  padding:11px 14px 4px; border-top:1px solid var(--line-soft);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-muted);
}
.nav-panel .rail b{ color:var(--orange); font-weight:500 }
.nav-panel .rail .live{
  width:6px; height:6px; border-radius:50%; background:var(--orange);
  box-shadow:0 0 0 3px rgba(224,88,40,.22);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 18px; border-radius:var(--r-btn);
  font-family:var(--f-display); font-weight:700; font-size:14px;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  border:2px solid transparent; transition:background .2s, color .2s, border-color .2s;
}
.btn-blue{ background:var(--blue); color:#fff }
.btn-blue:hover{ background:var(--blue-deep) }
.btn-white{ background:#fff; color:var(--ink-deep) }
.btn-white:hover{ background:var(--blue-wash) }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.85) }
.btn-ghost:hover{ background:rgba(255,255,255,.14) }
.btn-dark{ background:var(--ink); color:#fff }
.btn-dark:hover{ background:var(--blue) }

.nav-burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; color:var(--ink) }
.nav-menu-cta{ display:none }

/* ══════════════════════════════════════════════════════════
   HERO — 406vh tall. Only the photograph is sticky.
   ══════════════════════════════════════════════════════════ */
#hero{ position:relative; height:420vh; background:var(--g-04) }

.hero-bg{ position:sticky; top:0; height:100vh; padding:var(--pad); z-index:0 }
.hero-bg-card{ position:relative; height:100%; border-radius:var(--r-card); overflow:hidden;
  background:var(--sea-deep) }
.hero-bg-img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 45% }
/* sea fades to near-black navy so white type always reads */
.hero-veil{ position:absolute; bottom:0; left:0; right:0; height:62%;
  background:linear-gradient(to bottom, rgba(1,16,31,0), rgba(1,16,31,.92) 78%, var(--sea-deep));
  pointer-events:none }
.hero-scrollcue{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  transition:opacity .4s ease;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,.7); pointer-events:none }
.hero-scrollcue .mouse{ width:22px; height:34px; border:1.5px solid currentColor;
  border-radius:12px; position:relative }
.hero-scrollcue .mouse::after{ content:''; position:absolute; left:50%; top:6px;
  width:2px; height:6px; background:currentColor; border-radius:2px;
  transform:translateX(-50%); animation:wheel 1.8s var(--ease) infinite }
@keyframes wheel{ 0%{opacity:0;transform:translate(-50%,0)}
  30%{opacity:1} 100%{opacity:0;transform:translate(-50%,10px)} }

/* Opening headline — scrolls away normally */
.hero-open{
  position:absolute; left:calc(var(--pad) + 104px); top:38vh;
  width:min(600px,44vw); display:flex; flex-direction:column; gap:30px; z-index:1;
}
.hero-h1{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(38px,4.4vw,76px); line-height:.94; letter-spacing:-.025em;
  text-transform:uppercase; color:#fff; margin:0; text-wrap:balance;
}
.hero-h1 em{ font-style:normal; color:var(--orange) }
.hero-sub{ font-size:clamp(15px,1.15vw,21px); line-height:1.45;
  color:rgba(255,255,255,.86); margin:0; font-weight:500 }
.hero-sub b{ color:#fff; font-weight:800 }
.hero-sub b i{ font-style:normal; color:var(--blue-soft) }
.hero-btns{ display:flex; gap:14px; flex-wrap:wrap }

/* The overlay that scrolls over the held photograph */
.hero-over{
  position:absolute; left:var(--pad); right:var(--pad);
  top:112vh; height:262vh; z-index:2;
}
.hero-nodes{ position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible }
.hero-nodes path{ fill:none; stroke:rgba(255,255,255,.42); stroke-width:.8 }

/* Left-hand chapter headings */
.hero-chapter{
  position:absolute; left:5%; width:min(560px,42vw);
  color:#fff; z-index:1;
}
.hero-chapter h2{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(26px,2.8vw,56px); line-height:1.02; letter-spacing:-.02em;
  text-transform:uppercase; margin:0 0 18px;
}
.hero-chapter p{ font-size:clamp(14px,1vw,17px); line-height:1.6;
  color:rgba(255,255,255,.78); margin:0 0 20px; max-width:420px }
.hero-chapter .badge{ margin-bottom:22px }
.ch-1{ top:13% } .ch-2{ top:43% } .ch-3{ top:71% }

/* Glass instrument panels drifting up the right side */
.hero-panel{
  /* Sedna's panels are images, so height = width x ratio and the whole
     composition scales. Ours are HTML, so we make the type scale with the
     panel instead (cqw = 1% of the panel's own width). Same result:
     panel height stays proportional, so the connectors stay attached. */
  container-type:inline-size;
  position:absolute; border-radius:var(--r-panel);
  background:rgba(1,16,31,.30);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  padding:clamp(11px,4.4cqw,18px); color:#fff; z-index:1;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.55);
}
/* diamond terminals top and bottom — where the hairlines dock */
.hero-panel::before,.hero-panel::after{
  content:''; position:absolute; left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:7px; height:7px; background:rgba(255,255,255,.85);
}
.hero-panel::before{ top:-4px } .hero-panel::after{ bottom:-4px }

.p-1{ left:56%; top:1%;  width:29% }
.p-2{ left:78%; top:19%; width:19% }
.p-3{ left:58%; top:39%; width:26% }
.p-4{ left:74%; top:57%; width:22% }
.p-5{ left:55%; top:74%; width:24% }
.p-6{ left:76%; top:86%; width:19% }

.pnl-head{ display:flex; align-items:center; justify-content:space-between;
  gap:clamp(6px,2.4cqw,10px); padding-bottom:clamp(6px,2.4cqw,10px);
  margin-bottom:clamp(7px,2.9cqw,12px);
  border-bottom:1px solid rgba(255,255,255,.18) }
.pnl-head .mono{ color:rgba(255,255,255,.72); font-size:clamp(7.5px,2.7cqw,11px) }
.pnl-dot{ width:6px; height:6px; border-radius:50%; background:var(--blue-soft);
  box-shadow:0 0 0 3px rgba(143,160,255,.22) }
.pnl-row{ display:flex; align-items:baseline; justify-content:space-between;
  gap:clamp(7px,2.9cqw,12px); padding:clamp(3px,1.2cqw,5px) 0 }
.pnl-row .k{ font-family:var(--f-mono); font-size:clamp(7px,2.6cqw,10.5px); letter-spacing:.05em;
  text-transform:uppercase; color:rgba(255,255,255,.6) }
.pnl-row .v{ font-family:var(--f-mono); font-size:clamp(8px,3.2cqw,13px); font-weight:600;
  color:#fff; font-variant-numeric:tabular-nums }
.pnl-row .v.hi{ color:var(--blue-soft) }
.pnl-cap{ font-size:clamp(8px,3cqw,12px); line-height:1.4;
  color:rgba(255,255,255,.72); margin:clamp(6px,2.4cqw,10px) 0 0 }
.pnl-fig{ border-radius:8px; overflow:hidden; margin:0 0 clamp(6px,2.4cqw,10px) }
.pnl-fig img{ width:100%; height:auto; aspect-ratio:16/11; object-fit:cover }
/* mini bar chart */
.spark{ display:flex; align-items:flex-end; gap:3px;
  height:clamp(26px,11cqw,44px); margin-top:clamp(6px,2.4cqw,10px) }
.spark i{ flex:1; background:rgba(255,255,255,.3); border-radius:1px }
.spark i.on{ background:var(--blue-soft) }

/* ══════════════════════════════════════════════════════════
   Shared section furniture
   ══════════════════════════════════════════════════════════ */
.wrap{ max-width:1360px; margin:0 auto; padding:0 40px }
.sec{ padding:120px 0 }
.sec-h2{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(30px,2.9vw,56px); line-height:1.04; letter-spacing:-.02em;
  text-transform:uppercase; color:var(--ink); margin:0 0 28px; max-width:16ch;
  text-wrap:balance;
}
.sec-body{ font-size:16.5px; line-height:1.75; color:var(--ink-muted); max-width:56ch; margin:0 }
.sec-head{ margin-bottom:80px }
.sec-head .badge{ margin-bottom:36px }

/* White inset card, like Sedna's "Why we exist" */
.card-light{ background:#fff; border-radius:var(--r-card); margin:0 var(--pad);
  padding:110px 0 }
.card-dark{ background:var(--dark-card); border-radius:var(--r-card);
  margin:0 var(--pad); padding:110px 0; color:#fff }
.card-dark .sec-h2{ color:#fff }
.card-dark .sec-body{ color:rgba(255,255,255,.72) }

/* ══════════════════════════════════════════════════════════
   STATS — hairline grid, tall cells, count-up, clip-path reveals
   ══════════════════════════════════════════════════════════ */
.stats-wrap{ margin:0 var(--pad); position:relative }
.stats{ display:flex; border:1px solid var(--line) }
.stat{
  flex:1; border-right:1px solid var(--line); padding:56px 44px 44px;
  min-height:520px; display:flex; flex-direction:column; background:var(--g-04);
}
.stat:last-child{ border-right:none }
.stat-num{ display:flex; align-items:flex-start; line-height:1; margin-bottom:22px }
.stat-num b{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(56px,6.4vw,112px); line-height:1; letter-spacing:-.04em;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.stat-num sup{
  font-family:var(--f-display); font-weight:800; font-size:clamp(22px,2vw,38px);
  line-height:1; color:var(--blue); margin-top:.1em; margin-left:2px;
}
.stat-label{ font-family:var(--f-display); font-weight:800; font-size:16px;
  line-height:1.5; text-transform:uppercase; color:var(--ink); max-width:15em }
.stat-note{ font-size:13.5px; line-height:1.6; color:var(--ink-muted);
  margin:12px 0 0; max-width:26em }

/* corner dots — technical-drawing register marks */
.stats-wrap .dot{ position:absolute; width:5px; height:5px; background:var(--ink);
  border-radius:50%; z-index:1 }
.dot-tl{ left:-2px; top:-2px } .dot-tr{ right:-2px; top:-2px }
.dot-bl{ left:-2px; bottom:-2px } .dot-br{ right:-2px; bottom:-2px }

/* reveal states — wipe in on .in-view */
.sv-up{ clip-path:inset(100% 0 0 0) }
.sv-left{ clip-path:inset(0 100% 0 0) }
.sv-right{ clip-path:inset(0 0 0 100%) }
.sv-fade{ opacity:0 }
.stats.in-view .sv-fade{ animation:svFade .35s ease .05s forwards }
.stats.in-view .sv-up{ animation:svUp .8s var(--ease) .2s forwards }
.stats.in-view .sv-up.d2{ animation-delay:.5s }
.stats.in-view .sv-left{ animation:svLeft .55s var(--ease) .75s forwards }
.stats.in-view .sv-right{ animation:svRight .6s var(--ease) .55s forwards }
@keyframes svUp{ from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} }
@keyframes svLeft{ from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)} }
@keyframes svRight{ from{clip-path:inset(0 0 0 100%)} to{clip-path:inset(0 0 0 0)} }
@keyframes svFade{ from{opacity:0} to{opacity:1} }

/* ══════════════════════════════════════════════════════════
   Accordion — Sedna's full-bleed hover row
   ══════════════════════════════════════════════════════════ */
.acc{ border-top:1px solid var(--line-soft) }
.acc-item{ border-bottom:1px solid var(--line-soft) }
.acc-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:30px 28px; background:none; border:0; cursor:pointer;
  font-family:var(--f-display); font-weight:600; font-size:clamp(15px,1.35vw,21px);
  letter-spacing:.02em; text-transform:uppercase; color:var(--ink-muted);
  text-align:left; transition:background .2s ease, color .2s ease;
}
.acc-btn:hover{ background:var(--g-02); color:var(--ink) }
.acc-item[data-open="true"] .acc-btn{ background:var(--g-02); color:var(--ink) }
.acc-sign{ position:relative; width:16px; height:16px; flex-shrink:0 }
.acc-sign::before,.acc-sign::after{ content:''; position:absolute; background:currentColor;
  left:50%; top:50%; transition:transform .3s var(--ease) }
.acc-sign::before{ width:16px; height:1.5px; transform:translate(-50%,-50%) }
.acc-sign::after{ width:1.5px; height:16px; transform:translate(-50%,-50%) }
.acc-item[data-open="true"] .acc-sign::after{ transform:translate(-50%,-50%) scaleY(0) }
.acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease) }
.acc-item[data-open="true"] .acc-body{ grid-template-rows:1fr }
.acc-body > div{ overflow:hidden }
.acc-inner{ padding:0 28px 34px; display:grid; gap:32px;
  grid-template-columns:minmax(0,1.6fr) minmax(0,.75fr); align-items:start }
.acc-inner p{ margin:0 0 14px; color:var(--ink-muted); line-height:1.7; font-size:15.5px }
.acc-inner img{ border-radius:10px; width:100%; height:190px;
  object-fit:cover; object-position:center }
.acc-facts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px }
.chip{ display:inline-flex; align-items:center; height:26px; padding:0 10px;
  border:1px solid var(--line); border-radius:60px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-muted) }
.chip b{ color:var(--blue); font-weight:600 }

/* ══════════════════════════════════════════════════════════
   Pillars, proof, footer
   ══════════════════════════════════════════════════════════ */
.pillars{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line) }
.pillar{ border-right:1px solid var(--line); padding:44px 38px 40px;
  display:flex; flex-direction:column; text-decoration:none;
  transition:background .25s ease }
.pillar:last-child{ border-right:none }
.pillar:hover{ background:#fff }
.pillar .idx{ font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  color:var(--blue); margin-bottom:38px }
.pillar h3{ font-family:var(--f-display); font-weight:800; font-size:26px;
  letter-spacing:-.015em; text-transform:uppercase; margin:0 0 12px; color:var(--ink) }
.pillar p{ margin:0 0 22px; font-size:15px; line-height:1.65; color:var(--ink-muted) }
.pillar .go{ margin-top:auto; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
  display:inline-flex; align-items:center; gap:8px }
.pillar:hover .go{ color:var(--blue) }
.pillar:hover .go svg{ transform:translateX(4px) }
.pillar .go svg{ transition:transform .25s var(--ease) }

.proof{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line) }
.proof div{ background:var(--g-04); padding:28px 26px }
.proof .mono{ color:var(--blue); margin-bottom:10px; display:block }
.proof p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink) }

.foot{ background:var(--ink); color:rgba(255,255,255,.66); padding:80px 0 40px;
  margin-top:var(--pad) }
.foot a{ color:rgba(255,255,255,.66); text-decoration:none }
.foot a:hover{ color:#fff }
.foot-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px;
  padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.14) }
.foot h4{ font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:#fff; margin:0 0 18px; font-weight:500 }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:14.5px }
.foot-bot{ padding-top:26px; display:flex; justify-content:space-between;
  gap:20px; flex-wrap:wrap; font-size:13px }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
  .sv-up,.sv-left,.sv-right{ clip-path:none } .sv-fade{ opacity:1 }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   Rewritten for the floating nav: the bar is an inset card, the
   burger lives inside .nav-cta, and the menu hangs off the bar
   rather than off the top of the window.
   ══════════════════════════════════════════════════════════ */

/* ── Tablet ───────────────────────────────────────────────── */
@media (max-width:1100px){
  .nav{ left:var(--pad); right:var(--pad); padding:0 10px 0 16px }
  .stats{ flex-direction:column }
  .stat{ border-right:none; border-bottom:1px solid var(--line);
    min-height:0; padding:44px 30px 34px }
  .stat:last-child{ border-bottom:none }
  .pillars{ grid-template-columns:1fr }
  .pillar{ border-right:none; border-bottom:1px solid var(--line) }
  .pillar:last-child{ border-bottom:none }
  .foot-grid{ grid-template-columns:1fr 1fr }
  .acc-inner{ grid-template-columns:1fr }
  .acc-inner img{ height:220px }

  /* No panel repositioning here — like Sedna, the hero composition is
     purely proportional between phone and desktop. Panels scale via their
     own container units and the spine is redrawn from measured geometry,
     so nothing needs nudging per width. Only the chapter column narrows
     so it stays clear of the panels. */
  .hero-chapter{ left:5%; width:46% }
  .hero-chapter h2{ font-size:clamp(22px,3.4vw,40px) }
  .hero-chapter p{ font-size:clamp(13px,1.5vw,16px) }
}

@media (max-width:900px){
  .gauge{ display:none }          /* the rule needs a margin we no longer have */
  .hero-chapter{ left:6%; width:52% }
}

/* ── Phone ────────────────────────────────────────────────── */
@media (max-width:768px){
  :root{ --pad:12px; --nav-h:58px }

  /* bar: brand on the left, burger hard right. Nothing between. */
  .nav{
    top:12px; left:12px; right:12px;
    grid-template-columns:1fr auto; gap:12px;
    padding:0 8px 0 14px; border-radius:12px;
    /* backdrop-filter makes .nav a containing block for fixed children,
       which pinned the menu sheet to the narrow middle grid column.
       Dropping it here lets the sheet anchor to the viewport instead. */
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:rgba(252,252,253,.90);
    border-color:rgba(255,255,255,.7);
  }
  .nav.is-solid{ background:rgba(252,252,253,.96) }
  .nav--photo:not(.is-solid) .nav-brand img{ filter:none }
  .nav--photo:not(.is-solid) .nav-brand b{ color:var(--ink) }
  .nav-brand img{ height:21px }
  .nav-brand b{ font-size:14px }
  .nav-burger{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:9px; justify-self:end;
  }
  .nav-burger:hover{ background:rgba(10,12,18,.06) }
  .nav-cta{ justify-self:end }
  .nav-cta .btn{ display:none }          /* the CTA moves into the menu */

  /* menu: a sheet hanging off the bar, not pinned to the window top.
     .nav is a grid container, so a fixed child's containing block is its
     GRID AREA — the narrow auto column — which is why the sheet came out
     skinny and floating centre-right. Spanning every column fixes it. */
  .nav-menu{
    /* justify-self:center from the desktop rule was still shrink-to-fitting
       this box and centring it, so left/right were being ignored. */
    justify-self:stretch;
    position:fixed; top:calc(12px + var(--nav-h) + 8px);
    left:12px; right:12px; width:auto; display:none;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:10px; max-height:calc(100vh - var(--nav-h) - 40px);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:rgba(250,250,251,.97);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border:1px solid var(--line-soft); border-radius:12px;
    box-shadow:0 26px 60px -24px rgba(1,16,31,.45);
  }
  .nav[data-open="true"] .nav-menu{ display:flex }
  .nav-menu .nav-link{
    width:100%; justify-content:space-between;
    padding:13px 12px; font-size:16px; border-radius:9px;
  }
  .nav-menu .nav-link:hover{ background:var(--g-04) }
  .nav-item{ width:100% }

  /* submenus render inline, always open, no glass-on-glass */
  .nav-panel{
    position:static; transform:none; display:block; width:auto;
    padding:2px 0 8px; margin:0;
    background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    border:0; box-shadow:none;
  }
  .nav-item[data-open="false"] .nav-panel{ display:none }
  .nav-panel a{ padding:11px 12px 11px 26px; gap:10px;
    grid-template-columns:20px 1fr }
  .nav-panel a strong{ font-size:14.5px }
  .nav-panel a span{ font-size:12.5px }
  .nav-panel .rail{ padding:10px 12px 2px 26px }
  /* the CTA, re-homed at the foot of the sheet */
  .nav-menu-cta{ display:flex; width:100%; margin-top:8px; height:46px }

  /* ── Hero, phone ────────────────────────────────────────────────
     Stop positioning by percentage. The overlay joins the normal flow
     and becomes a flex column, so chapter/panel order comes from the
     DOM and spacing is one gap — nothing can collide and nothing needs
     re-tuning per device height. #hero sizes itself from its content. */
  #hero{ height:auto }
  .hero-bg{
    height:100vh;
    padding:calc(12px + var(--nav-h) + 8px) 12px 12px;  /* card starts below the bar */
  }
  .hero-open{ left:7%; width:86%; top:30vh }

  .hero-over{
    position:relative; top:auto; left:auto; right:auto; height:auto;
    display:flex; flex-direction:column;
    gap:clamp(44px,9vh,90px);
    padding:clamp(40px,8vh,80px) 7% clamp(56px,12vh,120px);
  }
  .hero-chapter,.hero-panel{
    position:static; left:auto; top:auto; right:auto;
    width:auto; transform:none;
  }
  .hero-panel{ display:block }
  .p-2,.p-4,.p-6{ display:none }
  .hero-panel::before,.hero-panel::after{ display:none }
  .hero-panel .pnl-fig img{ aspect-ratio:16/10 }

  /* Centred on the phone, and it retires after the opening screen so it
     never sits behind a passing panel. Desktop keeps it the whole way down. */
  #hero.past .hero-scrollcue{ opacity:0 }
  .hero-scrollcue .mouse{ width:19px; height:29px }
  .hero-h1{ font-size:clamp(32px,9vw,46px) }
  .hero-chapter h2{ font-size:clamp(24px,7vw,34px) }
  .hero-btns{ gap:10px }
  .hero-btns .btn{ height:44px; padding:0 16px; font-size:13.5px }

  .wrap{ padding:0 20px }
  .sec{ padding:64px 0 }
  .card-light,.card-dark{ padding:56px 0 }
  .foot-grid{ grid-template-columns:1fr; gap:32px }
  .stat{ padding:38px 24px 30px }
  .acc-btn{ padding:22px 16px; font-size:15px }
  .acc-inner{ padding:0 16px 26px }
}

@media (max-width:420px){
  .nav-brand b{ font-size:12.5px }
  .hero-panel{ left:7%; width:84% }
  .hero-btns{ flex-direction:column; align-items:stretch }
  .hero-btns .btn{ width:100% }
}

/* ══════════════════════════════════════════════════════════
   OURS, NOT THEIRS
   Sedna threads its panels on right-angle elbows and runs one
   hue. Two devices replace that:
     1. a measurement rule — the page is literally an instrument
     2. a waveform spine — the connector is a wave, not an elbow
   ══════════════════════════════════════════════════════════ */

/* ── 1. The measurement rule ────────────────────────────── */
.gauge{ position:absolute; left:0; top:0; bottom:0; width:56px; z-index:1;
  pointer-events:none }
.gauge::before{                       /* the spine */
  content:''; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0), rgba(255,255,255,.42) 6%,
    rgba(255,255,255,.42) 94%, rgba(255,255,255,0));
}
.gauge-ticks{                          /* minor graduations */
  position:absolute; left:0; top:0; bottom:0; width:7px;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.34) 0 1px, transparent 1px 26px);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
}
.gauge-mark{ position:absolute; left:0; display:flex; align-items:center; gap:9px;
  transform:translateY(-50%) }
.gauge-mark i{ width:20px; height:2px; background:var(--orange); flex-shrink:0 }
.gauge-mark span{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em;
  color:var(--orange); white-space:nowrap }
.gm-1{ top:13% } .gm-2{ top:43% } .gm-3{ top:71% }

/* ── 2. Waveform spine: connectors are waves, not elbows ── */
.hero-nodes path{ fill:none; stroke:rgba(255,255,255,.40); stroke-width:.8 }
.hero-nodes .wave{ stroke:rgba(255,255,255,.28); stroke-dasharray:none }

/* ── Measured vs built: the dot says which ─────────────── */
.pnl-dot{ width:6px; height:6px; border-radius:50%; background:var(--blue-soft);
  box-shadow:0 0 0 3px rgba(127,178,255,.22) }
.pnl-dot.measured{ background:var(--orange-soft);
  box-shadow:0 0 0 3px rgba(255,155,110,.22) }
.pnl-kind{ font-family:var(--f-mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.5) }

/* ══════════════════════════════════════════════════════════
   CHARTS — real plots, hairline grid, two-colour, direct-labelled
   ══════════════════════════════════════════════════════════ */
.fig{ margin-top:auto; width:100%; padding-top:28px }
.fig svg{ width:100%; height:auto; display:block; overflow:visible }
.fig-grid line{ stroke:var(--line-soft); stroke-width:1 }
.fig-axis line{ stroke:var(--line); stroke-width:1 }
.fig-tick{ font-family:var(--f-mono); font-size:9px; letter-spacing:.06em;
  fill:var(--ink-muted); text-transform:uppercase }
.fig-lbl{ font-family:var(--f-display); font-size:11px; font-weight:700;
  letter-spacing:.01em }
.fig-lbl.blue{ fill:var(--blue) } .fig-lbl.orng{ fill:var(--orange) }
.fig-val{ font-family:var(--f-mono); font-size:11px; font-weight:600;
  fill:var(--ink); font-variant-numeric:tabular-nums }
.bar-blue{ fill:var(--blue) } .bar-orng{ fill:var(--orange) }
.bar-mute{ fill:var(--g-20) }
.ln-blue{ fill:none; stroke:var(--blue); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round }
.ln-orng{ fill:none; stroke:var(--orange); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round }
.ar-blue{ fill:var(--blue); opacity:.10 }
.dot-end{ fill:var(--blue); stroke:var(--g-04); stroke-width:2 }
.dot-end.orng{ fill:var(--orange) }

/* legend — identity never carried by colour alone */
.fig-key{ display:flex; flex-wrap:wrap; gap:14px; margin-top:14px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-muted) }
.fig-key i{ display:inline-block; width:9px; height:9px; border-radius:2px;
  margin-right:6px; vertical-align:-1px }
.fig-key .b{ background:var(--blue) } .fig-key .o{ background:var(--orange) }
.fig-key .m{ background:var(--g-20) }

.stat-num sup{ color:var(--orange) }


/* ══════════════════════════════════════════════════════════
   PROJECT SWITCHER — homepage, under "Why we exist"
   ══════════════════════════════════════════════════════════ */
.ps{ position:relative; height:min(80vh,760px); min-height:560px; margin-top:64px;
  border-radius:24px; overflow:hidden; background:var(--sea-deep); color:#fff }
.ps-bg{ position:absolute; inset:0; background:#000 center/cover no-repeat; opacity:0; transition:opacity .8s ease }
.ps-bg.on{ opacity:1 }
.ps::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(1,16,31,.78) 0%, rgba(1,16,31,.45) 38%, rgba(1,16,31,0) 68%),
    linear-gradient(180deg, rgba(1,16,31,.2) 0%, rgba(1,16,31,0) 30%, rgba(1,16,31,.1) 55%, rgba(1,16,31,.85) 100%) }
.ps-copy{ position:absolute; left:44px; bottom:150px; z-index:2; max-width:640px }
.ps-copy h3{ font-family:var(--f-display); font-size:clamp(44px,6vw,88px); font-weight:800;
  letter-spacing:-.045em; line-height:.95; margin:12px 0; text-transform:uppercase }
.ps-copy p{ margin:0 0 18px; font-size:18px; color:rgba(255,255,255,.86); max-width:48ch }
.ps-go{ font-family:var(--f-display); font-weight:700; font-size:14px; color:#fff; text-decoration:none;
  display:inline-flex; gap:8px; align-items:center }
.ps-go::after{ content:"→" }
.ps-status{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; border-radius:40px; padding:5px 10px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25) }
.ps-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--c,#999) }
.ps-tabs{ position:absolute; left:24px; right:24px; bottom:24px; z-index:3;
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
.ps-tab{ text-align:left; background:rgba(255,255,255,.1); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:14px 16px 16px; color:#fff; cursor:pointer;
  font-family:var(--f-display); position:relative; overflow:hidden }
.ps-tab small{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; opacity:.7 }
.ps-tab strong{ display:block; font-size:17px; margin-top:4px }
.ps-tab.on{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.4) }
.ps-tab .bar{ position:absolute; left:0; bottom:0; height:3px; background:var(--orange); width:0 }
.ps-tab.on .bar{ animation:psfill 6s linear forwards }
.ps.paused .ps-tab.on .bar{ animation-play-state:paused }
@keyframes psfill{ to{ width:100% } }
@media (max-width:900px){
  .ps-tabs{ grid-template-columns:1fr 1fr }
  .ps-copy{ left:24px; right:24px; bottom:186px }
}
@media (prefers-reduced-motion:reduce){ .ps-bg{ transition:none } .ps-tab.on .bar{ animation:none; width:100% } }