/* ============================================================================
   Deep Current — deepcurrentapp.com
   The real brand: ocean depth. Values taken verbatim from the DDD site's
   brand tokens so this page and the product agree with each other.
   ========================================================================== */

:root{
  color-scheme: dark;

  --primary:#156493; --primary-dark:#0f4d72; --primary-light:#1a7ab5; --grad-end:#2a9ad6;
  --accent:#a9effd;  --accent-mid:#7ad8f0;   --accent-pale:#bfeeff;
  --dark:#0d2d42;    --dark-light:#163d58;   --abyss:#071b29;
  --bg:#ffffff;      --bg-alt:#f0f5f9;       --bg-tint:#e8f4fb;
  --text:#0f1f2e;    --text-muted:#4a6272;   --border:#d0e4f0;

  --primary-rgb:21,100,147; --accent-rgb:169,239,253; --dark-rgb:13,45,66;

  --t-display: clamp(2.75rem, 7vw, 5.75rem);
  --t-h2:      clamp(2.1rem, 4.6vw, 3.5rem);
  --t-h3:      clamp(1.35rem, 2.1vw, 1.75rem);
  --t-lead:    clamp(1.12rem, 1.6vw, 1.3rem);
  --t-copy:    clamp(1.05rem, 1.2vw, 1.15rem);

  --pad-tight:  clamp(34px, 3vw, 44px);
  --pad-normal: clamp(44px, 4vw, 58px);
  --pad-loose:  clamp(56px, 5.4vw, 74px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-rev: cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --max: 1200px;
  --gut: clamp(20px, 3vw, 40px);
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin:0; background: var(--abyss); color:#eaf4fa;
  font-family: var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.wrap{ max-width: var(--max); margin:0 auto; padding:0 var(--gut); position:relative; z-index:2; }

/* ---------------------------------------------------------------- type ---- */
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.04; }
.t-display{ font-size: var(--t-display); }
.t-h2{ font-size: var(--t-h2); }
.t-h3{ font-size: var(--t-h3); font-weight:700; letter-spacing:-.012em; line-height:1.2; }
.lead{ font-size: var(--t-lead); color:#b9d3e2; max-width:56ch; }
.copy{ font-size: var(--t-copy); color:#a8c4d5; }
.grad{
  background: linear-gradient(96deg, var(--accent-pale), var(--accent-mid) 45%, var(--grad-end));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--accent); background: rgba(var(--accent-rgb), .09);
  border:1px solid rgba(var(--accent-rgb), .22); border-radius:100px; padding:7px 15px;
}
.kicker::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--accent); }

/* --------------------------------------------------------------- layout --- */
.sec{ position:relative; padding: var(--pad-loose) 0; }
.sec--tight{ padding: var(--pad-normal) 0; }
.sec--dark{ background: linear-gradient(180deg, var(--abyss), var(--dark) 55%, var(--abyss)); overflow:clip; }
.sec--light{ background: var(--bg); color: var(--text); }
.sec--light .lead{ color: var(--text-muted); }
.sec--light .copy{ color: var(--text-muted); }
.sec--light .kicker{ color: var(--primary); background: rgba(var(--primary-rgb), .07); border-color: rgba(var(--primary-rgb), .2); }
.sec--light .kicker::before{ background: var(--primary); }
.sec--tintlight{ background: var(--bg-alt); color: var(--text); }

canvas.ocean, canvas.streams{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }

/* the seam between an ocean section and a light one is a wave, not a line */
.wave-edge{ position:absolute; left:0; right:0; z-index:1; line-height:0; pointer-events:none; }
.wave-edge--bottom{ bottom:-1px; }
.wave-edge--top{ top:-1px; transform: rotate(180deg); }
.wave-edge svg{ width:100%; height: clamp(48px, 6vw, 96px); display:block; }

/* --------------------------------------------------------------- header --- */
.hdr{
  position:sticky; top:0; z-index:60;
  background: rgba(7,27,41,.72); backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(var(--accent-rgb), .10);
}
.hdr-in{ max-width:var(--max); margin:0 auto; padding:0 var(--gut); height:70px; display:flex; align-items:center; gap:28px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand img{ width:38px; height:38px; object-fit:contain; }
.brand b{ font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:-.02em; }
.brand b i{ font-style:normal; color: var(--accent); }
.nav{ display:flex; gap:24px; margin-left:auto; align-items:center; }
.nav a{ font-size:14.5px; text-decoration:none; color:#a8c4d5; padding:5px 0; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
.nav a:hover, .nav a[aria-current="page"]{ color:#fff; border-bottom-color: var(--accent); }
.nav a.btn{ border-bottom:0; }
.nav-toggle{ display:none; margin-left:auto; background:none; border:1px solid rgba(var(--accent-rgb),.3); color:#eaf4fa; padding:9px 14px; font:700 13px/1 var(--font-body); border-radius:4px; cursor:pointer; }

/* -------------------------------------------------------------- buttons --- */
.btn{
  display:inline-block; font-family:var(--font-body); font-size:15px; font-weight:700;
  padding:14px 26px; border-radius:6px; text-decoration:none; cursor:pointer;
  border:1px solid rgba(var(--accent-rgb),.45); color: var(--accent); background:transparent;
  transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s, box-shadow .25s, transform .12s;
}
.btn:hover{ background: rgba(var(--accent-rgb),.12); border-color: var(--accent); }
.btn:active{ transform: translateY(1px); }
.btn--solid{
  background: linear-gradient(120deg, var(--accent), var(--accent-mid));
  color: var(--dark); border-color: transparent;
  box-shadow: 0 10px 30px -12px rgba(var(--accent-rgb),.55);
}
.btn--solid:hover{ box-shadow: 0 16px 40px -12px rgba(var(--accent-rgb),.75); background: linear-gradient(120deg, var(--accent-pale), var(--accent)); }
.btn--lg{ padding:17px 34px; font-size:16.5px; }
.sec--light .btn, .sec--tintlight .btn{ color: var(--primary); border-color: rgba(var(--primary-rgb),.4); }
.sec--light .btn:hover, .sec--tintlight .btn:hover{ background: rgba(var(--primary-rgb),.07); }
.sec--light .btn--solid, .sec--tintlight .btn--solid{
  background: linear-gradient(120deg, var(--primary), var(--grad-end)); color:#fff;
  box-shadow: 0 12px 30px -12px rgba(var(--primary-rgb),.6);
}
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

/* --------------------------------------------------------------- reveals -- */
.split-word{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.js .split-word .w-in{ transform: translateY(112%); }
.split-word .w-in{ display:inline-block; transition: transform .8s var(--ease-rev); }
[data-split].in .w-in{ transform: translateY(0); }

.js [data-reveal]{ opacity:0; }
[data-reveal]{ opacity:1; transition: opacity .75s var(--ease-rev) var(--d,0s), transform .75s var(--ease-rev) var(--d,0s), clip-path .9s var(--ease-rev) var(--d,0s), filter .75s var(--ease-rev) var(--d,0s); }
.js [data-reveal="up"]{ transform: translateY(36px); }
.js [data-reveal="rise"]{ transform: translateY(72px); }
.js [data-reveal="scale"]{ transform: scale(.9); }
.js [data-reveal="zoom"]{ transform: scale(1.08); }
.js [data-reveal="left"]{ transform: translateX(-48px); }
.js [data-reveal="right"]{ transform: translateX(48px); }
.js [data-reveal="blur"]{ transform: translateY(18px); filter: blur(16px); }
.js [data-reveal="clip"]{ clip-path: inset(0 0 100% 0); opacity:1; }
[data-reveal].in{ opacity:1; transform:none; filter:none; clip-path: inset(0 0 0 0); }

/* ----------------------------------------------------------- tilt plate --- */
.tilt-wall{ perspective: 900px; }           /* WITHOUT this the rotate shears */
.tilt-plate{
  position:relative; transform-style: preserve-3d; will-change: transform;
  border-radius:14px; overflow:hidden;
  background: linear-gradient(160deg,#ffffff,#eef7fb);
  box-shadow:
    calc(var(--ty,0) * -1.2px) calc(var(--tx,0) * 1.4px + 14px) 38px -14px rgba(0,0,0,.55),
    0 2px 0 rgba(255,255,255,.6) inset;
}
.tilt-plate::after{      /* top-edge light, only when pitched toward it */
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  opacity: var(--edge, 0); pointer-events:none;
}
.tilt-plate .glare{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background: radial-gradient(220px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.5), transparent 62%);
}
.tilt-plate:hover .glare{ opacity:1; }

/* ------------------------------------------------------------- spotlight -- */
[data-spotlight]{ position:relative; overflow:hidden; }
[data-spotlight] .spotlight{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(var(--accent-rgb),.13), transparent 65%);
}
[data-spotlight]:hover .spotlight{ opacity:1; }

/* ------------------------------------------------------------------ hero -- */
.hero{ position:relative; background: linear-gradient(180deg,#04121c 0%, var(--abyss) 40%, var(--dark) 100%); overflow:clip; }
.hero-in{ position:relative; z-index:2; max-width:var(--max); margin:0 auto; padding: clamp(70px,9vw,120px) var(--gut) clamp(96px,11vw,150px); }
.hero-mark{ width:min(280px,58vw); aspect-ratio:1536/640; overflow:hidden; margin-bottom:26px; filter: drop-shadow(0 20px 44px rgba(0,0,0,.5)); }
.hero-mark img{ width:100%; }
.hero h1{ max-width:15ch; }
.hero .lead{ margin-top:24px; }

/* --------------------------------------------------------------- modules -- */
.mod-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:26px; }
.mod{ display:flex; flex-direction:column; gap:16px; }
.mod-tile{ width:100%; aspect-ratio:1/1; max-width:230px; padding:14px; }
.mod-tile img{ width:100%; height:100%; object-fit:contain; }
.mod.soon .mod-tile{ filter: grayscale(.75) brightness(.85); }
.mod h3{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tag{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:100px; background:rgba(var(--accent-rgb),.14); color:var(--accent); }

/* ----------------------------------------------------------------- steps -- */
.steps{ list-style:none; margin:0; padding:0; }
.steps li{ display:grid; grid-template-columns:auto 1fr; gap:0 26px; padding:0 0 44px; position:relative; }
.steps li:last-child{ padding-bottom:0; }
.steps .n{
  grid-row:1/3; width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:20px;
  background:rgba(var(--accent-rgb),.10); border:1px solid rgba(var(--accent-rgb),.3); color:var(--accent);
}
.steps li::before{ content:""; position:absolute; left:27px; top:56px; bottom:12px; width:1px; background:linear-gradient(rgba(var(--accent-rgb),.4), transparent); }
.steps li:last-child::before{ display:none; }
.steps h3{ margin-bottom:8px; }
.steps p{ margin:0; }

/* -------------------------------------------------------------- footer ---- */
.ftr{ background:#04121c; padding: var(--pad-normal) 0 34px; }
.ftr .cols{ display:grid; grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)); gap:36px; padding-bottom:34px; border-bottom:1px solid rgba(var(--accent-rgb),.12); }
.ftr h4{ font-family:var(--font-body); font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.ftr ul{ list-style:none; margin:0; padding:0; }
.ftr li{ margin-bottom:9px; }
.ftr a{ color:#94b2c4; text-decoration:none; font-size:14.5px; }
.ftr a:hover{ color:#fff; }
.ftr .fine{ display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between; padding-top:22px; font-size:13px; color:#7f9db0; }

.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent); color:var(--dark); padding:12px 18px; }
.skip:focus{ left:0; }

/* ---------------------------------------------------------- responsive ---- */
@media (max-width: 900px){
  .nav{
    display:none; position:absolute; top:70px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(7,27,41,.98); backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(var(--accent-rgb),.15); padding:8px var(--gut) 22px;
    max-height:calc(100vh - 70px); overflow-y:auto;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:14px 0; border-bottom:1px solid rgba(var(--accent-rgb),.1); }
  .nav a.btn{ margin-top:14px; text-align:center; }
  .nav-toggle{ display:block; }
  .steps li{ gap:0 18px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
  [data-reveal], .split-word .w-in{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; }
}

/* --- home page layout blocks --- */
.how-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; margin-top:48px; align-items:start; }
.dfy-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:32px; margin-top:46px; }
.dfy-num{ font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; line-height:1; font-size:clamp(2.2rem,4vw,3rem); font-variant-numeric:tabular-nums; }
.dfy-grid h3{ margin-top:10px; margin-bottom:8px; }
.dfy-grid p{ margin:0; }
.sec--close{ background:linear-gradient(180deg,var(--abyss),#04121c); }
.sec--close .btn-row{ justify-content:center; }
@media (max-width:900px){ .how-grid{ grid-template-columns:1fr; gap:36px; } }

/* .nav a colour outranks .btn--solid on specificity — pin it explicitly */
.nav a.btn{ color: var(--accent); }
.nav a.btn--solid{ color: var(--dark); }

/* Align tile / title / copy across every module card, however the title wraps */
@supports (grid-template-rows: subgrid){
  .mod-grid{ grid-auto-rows: auto; }
  .mod-grid > .mod{ display:grid; grid-template-rows: subgrid; grid-row: span 3; gap:18px; align-content:start; }
}
.mod h3{ align-items:flex-start; }
.mod .tag{ flex:none; margin-top:3px; }
.mod p{ margin:0; }

/* .sec--tintlight was missing every text override that .sec--light has */
.sec--tintlight .lead{ color: var(--text-muted); }
.sec--tintlight .copy{ color: var(--text-muted); }
.sec--tintlight .kicker{ color: var(--primary); background: rgba(var(--primary-rgb),.07); border-color: rgba(var(--primary-rgb),.2); }
.sec--tintlight .kicker::before{ background: var(--primary); }
.sec--light .steps .n, .sec--tintlight .steps .n{
  background: rgba(var(--primary-rgb),.08); border-color: rgba(var(--primary-rgb),.28); color: var(--primary);
}
.sec--light .steps li::before, .sec--tintlight .steps li::before{
  background: linear-gradient(rgba(var(--primary-rgb),.35), transparent);
}
/* the plate should be the picture, not a white mount around it */
.tilt-plate > img{ display:block; width:100%; }

/* The pre-reveal state of a horizontal reveal must not push the page sideways */
@media (max-width: 900px){
  [data-reveal="left"], .js [data-reveal="right"]{ transform: translateY(28px); }
}
.sec, .hero{ overflow-x: clip; }          /* clip, not hidden — no scroll container */
/* skip link: hide without parking it 9999px off the left edge */
.skip{ left:0; transform: translateY(-140%); transition: transform .15s; }
.skip:focus{ transform: translateY(0); }

@media (max-width: 900px){
  .ftr .cols{ grid-template-columns: 1fr 1fr; gap:28px; }
}
@media (max-width: 460px){
  .ftr .cols{ grid-template-columns: 1fr; gap:26px; }
}

@media (max-width: 900px){
  .nav{ background:#071b29; backdrop-filter:none; }   /* opaque — the hero was reading through */
}

/* =========================== MEGA MENU =========================== */
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-trigger{
  display:inline-flex; align-items:center; gap:7px; background:none; border:0; cursor:pointer;
  font:500 14.5px/1 var(--font-body); color:#a8c4d5; padding:5px 0;
  border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.nav-trigger svg{ width:11px; height:8px; transition: transform .25s var(--ease-out); }
.nav-trigger[aria-expanded="true"] svg{ transform: rotate(180deg); }
.nav-trigger:hover, .nav-trigger[aria-expanded="true"], .nav-trigger.is-current{ color:#fff; border-bottom-color: var(--accent); }

.mega{
  position:fixed; left:0; right:0; top:70px; z-index:55;
  background: linear-gradient(180deg, #08202f, #061722);
  border-top:1px solid rgba(var(--accent-rgb),.14);
  border-bottom:1px solid rgba(var(--accent-rgb),.14);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.7);
}
.mega[hidden]{ display:none; }
.mega-in{
  max-width: var(--max); margin:0 auto; padding: 30px var(--gut) 34px;
  display:grid; grid-template-columns: minmax(0,4fr) minmax(0,8fr); gap:44px;
}
.mega-h{
  margin:0 0 14px; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color: var(--accent);
}
.mega-row{
  display:block; text-decoration:none; padding:11px 12px; border-radius:8px;
  border:1px solid transparent; transition: background .2s, border-color .2s, transform .2s var(--ease-out);
}
.mega-row:hover{ background: rgba(var(--accent-rgb),.07); border-color: rgba(var(--accent-rgb),.18); transform: translateX(4px); }
.mega-row.is-current{ background: rgba(var(--accent-rgb),.09); border-color: rgba(var(--accent-rgb),.28); }
.mega-row-t{ display:block; font-weight:600; font-size:15px; color:#eaf4fa; }
.mega-row-b{ display:block; font-size:13px; color:#8fb0c4; margin-top:3px; }

.mega-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.mega-mod{
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  padding:12px; border-radius:10px; text-decoration:none;
  border:1px solid rgba(var(--accent-rgb),.10); background: rgba(255,255,255,.02);
  transition: background .2s, border-color .2s, transform .2s var(--ease-out);
}
a.mega-mod:hover{ background: rgba(var(--accent-rgb),.08); border-color: rgba(var(--accent-rgb),.32); transform: translateY(-3px); }
a.mega-mod.is-current{ border-color: rgba(var(--accent-rgb),.45); background: rgba(var(--accent-rgb),.10); }
.mega-tile{
  width:100%; aspect-ratio:1/1; border-radius:8px; overflow:hidden;
  background: linear-gradient(160deg,#fff,#eef7fb); display:grid; place-items:center; padding:12px;
}
/* auto + max, never 100%/100% — that is what was clipping the wordmarks */
.mega-tile img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.mega-name{ font-size:13.5px; font-weight:600; color:#eaf4fa; line-height:1.25; }
.mega-badge{
  font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 7px; border-radius:100px; background: rgba(255,255,255,.07); color:#7f9db0;
}
/* not a link, and it must look like it isn't */
.mega-mod.is-soon{ cursor:default; opacity:.62; }
.mega-mod.is-soon .mega-tile{ filter: grayscale(.8) brightness(.86); }
.mega-note{ margin:16px 0 0; font-size:12.5px; color:#7f9db0; max-width:70ch; }

@media (max-width: 900px){
  .nav-item{ display:block; }
  .nav-trigger{ width:100%; justify-content:space-between; padding:14px 0; border-bottom:1px solid rgba(var(--accent-rgb),.1); }
  .mega{ position:static; box-shadow:none; border:0; background:none; }
  .mega-in{ grid-template-columns:1fr; gap:22px; padding:14px 0 4px; }
  .mega-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ================= SIDEWAYS RAIL — see "THE MODULE RAIL" at the end of this file */

/* ================= PINNED SEQUENCE — steps advance under a held section */
.pinsec{ position:relative; height:250vh; margin-top:22px; }
.pin-stick{
  position:sticky; top:70px; height:calc(100vh - 70px);
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:48px; align-items:center;
}
.steps--pin li{ opacity:.26; transition:opacity .45s var(--ease-out), transform .45s var(--ease-out); transform:translateY(6px); }
.steps--pin li.on{ opacity:1; transform:none; }
.steps--pin li.past{ opacity:.38; }
.pin-fig{ margin:0; }
.pin-fig figcaption{ font-size:14px; margin-top:14px; }

@media (max-width: 900px){
  .pinsec{ height:auto; }
  .pin-stick{ position:static; height:auto; grid-template-columns:1fr; gap:34px; }
  .steps--pin li{ opacity:1; transform:none; }
}

/* ============ DEPTH GAUGE — how deep you are, in metres ============
   Scroll-linked only. Mono is used here because it is a readout, not decoration. */
.gauge{
  position:fixed; right:clamp(12px,2vw,26px); top:50%; transform:translateY(-50%);
  z-index:45; display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  pointer-events:none; opacity:0; transition:opacity .4s var(--ease-out);
}
.gauge.on{ opacity:1; }
.gauge-rail{ position:relative; width:2px; height:min(30vh,220px); background:rgba(var(--accent-rgb),.16); border-radius:2px; }
.gauge-fill{ position:absolute; left:0; top:0; width:100%; height:0; background:linear-gradient(var(--accent),var(--grad-end)); border-radius:2px; }
.gauge-fill::after{
  content:""; position:absolute; left:50%; bottom:0; width:7px; height:7px; margin-left:-3.5px; margin-bottom:-3.5px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 12px 2px rgba(var(--accent-rgb),.7);
}
.gauge-num{
  font:600 11px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing:.08em; color:var(--accent); font-variant-numeric:tabular-nums;
  writing-mode:vertical-rl; text-orientation:mixed;
}
@media (max-width:900px){ .gauge{ display:none; } }
@media (prefers-reduced-motion: reduce){ .gauge{ display:none; } }

/* the gauge sits over a full-bleed rail, so it needs to read over anything */
.gauge{ padding:14px 10px; border-radius:100px; background:rgba(4,18,28,.55); backdrop-filter:blur(6px); }

/* thinner gauge, hard against the edge, out of the content's way */
.gauge{ right:6px; padding:12px 7px; }
.gauge-rail{ height:min(24vh,180px); }


/* ===================== INSTRUMENTATION LAYER =====================
   Mono is used throughout this block because every value is a readout —
   depth, pressure, velocity, coordinates. That is what mono is for. */
:root{ --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

/* --- telemetry strip, bottom of the viewport --- */
.telemetry{
  position:fixed; left:0; right:0; bottom:0; z-index:44;
  display:flex; gap:clamp(14px,2.4vw,38px); justify-content:center; align-items:center;
  padding:9px clamp(12px,3vw,40px);
  font:600 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(191,238,255,.62);
  background:linear-gradient(0deg, rgba(4,18,28,.92), rgba(4,18,28,.62));
  border-top:1px solid rgba(var(--accent-rgb),.16);
  backdrop-filter:blur(8px);
  transform:translateY(100%); transition:transform .45s var(--ease-out), opacity .45s;
  opacity:0; pointer-events:none;
}
.telemetry.on{ transform:none; opacity:1; }
.telemetry span{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.telemetry b{ color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; }
.telemetry i{ font-style:normal; opacity:.5; }
.telemetry .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px 1px rgba(var(--accent-rgb),.8); }
@media (max-width:900px){ .telemetry .hide-s{ display:none; } .telemetry{ font-size:9.5px; gap:12px; } }

/* --- materialising headline: a focus pull, not a glitch --- */
.mat-w{
  display:inline-block;
  opacity:0; filter:blur(14px); transform:translateY(.14em) scale(1.04);
  transition:opacity .85s var(--ease-rev), filter .85s var(--ease-rev), transform .85s var(--ease-rev);
  transition-delay:inherit;
}
[data-materialise].in .mat-w{ opacity:1; filter:blur(0); transform:none; }
.matline{ position:relative; }
.matline::after{
  content:""; position:absolute; top:-.06em; bottom:-.06em; width:3px; left:0;
  background:linear-gradient(transparent, var(--accent-pale), transparent);
  box-shadow:0 0 26px 6px rgba(var(--accent-rgb),.55);
  opacity:0; pointer-events:none;
}
.matline.in::after{ animation:matsweep 1.15s var(--ease-rev) .05s 1 forwards; }
@keyframes matsweep{ 0%{ left:0; opacity:.9; } 90%{ opacity:.9; } 100%{ left:100%; opacity:0; } }

/* --- target lock on the rail --- */
.rail-track > .mod{ position:relative; }
.rail-track > .mod .mod-panel::before,
.rail-track > .mod .mod-panel::after{
  content:""; position:absolute; width:16px; height:16px; pointer-events:none;
  border:1px solid var(--accent); opacity:0; transition:opacity .25s var(--ease-out);
}
.rail-track > .mod .mod-panel::before{ top:8px; left:8px; border-right:0; border-bottom:0; }
.rail-track > .mod .mod-panel::after{ bottom:8px; right:8px; border-left:0; border-top:0; }
.rail-track > .mod.locked .mod-panel::before,
.rail-track > .mod.locked .mod-panel::after{ opacity:.9; }
.rail-track > .mod.locked .mod-panel{
  border-color:rgba(var(--accent-rgb),.5);
  box-shadow:0 24px 50px -26px rgba(0,0,0,.75), 0 0 0 1px rgba(var(--accent-rgb),.18), 0 0 44px -14px rgba(var(--accent-rgb),.5);
}
.rail-track > .mod .lockmark{
  position:absolute; top:10px; right:12px; z-index:3;
  font:700 8.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); opacity:0; transition:opacity .25s;
}
.rail-track > .mod.locked .lockmark{ opacity:.85; }

/* --- measurement ticks down the edge of a dark section --- */
.sec--dark > .ticks{
  position:absolute; top:0; bottom:0; left:0; width:30px; z-index:1; pointer-events:none;
  background-image:linear-gradient(rgba(var(--accent-rgb),.22) 1px, transparent 1px);
  background-size:100% 44px;
  -webkit-mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent);
  opacity:.5;
}
.sec--dark > .ticks::after{
  content:""; position:absolute; left:14px; top:0; bottom:0; width:1px;
  background:linear-gradient(transparent, rgba(var(--accent-rgb),.3), transparent);
}
@media (max-width:900px){ .sec--dark > .ticks{ display:none; } }

/* --- scan-line reveal: a light sweeps the block open --- */
.js [data-reveal="scan"]{ opacity:1; clip-path:inset(0 100% 0 0); }
[data-reveal="scan"].in{ clip-path:inset(0 0 0 0); transition:clip-path 1s var(--ease-rev) var(--d,0s); }
.scanwrap{ position:relative; }
.scanwrap::after{
  content:""; position:absolute; top:0; bottom:0; width:2px; left:0;
  background:linear-gradient(transparent, var(--accent), transparent);
  box-shadow:0 0 18px 3px rgba(var(--accent-rgb),.65);
  opacity:0;
}
.scanwrap.in::after{ animation:scanpass 1s var(--ease-rev) var(--d,0s) 1 forwards; }
@keyframes scanpass{ 0%{ left:0; opacity:1; } 92%{ opacity:1; } 100%{ left:100%; opacity:0; } }

/* the gauge and the telemetry strip must not collide */
.gauge{ top:46%; }

/* ===================== HOLOGRAPHIC MODULE PLATES =====================
   The logos now carry real alpha, so they can be projected onto a dark plate
   instead of pasted on a white tile. Depth comes from four things stacked:
   a plinth glow beneath, an iridescent sheen that tracks the pointer, fine
   scanlines over the top, and the mark itself lifted off the plate in Z. */
.mod-tile{
  position:relative;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(var(--accent-rgb),.22), transparent 62%),
    linear-gradient(165deg, rgba(24,86,120,.55), rgba(7,27,41,.9));
  border:1px solid rgba(var(--accent-rgb),.22);
  border-radius:12px; overflow:hidden;
  transform-style:preserve-3d;
}
.mod-tile img{
  position:relative; z-index:2;
  transform:translateZ(26px) scale(.9);
  filter:
    drop-shadow(0 0 14px rgba(var(--accent-rgb),.55))
    drop-shadow(1px 0 0 rgba(122,216,240,.5))
    drop-shadow(-1px 0 0 rgba(255,120,220,.28));
}
/* iridescent sheen — follows the same --gx/--gy the tilt engine already writes */
.mod-tile::before{
  content:""; position:absolute; inset:-20%; z-index:3; pointer-events:none;
  background:
    radial-gradient(60% 60% at var(--gx,50%) var(--gy,50%),
      rgba(255,255,255,.34), rgba(122,216,240,.20) 34%, rgba(160,110,255,.14) 55%, transparent 72%);
  mix-blend-mode:screen; opacity:.6;
  transition:opacity .3s var(--ease-out);
}
.mod-tile:hover::before{ opacity:1; }
/* scanlines */
.mod-tile::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(191,238,255,.055) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay; opacity:.75;
}
/* the projector base line */
.mod-tile .plinth{
  position:absolute; left:12%; right:12%; bottom:7px; height:2px; z-index:2;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow:0 0 16px 3px rgba(var(--accent-rgb),.55);
  opacity:.7;
}
.mod.soon .mod-tile img{ filter:grayscale(.7) brightness(.8) drop-shadow(0 0 10px rgba(var(--accent-rgb),.25)); }
.mod.soon .mod-tile{ border-color:rgba(var(--accent-rgb),.12); }
.mod.soon .mod-tile .plinth{ opacity:.3; }

/* mega menu plates: same idea, quieter — it is a menu, not a showpiece */
.mega-tile{
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(var(--accent-rgb),.18), transparent 60%),
    linear-gradient(165deg, rgba(24,86,120,.5), rgba(7,27,41,.92));
  border:1px solid rgba(var(--accent-rgb),.18);
}
.mega-tile img{ filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.45)); }
.mega-mod.is-soon .mega-tile{ filter:none; }
.mega-mod.is-soon .mega-tile img{ filter:grayscale(.75) brightness(.8); }

/* the marks lost punch when the white ground went — lift them back */
.mod-tile img{ filter:
  brightness(1.14) contrast(1.06)
  drop-shadow(0 0 16px rgba(var(--accent-rgb),.6))
  drop-shadow(1px 0 0 rgba(122,216,240,.5))
  drop-shadow(-1px 0 0 rgba(255,120,220,.28)); }
.mega-tile img{ filter:brightness(1.12) contrast(1.05) drop-shadow(0 0 10px rgba(var(--accent-rgb),.5)); }

/* ===================== THE DESCENT — scrubbed video =====================
   The section is tall; the film is pinned inside it and its playhead is a pure
   function of scroll. Stop scrolling and the frame holds perfectly still. */
.scrub{ position:relative; height:340vh; background:var(--abyss); }
.scrub-stick{
  position:sticky; top:0; height:100vh; overflow:clip;
  display:grid; place-items:center;
}
.scrub-stick canvas.descent{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}
.scrub-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(4,18,28,.9) 0%, rgba(4,18,28,.66) 42%, rgba(4,18,28,.28) 75%, rgba(4,18,28,.5) 100%),
    linear-gradient(180deg, rgba(4,18,28,.75) 0%, transparent 26%, transparent 68%, rgba(4,18,28,.85) 100%);
}
.scrub-copy{
  position:relative; z-index:2;
  width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gut);
  display:grid;                       /* every beat stacked in one cell */
}
.scrub-phase{
  grid-area:1/1; max-width:20ch;
  opacity:0; will-change:opacity, transform;
}
.scrub-phase .kicker{ margin-bottom:16px; }
.scrub-phase .t-h2{ text-wrap:balance; }
.scrub-hint{
  position:absolute; z-index:2; bottom:26px; left:50%; transform:translateX(-50%);
  font:600 10.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:rgba(191,238,255,.55);
}
@media (max-width:900px){
  .scrub{ height:300vh; }
  .scrub-phase{ max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  .scrub{ height:auto; }
  .scrub-stick{ position:static; height:auto; padding:var(--pad-loose) 0; }
  .scrub-stick video{ display:none; }
  .scrub-phase{ opacity:1 !important; transform:none !important; position:static; grid-area:auto; margin-bottom:34px; }
  .scrub-copy{ display:block; }
  .scrub-hint{ display:none; }
}

/* one short line per beat — long copy cannot cross-dissolve legibly */
.scrub-phase{ max-width:14ch; }
.scrub-phase .t-h2{ font-size:clamp(1.8rem,3.2vw,2.9rem); }
.scrub-phase{ max-width:19ch; }

/* the descent paints its own left-side scrim, so the copy needs no veil */
.scrub-veil{ display:none; }   /* only shown once the film is in */
.scrub-copy{ justify-items:start; }
.scrub-phase{ text-shadow:0 2px 30px rgba(2,10,17,.85); }
.scrub-phase .kicker{ white-space:nowrap; }   /* "all the way down" was wrapping */

/* the Veo film sits over the drawn descent once it exists */
.scrub-stick .descent-film{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1; pointer-events:none;
  opacity:0; transition:opacity .6s var(--ease-out);
}
.scrub-stick .descent-film.ready{ opacity:1; }
/* Full-bleed scrim over the film. It must cover the whole sticky area — a
   box sized to the copy shows its own edges as bands across the picture. */
.scrub-stick .descent-film.ready ~ .scrub-veil{
  display:block; z-index:1;
  background:
    linear-gradient(90deg, rgba(3,14,22,.92) 0%, rgba(3,14,22,.72) 34%, rgba(3,14,22,.10) 62%, rgba(3,14,22,.34) 100%),
    linear-gradient(180deg, rgba(3,14,22,.72) 0%, rgba(3,14,22,0) 22%, rgba(3,14,22,0) 74%, rgba(3,14,22,.8) 100%);
}

/* The brand film carries itself — a shorter beat, no scrim fighting it. */
.scrub{ height:210vh; }
.scrub-stick .descent-film.ready ~ .scrub-veil{
  background:
    linear-gradient(180deg, rgba(3,14,22,.55) 0%, rgba(3,14,22,0) 18%, rgba(3,14,22,0) 78%, rgba(3,14,22,.75) 100%);
}
.scrub-stick .descent-film{ object-fit:contain; background:#04121c; }
/* contain left pillarbox bars on a wide screen; the lockup is centred with
   headroom, so filling and cropping a little height is safe */
.scrub-stick .descent-film{ object-fit:cover; }

/* the real-time descent fills the pinned frame */
.scrub-stick canvas.descent3d{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}
.scrub-stick canvas.descent3d[hidden]{ display:none; }

/* ===================== THE HERO — the mark, held =====================
   One subject on screen for the whole opening: the DC monogram carved into
   3D (js/mark3d.js) sits in a sticky stage while the copy beats pass it.
   Desktop (≥900px): two columns, copy left, stage right, stage sticks for the
   height of the copy column. Below 900px the stage sticks at the top under the
   header and the beats scroll beneath it.
   ⛔ No copy over the mark — ever. */
.hero3d{
  --hdr:70px;
  position:relative; overflow:clip;
  background: linear-gradient(180deg,#04121c 0%, var(--abyss) 40%, var(--dark) 100%);
}
.hero3d .story{
  position:relative; max-width:var(--max); margin:0 auto; padding:0 var(--gut);
}
/* Mobile: the stage is short on purpose. What is left under it is the reading
   window, and every beat has to fit in it whole — a heading resting half
   behind the stage is a defect, not a style. */
.hero3d .holder{ position:sticky; top:var(--hdr); height:calc(38svh - var(--hdr)); min-height:210px; z-index:2; }
@media (min-width:900px){
  .hero3d .story{ display:grid; grid-template-columns:minmax(0,0.98fr) minmax(0,1.02fr); column-gap:clamp(24px,4vw,64px); }
  .hero3d .beats{ order:1; }
  .hero3d .holder{ order:2; height:calc(100svh - var(--hdr)); min-height:0; }
}

/* opaque on mobile — the copy passes behind it */
#stage{
  position:relative; width:100%; height:100%; overflow:hidden;
  background:
    radial-gradient(74% 56% at 50% 48%, rgba(21,100,147,.26) 0%, rgba(13,45,66,.16) 46%, rgba(7,27,41,0) 76%),
    linear-gradient(180deg,#04121c, var(--abyss));
}
@media (min-width:900px){ #stage{ background: radial-gradient(70% 54% at 50% 50%, rgba(21,100,147,.22) 0%, rgba(13,45,66,.10) 48%, rgba(7,27,41,0) 76%); } }
#stage::after{
  content:''; position:absolute; left:0; right:0; bottom:-44px; height:44px; pointer-events:none;
  background:linear-gradient(to bottom, var(--abyss), rgba(7,27,41,0));
}
@media (min-width:900px){ #stage::after{ display:none; } }
#stage canvas{
  position:relative; display:block; width:100%; height:100%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 2%,#000 98%,transparent 100%),
                     linear-gradient(to bottom,transparent 0,#000 1.5%,#000 98.5%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 2%,#000 98%,transparent 100%),
             linear-gradient(to bottom,transparent 0,#000 1.5%,#000 98.5%,transparent 100%);
  mask-composite:intersect;
}
/* the flat artwork until WebGL is up — and forever, if it never is */
#still{
  position:absolute; inset:0; margin:auto; width:min(64%,440px); height:auto;
  object-fit:contain; opacity:.96; filter: drop-shadow(0 20px 44px rgba(0,0,0,.5));
}
#stage.is-live #still{ display:none; }

.hero3d .beats{ display:grid; min-width:0; position:relative; z-index:1; }
.hero3d .beat{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding: clamp(48px,9vh,96px) 0; max-width:38rem;
}
.hero3d .beat--head{ padding-top: clamp(40px,7vh,80px); }
.hero3d .beat h1{ max-width:13ch; }
.hero3d .beat h2{ max-width:16ch; margin-top:20px; text-wrap:balance; }
.hero3d .beat .lead{ margin-top:24px; }
.hero3d .beat .copy{ margin-top:18px; max-width:46ch; }
.hero3d .beat .beat-fine{ margin-top:26px; font-size:14px; }
.hero3d .beat .beat-aside{
  margin-top:24px; padding-top:16px; border-top:1px solid rgba(var(--accent-rgb),.16);
  font-size:15px; color:#7fa2b8; max-width:40ch;
}
.hero3d .kicker i{ font-style:normal; font-weight:500; opacity:.7; text-transform:none; letter-spacing:.04em; }
/* the last beat is short and top-anchored, so the stage lets go right after it */
.hero3d .beat:last-child{ min-height:auto; justify-content:flex-start; padding-top:clamp(32px,7svh,72px); padding-bottom:clamp(96px,16svh,180px); }
@media (max-width:899px){
  /* content-height, top-anchored: a beat's heading is the first thing to
     clear the stage, and the whole beat fits in the window under it */
  .hero3d .beat{ min-height:auto; max-width:none; justify-content:flex-start; padding:40px 0 64px; }
  .hero3d .beat--head{ padding-top:30px; }
  .hero3d .beat h1{ font-size:clamp(2.4rem,10.5vw,3rem); }
  .hero3d .beat h2{ font-size:clamp(1.75rem,8vw,2.3rem); margin-top:16px; }
  .hero3d .beat .copy{ margin-top:14px; }
  .hero3d .beat .beat-aside{ margin-top:18px; padding-top:14px; }
  .hero3d .beat:last-child{ padding-bottom:112px; }
}
@media (prefers-reduced-motion: reduce){
  .hero3d .beat{ min-height:auto; }
}

/* ===================== THE MODULE RAIL — the home page's signature =====================
   Vertical scroll drives the rail sideways and PRESENTS one module at a time:
   the centred card is flat, full size and carries its description; every other
   card is turned, pushed back in depth and dimmed, and shows its name only.
   js/scroll.js writes every value as a pure function of scroll position.

   Without JS, and under prefers-reduced-motion (the layout never adds .js
   then), the same markup is a plain grid with every description showing.
   Nothing is lost — it just does not move. */
.rail{ position:relative; margin:26px 0 0; }
.rail-head{ width:100%; max-width:var(--max); margin:0 auto; }
.rail-head .kicker{ margin-bottom:14px; }
.rail-head .t-h2{ max-width:17ch; font-size:clamp(1.9rem,3.4vw,2.8rem); }
.rail-head .lead{ margin-top:12px; font-size:1.05rem; max-width:52ch; }
.rail-track{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:26px; margin-top:36px; }
.rail-hint{ display:none; }

/* The tile and the name sit on a glass panel; the description hangs beneath
   it. So a receded card is a clean plate with a name, not a panel with a
   blank lower half where its hidden paragraph used to be. */
.rail-track > .mod{ gap:14px; padding:0; }
.mod-panel{
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:16px; border-radius:16px; overflow:hidden;
  background: linear-gradient(165deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  border:1px solid rgba(var(--accent-rgb),.16);
  box-shadow: 0 24px 50px -26px rgba(0,0,0,.75);
}
/* a tall plate, not a letterbox — the module reads as a product, not a banner */
.rail-track > .mod .mod-tile{ aspect-ratio:3/4; max-width:none; padding:10px; }
/* the name has to sit INSIDE the plate at 2.5x, so it is set small and
   centred and allowed two lines */
.rail-track > .mod h3{
  font-size:clamp(.86rem,1.25vh,1.08rem); justify-content:center;
  text-align:center; line-height:1.2; gap:6px;
}
.rail-track > .mod .copy{ font-size:clamp(.92rem,1.35vh,1.06rem); line-height:1.5; }
/* the four unbuilt modules say so in a sentence — same voice, not a chip */
.mod-dev{ color:rgba(var(--accent-rgb),.88); font-size:.88rem; line-height:1.5; }

/* --- with JS: the rail --- */
.js .rail{ height:250vh; width:100vw; margin:26px calc(50% - 50vw) 0; }
/* top:0, not 70px — the plates need every pixel of height they can get, and
   the heading carries its own clearance under the header instead. */
/* ⭐ The heading sits in the LEFT margin and the plates own the whole stage.
   Stacking the heading above them cost the plates a third of the screen and
   that is exactly why they stayed small. */
.js .rail-stick{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:clamp(8px,1.6vh,20px);
  padding-top:clamp(78px,10vh,120px);
  padding-bottom:clamp(34px,5vh,64px);
  overflow:hidden;
  perspective:1600px;   /* the camera: one vanishing point, the middle of the screen */
}
@media (min-width:1100px){
  .js .rail-head{
    position:absolute; left:var(--gut); top:50%; transform:translateY(-50%);
    width:min(31vw, 27rem); z-index:3; padding:0; margin:0; pointer-events:none;
  }
  .js .rail-stick{ justify-content:center; }
  .js .rail-hint{ left:62%; }
}
.js .rail-head{ padding:0 var(--gut); }
/* the heading shares one screen with the plates, so it stays to two lines —
   but it is the section's title and reads as one */
.js .rail-head .t-h2{ max-width:18ch; font-size:clamp(1.9rem,3.1vw,3rem); }
.js .rail-head .lead{ font-size:clamp(1.02rem,1.25vw,1.2rem); max-width:34ch; margin-top:16px; }
.js .rail-track{
  /* 110px measured, not guessed: with the neighbours 260px back they converge
     toward the middle, and this is the spacing at which they sit just clear
     of the front card instead of hiding behind it */
  display:flex; margin:0; width:100%; will-change:transform;
  flex:1; align-items:center;
  /* the gap grows with the plates — at the old 110px the centred one covered
     its neighbours completely once it was twice their size */
  gap:clamp(110px,19vh,260px);
  transform-style:preserve-3d;   /* cards recede in the frame's perspective, not their own */
}
.js .rail-track > .mod{
  /* sized off viewport HEIGHT: the centred plate is 2.2x this and has to fit
     the screen it is standing on, whatever shape that screen is */
  flex:0 0 auto; width:min(72vw, 20vh, 320px); align-self:center;
  transform-origin:50% 50%;      /* the plate grows evenly now that the words live below the rail */
  will-change:transform, opacity;
  perspective:900px;             /* the hover tilt on the plate inside still needs one */
  backface-visibility:hidden;
}
/* one place for the words, under the rail — only the centred module's
   description is ever visible, faded in by js/scroll.js */
.js .rail-descs{
  position:relative; flex:0 0 auto;
  height:clamp(86px, 13vh, 136px); margin-top:clamp(10px,1.6vh,22px);
}
.js .rail-desc{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; gap:8px; text-align:center; padding:0 var(--gut);
}
.js .rail-desc .copy{ margin:0; max-width:50ch; font-size:clamp(1.08rem,1.95vh,1.45rem); line-height:1.5; }
.js .rail-desc .mod-dev{ font-size:clamp(.96rem,1.5vh,1.15rem); }

/* ⛔ This MUST sit AFTER the rule above. That one sets `inset:0`, which sets
   left:0, and on equal specificity the later rule wins — written earlier in
   the file it did nothing, and the words stayed centred on the screen while
   the plate presented right of them. */
@media (min-width:1100px){
  .js .rail-desc{ left:min(31vw, 27rem); }
}

.js .rail-hint{
  /* 7vh, not 2vh: the telemetry bar sits over the bottom edge of the screen */
  display:block; position:absolute; bottom:7vh; left:50%; transform:translateX(-50%);
  font-size:13px; letter-spacing:.04em; opacity:.65; text-align:center; margin:0;
}
@media (max-width:900px){
  .js .rail-stick{ gap:22px; }
.js .rail-desc .mod-dev{ font-size:clamp(.9rem,1.3vh,1.02rem); }

.js .rail-hint{ display:none; }
}

/* ===================== PRICE CARDS — shared by the pricing and agency pages =====================
   A plan is a card: what it is for, the price, the allowance, the list, one
   button. The same card sits on a light section or a dark one. The motion a
   page puts UNDER a card (the pricing ladder) lives in that page's fx file. */
.price-card{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:26px 26px 28px; border-radius:16px;
  background:#fff; border:1px solid var(--border); color:var(--text);
  box-shadow:0 24px 50px -30px rgba(15,77,114,.35);
}
.price-card .tier-rank{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); }
.price-card h3{ font-size:clamp(1.5rem,2.2vw,1.9rem); letter-spacing:-.02em; }
.price-card .tier-for{ margin:0; font-size:15px; line-height:1.5; color:var(--text-muted); min-height:3em; }
.price-card .price{ display:flex; align-items:baseline; gap:6px; margin-top:4px; }
.price-card .amt{ font:800 clamp(2.4rem,4vw,3.2rem)/1 var(--font-display); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.price-card .per{ font-size:14px; color:var(--text-muted); line-height:1.25; }
.price-card .allow{ font-size:13.5px; line-height:1.5; padding:10px 12px; border-radius:8px; background:var(--bg-alt); color:var(--text-muted); }
.price-card .allow b{ color:var(--text); }
.price-card .compare{ font-size:13.5px; color:var(--text-muted); }
.price-card .feats{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:9px; font-size:15px; line-height:1.45; }
.price-card .feats li{ position:relative; padding-left:24px; }
.price-card .feats li::before{ content:""; position:absolute; left:0; top:.45em; width:13px; height:13px; border-radius:50%; background:rgba(var(--primary-rgb),.12); }
.price-card .feats li::after{ content:""; position:absolute; left:4px; top:calc(.45em + 4px); width:5px; height:5px; border-radius:50%; background:var(--primary); }
.price-card .feats li.carry{ color:var(--text-muted); font-weight:600; }
.price-card .btn{ margin-top:auto; text-align:center; }
.price-card[data-flag]::before{
  content:attr(data-flag); position:absolute; top:-13px; left:22px;
  font:700 10.5px/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase;
  padding:8px 11px; border-radius:100px; background:linear-gradient(120deg,var(--primary),var(--grad-end)); color:#fff;
  box-shadow:0 10px 24px -12px rgba(var(--primary-rgb),.7);
}
.price-card--pick{ border-color:rgba(var(--primary-rgb),.55); box-shadow:0 30px 60px -30px rgba(var(--primary-rgb),.55); }

/* the same card on an ocean section: glass */
.sec--dark .price-card{
  background:linear-gradient(165deg, rgba(24,86,120,.34), rgba(7,27,41,.86));
  border-color:rgba(var(--accent-rgb),.2); color:#eaf4fa;
  box-shadow:0 30px 60px -32px rgba(0,0,0,.8);
}
.sec--dark .price-card .tier-rank{ color:var(--accent); }
.sec--dark .price-card .tier-for, .sec--dark .price-card .per, .sec--dark .price-card .compare{ color:#a8c4d5; }
.sec--dark .price-card .allow{ background:rgba(4,18,28,.45); color:#a8c4d5; }
.sec--dark .price-card .allow b{ color:#eaf4fa; }
.sec--dark .price-card .feats li::before{ background:rgba(var(--accent-rgb),.14); }
.sec--dark .price-card .feats li::after{ background:var(--accent); }
.sec--dark .price-card .feats li.carry{ color:#a8c4d5; }
.sec--dark .price-card[data-flag]::before{ background:linear-gradient(120deg,var(--accent),var(--accent-mid)); color:var(--dark); }
.sec--dark .price-card--pick{ border-color:rgba(var(--accent-rgb),.5); }

/* the plain-words note under a price list */
.honest{
  margin-top:34px; padding:18px 22px; border-radius:12px; font-size:15px; line-height:1.55;
  border:1px solid rgba(var(--primary-rgb),.2); background:rgba(var(--primary-rgb),.05); color:var(--text-muted);
}
.honest strong{ color:var(--text); }
.honest p{ margin:0; }
.sec--dark .honest{ border-color:rgba(var(--accent-rgb),.18); background:rgba(4,18,28,.4); color:#a8c4d5; }
.sec--dark .honest strong{ color:#eaf4fa; }

/* the instrument readout an effect page carries — mono because every value is a measurement */
.fx-read{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin:22px 0 0; padding:10px 14px;
  width:max-content; max-width:100%;
  border:1px solid rgba(var(--accent-rgb),.16); border-radius:8px;
  background:rgba(4,18,28,.35);
  font:600 10.5px/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(191,238,255,.62);
}
.fx-read b{ color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; }
.fx-read i{ font-style:normal; opacity:.55; }
.fx-read span{ white-space:nowrap; }
.sec--light .fx-read, .sec--tintlight .fx-read{
  color:var(--text-muted); border-color:rgba(var(--primary-rgb),.22); background:rgba(var(--primary-rgb),.04);
}
.sec--light .fx-read b, .sec--tintlight .fx-read b{ color:var(--primary); }

/* ================== HERO — you are inside the wave ==========================
   ⛔ NO left-to-right wipe. A dark column cut out of the footage is exactly
   what stops it feeling immersive.
   ⛔ Every block sits in the SAME centred place. Moving them around the frame
   made the reader's eyes chase them across the monitor. The variety is in the
   words and the water, not in where the words land.
   ⭐ The blocks overlap, so there is never video with no words on it. */
.hero3d{ height:680svh; }
.hero-stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:#04121c;
}
.hero-stage #heroPlate{
  display:block; width:100%; height:100%;
  opacity:0; transition:opacity .6s ease;
}
.hero-stage #heroPlate.is-live{ opacity:1; }

/* lighting, not a panel: darker at the very edges, clear through the middle */
.hero-vignette{
  position:absolute; inset:0; pointer-events:none;
  transition:none;   /* driven by scroll in js/hero-video.js, never on a clock */
  background:
    radial-gradient(130% 100% at 50% 46%, rgba(4,18,28,0) 40%, rgba(4,18,28,.44) 76%, rgba(4,18,28,.72) 100%),
    linear-gradient(to bottom, rgba(4,18,28,.62) 0%, rgba(4,18,28,0) 16%);
}

.hero-beats{ position:absolute; inset:0; }

/* one position, dead centre, for every block */
.hbeat{
  --drift:0px; --pop:1;
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) translateY(var(--drift)) scale(var(--pop));
  width:min(56rem, 86vw); max-width:none;
  padding:clamp(20px,2.4vw,34px) clamp(20px,3vw,44px);
  text-align:center;
  will-change:opacity, transform, filter;
  opacity:0;
}
/* the pool: sits behind the words and fades to nothing well before the block's
   edge, so there is no visible box */
.hbeat::before{
  content:""; position:absolute; inset:-16% -12%;
  background:radial-gradient(62% 66% at 50% 50%, rgba(3,13,21,.84) 0%, rgba(3,13,21,.56) 46%, rgba(3,13,21,0) 78%);
  z-index:-1;
}
.hbeat h1, .hbeat h2{ text-shadow:0 2px 34px rgba(3,10,16,.76); text-wrap:balance; margin-inline:auto; }
.hbeat .lead, .hbeat .copy{ text-shadow:0 1px 20px rgba(3,10,16,.72); margin-inline:auto; }
.hbeat .kicker{ justify-content:center; margin-bottom:18px; }
.hbeat .btn-row{ margin-top:32px; justify-content:center; }

/* ⭐ bigger. This is a hero, read from across the room, not a paragraph. */
.hbeat h1{
  font-size:clamp(2.8rem, 6.6vw, 5.6rem); line-height:.98;
  max-width:18ch;
}
.hbeat h2{
  font-size:clamp(2.3rem, 5vw, 4.4rem); line-height:1.02;
  max-width:20ch; margin-top:0;
}
.hbeat .lead{ margin-top:26px; font-size:clamp(1.05rem,1.55vw,1.35rem); max-width:50ch; }
.hbeat .copy{ margin-top:22px; font-size:clamp(1.02rem,1.45vw,1.28rem); max-width:52ch; }

/* the opening block carries buttons, so it needs a touch more room */
.hbeat--head::before{ inset:-14% -12% -20%; }

/* ⭐ The problem, read against the burn-out. White ink on a white frame is
   invisible, so this one block inverts — and it needs no pool behind it. */
.hbeat--surface{ width:min(66rem, 90vw); color:#0d2233; }
.hbeat--surface::before{ background:radial-gradient(60% 64% at 50% 50%, rgba(245,250,253,.72) 0%, rgba(245,250,253,.32) 52%, rgba(245,250,253,0) 80%); }
.hbeat--surface h2{ color:#07161f; text-shadow:none; font-size:clamp(2rem,4.2vw,3.6rem); max-width:22ch; }
.hbeat--surface .kicker{ color:#12688f; }
.hbeat--surface .copy{ color:#33566b; text-shadow:none; max-width:42ch; font-size:clamp(1rem,1.3vw,1.14rem); }
.hbeat-cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:clamp(18px,3vw,44px); margin-top:26px; text-align:left;
}
@media (max-width:899px){ .hbeat--surface h2{ font-size:clamp(1.8rem,7.4vw,2.5rem); } }

/* the hero now hands over a WHITE frame, so the section under it surfaces out
   of that instead of starting on a hard dark edge */
.sec--surfaced{ position:relative; }
.sec--surfaced::before{
  content:""; position:absolute; left:0; right:0; top:0; height:min(34vh,340px);
  background:linear-gradient(to bottom, #f2f7fa 0%, rgba(242,247,250,.55) 34%, rgba(7,27,41,0) 100%);
  pointer-events:none; z-index:0;
}
.sec--surfaced > *{ position:relative; z-index:1; }

@media (max-width:899px){
  .hero3d{ height:580svh; }
  .hbeat{
    width:auto; left:clamp(16px,5vw,28px); right:clamp(16px,5vw,28px);
    transform:translateY(-50%) translateY(var(--drift)) scale(var(--pop));
    padding:20px 14px;
  }
  .hbeat h1{ font-size:clamp(2.4rem,10vw,3.4rem); max-width:none; }
  .hbeat h2{ font-size:clamp(2rem,8.6vw,3rem); max-width:none; }
  .hbeat .lead, .hbeat .copy{ font-size:1.02rem; }
  .hbeat::before{ inset:-20% -14%; }
}
@media (prefers-reduced-motion: reduce){
  .hero3d{ height:100svh; }
  .hbeat{ position:static; transform:none !important; opacity:1 !important; }
  .hbeat:not(.hbeat--head){ display:none; }
}

/* ===================== HOW IT WORKS — the three steps, stacking ==========
   ⭐ The steps do NOT scroll past each other. One rises to the top and locks,
   two stops in the middle, three stops near the bottom, and by the end all
   three are on screen at once. js/works.js drives the positions.
   ⛔ Not a white section — it sat between two dark ones and read as a hole. */
.works{
  position:relative; overflow:clip;
  background:
    radial-gradient(120% 70% at 78% 12%, rgba(21,100,147,.30) 0%, rgba(13,45,66,0) 62%),
    linear-gradient(180deg, #071b29 0%, #0a2438 42%, #071b29 100%);
  color:#e8f6fb; padding-block:0;
}
.works-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 40% at 18% 76%, rgba(95,227,255,.10) 0%, rgba(95,227,255,0) 70%),
    radial-gradient(50% 34% at 88% 60%, rgba(26,122,181,.20) 0%, rgba(26,122,181,0) 72%);
}
.works-wrap{ position:relative; z-index:1; }
.works-head{ padding-top:clamp(72px,11vh,130px); max-width:var(--max); }
.works-head .kicker{ margin-bottom:14px; }
.works-head .t-h2{ max-width:18ch; font-size:clamp(2rem,3.8vw,3.3rem); }
.works-head .lead{ margin-top:16px; max-width:46ch; color:#a8cadc; }

.works-grid{ display:grid; gap:clamp(24px,4vw,64px); align-items:start; }
.works-steps{ list-style:none; margin:0; padding:0; }
.works-steps li{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
}
.works-steps .n{
  width:46px; height:46px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-weight:600; font-size:1.1rem;
  background:rgba(95,227,255,.12); border:1px solid rgba(95,227,255,.38);
  color:#bfeeff;
}
.works-steps h3{ margin:0 0 8px; font-size:clamp(1.3rem,2vw,1.75rem); }
.works-steps .copy{ margin:0; max-width:40ch; color:#a8cadc; font-size:clamp(1rem,1.15vw,1.12rem); }

.works-fig{ margin:0; }
.works-canvas{ display:block; width:100%; aspect-ratio:1/1; }
.works-fig figcaption{ margin-top:14px; font-size:.92rem; color:#87aec2; }

@media (min-width:900px){
  .works-grid{ grid-template-columns:minmax(0,0.94fr) minmax(0,1.06fr); }
  /* ⭐ The stage is TALL — that is the scroll the three locks need. The list
     inside it sticks to the viewport while that height runs past. */
  .works-stage{ height:360svh; }
  /* ⛔ top:0 parks the first step and the top of the drawing UNDER the fixed
     header. Both panes start below it. */
  .works-steps{ position:sticky; top:var(--hdr,70px); height:calc(100svh - var(--hdr,70px)); }
  .works-steps li{
    position:absolute; left:0; right:0; top:50%;
    transform:translateY(-50%);
    opacity:0; filter:saturate(.7);
    transition:opacity .3s linear, color .35s ease;
    color:#7fa5b9; will-change:top, opacity;
  }
  .works-steps li.is-on{ color:#e8f6fb; filter:none; }
  .works-steps li.is-on .copy{ color:#c2dced; }
  .works-steps li.is-on .n{ background:rgba(95,227,255,.2); border-color:rgba(95,227,255,.7); }
  .works-steps h3{ color:inherit; }
  .works-steps .copy{ color:inherit; opacity:.86; }
  .works-fig{
    position:sticky; top:var(--hdr,70px); height:calc(100svh - var(--hdr,70px));
    align-self:start; display:flex; flex-direction:column; justify-content:center;
  }
  .works-canvas{ width:100%; max-width:min(58vh, 640px); margin-inline:auto; }
  .works-fig figcaption{ text-align:center; }
}
@media (max-width:899px){
  .works-steps li{ padding:26px 0; }
  .works-fig{ margin-top:22px; }
  .works-canvas{ max-width:min(80vw, 460px); margin-inline:auto; }
}
@media (prefers-reduced-motion: reduce){
  .works-stage{ position:static; height:auto; }
  .works-steps li{ position:static; transform:none; opacity:1; padding:22px 0; color:inherit; }
}

/* ⭐ The four unbuilt modules are greyed out. Without a word on the plate that
   reads as a fault, not as "not finished yet" — so each one says so.
   ⛔ It must NOT add height to the panel. Giving .soon a taller panel made the
   centred plate overflow into the description below it. The badge sits INSIDE
   the panel, over the empty top of the tile, so every plate is the same size.
   ⛔ Everything in here is scaled up to ~2.5x when the plate is centred, so the
   base size is deliberately tiny. */
.mod-panel .devmark{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  z-index:3; white-space:nowrap;
  padding:2.5px 7px; border-radius:999px;
  font-size:clamp(.32rem,.5vh,.42rem); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; line-height:1.5;
  color:#ffd9c9;
  background:rgba(232,106,72,.22);
  border:1px solid rgba(232,106,72,.5);
}
/* a gap between the badge and the tile, taken from the tile — not added to
   the panel, so the panel's height never changes */
.rail-track > .mod.soon .mod-tile{ margin-top:13px; }