/* ═══════════════════════════════════════════════════════
   VANTAGE · Visium design system
   Shares its spine with Northstar. Own accent and mark.
   ═══════════════════════════════════════════════════════ */

:root{
  /* ground */
  --bg:#08090C; --panel:#0E1015; --panel2:#13161C; --raise:#171A21; --well:#090B0F;
  /* ink */
  --ink:#F2F4F7; --muted:#9BA3AE; --faint:#6E7681; --dim:#4A5059;
  /* structure */
  --line:rgba(255,255,255,0.075); --line2:rgba(255,255,255,0.045);
  /* accent + semantic */
  --accent:#4C8DFF; --accent2:#6BA1FF; --accent-dim:#3A5FA8; --glow:rgba(76,141,255,0.18);
  --green:#5FCF84; --amber:#D9A54F; --red:#D9685E;
  /* type */
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
  --disp:'Inter Tight',system-ui,-apple-system,sans-serif;
  --body:Inter,system-ui,-apple-system,sans-serif;
  /* metrics */
  --w:1180px; --pad:clamp(20px,4vw,44px); --r:20px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;} *{animation:none !important; transition:none !important;}
}
body{
  background:var(--bg); color:var(--ink); font-family:var(--body);
  font-size:15.5px; line-height:1.6; margin:0;
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
}
a{color:inherit; text-decoration:none;}
*:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px;}
img{max-width:100%;}
.wrap{max-width:var(--w); margin:0 auto; padding:0 var(--pad);}
.skip{position:absolute; left:-9999px;}
.skip:focus{left:16px; top:12px; z-index:99; background:var(--accent); color:#06101F;
  padding:10px 16px; border-radius:9px; font-size:14px;}

/* ── nav ───────────────────────────────────────────── */
nav.top{position:sticky; top:0; z-index:50; border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 22%, rgba(255,255,255,0.08) 78%, transparent) 1;
  background:rgba(8,9,12,0.86); backdrop-filter:blur(14px);}
.navin{display:flex; align-items:center; gap:20px; padding:15px var(--pad);}
.brand{display:flex; align-items:center; gap:10px; flex:none;}
.brand svg{width:22px; height:22px; flex:none;}
.brand b{font-family:var(--disp); font-weight:600; font-size:15.5px;
  letter-spacing:0.16em; text-transform:uppercase;}
.navlinks{display:flex; gap:26px; margin:0 auto; font-size:14.5px; color:var(--muted);}
.navlinks a{white-space:nowrap;}
.navlinks a:hover{color:var(--ink);}
.navlinks a[aria-current="page"]{color:var(--ink);}
.navright{display:flex; align-items:center; gap:16px; flex:none;}
/* mobile menu · a native <details>, so it opens even without script */
.mnav{display:none; margin-left:auto;}
.mnav summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:9px 16px 9px 18px;
  border-radius:999px; background:var(--panel2); box-shadow:inset 0 0 0 1px var(--line); font-size:14px; color:var(--ink); user-select:none;}
.mnav summary::-webkit-details-marker{display:none;}
.mnav summary i{position:relative; width:16px; height:10px; display:block;}
.mnav summary i::before, .mnav summary i::after{content:""; position:absolute; left:0; right:0; height:1.5px; border-radius:2px;
  background:currentColor; transition:transform .25s ease, top .25s ease;}
.mnav summary i::before{top:1px;} .mnav summary i::after{top:7.5px;}
.mnav[open] summary i::before{top:4.25px; transform:rotate(45deg);} .mnav[open] summary i::after{top:4.25px; transform:rotate(-45deg);}
.msheet{position:absolute; left:12px; right:12px; top:calc(100% + 8px); max-height:calc(100vh - 90px); max-height:calc(100svh - 90px); overflow:auto;
  border-radius:24px; padding:10px; background:rgba(14,16,21,0.97); backdrop-filter:blur(18px);
  box-shadow:inset 0 0 0 1px var(--line), 0 30px 80px -20px rgba(0,0,0,0.9); animation:sheet .28s cubic-bezier(.2,.7,.2,1) both;}
@keyframes sheet{from{opacity:0; transform:translateY(-8px) scale(0.985);} to{opacity:1; transform:none;}}
.msheet a{display:flex; justify-content:space-between; align-items:center; padding:15px 16px; border-radius:16px;
  font-family:var(--disp); font-size:21px; letter-spacing:-0.012em; color:var(--ink);}
.msheet a small{font-family:var(--mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint);}
.msheet a:hover, .msheet a[aria-current="page"]{background:rgba(255,255,255,0.04);}
.msheet a[aria-current="page"] small{color:var(--accent);}
.msheet .btn{display:block; text-align:center; margin:8px 6px 6px; padding:15px; font-family:var(--body); font-size:15px; color:#06101F;}
.msheet .btn:hover{background:var(--accent2);}
@media (max-width:1060px){ .navlinks{gap:18px; font-size:14px;} }
@media (max-width:960px){ .navlinks{display:none;} .mnav{display:block;} }
@media (max-width:620px){ .navright{display:none;} }

.btn{display:inline-block; font-family:var(--body); font-size:14px; font-weight:500;
  padding:10px 19px; border-radius:999px; background:var(--accent); color:#06101F;
  white-space:nowrap; transition:background .15s;}
.btn:hover{background:var(--accent2);}
.btn.ghost{background:transparent; border:1px solid rgba(255,255,255,0.16); color:var(--ink);}
.btn.ghost:hover{background:rgba(255,255,255,0.05); border-color:rgba(76,141,255,0.5);}
.btn.lg{padding:13px 26px; font-size:14.5px;}

/* ── display type ──────────────────────────────────── */
h1{font-family:var(--disp); font-weight:700; font-size:clamp(38px,6.8vw,80px);
  line-height:0.99; letter-spacing:-0.035em; margin:26px auto 0; max-width:15ch;}
.sub{color:var(--muted); font-size:clamp(16px,1.9vw,19px); max-width:50ch; margin:22px auto 0;}
.ctas{display:flex; gap:12px; flex-wrap:wrap; margin:32px 0 0; justify-content:center;}
.dot{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 9px var(--green); flex:none;}

/* ── sections ──────────────────────────────────────── */
main section{padding:clamp(62px,9vw,104px) 0; border-top:1px solid transparent;
  border-image:linear-gradient(90deg, transparent, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0.06) 80%, transparent) 1;}
section[id], [id].anchor{scroll-margin-top:76px;}
.eyebrow{font-family:var(--mono); font-size:10.5px; letter-spacing:0.17em;
  text-transform:uppercase; color:var(--faint); margin:0 0 20px;}
h2{font-family:var(--disp); font-weight:600; font-size:clamp(27px,4.1vw,46px);
  line-height:1.07; letter-spacing:-0.027em; margin:0 0 22px; max-width:18ch; text-wrap:balance;}
h3{font-family:var(--disp); font-weight:500; font-size:18px; margin:0 0 7px; letter-spacing:-0.008em;}
p{margin:0 0 15px; max-width:60ch; color:var(--muted);}
p.lead{font-size:clamp(16px,1.8vw,18.5px); max-width:48ch;}
strong,b.ink{color:var(--ink); font-weight:500;}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,66px); align-items:center;}
.split.top{align-items:start;}
@media (max-width:900px){.split{grid-template-columns:1fr;}}

.bul{margin:0; padding:0; list-style:none;}
.bul li{position:relative; padding:0 0 18px 24px; color:var(--muted); max-width:46ch;}
.bul li::before{content:""; position:absolute; left:0; top:9px; width:6px; height:6px;
  border-radius:50%; background:var(--accent);}

/* ── cards ─────────────────────────────────────────── */
.card{border:1px solid var(--line); border-radius:var(--r); background:var(--panel); padding:26px;}
.card.big{padding:clamp(26px,4vw,46px);}
.nest{border:1px solid var(--line); border-radius:15px; background:var(--panel2); padding:24px;}
.clabel{font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--faint); display:flex; justify-content:space-between; gap:12px; margin-bottom:16px;}
.clabel span{color:var(--muted);}
.grid{display:grid; gap:16px;}
.g2{grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
@media (max-width:860px){.g3,.g4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr;}}

/* ── state rows ────────────────────────────────────── */
.states{display:flex; flex-direction:column; gap:9px; margin:26px 0 0;}
.st{display:flex; align-items:center; gap:13px; border:1px solid var(--line);
  border-radius:12px; background:var(--panel2); padding:15px 18px;}
.st .sd{width:7px; height:7px; border-radius:50%; background:var(--dim); flex:none;}
.st b{font-family:var(--disp); font-weight:500; font-size:16px;}
.st span:last-child{margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:0.11em;
  text-transform:uppercase; color:var(--faint); text-align:right;}
.st.on{border-color:rgba(76,141,255,0.5); background:rgba(76,141,255,0.09);}
.st.on .sd{background:var(--accent); box-shadow:0 0 9px var(--accent);}
.st.on span{color:var(--accent);}
.st.warn{border-color:rgba(217,165,79,0.32);} .st.warn .sd{background:var(--amber);}
.st.off .sd{background:var(--dim);}

/* ── spec rows ─────────────────────────────────────── */
.spec{margin:18px 0 0; border-top:1px solid var(--line2);}
.sr{display:flex; justify-content:space-between; gap:16px; padding:11px 0;
  border-bottom:1px solid var(--line2); font-family:var(--mono); font-size:11.5px;}
.sr dt{color:var(--faint); text-transform:uppercase; font-size:10px; letter-spacing:0.12em;}
.sr dd{margin:0; color:var(--ink); text-align:right;}
.sr dd.ok{color:var(--green);} .sr dd.warn{color:var(--amber);} .sr dd.bad{color:var(--red);}

/* ── audit block ───────────────────────────────────── */
.audit{margin:18px 0 0; border:1px solid var(--line); border-radius:11px; background:var(--well);
  padding:15px 17px; font-family:var(--mono); font-size:11.5px; line-height:1.85; overflow-x:auto;}
.audit .k{color:var(--faint);} .audit .v{color:var(--muted);}
.audit .g{color:var(--green);} .audit .b{color:var(--accent);} .audit .a{color:var(--amber);}

/* ── notes ─────────────────────────────────────────── */
.note{border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:12px;
  background:var(--panel); padding:17px 21px; margin:24px 0;}
.note.red{border-left-color:var(--red);} .note.amber{border-left-color:var(--amber);}
.note.green{border-left-color:var(--green);}
.note .nl{font-family:var(--mono); font-size:9.5px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--accent); margin:0 0 7px;}
.note.red .nl{color:var(--red);} .note.amber .nl{color:var(--amber);} .note.green .nl{color:var(--green);}
.note p{margin:0; font-size:14.5px;}

/* ── table ─────────────────────────────────────────── */
.tw{overflow-x:auto; border:1px solid var(--line); border-radius:15px; margin:8px 0 0;}
table{width:100%; border-collapse:collapse; font-size:14px; min-width:540px;}
th,td{text-align:left; padding:13px 18px; border-bottom:1px solid var(--line2); vertical-align:top;}
th{font-family:var(--mono); font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--faint); font-weight:500; background:var(--panel2);}
td{color:var(--muted);} td strong{color:var(--ink);}
tr:last-child td{border-bottom:none;}

/* ── reveal ────────────────────────────────────────── */
@keyframes rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
@keyframes trace{to{stroke-dashoffset:-302;}}

/* ═══ Palantir-mode components ═══════════════════════════
   Outcome only. The public site never explains the mechanism. */

/* cinematic full-bleed hero */
.cine{position:relative; min-height:calc(100vh - 60px); min-height:calc(100svh - 60px);
  display:flex; align-items:center; justify-content:center; text-align:center;
  overflow:hidden; border-bottom:1px solid var(--line2); padding:90px 0 120px;}
.cine .plan{position:absolute; inset:0; width:100%; height:100%; opacity:1;}
.cine::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(40% 30% at 50% 50%, rgba(8,9,12,0.86), rgba(8,9,12,0.5) 70%, rgba(8,9,12,0.2) 100%),
             linear-gradient(180deg, rgba(8,9,12,0.25), rgba(8,9,12,0) 22%, rgba(8,9,12,0) 70%, rgba(8,9,12,0.92));}
.cine .wrap{position:relative; z-index:2;}
.cine h1{font-weight:500; font-size:clamp(40px,6.8vw,82px); letter-spacing:-0.034em;
  max-width:14ch; background:none; -webkit-background-clip:border-box; background-clip:border-box;
  color:var(--ink); margin-top:24px;}
.label{font-family:var(--mono); font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted);}
.scrollcue{position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--faint);
  display:flex; flex-direction:column; align-items:center; gap:10px;}
.scrollcue i{display:block; width:1px; height:34px; background:linear-gradient(var(--faint),transparent);}
@keyframes breathe{0%,100%{opacity:0.55; r:5.5px;} 50%{opacity:1; r:7.5px;}}
@keyframes halo{0%,100%{opacity:0.10;} 50%{opacity:0.32;}}
/* base values hold during animation delay and when reduced motion disables it */
.occ{animation:breathe 4.3s ease-in-out infinite both;}
.halo{opacity:0.18; animation:halo 4.3s ease-in-out infinite both;}
.d2{animation-delay:1.4s;} .d3{animation-delay:2.6s;}

/* statement band */
.statement{font-family:var(--disp); font-weight:400; font-size:clamp(24px,3.2vw,40px);
  line-height:1.22; letter-spacing:-0.02em; color:var(--faint); max-width:28ch; margin:0; text-wrap:balance;}
.statement b{color:var(--ink); font-weight:400;}

/* mission cards */
.missions{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:10px 0 0;}
@media (max-width:900px){.missions{grid-template-columns:1fr;}}
.mission{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel); overflow:hidden; transition:border-color .2s;}
.mission:hover{border-color:rgba(76,141,255,0.4);}
.mission .mv{height:190px; background:var(--well); border-bottom:1px solid var(--line2); position:relative;}
.mission .mv svg{position:absolute; inset:0; width:100%; height:100%;}
.mission .mb{padding:22px 24px 26px; display:flex; flex-direction:column; flex:1;}
.mission .mt{font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin:0 0 12px;}
.mission h3{font-family:var(--disp); font-weight:500; font-size:22px; letter-spacing:-0.018em; line-height:1.2; margin:0 0 10px;}
.mission p{font-size:14.5px; margin:0 0 18px;}
.mission .go{margin-top:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent);}

/* closing */
main section.closing{text-align:center; padding:clamp(90px,12vw,150px) 0;}
.closing h2{font-weight:500; font-size:clamp(34px,5.4vw,66px); letter-spacing:-0.032em; max-width:15ch; margin:0 auto 34px;}

/* ═══ Capability scroll story ═══════════════════════════
   The stage pins while the five steps scroll past. The active
   step is written to .stage[data-active] and CSS swaps layers. */
.story{padding-bottom:0 !important;}
.story-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,72px); margin-top:20px;}
.steps{padding:6vh 0 30vh;}
.step{min-height:74vh; display:flex; flex-direction:column; justify-content:center; max-width:40ch;
  transition:opacity .45s ease;}
.step .sx{font-family:var(--mono); font-size:11px; letter-spacing:0.16em; color:var(--faint); margin-bottom:16px;}
.step h3{font-family:var(--disp); font-weight:500; font-size:clamp(30px,3.4vw,44px); letter-spacing:-0.028em; line-height:1.05; margin:0 0 16px;}
.step p{font-size:16.5px; line-height:1.65; margin:0;}
.steplink{margin-top:20px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent);}
.js .step{opacity:0.28;} .js .step.on{opacity:1;}
.js .step.on .sx{color:var(--accent);}

.stage-col{position:relative;}
.stage{position:sticky; top:max(84px, calc(50vh - 300px)); border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel); padding:14px; box-shadow:0 40px 90px -34px rgba(0,0,0,0.9), 0 0 70px -34px var(--glow);}
.stage-bar{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:4px 6px 12px;
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint);}
.stage-step{color:var(--accent);}
.stage-svg{display:block; width:100%; height:auto; border:1px solid var(--line2); border-radius:12px; background:var(--well);}

/* layer switching */
.ly{opacity:0; transition:opacity .6s ease;}
.stage[data-active="presence"] .ly-occ, .stage[data-active="count"] .ly-occ, .stage[data-active="confidence"] .ly-occ,
.stage[data-active="presence"] .ly-dots, .stage[data-active="count"] .ly-dots, .stage[data-active="confidence"] .ly-dots,
.stage[data-active="presence"] .ly-presence,
.stage[data-active="vitals"] .ly-vitals,
.stage[data-active="count"] .ly-count,
.stage[data-active="confidence"] .ly-conf,
.stage[data-active="record"] .ly-record{opacity:1;}
.stage[data-active="record"] .ly-occ{opacity:0.35;}

/* vitals: expanding ripples + live breathing trace */
@keyframes ripple{0%{transform:scale(1); opacity:0.7;} 100%{transform:scale(5.2); opacity:0;}}
.ripple{transform-box:fill-box; transform-origin:center; animation:ripple 3.2s ease-out infinite both;}
.ripple.r2{animation-delay:1.07s;} .ripple.r3{animation-delay:2.14s;}
@keyframes tracescroll{from{transform:translateX(0);} to{transform:translateX(-64px);}}
.trace{animation:tracescroll 4.3s linear infinite;}

/* count: tags pop in one by one each time the step is entered */
@keyframes pop{0%{opacity:0; transform:scale(0.6);} 60%{opacity:1; transform:scale(1.06);} 100%{opacity:1; transform:scale(1);}}
.tag, .uncert{transform-box:fill-box; transform-origin:center; opacity:0;}
.stage[data-active="count"] .tag{animation:pop .5s cubic-bezier(.2,.7,.3,1) both;}
.stage[data-active="count"] .t1{animation-delay:.15s;} .stage[data-active="count"] .t2{animation-delay:.45s;}
.stage[data-active="count"] .t3{animation-delay:.75s;} .stage[data-active="count"] .t4{animation-delay:1.15s;}
@keyframes uncert{0%,100%{opacity:0.15;} 50%{opacity:0.75;}}
.stage[data-active="count"] .uncert{animation:uncert 2.2s ease-in-out .5s infinite both;}

/* confidence: meters fill on entry */
@keyframes fill{from{transform:scaleX(0);} to{transform:scaleX(1);}}
.bar{transform-box:fill-box; transform-origin:left center;}
.stage[data-active="confidence"] .bar{animation:fill 1.1s cubic-bezier(.2,.7,.2,1) both;}
.stage[data-active="confidence"] .b2{animation-delay:.2s;} .stage[data-active="confidence"] .b3{animation-delay:.4s;}

/* record: log lines append, then the seal stamps */
@keyframes appear{from{opacity:0; transform:translateX(-8px);} to{opacity:1; transform:none;}}
@keyframes stamp{0%{opacity:0; transform:scale(1.6);} 70%{opacity:1; transform:scale(0.94);} 100%{opacity:1; transform:scale(1);}}
.ln, .seal{opacity:0;} .seal{transform-box:fill-box; transform-origin:center;}
.stage[data-active="record"] .ln{animation:appear .4s ease both;}
.stage[data-active="record"] .l1{animation-delay:.1s;} .stage[data-active="record"] .l2{animation-delay:.35s;}
.stage[data-active="record"] .l3{animation-delay:.6s;} .stage[data-active="record"] .l4{animation-delay:.85s;}
.stage[data-active="record"] .l5{animation-delay:1.1s;} .stage[data-active="record"] .l6{animation-delay:1.35s;}
.stage[data-active="record"] .seal{animation:stamp .55s cubic-bezier(.2,.7,.3,1) 1.8s both;}

/* readouts under the plan */
.readouts{display:grid; margin-top:12px;}
.ro{grid-area:1/1; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:0;
  background:var(--line2); border:1px solid var(--line2); border-radius:11px; overflow:hidden;
  opacity:0; visibility:hidden; transition:opacity .45s ease, visibility .45s;}
.ro div{background:var(--panel2); padding:11px 13px;}
.ro dt{font-family:var(--mono); font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--faint);}
.ro dd{margin:4px 0 0; font-family:var(--mono); font-size:14px; color:var(--ink);}
.ro dd.ok{color:var(--green);} .ro dd.warn{color:var(--amber);} .ro dd.bad{color:var(--red);}
.stage[data-active="presence"] .ro-presence, .stage[data-active="vitals"] .ro-vitals,
.stage[data-active="count"] .ro-count, .stage[data-active="confidence"] .ro-confidence,
.stage[data-active="record"] .ro-record{opacity:1; visibility:visible;}

/* progress */
.progress{display:flex; gap:8px; justify-content:center; padding:14px 0 2px;}
.progress button{width:26px; height:4px; border-radius:999px; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,0.14); transition:background .3s, width .3s;}
.progress button.on{background:var(--accent); width:44px;}
.progress button:focus-visible{outline:2px solid var(--accent); outline-offset:4px;}

/* mobile: stage pins at the top, steps scroll beneath it */
@media (max-width:900px){
  .story-grid{grid-template-columns:1fr; gap:0;}
  .stage-col{order:-1; position:sticky; top:62px; z-index:5; background:var(--bg); padding:8px 0 10px;}
  .stage{position:static; padding:10px;}
  .stage-bar{font-size:9px; padding-bottom:8px;}
  .sess{display:none;}
  .ro{grid-template-columns:repeat(4,1fr);}
  .ro div{padding:7px 8px;} .ro dt{font-size:8.5px; letter-spacing:0.08em;} .ro dd{font-size:12px; margin-top:3px;}
  .steps{padding:4vh 0 20vh;}
  .step{min-height:56vh; max-width:none;}
}
@media (max-width:900px) and (max-height:760px){ .readouts{display:none;} }

/* ═══ closing ═══ */
main section.closing{position:relative; overflow:hidden; text-align:center; padding:clamp(110px,14vw,180px) 0;}
.closing-bg{position:absolute; left:50%; top:50%; width:min(980px,150vw); height:auto;
  transform:translate(-50%,-50%); pointer-events:none;}
@keyframes spin{to{transform:rotate(360deg);}}
.closing-bg .rot{transform-box:fill-box; transform-origin:center; animation:spin 90s linear infinite;}
.closing .wrap{position:relative;}
.closing h2{font-weight:500; font-size:clamp(36px,5.6vw,70px); letter-spacing:-0.034em; max-width:15ch; margin:22px auto 20px;}
.closing .sub{margin:0 auto 34px;}

/* reduced motion: everything that normally animates in is simply shown */
@media (prefers-reduced-motion:reduce){
  .stage[data-active="count"] .tag, .stage[data-active="record"] .ln, .stage[data-active="record"] .seal{opacity:1;}
  .stage[data-active="count"] .uncert{opacity:0.5;}
  .ripple.r2, .ripple.r3{display:none;}
}

/* ═══ Confidence section · selectable rooms ═══ */
.rooms-hint{margin:26px 0 10px; font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint);}
.rooms{display:flex; flex-direction:column; gap:9px;}
.room{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; width:100%;
  text-align:left; font:inherit; color:inherit; background:var(--panel2); border:1px solid var(--line);
  border-radius:12px; padding:13px 18px; transition:border-color .2s, background .2s;}
.js .room{cursor:pointer;}
.js .room:hover{border-color:rgba(255,255,255,0.16);}
.room .sd{width:8px; height:8px; border-radius:50%; background:var(--dim);}
.room .nm{display:flex; flex-direction:column; gap:3px; min-width:0;}
.room .nm b{font-family:var(--disp); font-weight:500; font-size:16px; color:var(--ink);}
.room .nm small{font-family:var(--mono); font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--faint);}
.room .val{font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); text-align:right;}
.room[data-state="occupied"] .sd{background:var(--accent);}
.room[data-state="low"] .sd{background:var(--amber);}
.room[data-state="clear"] .sd{background:var(--dim);}
.room[data-state="noread"] .sd{background:var(--red);}
.room[aria-pressed="true"]{border-color:rgba(76,141,255,0.55); background:rgba(76,141,255,0.08);}
.room[aria-pressed="true"] .sd{box-shadow:0 0 10px currentColor;}
.room[data-state="low"][aria-pressed="true"]{border-color:rgba(217,165,79,0.55); background:rgba(217,165,79,0.07);}
.room[data-state="noread"][aria-pressed="true"]{border-color:rgba(217,104,94,0.5); background:rgba(217,104,94,0.06);}
.room[data-state="clear"][aria-pressed="true"]{border-color:rgba(255,255,255,0.22); background:rgba(255,255,255,0.03);}

.detail .dhead{display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin:4px 0 12px;}
.dstate{font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; border:1px solid rgba(76,141,255,0.5); color:var(--accent); background:rgba(76,141,255,0.08);}
.dstate[data-state="low"]{border-color:rgba(217,165,79,0.5); color:var(--amber); background:rgba(217,165,79,0.08);}
.dstate[data-state="clear"]{border-color:rgba(255,255,255,0.2); color:var(--muted); background:transparent;}
.dstate[data-state="noread"]{border-color:rgba(217,104,94,0.5); color:var(--red); background:rgba(217,104,94,0.07);}
.dconf{display:flex; flex-direction:column; align-items:flex-end; line-height:1;}
.dconf b{font-family:var(--disp); font-weight:600; font-size:38px; letter-spacing:-0.03em; color:var(--ink);}
.dconf small{font-family:var(--mono); font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--faint); margin-top:6px;}
.cbar{height:4px; border-radius:999px; background:rgba(255,255,255,0.07); overflow:hidden; margin-bottom:16px;}
.cbar i{display:block; height:100%; background:var(--green); border-radius:2px; transition:width .6s cubic-bezier(.2,.7,.2,1), background .3s;}
.dsum{font-size:14.5px; margin:0; color:var(--muted);}
.detail .spec{margin-top:14px;}

/* ═══ Threshold · pinned statement scroll ═══════════════
   --p (0→1) is scroll progress through the section, set by vantage.js.
   Defaults show the finished state for no-JS and reduced motion. */
main section.threshold{padding:0; position:relative; --p:1; --wipe:1; --out:1;}
.tpin{padding:clamp(70px,9vw,110px) 0;}
.threshold.live{height:250vh;}
.threshold.live .tpin{position:sticky; top:60px; height:calc(100vh - 60px); height:calc(100svh - 60px);
  display:flex; align-items:center; padding:24px 0;}
.tgrid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,72px); align-items:center; width:100%;}
.tstate{max-width:22ch;}
.tstate .w{color:#8A929C; opacity:clamp(0.14, calc((var(--p) - var(--t)) * 16 + 0.14), 1);}
.tstate .w.k{color:var(--ink);}
.tframe{border:1px solid var(--line); border-radius:var(--r); background:var(--panel); padding:14px;
  box-shadow:0 40px 90px -34px rgba(0,0,0,0.9), 0 0 70px -34px var(--glow);}
.tphase [data-ph]{display:none; color:var(--accent);}
.threshold[data-phase="0"] [data-ph="0"], .threshold[data-phase="1"] [data-ph="1"], .threshold[data-phase="2"] [data-ph="2"]{display:inline;}
.threshold[data-phase="0"] [data-ph="0"]{color:var(--faint);}
.scene{position:relative; aspect-ratio:800/560; border:1px solid var(--line2); border-radius:12px; overflow:hidden; background:#07080B;}
.scene svg{position:absolute; inset:0; width:100%; height:100%;}
.scene-wall{clip-path:inset(0 0 0 calc(5% + var(--wipe) * 90%));}
.scan{position:absolute; top:7.14%; bottom:10.7%; left:calc(5% + var(--wipe) * 90%); width:2px; margin-left:-1px; pointer-events:none;
  background:linear-gradient(transparent, var(--accent2) 10%, var(--accent2) 90%, transparent);
  box-shadow:0 0 18px 2px rgba(76,141,255,0.55);
  opacity:calc(clamp(0, var(--wipe) * 25, 1) * clamp(0, (1 - var(--wipe)) * 25, 1));}
.scan i{position:absolute; top:-2px; left:10px; font-family:var(--mono); font-style:normal; font-size:9.5px;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--accent2); white-space:nowrap;}
.tread{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:12px 0 0; background:var(--line2);
  border:1px solid var(--line2); border-radius:11px; overflow:hidden;
  opacity:var(--out); transform:translateY(calc((1 - var(--out)) * 10px));}
.tread div{background:var(--panel2); padding:11px 13px;}
.tread dt{font-family:var(--mono); font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--faint);}
.tread dd{margin:4px 0 0; font-family:var(--mono); font-size:14px; color:var(--ink);}
.tread dd.ok{color:var(--green);}
@media (max-width:900px){
  .threshold.live{height:220vh;}
  .tgrid{grid-template-columns:1fr; gap:18px;}
  .tstate{max-width:none; font-size:clamp(21px,5.6vw,28px);}
  .tpin .label{margin-bottom:12px !important;}
  .tread div{padding:8px 9px;} .tread dt{font-size:8.5px; letter-spacing:0.08em;} .tread dd{font-size:12px;}
}

/* ═══ Official seal · Record step ═══ */
@keyframes sealpulse{0%{opacity:0.9; transform:scale(1);} 100%{opacity:0; transform:scale(1.7);}}
.sealpulse{opacity:0; transform-box:fill-box; transform-origin:center;}
.stage[data-active="record"] .sealpulse{animation:sealpulse 1.1s ease-out 2.3s both;}

/* ═══ Closing · instrument composition ═══ */
main section.closing{padding:clamp(130px,15vw,190px) 0;}
.closing-bg{width:min(1100px,170vw);}
.cl-bezel{transform-box:view-box; transform-origin:50% 50%; animation:spin 240s linear infinite reverse;}
.cl-orbit{transform-box:view-box; transform-origin:50% 50%; animation:spin 120s linear infinite;}
.cl-comet{transform-box:view-box; transform-origin:50% 50%; animation:spin 36s linear infinite;}
@keyframes clpulse{0%{transform:scale(1); opacity:0.6;} 100%{transform:scale(14); opacity:0;}}
.clp{transform-box:fill-box; transform-origin:center; opacity:0; animation:clpulse 4.3s ease-out infinite both;}
.clp.c2{animation-delay:1.43s;} .clp.c3{animation-delay:2.86s;}
@keyframes floaty{0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);}}
.cl-tags .fl{animation:floaty 6s ease-in-out infinite both;}
.cl-tags .f2{animation-delay:-1.5s;} .cl-tags .f3{animation-delay:-3s;} .cl-tags .f4{animation-delay:-4.5s;}
@keyframes tdot{0%,100%{opacity:1;} 50%{opacity:0.35;}}
.cl-tags .tdot{animation:tdot 2.2s ease-in-out infinite both;}
.closing .wrap{z-index:1;}
.closing .wrap::before{content:""; position:absolute; left:50%; top:50%; width:min(880px,125%); height:125%;
  transform:translate(-50%,-50%); z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(8,9,12,0.92), rgba(8,9,12,0.6) 62%, rgba(8,9,12,0));}
.principles{list-style:none; margin:42px auto 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:720px;}
.principles li{display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; text-align:left;
  padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:rgba(14,16,21,0.78); backdrop-filter:blur(8px);}
.principles .pi{grid-row:1 / span 2; width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:rgba(76,141,255,0.10); border:1px solid rgba(76,141,255,0.3);}
.principles .pi svg{width:20px; height:20px;}
.principles b{font-family:var(--disp); font-weight:500; font-size:15.5px; color:var(--ink); line-height:1.2;}
.principles small{font-family:var(--mono); font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--faint);}
@media (max-width:900px){ .cl-tags{display:none;} .principles{grid-template-columns:1fr; max-width:340px;} }

/* ═══ Footer · Visium structure, Vantage content ═══ */
footer.site-foot{border-top:1px solid var(--line); padding:64px 0 34px; margin-top:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.014), transparent 45%);}
.ftop{display:grid; grid-template-columns:minmax(250px,1.3fr) 3.7fr; gap:clamp(32px,5vw,70px);
  padding-bottom:44px; border-bottom:1px solid var(--line2);}
.fbrand .brand{margin-bottom:18px;}
.fdesc{font-size:14.5px; line-height:1.65; color:var(--muted); max-width:34ch; margin:0 0 26px;}
.fcontact{margin:0; display:grid; gap:16px;}
.fcontact dt{font-family:var(--mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin-bottom:4px;}
.fcontact dd{margin:0; font-size:14px; line-height:1.5; color:var(--muted);}
.fcontact a{color:var(--muted);} .fcontact a:hover{color:var(--ink);}
.fcontact a.accent{color:var(--accent); font-weight:500;} .fcontact a.accent:hover{color:var(--accent2);}
.fcols{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:26px;}
.fcols h4{font-family:var(--mono); font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink); font-weight:500; margin:4px 0 16px;}
.fcols a{display:block; font-size:14.5px; line-height:1.4; color:var(--muted); padding:6px 0;}
.fcols a:hover{color:var(--ink);}
.fbase{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:24px 0 14px;}
.flocale{font-size:13.5px; color:var(--muted);} .flocale i{font-style:normal; color:var(--dim); margin:0 8px;}
.flegal{display:flex; gap:26px; flex-wrap:wrap;}
.flegal a{font-size:13.5px; color:var(--muted);} .flegal a:hover{color:var(--ink);}
.fby{font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint);}
.fcopy{font-size:12.5px; line-height:1.6; color:var(--faint); margin:0; max-width:none;}
@media (max-width:1000px){ .ftop{grid-template-columns:1fr;} .fcols{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:600px){ .fcols{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;} .fbase{flex-direction:column; align-items:flex-start;} .flegal{gap:18px;} }

/* closing: soften where the bezel meets the section edges */
main section.closing::before, main section.closing::after{content:""; position:absolute; left:0; right:0; height:150px; pointer-events:none;}
main section.closing::before{top:0; background:linear-gradient(var(--bg), rgba(8,9,12,0));}
main section.closing::after{bottom:0; background:linear-gradient(rgba(8,9,12,0), var(--bg));}

/* ═══════════════════════════════════════════════════════
   SOFT SYSTEM · shared by every page
   No hard corners: every surface is rounded, every rule fades.
   ═══════════════════════════════════════════════════════ */

/* ── Integrates with · open rail ────────────────────────
   Logos ride past on an open rail between two soft hairlines.
   A second, masked copy of the same track lights each logo as it
   crosses the middle. Light edge fade so more partners stay visible. */
main section.works{padding:clamp(54px,6.5vw,84px) 0 clamp(50px,6vw,76px); position:relative; overflow:hidden;}
.works-eyebrow{text-align:center; margin:0 auto 30px; max-width:none;}
.band{position:relative;}
.band::before, .band::after{display:none; content:""; position:absolute; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.09) 12%, rgba(255,255,255,0.09) 88%, transparent);}
.band::before{top:0;} .band::after{bottom:0;}
.band .glow{position:absolute; left:50%; top:50%; width:min(460px,80vw); height:150px; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(76,141,255,0.13), rgba(76,141,255,0.04) 60%, transparent);}
.marquee{position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);}
.track{display:flex; width:max-content; margin:0; padding:0; list-style:none; align-items:center;
  animation:marquee 34s linear infinite;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.band:hover .track{animation-play-state:paused;}
.logo{flex:none; width:210px; height:104px; display:flex; align-items:center; justify-content:center; padding:0 28px;}
.logo img{display:block; width:auto; max-width:150px; opacity:0.5; transition:opacity .25s;}
.logo img.mono{filter:brightness(0) invert(1);}
.logo img.inv{filter:invert(1);}
.lens{position:absolute; inset:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent calc(50% - 190px), #000 calc(50% - 80px), #000 calc(50% + 80px), transparent calc(50% + 190px));
          mask-image:linear-gradient(90deg, transparent calc(50% - 190px), #000 calc(50% - 80px), #000 calc(50% + 80px), transparent calc(50% + 190px));}
.lens .logo img{opacity:1;}
.lens .logo img.mono{filter:brightness(0) invert(1) drop-shadow(0 0 12px rgba(107,161,255,0.5));}
.lens .logo img.inv{filter:invert(1) drop-shadow(0 0 12px rgba(107,161,255,0.5));}
@media (max-width:640px){
  .logo{width:150px; height:84px; padding:0 18px;} .logo img{max-width:112px;}
  .track{animation-duration:26s;}
  .lens{-webkit-mask-image:linear-gradient(90deg, transparent calc(50% - 130px), #000 calc(50% - 56px), #000 calc(50% + 56px), transparent calc(50% + 130px));
                mask-image:linear-gradient(90deg, transparent calc(50% - 130px), #000 calc(50% - 56px), #000 calc(50% + 56px), transparent calc(50% + 130px));}
}
@media (prefers-reduced-motion:reduce){
  .track{animation:none; flex-wrap:wrap; justify-content:center; width:auto; padding:0 var(--pad);}
  .track [aria-hidden="true"], .lens{display:none;}
  .marquee{-webkit-mask-image:none; mask-image:none;}
  .logo img{opacity:0.8;}
}
/* static logo row for inner pages, same open style between hairlines */
.logorow{position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:0 8px; margin:0; padding:10px var(--pad); list-style:none;}
.logorow::before, .logorow::after{display:none; content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.09) 15%, rgba(255,255,255,0.09) 85%, transparent);}
.logorow::before{top:0;} .logorow::after{bottom:0;}

/* ── Hero · side variant (inner pages) ──────────────────
   Same cinematic full bleed as the home hero, copy on the left,
   art on the right. On phones the art sits on top, copy below. */
.cine .hin{position:relative;}
.cine.side{justify-content:flex-start; text-align:left;}
.cine.side .wrap{width:100%;}
.cine.side .hin{max-width:620px;}
.cine.side h1{margin-left:0; max-width:13ch; font-size:clamp(40px,6vw,78px);}
.cine.side .sub{margin-left:0; max-width:44ch;}
.cine.side .ctas{justify-content:flex-start;}
.cine.side::after{background:
  linear-gradient(90deg, rgba(8,9,12,0.96) 0%, rgba(8,9,12,0.88) 28%, rgba(8,9,12,0.4) 52%, rgba(8,9,12,0.05) 72%, rgba(8,9,12,0) 100%),
  linear-gradient(180deg, rgba(8,9,12,0.35), rgba(8,9,12,0) 20%, rgba(8,9,12,0) 74%, rgba(8,9,12,0.96));}
.cine.side .scrollcue{left:max(var(--pad), calc(50% - var(--w) / 2 + var(--pad))); transform:none; align-items:flex-start;}
.cine.short{min-height:auto; padding:clamp(120px,14vw,170px) 0 clamp(90px,10vw,130px);}
.chip{display:inline-flex; align-items:center; gap:9px; padding:7px 14px 7px 12px; border-radius:999px;
  background:rgba(255,255,255,0.035); box-shadow:inset 0 0 0 1px var(--line); font-family:var(--mono); font-size:10.5px;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);}
.chip .dot{width:7px; height:7px;}
.chip[data-state="occupied"] .dot{background:var(--accent); box-shadow:0 0 9px var(--accent);}
.chip[data-state="low"] .dot{background:var(--amber); box-shadow:0 0 9px var(--amber);}
.chip[data-state="clear"] .dot{background:var(--faint); box-shadow:none;}
.chip[data-state="noread"] .dot{background:var(--red); box-shadow:0 0 9px var(--red);}
@media (max-width:900px){
  .cine .plan{left:50%; right:auto; width:auto; min-width:100%; height:100%; aspect-ratio:16/9;
    transform:translateX(clamp(calc(50vw - 100%), calc(var(--fx, 0.5) * -100%), -50vw));}
  .cine.side{display:block; min-height:0; padding:calc(min(64vw, 470px) + 20px) 0 64px;}
  .cine.side .plan{height:calc(min(64vw, 470px) + 140px); bottom:auto;}
  .cine.side::after{background:linear-gradient(180deg, rgba(8,9,12,0.3) 0, rgba(8,9,12,0) 60px,
    rgba(8,9,12,0) calc(min(64vw, 470px) - 90px), rgba(8,9,12,0.94) calc(min(64vw, 470px) + 60px), var(--bg) calc(min(64vw, 470px) + 140px));}
  .cine.side h1{font-size:clamp(36px,9.6vw,58px); margin-top:18px;}
  .cine.side .scrollcue{display:none;}
  .cine.short{padding:110px 0 70px;}
}
@media (max-width:520px){ .cine .ctas .btn{flex:1 1 auto; text-align:center;} }

/* ── Section heads ─────────────────────────────────────── */
.center{text-align:center;} .center h2, .center p, .center .lead{margin-left:auto; margin-right:auto;}
.lede{font-size:clamp(16px,1.7vw,18.5px); line-height:1.6; max-width:56ch;}
.kick{font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin:0 0 14px;}
h2.xl{font-size:clamp(32px,5vw,62px); letter-spacing:-0.032em; font-weight:500; max-width:16ch;}

/* ── Said · a pinned statement that lights word by word ── */
main section.said{padding:0;}
.said{--p:1;}
.said .spin{padding:clamp(90px,12vw,150px) 0;}
.said.live{height:210vh;}
.said.live .spin{position:sticky; top:60px; height:calc(100vh - 60px); height:calc(100svh - 60px); display:flex; align-items:center; padding:0;}
.said .spin .wrap{width:100%;}
.said .big{font-family:var(--disp); font-weight:400; font-size:clamp(28px,4.6vw,60px); line-height:1.1; letter-spacing:-0.03em;
  color:var(--ink); max-width:23ch; margin:0 auto; text-align:center; text-wrap:balance;}
.said .big .w{color:#8A929C; opacity:clamp(0.13, calc((var(--p) - var(--t)) * 14 + 0.13), 1);}
.said .big .w.k{color:var(--ink);}
.said .kick{text-align:center;}
@media (max-width:900px){ .said.live{height:180vh;} .said .big{font-size:clamp(27px,7.4vw,40px); text-align:left;} .said .kick{text-align:left;} }

/* ── Visual panel (framed SVG, same frame as the stages) ── */
.vis{border-radius:var(--r); background:var(--panel); padding:14px;
  box-shadow:inset 0 0 0 1px var(--line), 0 40px 90px -34px rgba(0,0,0,0.9), 0 0 70px -34px var(--glow);}
.vis > svg, .vis .vsvg{display:block; width:100%; height:auto; border-radius:13px; background:var(--well); box-shadow:inset 0 0 0 1px var(--line2);}
.vis .stage-bar{padding:4px 6px 12px;}
.vis .ro{opacity:1; visibility:visible; position:static;}
.vis .vfoot{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:12px 0 0; background:var(--line2);
  border-radius:12px; overflow:hidden;}
.vis .vfoot div{background:var(--panel2); padding:11px 13px;}
.vis .vfoot dt{font-family:var(--mono); font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--faint);}
.vis .vfoot dd{margin:4px 0 0; font-family:var(--mono); font-size:13.5px; color:var(--ink);}
.vfoot dd.ok{color:var(--green);} .vfoot dd.warn{color:var(--amber);} .vfoot dd.bad{color:var(--red);} .vfoot dd.acc{color:var(--accent2);}
@media (max-width:600px){ .vis{padding:10px;} .vis .vfoot{grid-template-columns:repeat(2,1fr);} .vis .vfoot div{padding:9px 10px;} }

/* ── Chapters · alternating copy and visual ─────────────── */
.chap{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(30px,5.5vw,80px); align-items:center;}
.chap + .chap{margin-top:clamp(80px,11vw,150px);}
.chap.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
.chap.flip .chap-copy{order:2;}
.chap-copy .ix{font-family:var(--mono); font-size:11px; letter-spacing:0.16em; color:var(--accent); margin:0 0 16px;}
.chap-copy h3{font-family:var(--disp); font-weight:500; font-size:clamp(30px,3.6vw,48px); letter-spacing:-0.03em; line-height:1.04; margin:0 0 18px;}
.chap-copy > p{font-size:16.5px; line-height:1.65;}
.ticks{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px;}
.ticks li{display:flex; gap:12px; align-items:flex-start; color:var(--muted); font-size:15px; line-height:1.5;}
.ticks li::before{content:""; flex:none; width:18px; height:18px; margin-top:2px; border-radius:50%;
  background:rgba(76,141,255,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.4' fill='none' stroke='%236BA1FF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
  box-shadow:inset 0 0 0 1px rgba(76,141,255,0.35);}
.ticks.no li::before{background:rgba(217,104,94,0.10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6.2 6.2l5.6 5.6M11.8 6.2l-5.6 5.6' fill='none' stroke='%23D9685E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat;
  box-shadow:inset 0 0 0 1px rgba(217,104,94,0.35);}
@media (max-width:900px){ .chap, .chap.flip{grid-template-columns:1fr;} .chap.flip .chap-copy{order:0;} }

/* ── Tiles ─────────────────────────────────────────────── */
.tiles{display:grid; gap:16px; grid-template-columns:repeat(var(--cols,3), minmax(0,1fr)); margin-top:clamp(26px,4vw,44px);}
.tile{position:relative; display:flex; flex-direction:column; border-radius:var(--r); padding:26px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.006)), var(--panel);
  box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .25s, transform .25s;}
a.tile:hover{box-shadow:inset 0 0 0 1px rgba(76,141,255,0.42), 0 24px 60px -30px rgba(76,141,255,0.35); transform:translateY(-2px);}
.tile .tv{position:relative; height:168px; margin:-26px -26px 24px; background:var(--well); overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 70%, transparent); mask-image:linear-gradient(#000 70%, transparent);}
.tile .tv svg{position:absolute; inset:0; width:100%; height:100%;}
.tile .kicker{font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin:0 0 12px;}
.tile h3{font-family:var(--disp); font-weight:500; font-size:21px; letter-spacing:-0.015em; line-height:1.2; margin:0 0 10px;}
.tile p{font-size:14.5px; line-height:1.6; margin:0 0 14px;}
.tile p:last-child{margin-bottom:0;}
.tile .limit{margin-top:auto; padding-top:14px; font-size:13.5px; color:var(--faint); border-top:1px solid var(--line2);}
.tile .limit b{font-family:var(--mono); font-weight:400; font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber); display:block; margin-bottom:5px;}
.tile .go{margin-top:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent);}
.tile .ico{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; margin-bottom:18px;
  background:rgba(76,141,255,0.10); box-shadow:inset 0 0 0 1px rgba(76,141,255,0.3);}
.tile .ico svg{width:22px; height:22px;}
@media (max-width:980px){ .tiles{--cols:2 !important;} }
@media (max-width:620px){ .tiles{--cols:1 !important;} }

/* ── Four reading states ────────────────────────────────── */
.four{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:clamp(26px,4vw,44px);}
.fs{border-radius:var(--r); padding:24px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); display:flex; flex-direction:column; gap:12px;}
.fs .glyph{height:96px; border-radius:14px; background:var(--well); position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px var(--line2);}
.fs .glyph svg{position:absolute; inset:0; width:100%; height:100%;}
.fs b{font-family:var(--disp); font-weight:500; font-size:20px; letter-spacing:-0.012em; color:var(--ink);}
.fs p{margin:0; font-size:14.5px;}
.fs .act{margin-top:auto; font-family:var(--mono); font-size:10px; letter-spacing:0.13em; text-transform:uppercase; color:var(--muted);
  padding-top:12px; border-top:1px solid var(--line2);}
.fs[data-state="occupied"]{box-shadow:inset 0 0 0 1px rgba(76,141,255,0.32);} .fs[data-state="occupied"] .act{color:var(--accent2);}
.fs[data-state="low"]{box-shadow:inset 0 0 0 1px rgba(217,165,79,0.3);} .fs[data-state="low"] .act{color:var(--amber);}
.fs[data-state="noread"]{box-shadow:inset 0 0 0 1px rgba(217,104,94,0.34);} .fs[data-state="noread"] .act{color:var(--red);}
@media (max-width:980px){ .four{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .four{grid-template-columns:1fr;} }

/* ── Switcher · tabs over a visual ─────────────────────── */
.swtabs{display:inline-flex; gap:4px; padding:5px; border-radius:999px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line);
  max-width:100%; overflow-x:auto; scrollbar-width:none; margin:clamp(22px,3vw,34px) 0 22px;}
.swtabs::-webkit-scrollbar{display:none;}
.swtabs button{flex:none; font:500 14px var(--body); color:var(--muted); background:transparent; border:0; padding:10px 18px;
  border-radius:999px; cursor:pointer; white-space:nowrap; transition:background .2s, color .2s;}
.swtabs button:hover{color:var(--ink);}
.swtabs button[aria-pressed="true"]{background:rgba(76,141,255,0.14); color:var(--ink); box-shadow:inset 0 0 0 1px rgba(76,141,255,0.45);}
.swpane{animation:paneIn .45s ease both;}
@keyframes paneIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.swgrid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(22px,4vw,48px); align-items:center;}
.swgrid h3{font-family:var(--disp); font-weight:500; font-size:clamp(26px,3vw,38px); letter-spacing:-0.026em; line-height:1.08; margin:0 0 14px;}
.swgrid .lim{margin-top:20px; border-radius:16px; padding:16px 18px; background:rgba(217,165,79,0.05); box-shadow:inset 0 0 0 1px rgba(217,165,79,0.22);}
.swgrid .lim b{display:block; font-family:var(--mono); font-weight:400; font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber); margin-bottom:6px;}
.swgrid .lim p{margin:0; font-size:14.5px;}
.js-sw [data-pane][hidden]{display:none;}
.no-js-sw .swpane + .swpane{margin-top:40px;}
@media (max-width:900px){ .swgrid{grid-template-columns:1fr;} .swtabs{display:flex;} }

/* ── Flow · numbered steps ──────────────────────────────── */
.flow{display:grid; grid-template-columns:repeat(var(--cols,4), minmax(0,1fr)); gap:14px; margin:clamp(26px,4vw,44px) 0 0; padding:0; list-style:none; counter-reset:f;}
.flow li{position:relative; border-radius:var(--r); padding:24px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); counter-increment:f;}
.flow li::before{content:counter(f, decimal-leading-zero); display:grid; place-items:center; width:40px; height:40px; border-radius:50%; margin-bottom:18px;
  font-family:var(--mono); font-size:12px; color:var(--accent2); background:rgba(76,141,255,0.1); box-shadow:inset 0 0 0 1px rgba(76,141,255,0.35);}
.flow li::after{content:""; position:absolute; top:44px; left:74px; right:-14px; height:1px;
  background:linear-gradient(90deg, rgba(76,141,255,0.35), rgba(76,141,255,0));}
.flow li:last-child::after{display:none;}
.flow b{display:block; font-family:var(--disp); font-weight:500; font-size:19px; color:var(--ink); margin-bottom:8px;}
.flow p{margin:0; font-size:14.5px;}
@media (max-width:900px){ .flow{grid-template-columns:repeat(2,minmax(0,1fr));} .flow li::after{display:none;} }
@media (max-width:560px){ .flow{grid-template-columns:1fr;} }

/* ── Rule cards · doctrine in two lines ─────────────────── */
.rules{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:clamp(26px,4vw,44px);}
.rule{border-radius:var(--r); padding:clamp(26px,3.4vw,40px); background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); position:relative; overflow:hidden;}
.rule::before{content:""; position:absolute; inset:auto -20% -60% auto; width:70%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(closest-side, var(--rc, rgba(76,141,255,0.16)), transparent); pointer-events:none;}
.rule .chip{margin-bottom:22px;}
.rule b{display:block; font-family:var(--disp); font-weight:500; font-size:clamp(24px,2.6vw,32px); letter-spacing:-0.024em; line-height:1.12; color:var(--ink); margin-bottom:14px; max-width:18ch;}
.rule p{margin:0; font-size:15.5px;}
.rule.red{--rc:rgba(217,104,94,0.16);}
@media (max-width:800px){ .rules{grid-template-columns:1fr;} }

/* ── Questions ─────────────────────────────────────────── */
.qa{max-width:880px; margin:clamp(26px,4vw,40px) auto 0; display:grid; gap:10px;}
.qa details{border-radius:18px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .2s;}
.qa details[open]{box-shadow:inset 0 0 0 1px rgba(76,141,255,0.3);}
.qa summary{list-style:none; cursor:pointer; padding:21px 24px; display:flex; justify-content:space-between; align-items:center; gap:18px;
  font-family:var(--disp); font-weight:500; font-size:18px; letter-spacing:-0.01em; color:var(--ink);}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{content:""; flex:none; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M15 10v10M10 15h10' stroke='%239BA3AE' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/30px no-repeat;
  box-shadow:inset 0 0 0 1px var(--line); transition:transform .3s ease;}
.qa details[open] summary::after{transform:rotate(45deg);}
.qa .ans{padding:0 24px 22px;}
.qa .ans p{margin:0; font-size:15.5px; max-width:70ch;}

/* ── Endcap · closing call for inner pages ──────────────── */
main section.endcap{position:relative; overflow:hidden; text-align:center; padding:clamp(130px,15vw,190px) 0;}
.endcap .rings{position:absolute; left:50%; top:50%; width:min(1040px,165vw); aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none;
  border-radius:50%; background:radial-gradient(closest-side, rgba(76,141,255,0.15), rgba(76,141,255,0.035) 55%, transparent 100%);}
.endcap .rings i{position:absolute; border-radius:50%; inset:var(--in); box-shadow:inset 0 0 0 1px rgba(76,141,255,var(--o,0.14));}
.endcap .rings .tk{inset:4%; box-shadow:none;
  background:repeating-conic-gradient(rgba(76,141,255,0.42) 0 0.3deg, transparent 0.3deg 3deg);
  -webkit-mask:radial-gradient(closest-side, transparent calc(100% - 12px), #000 calc(100% - 11px), #000 99%, transparent 100%);
          mask:radial-gradient(closest-side, transparent calc(100% - 12px), #000 calc(100% - 11px), #000 99%, transparent 100%);
  animation:spin 240s linear infinite reverse;}
.endcap .rings .dash{inset:13%; box-shadow:none; border:1px dashed rgba(76,141,255,0.22); animation:spin 140s linear infinite;}
.endcap .rings .pl{inset:47%; box-shadow:inset 0 0 0 1.5px rgba(76,141,255,0.7); animation:clpulse2 4.3s ease-out infinite both; opacity:0;}
.endcap .rings .pl.p2{animation-delay:1.43s;} .endcap .rings .pl.p3{animation-delay:2.86s;}
@keyframes clpulse2{0%{transform:scale(1); opacity:0.7;} 100%{transform:scale(12); opacity:0;}}
.endcap .rings .core{inset:49.2%; background:var(--accent); box-shadow:0 0 18px 4px rgba(76,141,255,0.6);}
.endcap::before, .endcap::after{content:""; position:absolute; left:0; right:0; height:160px; pointer-events:none; z-index:1;}
.endcap::before{top:0; background:linear-gradient(var(--bg), rgba(8,9,12,0));}
.endcap::after{bottom:0; background:linear-gradient(rgba(8,9,12,0), var(--bg));}
.endcap .wrap{position:relative; z-index:2;}
.endcap .wrap::before{content:""; position:absolute; left:50%; top:50%; width:min(860px,125%); height:130%; transform:translate(-50%,-50%); z-index:-1;
  background:radial-gradient(closest-side, rgba(8,9,12,0.9), rgba(8,9,12,0.55) 62%, rgba(8,9,12,0)); pointer-events:none;}
.endcap h2{font-weight:500; font-size:clamp(34px,5.4vw,66px); letter-spacing:-0.034em; max-width:16ch; margin:22px auto 20px;}
.endcap .sub{margin:0 auto 34px;}
.ftag{position:absolute; z-index:1; left:var(--x); top:var(--y); animation:floaty 6s ease-in-out infinite both; animation-delay:var(--dl,0s);}
@media (max-width:900px){ .ftag{display:none;} }

/* ── Record strip · a sealed log in HTML ───────────────── */
.logcard{border-radius:var(--r); background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); padding:22px;}
.logcard .audit{margin:0; border:0; box-shadow:inset 0 0 0 1px var(--line2); border-radius:14px;}

/* ── Contact grid ──────────────────────────────────────── */
.cgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:clamp(26px,4vw,40px);}
.cbox{border-radius:18px; padding:22px 24px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line);}
.cbox dt{font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin-bottom:8px;}
.cbox dd{margin:0; font-size:15.5px;} .cbox dd a{color:var(--ink);} .cbox dd a:hover{color:var(--accent2);}
.cbox small{display:block; margin-top:6px; color:var(--faint); font-size:13px;}
@media (max-width:900px){ .cgrid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .cgrid{grid-template-columns:1fr;} }

/* ── Briefing request form ─────────────────────────────── */
.formcard{border-radius:24px; padding:clamp(22px,3.4vw,38px); background:linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.006)), var(--panel);
  box-shadow:inset 0 0 0 1px var(--line), 0 40px 90px -40px rgba(0,0,0,0.9), 0 0 80px -40px var(--glow);}
.form{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form .full{grid-column:1 / -1;}
.form label, .form fieldset > legend{font-family:var(--mono); font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--faint);}
.form label{display:flex; flex-direction:column; gap:9px;}
.form fieldset{border:0; margin:0; padding:0; min-width:0;}
.form fieldset > legend{margin-bottom:10px; padding:0;}
.form input, .form select, .form textarea{font:15px/1.4 var(--body); color:var(--ink); background:var(--well); border:0; border-radius:14px;
  padding:13px 15px; box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .2s; width:100%; letter-spacing:normal; text-transform:none;}
.form textarea{min-height:120px; resize:vertical;}
.form select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%239BA3AE' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px;}
.form input:focus, .form select:focus, .form textarea:focus{outline:none; box-shadow:inset 0 0 0 1px rgba(76,141,255,0.65), 0 0 0 4px rgba(76,141,255,0.12);}
.form input::placeholder, .form textarea::placeholder{color:var(--dim);}
.seg{display:flex; flex-wrap:wrap; gap:8px;}
.seg label{flex-direction:row; align-items:center; gap:0; cursor:pointer;}
.seg input{position:absolute; opacity:0; width:1px; height:1px;}
.seg span{display:inline-block; padding:10px 16px; border-radius:999px; background:var(--well); box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--body); font-size:14px; letter-spacing:0; text-transform:none; color:var(--muted); transition:all .2s;}
.seg input:checked + span{background:rgba(76,141,255,0.14); color:var(--ink); box-shadow:inset 0 0 0 1px rgba(76,141,255,0.5);}
.seg input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px;}
.form .send{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.form .send .btn{border:0; cursor:pointer;}
.form .send small{color:var(--faint); font-size:13px; max-width:46ch;}
.formnote{margin:14px 0 0; font-size:13px; color:var(--faint);}
@media (max-width:640px){ .form{grid-template-columns:1fr;} }

/* ── Legal documents ───────────────────────────────────── */
.dochero{position:relative; overflow:hidden; padding:clamp(96px,11vw,140px) 0 clamp(40px,5vw,64px);}
.dochero::before{content:""; position:absolute; left:50%; top:-40%; width:min(1100px,160vw); aspect-ratio:2/1; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(76,141,255,0.13), rgba(76,141,255,0.03) 60%, transparent);}
.dochero .wrap{position:relative;}
.dochero h1{font-weight:500; font-size:clamp(38px,5.6vw,64px); margin:20px 0 0; max-width:18ch; letter-spacing:-0.034em;}
.dochero .sub{margin:18px 0 0;}
.dochero .meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px;}
main section.docsec{padding-top:clamp(20px,3vw,34px);}
.doc{display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(30px,5vw,70px); align-items:start;}
.toc{position:sticky; top:92px; border-radius:18px; padding:18px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line);}
.toc .eyebrow{margin-bottom:12px;}
.toc a{display:block; font-size:13.5px; line-height:1.4; color:var(--muted); padding:6px 10px; margin:0 -10px; border-radius:10px;}
.toc a:hover{color:var(--ink); background:rgba(255,255,255,0.035);}
.prose{max-width:76ch;}
.prose h2{font-size:clamp(22px,2.4vw,28px); font-weight:500; letter-spacing:-0.02em; margin:52px 0 14px; max-width:none; scroll-margin-top:90px;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:18px; margin:28px 0 8px;}
.prose p, .prose li{color:var(--muted); font-size:15.5px; line-height:1.7; max-width:none;}
.prose ul, .prose ol{padding-left:22px; margin:0 0 16px;}
.prose li{margin-bottom:8px;}
.prose li::marker{color:var(--accent);}
.prose a{color:var(--accent2); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(107,161,255,0.4);}
.prose strong{color:var(--ink); font-weight:500;}
.prose .callout{border-radius:16px; padding:18px 20px; margin:22px 0; background:rgba(76,141,255,0.06); box-shadow:inset 0 0 0 1px rgba(76,141,255,0.25);}
.prose .callout p{margin:0;}
.prose .callout.warn{background:rgba(217,165,79,0.05); box-shadow:inset 0 0 0 1px rgba(217,165,79,0.25);}
@media (max-width:900px){ .doc{grid-template-columns:1fr;} .toc{position:static;} }
.lcards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
@media (max-width:700px){ .lcards{grid-template-columns:1fr;} }

/* ── Reveal on scroll ──────────────────────────────────── */
.rvjs .rv{opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s);}
.rvjs .rv.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .rvjs .rv{opacity:1; transform:none;} }

/* ── Story layers driven by data-ly (inner pages) ───────── */
.stage [data-ly]{opacity:0; transition:opacity .6s ease;}
.stage [data-ly].on{opacity:1;}
.stage .ro[data-ly]{visibility:hidden;} .stage .ro[data-ly].on{visibility:visible;}
.draw{stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600);}
.on .draw, .on.draw{animation:draw 1.6s cubic-bezier(.3,.6,.2,1) .2s forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes march{to{stroke-dashoffset:-20;}}
.march{animation:march 1s linear infinite;}
.popin{transform-box:fill-box; transform-origin:center; opacity:0;}
.on .popin{animation:pop .5s cubic-bezier(.2,.7,.3,1) both; animation-delay:var(--dl,.2s);}
.fadein{opacity:0;} .on .fadein{animation:appear .45s ease both; animation-delay:var(--dl,.1s);}
@media (prefers-reduced-motion:reduce){ .draw{stroke-dashoffset:0;} .popin, .fadein{opacity:1;} }

/* ── 404 ───────────────────────────────────────────────── */
.nf{min-height:calc(100svh - 60px); display:flex; align-items:center; text-align:center; position:relative; overflow:hidden;}
.nf .wrap{position:relative; z-index:2;}

/* ═══ Page accents · motion used by the mission pages ═══ */
@keyframes dust{0%{transform:translate(0,0); opacity:0;} 25%{opacity:0.55;} 100%{transform:translate(14px,-70px); opacity:0;}}
.dust circle{transform-box:fill-box; animation:dust 8s ease-in-out infinite both;}
.dust circle:nth-child(3n+1){animation-delay:-2.7s; animation-duration:9.5s;}
.dust circle:nth-child(3n+2){animation-delay:-5.3s; animation-duration:7s;}
@keyframes smoke{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(24px,-10px) scale(1.12);}}
.smoke{transform-box:fill-box; transform-origin:center; animation:smoke 9s ease-in-out infinite both;}
.smoke.s2{animation-delay:-3s; animation-duration:11s;} .smoke.s3{animation-delay:-6s; animation-duration:13s;}
@keyframes flick{0%,100%{opacity:0.75;} 30%{opacity:1;} 60%{opacity:0.6;}}
.flick{animation:flick 1.6s ease-in-out infinite both;}
.logorow .logo img{opacity:0.75;}
.logorow .logo:hover img{opacity:1;}
@keyframes tracescroll2{from{transform:translateX(0);} to{transform:translateX(-128px);}}
.trace2{animation:tracescroll2 5.4s linear infinite;}
@keyframes sweep{0%{transform:translateX(0); opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{transform:translateX(620px); opacity:0;}}
.sweep{animation:sweep 5.5s ease-in-out infinite;}
.sealpulse2{transform-box:fill-box; transform-origin:center; animation:sealpulse 3.2s ease-out infinite both;}

/* ═══ Capabilities · anatomy of a reading ═══ */
.anat{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px) minmax(0,1fr); gap:clamp(18px,3vw,34px); align-items:center; margin-top:clamp(30px,4vw,48px);}
.anotes{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.anotes li{display:flex; gap:14px; align-items:flex-start; padding:18px; border-radius:18px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line);}
.anotes li > b, .pinx{flex:none; display:inline-grid; place-items:center; border-radius:50%; font-family:var(--mono); font-style:normal; font-weight:500; color:#06101F; background:var(--accent);}
.anotes li > b{width:28px; height:28px; font-size:11.5px; box-shadow:0 0 0 5px rgba(76,141,255,0.14);}
.anotes h4{margin:3px 0 5px; font-family:var(--disp); font-weight:500; font-size:16.5px; color:var(--ink);}
.anotes p{margin:0; font-size:14px; line-height:1.55;}
.anat-card{position:relative; border:0; box-shadow:inset 0 0 0 1px rgba(76,141,255,0.28), 0 40px 90px -30px rgba(0,0,0,0.9), 0 0 90px -30px var(--glow);}
.pinx{width:18px; height:18px; font-size:9.5px; margin-left:8px; vertical-align:middle; letter-spacing:0; text-transform:none; box-shadow:0 0 0 3px rgba(76,141,255,0.2);}
.dconf .pinx{margin:7px 0 0;}
@media (max-width:1000px){ .anat{grid-template-columns:1fr; max-width:560px; margin-left:auto; margin-right:auto;} .anat-card{order:-1;} }
.gspin{transform-box:view-box; transform-origin:1330px 500px; animation:spin 220s linear infinite;}
.ospin{transform-box:view-box; transform-origin:800px 450px; animation:spin 160s linear infinite;}
.ospin2{transform-box:view-box; transform-origin:800px 450px; animation:spin 42s linear infinite;}
.split.brief{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
.form label.check{flex-direction:row; align-items:flex-start; gap:12px; font-family:var(--body); font-size:14px; letter-spacing:0; text-transform:none; color:var(--muted); cursor:pointer;}
.form label.check input{flex:none; width:18px; height:18px; margin:2px 0 0; padding:0; accent-color:var(--accent); box-shadow:none;}
@media (max-width:900px){ .split.brief{grid-template-columns:1fr;} }
main section.nf, .nf{min-height:calc(100vh - 60px); min-height:calc(100svh - 60px); display:flex; align-items:center; text-align:center; position:relative; overflow:hidden; padding:80px 0;}
.nf-art{position:absolute; inset:0; width:100%; height:100%;}
.nf::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(45% 45% at 50% 50%, rgba(8,9,12,0.85), rgba(8,9,12,0.4) 70%, rgba(8,9,12,0.1));}
.nf .wrap{position:relative; z-index:2; width:100%;}
.nf h1{margin:22px auto 0;}

/* ═══════════════════════════════════════════════════════
   VANTAGE OS · the product as it looks during a session
   Wraps a story stage: header, basis ribbon, map with the floor
   plan, a room card and a mode dock. Every class is vos- or v-
   prefixed so nothing collides with the marketing components.
   Per-step content sits in .vstk stacks of [data-ly] children;
   the story script turns on the ones that match the active step.
   ═══════════════════════════════════════════════════════ */
.story-grid.os{grid-template-columns:minmax(0,4fr) minmax(0,8fr);}
.stage.vos{padding:8px; border-radius:24px; background:#0B0D11; display:flex; flex-direction:column; gap:6px;
  container-type:inline-size; top:max(76px, calc(50vh - 330px));}
.vos .vstk{display:grid;}
.vos .vstk > *{grid-area:1 / 1;}
.vos .vstk > [data-ly]{transition:opacity .35s ease, visibility .35s;}
.vos .vstk > [data-ly]:not(.on){visibility:hidden;}

.vos-top{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:3px 10px 1px;
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint);}
.vos-os{display:flex; align-items:center; gap:8px; color:var(--muted); letter-spacing:0.22em;}
.vos-os svg{width:14px; height:14px;}
.vos-dev{display:flex; align-items:center; gap:10px; white-space:nowrap;}
.vos-dev .sec{display:inline-flex; align-items:center; gap:5px; color:var(--muted);}
.vos-dev svg{width:11px; height:11px;}

.vos-head{display:flex; align-items:center; gap:12px; padding:8px 8px 8px 12px; border-radius:16px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); min-width:0;}
.vp{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; white-space:nowrap;
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; line-height:1;}
.vp i{width:6px; height:6px; border-radius:50%; background:currentColor;}
.vp.live{color:var(--green); background:rgba(95,207,132,0.1); box-shadow:inset 0 0 0 1px rgba(95,207,132,0.3);}
.vp.live i{box-shadow:0 0 8px currentColor; animation:tdot 1.6s ease-in-out infinite;}
.vp.amber{color:var(--amber); background:rgba(217,165,79,0.1); box-shadow:inset 0 0 0 1px rgba(217,165,79,0.35);}
.vp.sealed, .vp.ver{color:#04140A; background:#74F5AA; font-weight:700;}
.vp.ver{padding:4px 8px; font-size:9.5px;}
.vos-sess{font-family:var(--disp); font-weight:500; font-size:17px; letter-spacing:-0.01em; color:var(--ink); white-space:nowrap;}
.vos-addr{font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.vos-vchip{display:none;}
.vos-clock{margin-left:auto; display:grid; justify-items:end; gap:6px; padding:0 4px 0 14px; border-left:1px solid var(--line2);}
.vos-t > span{display:flex; align-items:baseline; justify-content:flex-end; gap:6px; white-space:nowrap;}
.vos-t b{font-family:var(--mono); font-weight:500; font-size:20px; line-height:1; letter-spacing:0.02em; color:var(--ink);}
.vos-t small{font-family:var(--mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint);}
.vos-win{width:118px;}
.vos-win > i{display:block; height:4px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden;}
.vos-win > i::after{content:""; display:block; height:100%; width:var(--w,0%); border-radius:999px; background:var(--c,var(--accent));}
.vos-end > span{display:grid; place-items:center; height:36px; padding:0 14px; border-radius:12px; font-family:var(--mono); font-size:10.5px;
  font-weight:600; letter-spacing:0.16em; color:var(--red); background:rgba(217,104,94,0.06); box-shadow:inset 0 0 0 1px rgba(217,104,94,0.45);}
.vos-end > span.x{color:var(--accent2); background:rgba(76,141,255,0.08); box-shadow:inset 0 0 0 1px rgba(76,141,255,0.45);}

.vos-basis{display:flex; align-items:center; gap:10px; padding:1px 12px 2px; min-width:0; overflow:hidden; white-space:nowrap;
  font-family:var(--mono); font-size:10px; letter-spacing:0.13em; text-transform:uppercase; color:var(--faint);}
.vos-basis b{font-weight:500; color:var(--ink); letter-spacing:0.08em;}
.vos-basis .sep{width:1px; height:12px; background:var(--line);}
.vos-basis .sup{margin-left:auto;}
.vos-basis .ok{color:var(--green);}

.vos-map{position:relative; border-radius:16px; background:var(--well); box-shadow:inset 0 0 0 1px var(--line2); padding:46px 58px 16px; overflow:hidden;}
.vos-map .stage-svg{display:block; margin:0 auto; width:100%; max-height:calc(100vh - 430px); max-height:calc(100svh - 430px);
  border:0; border-radius:0; background:transparent; box-shadow:none;}
.vos-toast{position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:2; max-width:calc(100% - 24px);}
.vos-toast > span{justify-self:center; display:inline-flex; align-items:center; gap:9px; padding:7px 13px; border-radius:999px; white-space:nowrap;
  background:rgba(14,16,21,0.94); box-shadow:inset 0 0 0 1px var(--line), 0 8px 24px -10px rgba(0,0,0,0.8);
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.05em; color:var(--muted);}
.vos-toast i{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); flex:none;}
.vos-toast i.g{background:var(--green); box-shadow:0 0 8px var(--green);} .vos-toast i.a{background:var(--amber); box-shadow:0 0 8px var(--amber);}
.vos-toast i.r{background:var(--red); box-shadow:0 0 8px var(--red);}
.vos-toast b{font-weight:500; color:var(--ink);} .vos-toast em{font-style:normal; color:var(--accent2);} .vos-toast em.r{color:var(--red);} .vos-toast em.a{color:var(--amber);}
.vos-lvl{position:absolute; left:10px; top:50%; transform:translateY(-50%); display:grid; gap:3px; padding:4px; border-radius:14px;
  background:rgba(14,16,21,0.92); box-shadow:inset 0 0 0 1px var(--line); z-index:2;}
.vos-lvl small{font-family:var(--mono); font-size:8.5px; letter-spacing:0.16em; color:var(--faint); text-align:center; padding:3px 0 1px;}
.vos-lvl span{display:grid; place-items:center; gap:1px; width:36px; height:32px; border-radius:10px; font-family:var(--mono); font-size:10.5px; color:var(--faint);}
.vos-lvl span.cur{background:rgba(76,141,255,0.14); color:var(--ink); box-shadow:inset 0 0 0 1px rgba(76,141,255,0.5);}
.vos-lvl span svg{width:9px; height:9px;}
.vos-ctl{position:absolute; right:10px; top:50%; transform:translateY(-50%); display:grid; gap:6px; z-index:2;}
.vos-ctl span{display:grid; place-items:center; width:36px; height:34px; border-radius:11px; background:rgba(14,16,21,0.92);
  box-shadow:inset 0 0 0 1px var(--line); color:var(--muted); font-family:var(--mono); font-size:10px;}
.vos-ctl span svg{width:15px; height:15px;}
.vos-ctl .n{color:var(--ink); line-height:1.05; text-align:center;}
.vos-ctl .n::before{content:""; display:block; width:0; height:0; margin:0 auto 1px; border:4px solid transparent; border-bottom:6px solid var(--red); border-top:0;}
.vos-scale{position:absolute; left:14px; bottom:10px; z-index:2; font-family:var(--mono); font-size:9.5px; letter-spacing:0.14em; color:var(--faint);}
.vos-scale::after{content:""; display:block; width:56px; height:5px; margin-top:4px; border:1px solid var(--faint); border-top:0; border-radius:0 0 3px 3px;}

.vos-card{border-radius:16px; background:var(--panel2); box-shadow:inset 0 0 0 1px var(--line);}
.vrow{display:grid; grid-template-columns:minmax(0,1.35fr) repeat(4,minmax(0,1fr)); align-items:center; padding:10px 14px;}
.vc-name{display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0;}
.vc-name b{font-family:var(--disp); font-weight:500; font-size:16px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.vc-chip{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:0.13em; text-transform:uppercase; white-space:nowrap; color:var(--accent2); background:rgba(76,141,255,0.1); box-shadow:inset 0 0 0 1px rgba(76,141,255,0.35);}
.vc-chip i{width:6px; height:6px; border-radius:50%; background:currentColor;}
.vc-chip.low, .vc-chip.amber{color:var(--amber); background:rgba(217,165,79,0.1); box-shadow:inset 0 0 0 1px rgba(217,165,79,0.35);}
.vc-chip.noread{color:var(--red); background:rgba(217,104,94,0.08); box-shadow:inset 0 0 0 1px rgba(217,104,94,0.4);}
.vc-chip.clear{color:var(--muted); background:rgba(255,255,255,0.04); box-shadow:inset 0 0 0 1px var(--line);}
.vc-chip.green{color:var(--green); background:rgba(95,207,132,0.1); box-shadow:inset 0 0 0 1px rgba(95,207,132,0.35);}
.vc-chip.sealed{color:#04140A; background:#74F5AA; box-shadow:none; font-weight:700;}
.vc-m{margin:0; padding-left:12px; border-left:1px solid var(--line2); min-width:0;}
.vc-m dt{font-family:var(--mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); white-space:nowrap;}
.vc-m dd{margin:5px 0 0; font-family:var(--mono); font-size:16px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.vc-m dd small{font-size:10px; color:var(--faint); letter-spacing:0.1em; margin-left:4px; text-transform:uppercase;}
.vc-m dd.ok{color:var(--green);} .vc-m dd.warn{color:var(--amber);} .vc-m dd.bad{color:var(--red);}

.vos-dock{display:flex; gap:6px; align-items:stretch;}
.vos-tabs{flex:1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; padding:4px; border-radius:16px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line);}
.vos-tab{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px 2px 7px; border:0; border-radius:12px;
  background:transparent; color:var(--muted); font-family:var(--body); font-size:12px; font-weight:500; cursor:pointer; white-space:nowrap; transition:background .25s, color .25s;}
.vos-tab svg{width:18px; height:18px;}
.vos-tab:hover{color:var(--ink); background:rgba(255,255,255,0.04);}
.vos-tab.on{background:var(--accent); color:#06101F;}
.vos-log{display:flex; align-items:center; gap:9px; padding:0 14px; border-radius:16px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--body); font-size:13px; font-weight:500; color:var(--ink); white-space:nowrap;}
.vos-log svg{width:16px; height:16px; color:var(--muted);}
.vos-badge > span{display:grid; place-items:center; min-width:24px; height:22px; padding:0 6px; border-radius:999px; background:var(--accent); color:#06101F;
  font-family:var(--mono); font-size:11px; font-weight:600;}

/* narrower OS panels drop the least important chrome first */
@container (max-width:680px){ .vos-addr{display:none;} .vos-map{padding:44px 54px 14px;} }
@container (max-width:600px){ .vos-basis .sup{display:none;} .vos-win{width:96px;} .vos-t b{font-size:18px;} .vc-m dd{font-size:15px;} }
@container (max-width:520px){
  .vos-top, .vos-basis, .vos-lvl, .vos-ctl, .vos-scale, .vos-toast, .vos-log, .vos-end{display:none;}
  .vos-vchip{display:inline-flex;}
  .vos-head{gap:8px; padding:7px 8px 7px 10px;}
  .vos-head .vp.live, .vos-head .vp.amber, .vos-head .vp.sealed{padding:4px 8px; font-size:9px;}
  .vos-sess{font-size:15px;}
  .vos-win{width:64px;} .vos-t b{font-size:16px;} .vos-t small{display:none;}
  .vos-map{padding:6px;}
  .vos-map .vos-rn, .vos-map .vos-side{display:none;}
  .vrow{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); padding:8px 10px;}
  .vrow .vc-m:nth-of-type(4){display:none;}
  .vc-name b{font-size:14px;} .vc-m{padding-left:9px;} .vc-m dt{font-size:8.5px; letter-spacing:0.1em;} .vc-m dd{font-size:13.5px; margin-top:3px;}
  .vc-chip{font-size:8.5px; padding:2px 7px;}
  .vos-tab{font-size:10px; gap:3px; padding:6px 1px 5px;} .vos-tab svg{width:16px; height:16px;}
}
@media (max-height:820px) and (min-width:901px){ .vos-top{display:none;} .stage.vos{top:max(70px, calc(50vh - 310px));} }
@media (max-width:900px){
  .stage.vos{position:static; padding:6px; border-radius:20px;}
  .vos-map .stage-svg{max-height:none;}
}
@media (max-width:900px) and (max-height:700px){ .vos .vos-card{display:none;} }
@media (prefers-reduced-motion:reduce){ .vp.live i{animation:none;} }
.vos .u{text-transform:none; letter-spacing:0.04em;}
@media (max-width:900px){ .story-grid.os{grid-template-columns:1fr;} }
@container (max-width:520px){ .vos .vos-toast, .vos .vos-end{display:none;} }
@container (max-width:520px){ .vos-sess .sl{display:none;} }
@container (max-width:520px){ .vc-m dd{font-size:12.5px; letter-spacing:0;} }

/* ── Vantage OS · review fixes ─────────────────────────── */
/* status pills size to their own text */
.vos .vstk > .vp{justify-self:start;}
/* the address shows on desktop; it only drops on narrow panels */
@container (max-width:680px){ .vos-addr{display:inline;} }
@container (max-width:560px){ .vos-addr{display:none;} }
.vos-basis .pend{color:var(--amber); letter-spacing:0.1em;}
/* room card: the name column never spills into the metrics */
.vc-name{overflow:hidden;}
.vc-chip{max-width:100%; overflow:hidden; text-overflow:ellipsis;}
@container (max-width:520px){ .vrow{grid-template-columns:minmax(0,1.55fr) repeat(3,minmax(0,1fr));} }
@container (max-width:340px){ .vc-name b{font-size:13px;} .vc-m dd{font-size:11.5px;} .vc-m dt{font-size:8px;} .vrow{padding:8px 8px;} .vc-m{padding-left:7px;} }
/* focus zoom: on phones and short screens each overlay step zooms to its subject */
.vos-map .stage-svg{transition:transform .7s cubic-bezier(.2,.7,.2,1); transform-origin:50% 50%;}
@media (max-width:900px), (max-height:820px){
  .vos-home[data-active="vitals"] .vos-map .stage-svg{transform-origin:87% 75%; transform:scale(1.4);}
  .vos-home[data-active="record"] .vos-map .stage-svg{transform-origin:55% 59%; transform:scale(1.35);}
  .vos-rescue[data-active="vitals"] .vos-map .stage-svg{transform-origin:50% 27%; transform:scale(1.3);}
  .vos-rescue[data-active="handoff"] .vos-map .stage-svg{transform-origin:50% 48%; transform:scale(1.3);}
  .vos-le[data-active="authorize"] .vos-map .stage-svg{transform-origin:50% 51.8%; transform:scale(1.5);}
  .vos-le[data-active="seal"] .vos-map .stage-svg{transform-origin:50% 48%; transform:scale(1.3);}
}
@media (prefers-reduced-motion:reduce){ .vos-map .stage-svg{transition:none;} }
/* short desktop screens: give the map the room the chrome no longer needs */
@media (max-height:820px) and (min-width:901px){
  .stage.vos{top:max(84px, calc(50vh - 290px));}
  .vos-map{padding:40px 54px 10px;}
  .vos-map .stage-svg{max-height:calc(100vh - 372px); max-height:calc(100svh - 372px);}
}
@media (max-height:740px) and (min-width:901px){
  .vos .vos-basis{display:none;} .vos .vos-vchip{display:inline-flex;}
  .vos-tab{flex-direction:row; gap:6px; padding:8px 4px;} .vos-tab svg{width:16px; height:16px;}
  .vos-map .stage-svg{max-height:calc(100vh - 318px); max-height:calc(100svh - 318px);}
}
/* phones: the pinned panel clears the nav; landscape and short narrow screens do not pin */
@media (max-width:900px){
  .story-grid.os .stage-col{top:70px;}
  .story .step, .story .steplink{scroll-margin-top:calc(var(--sth, 0px) + 84px);}
}
@media (max-width:900px) and (orientation:landscape), (max-width:900px) and (max-height:600px){
  .story-grid.os .stage-col{position:static;}
}
.stage[data-active="record"] .l7{animation-delay:1.6s;}
.stage[data-active="record"] .seal{animation-delay:1.95s;}
.stage[data-active="record"] .sealpulse{animation-delay:2.45s;}

/* ── Integrates with · review fixes ───────────────────── */
.marquee{-webkit-mask-image:linear-gradient(90deg, transparent, #000 max(5%, 44px), #000 calc(100% - max(5%, 44px)), transparent);
                 mask-image:linear-gradient(90deg, transparent, #000 max(5%, 44px), #000 calc(100% - max(5%, 44px)), transparent);}
.logo:has(img.inv){width:250px;} .logo img.inv{max-width:190px;}
@media (max-width:640px){ .logo:has(img.inv){width:184px;} .logo img.inv{max-width:146px;} }
.band.paused .track{animation-play-state:paused;}
.band-ctl{display:flex; justify-content:flex-end; margin-top:14px;}
.band-toggle{display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 10px; border:0; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,0.03); box-shadow:inset 0 0 0 1px var(--line); color:var(--faint);
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;}
.band-toggle:hover{color:var(--ink);}
.band-toggle svg{width:12px; height:12px;}
.band-toggle .i-play{display:none;}
.band-toggle[aria-pressed="true"] .i-pause{display:none;} .band-toggle[aria-pressed="true"] .i-play{display:inline;}
@media (prefers-reduced-motion:reduce){ .band-ctl{display:none;} }
/* measured: chrome is about 297px tall under 820px and 250px under 740px, pinned at 84px */
@media (max-height:820px) and (min-width:901px){
  .stage.vos{top:84px;}
  .vos-map .stage-svg{max-height:calc(100vh - 392px); max-height:calc(100svh - 392px);}
}
@media (max-height:740px) and (min-width:901px){
  .vos-map .stage-svg{max-height:calc(100vh - 344px); max-height:calc(100svh - 344px);}
  .vos .vos-addr{display:none;}
}
@container (max-width:620px){ .vos .vos-addr{display:none;} }

/* logo rail, final: open and quiet. The only light is on the logo crossing the middle. */
.band .glow, .band-ctl{display:none;}
.band:focus-within .track, .band:focus .track{animation-play-state:paused;}
.band:focus-visible{outline:2px solid rgba(76,141,255,0.5); outline-offset:6px; border-radius:16px;}

/* ═══ Try it · a small, honest peek at a live reading ═══════
   Tap a room, switch a layer. Deliberately minimal chrome: it shows
   what a reading contains without exposing the full product UI. */
main section.peek{padding:clamp(70px,9vw,110px) 0;}
.peek-grid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(28px,5vw,64px); align-items:center;}
.peek-copy h2{max-width:14ch;}
.peek-copy .lede{margin-bottom:22px;}
.pk-legend{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.peek-app{border-radius:24px; background:#0B0D11; padding:8px; min-width:0;
  box-shadow:inset 0 0 0 1px var(--line), 0 40px 90px -34px rgba(0,0,0,0.9), 0 0 70px -34px var(--glow);}
.pk-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:4px 4px 8px 10px;}
.pk-id{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap;}
.pk-id svg{width:15px; height:15px;}
.pk-id .vp{margin-left:2px;}
.pk-layers{display:inline-flex; gap:3px; padding:4px; border-radius:999px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line);}
.pk-layers button{border:0; background:transparent; color:var(--muted); font-family:var(--body); font-size:12.5px; font-weight:500; padding:7px 13px; border-radius:999px; cursor:pointer; transition:background .2s, color .2s;}
.pk-layers button:hover{color:var(--ink);}
.pk-layers button[aria-pressed="true"]{background:var(--accent); color:#06101F;}
.pk-body{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:8px; align-items:stretch;}
.pk-map{position:relative; aspect-ratio:800 / 560; border-radius:16px; background:var(--well); box-shadow:inset 0 0 0 1px var(--line2); overflow:hidden; align-self:start;}
.pk-svg{position:absolute; inset:0; width:100%; height:100%;}
.pk-ly{opacity:0; transition:opacity .45s ease;}
.peek-app[data-layer="presence"] .pk-presence, .peek-app[data-layer="vitals"] .pk-vitals, .peek-app[data-layer="confidence"] .pk-confidence{opacity:1;}
.pk-sel{transition:x .45s cubic-bezier(.2,.7,.2,1), y .45s cubic-bezier(.2,.7,.2,1), width .45s cubic-bezier(.2,.7,.2,1), height .45s cubic-bezier(.2,.7,.2,1), stroke .3s;}
.pk-sel.low{stroke:#D9A54F;} .pk-sel.noread{stroke:#D9685E; stroke-dasharray:10 7;} .pk-sel.clear{stroke:#9BA3AE;}
.pk-room{position:absolute; border:0; padding:0; margin:0; background:transparent; border-radius:12px; cursor:pointer; transition:background .2s;}
.pk-room:hover{background:rgba(255,255,255,0.035);}
.pk-room:focus-visible{outline:2px solid var(--accent); outline-offset:-4px;}
.pk-card{border-radius:16px; background:var(--panel2); box-shadow:inset 0 0 0 1px var(--line); padding:16px 16px 12px; display:flex; flex-direction:column; gap:10px; min-width:0;}
.pk-head{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.pk-head b{font-family:var(--disp); font-weight:500; font-size:19px; color:var(--ink); line-height:1.1;}
.pk-conf{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.pk-conf b{font-family:var(--disp); font-weight:600; font-size:38px; letter-spacing:-0.03em; line-height:1; color:var(--ink);}
.pk-conf span{font-family:var(--mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint);}
.pk-conf small{margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--faint); white-space:nowrap;}
.pk-meter{height:6px; border-radius:999px; background:rgba(255,255,255,0.07); overflow:hidden;}
.pk-meter i{display:block; height:100%; border-radius:999px; background:var(--green); transition:width .6s cubic-bezier(.2,.7,.2,1), background .3s;}
.pk-meter.noread{background:repeating-linear-gradient(45deg, rgba(217,104,94,0.28) 0 4px, transparent 4px 8px);}
.pk-m{margin:0;}
.pk-m div{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; border-top:1px solid var(--line2);}
.pk-m dt{font-family:var(--mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint);}
.pk-m dd{margin:0; font-family:var(--mono); font-size:13px; color:var(--ink); text-align:right;}
.pk-m dd small{color:var(--faint); font-size:10.5px; margin-left:4px;}
.pk-trace{height:44px; border-radius:10px; background:var(--well); box-shadow:inset 0 0 0 1px var(--line2); overflow:hidden;}
.pk-trace[hidden]{display:none;}
.pk-trace svg{display:block; width:100%; height:100%;}
.pk-note{margin:0; font-size:13px; line-height:1.45; color:var(--muted); padding:10px 12px; border-radius:12px; background:rgba(255,255,255,0.035); max-width:none;}
.pk-note.warn{background:rgba(217,165,79,0.08); color:#E6C68F;} .pk-note.bad{background:rgba(217,104,94,0.08); color:#EBA59E;}
.pk-audit{margin-top:auto; display:flex; align-items:center; gap:7px; padding-top:9px; border-top:1px solid var(--line2);
  font-family:var(--mono); font-size:10px; letter-spacing:0.05em; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pk-audit svg{width:11px; height:11px; flex:none;}
.pk-sample{grid-column:2; margin:10px 0 0; font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--dim); text-align:right; max-width:none;}
@media (max-width:980px){ .peek-grid{grid-template-columns:1fr;} .peek-copy h2{max-width:18ch;} .pk-sample{grid-column:1; text-align:left;} }
@media (max-width:640px){
  .pk-body{grid-template-columns:1fr;}
  .pk-names{display:none;}
  .pk-bar{flex-direction:column; align-items:stretch; gap:8px; padding:4px 2px 8px;}
  .pk-id{padding-left:8px;}
  .pk-layers{display:flex;} .pk-layers button{flex:1; padding:8px 6px;}
  .pk-card{padding:14px 14px 10px;}
}

/* Try it · proportions */
.peek-grid{grid-template-columns:minmax(0,3.6fr) minmax(0,8.4fr);}
.pk-body{grid-template-columns:minmax(0,2fr) minmax(0,1fr);}
.pk-map{aspect-ratio:744 / 504;}
.pk-audit{white-space:normal; line-height:1.45; align-items:flex-start;}
.pk-audit svg{margin-top:2px;}
@media (max-width:980px){ .peek-grid{grid-template-columns:1fr;} .pk-body{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);} }
@media (max-width:640px){ .pk-body{grid-template-columns:1fr;} .pk-legend{gap:6px;} .pk-legend .chip{padding:6px 10px 6px 9px; letter-spacing:0.1em; font-size:10px;} }
/* fewer lines: the hero and the logo rail flow into the page without rules */
.cine{border-bottom:0;}
main section.works, main section.works + section{border-top:0; border-image:none;}

/* ═══ Rescue hero · the fire, then the Vantage view ════════
   The scene (a house on fire at night) sits under a second layer:
   the Vantage view, wiped in from left to right, then the rescue plan. */
@property --rv{syntax:'<number>'; inherits:true; initial-value:1;}
.rh{--rv:1; --x0:44%;}
.rh .rh-vx{clip-path:inset(0 calc((1 - var(--rv)) * (100% - var(--x0))) 0 0);}
@keyframes rvin{from{--rv:0;} to{--rv:1;}}
@keyframes rplan{from{opacity:0;} to{opacity:1;}}
@media (prefers-reduced-motion:no-preference){
  .rh:not(.manual){animation:rvin 2.6s cubic-bezier(.45,0,.2,1) 1.2s both;}
  .rh:not(.manual) .rh-plan{animation:rplan 0.9s ease 3.9s both;}
}
.rh.manual{transition:--rv 1.3s cubic-bezier(.45,0,.2,1);}
.rh.manual.scene{--rv:0;}
.rh-scan{position:absolute; top:0; bottom:0; z-index:1; width:2px; margin-left:-1px; pointer-events:none;
  left:calc(var(--x0) + var(--rv) * (100% - var(--x0)));
  background:linear-gradient(transparent 6%, #8DB8FF 22%, #8DB8FF 82%, transparent 96%); box-shadow:0 0 26px 5px rgba(76,141,255,0.55);
  opacity:calc(clamp(0, var(--rv) * 30, 1) * clamp(0, (1 - var(--rv)) * 30, 1));}
.rh-scan i{position:absolute; top:22%; left:12px; font-family:var(--mono); font-style:normal; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:#8DB8FF; white-space:nowrap;}
.rh-toggle{position:absolute; z-index:3; right:max(var(--pad), calc(50% - var(--w) / 2 + var(--pad))); bottom:30px; display:inline-flex; gap:3px; padding:4px;
  border-radius:999px; background:rgba(14,16,21,0.88); backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1px var(--line);}
.rh-toggle button{border:0; background:transparent; color:var(--muted); font-family:var(--body); font-size:13px; font-weight:500; padding:8px 16px; border-radius:999px; cursor:pointer; transition:background .2s, color .2s;}
.rh-toggle button:hover{color:var(--ink);}
.rh-toggle button[aria-pressed="true"]{background:var(--accent); color:#06101F;}
@keyframes flame{0%,100%{transform:scale(1,1) skewX(0deg);} 30%{transform:scale(1.03,1.08) skewX(-2deg);} 60%{transform:scale(0.98,0.93) skewX(2deg);} 80%{transform:scale(1.02,1.04) skewX(-1deg);}}
.rfl{transform-box:fill-box; transform-origin:50% 100%; animation:flame 1.4s ease-in-out infinite both;}
.rfl.f2{animation-duration:1.05s; animation-delay:-0.35s;} .rfl.f3{animation-duration:1.7s; animation-delay:-0.8s;}
@keyframes ember{0%{transform:translate(0,0); opacity:0;} 12%{opacity:1;} 100%{transform:translate(26px,-200px); opacity:0;}}
.ember{transform-box:fill-box; animation:ember 3.6s linear infinite both;}
.ember:nth-child(2n){animation-duration:4.4s; animation-delay:-1.3s;} .ember:nth-child(3n){animation-duration:3s; animation-delay:-2.1s;}
@keyframes smk{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(34px,-30px) scale(1.14);}}
.rsmoke ellipse{transform-box:fill-box; transform-origin:center; animation:smk 16s ease-in-out infinite both;}
.rsmoke ellipse:nth-child(2n){animation-duration:19s; animation-delay:-6s;} .rsmoke ellipse:nth-child(3n){animation-duration:13s; animation-delay:-3s;}
@keyframes lr{0%,49%{opacity:1;} 50%,100%{opacity:0.12;}}
.rlr{animation:lr 1.1s infinite;} .rlb{animation:lr 1.1s -0.55s infinite;}
@media (max-width:900px){
  .rh{--x0:0%;}
  .rh-scan, .rh .rh-panel{display:none;}
  .rh-toggle{left:50%; right:auto; transform:translateX(-50%); top:calc(min(64vw, 470px) - 18px); bottom:auto;}
}

/* ═══ See through the smoke · drag to compare ═══ */
.cmp{position:relative; margin-top:clamp(26px,4vw,40px); aspect-ratio:2 / 1; border-radius:24px; overflow:hidden; background:#060A15;
  box-shadow:inset 0 0 0 1px var(--line), 0 40px 90px -34px rgba(0,0,0,0.9), 0 0 80px -34px var(--glow);}
.cmp svg{position:absolute; inset:0; width:100%; height:100%;}
.cmp-b{clip-path:inset(0 0 0 calc(var(--cmp) * 100%));}
.cmp-line{position:absolute; top:0; bottom:0; z-index:2; left:calc(var(--cmp) * 100%); width:2px; margin-left:-1px; pointer-events:none;
  background:#9CC2FF; box-shadow:0 0 18px 2px rgba(76,141,255,0.55);}
.cmp-line i{position:absolute; top:50%; left:50%; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%; background:#0B0D11;
  box-shadow:inset 0 0 0 2px #9CC2FF, 0 10px 26px -8px rgba(0,0,0,0.85); transition:box-shadow .2s;}
.cmp-line i::before, .cmp-line i::after{content:""; position:absolute; top:50%; margin-top:-6px; border:6px solid transparent;}
.cmp-line i::before{left:9px; border-right:7px solid #9CC2FF; border-left:0;}
.cmp-line i::after{right:9px; border-left:7px solid #9CC2FF; border-right:0;}
.cmp:focus-within .cmp-line i{box-shadow:inset 0 0 0 2px #9CC2FF, 0 0 0 5px rgba(76,141,255,0.35);}
.cmp-range{position:absolute; inset:0; z-index:3; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; touch-action:pan-y;}
.cmp-tag{position:absolute; top:16px; z-index:2; padding:6px 12px; border-radius:999px; pointer-events:none;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; background:rgba(8,9,12,0.78); box-shadow:inset 0 0 0 1px var(--line); color:var(--muted);}
.cmp-tag.l{left:16px;} .cmp-tag.r{right:16px; color:#9CC2FF;}
@media (max-width:700px){ .cmp{aspect-ratio:3 / 2; border-radius:20px;} .cmp-line i{width:40px; height:40px; margin:-20px 0 0 -20px;} }
@media (max-width:900px){
  .rh-toggle{left:auto; right:14px; transform:none; top:calc(min(64vw, 470px) - 44px);}
  .rh-toggle button{font-size:12px; padding:6px 11px; white-space:nowrap;}
}

/* ── Briefing page · professional form, mission tiles ─── */
.form label, .form fieldset > legend{font-family:var(--body); font-size:13.5px; font-weight:500; letter-spacing:0; text-transform:none; color:#C4CAD3;}
.form label{gap:8px;}
.form .opt{font-weight:400; color:var(--faint);}
.fhead{font-family:var(--disp); font-weight:600; font-size:clamp(22px,2.2vw,26px); letter-spacing:-0.015em; margin:0 0 6px;}
.fsub{margin:0 0 26px; font-size:14px; color:var(--faint);}
.shead{font-family:var(--disp); font-weight:600; font-size:clamp(26px,2.8vw,34px); letter-spacing:-0.02em; line-height:1.12; margin:0 0 6px; max-width:18ch;}
.mtiles{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.mt{display:block !important; position:relative; cursor:pointer;}
.mt input{position:absolute; opacity:0; width:1px; height:1px;}
.mt > span{position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:3px; align-items:center; height:100%;
  padding:16px 44px 16px 16px; border-radius:16px; background:var(--well); box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .2s, background .2s, transform .2s;}
.mt svg{grid-row:1 / span 2; width:40px; height:40px; padding:9px; border-radius:12px; color:var(--muted);
  background:rgba(255,255,255,0.04); box-shadow:inset 0 0 0 1px var(--line); transition:all .2s;}
.mt b{font-family:var(--disp); font-weight:600; font-size:16px; color:var(--ink); letter-spacing:-0.005em;}
.mt small{font-size:12.5px; line-height:1.4; color:var(--faint); font-weight:400;}
.mt > span::after{content:""; position:absolute; top:14px; right:14px; width:20px; height:20px; border-radius:50%;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.22); transition:all .2s;}
.mt:hover > span{background:#101319; box-shadow:inset 0 0 0 1px rgba(107,161,255,0.45); transform:translateY(-1px);}
.mt:hover svg{color:var(--accent2);}
.mt input:checked + span{background:linear-gradient(180deg, rgba(76,141,255,0.16), rgba(76,141,255,0.07)); box-shadow:inset 0 0 0 1.5px var(--accent), 0 10px 30px -14px rgba(76,141,255,0.6);}
.mt input:checked + span svg{color:#06101F; background:var(--accent); box-shadow:none;}
.mt input:checked + span::after{box-shadow:none; background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4l2.9 2.9 5.9-6.2' fill='none' stroke='%2306101F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;}
.mt input:focus-visible + span{outline:2px solid var(--accent); outline-offset:3px;}
.mt.flash > span{animation:mtflash 1.1s ease;}
@keyframes mtflash{0%{box-shadow:inset 0 0 0 1.5px var(--accent), 0 0 0 0 rgba(76,141,255,0.55);} 100%{box-shadow:inset 0 0 0 1.5px var(--accent), 0 0 0 14px rgba(76,141,255,0);}}
@media (max-width:1100px) and (min-width:901px){ .mtiles{grid-template-columns:1fr;} }
@media (max-width:520px){ .mtiles{grid-template-columns:1fr;} .mt > span{padding:14px 44px 14px 14px;} }

.mpick{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:34px;}
.mbtn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px 12px 13px; border-radius:16px;
  font-family:var(--body); font-size:15px; font-weight:500; color:var(--ink); text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)), rgba(14,16,21,0.8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12), 0 12px 30px -18px rgba(0,0,0,0.9); backdrop-filter:blur(6px);
  transition:transform .2s, box-shadow .2s, background .2s;}
.mbtn svg{width:34px; height:34px; padding:7px; border-radius:10px; color:var(--accent2); background:rgba(76,141,255,0.12); box-shadow:inset 0 0 0 1px rgba(76,141,255,0.3); transition:all .2s;}
.mbtn i{font-style:normal; color:var(--faint); margin-left:2px; transition:transform .2s, color .2s;}
.mbtn:hover{transform:translateY(-2px); background:linear-gradient(180deg, rgba(76,141,255,0.16), rgba(76,141,255,0.06)), rgba(14,16,21,0.9);
  box-shadow:inset 0 0 0 1px rgba(107,161,255,0.6), 0 16px 34px -16px rgba(76,141,255,0.55);}
.mbtn:hover svg{color:#06101F; background:var(--accent);}
.mbtn:hover i{color:var(--ink); transform:translateX(3px);}
.mbtn:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
@media (max-width:640px){ .mpick{display:grid; grid-template-columns:1fr 1fr; gap:8px;} .mbtn{font-size:14px; padding:10px 10px 10px 10px; gap:9px;}
  .mbtn svg{width:30px; height:30px; padding:6px;} .mbtn i{margin-left:auto;} }
@media (max-width:380px){ .mpick{grid-template-columns:1fr;} }

/* ── Home hero · the pledge line ───────────────────────── */
.oath{margin:18px auto 0; display:flex; align-items:center; justify-content:center; gap:14px;
  font-family:var(--disp); font-weight:600; font-size:clamp(17px,1.9vw,21px); letter-spacing:-0.01em; color:var(--ink);}
.oath::before, .oath::after{content:""; width:clamp(24px,5vw,56px); height:1px; flex:none;}
.oath::before{background:linear-gradient(90deg, transparent, rgba(107,161,255,0.7));}
.oath::after{background:linear-gradient(90deg, rgba(107,161,255,0.7), transparent);}
.oath span{background:linear-gradient(90deg, #FFFFFF, #B9D1FF); -webkit-background-clip:text; background-clip:text; color:transparent;}
@media (max-width:520px){ .oath{font-size:16.5px; gap:10px;} .oath::before, .oath::after{width:18px;} }

/* ── Capabilities · the closed door, real-world scenes ─── */
.cph .ch-ans .ca{opacity:1;}
.cph .ch-read{opacity:1;}
@media (prefers-reduced-motion:no-preference){
  .cph .ch-ans .ca{animation:caIn .7s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(0.9s + var(--i) * 0.55s);}
  .cph .ch-read{animation:chRead 1.4s ease 0.3s both;}
  .cph .ch-ans > text, .cph .ch-ans > path{animation:rplan .8s ease 0.5s both;}
}
@keyframes caIn{from{opacity:0; transform:translateX(-14px);} to{opacity:1; transform:none;}}
@keyframes chRead{0%{opacity:0;} 50%{opacity:1;} 100%{opacity:0.8;}}
.scenebox{padding:12px;}
.scene .tg{transform-box:fill-box; transform-origin:center;}
@media (max-width:600px){ .scene .tg{transform:scale(1.5);} .scenebox{padding:8px;} }
.scene .lying .brth, .tv .brth{transform-box:fill-box; transform-origin:50% 100%;}
@media (prefers-reduced-motion:no-preference){
  .scene .lying .brth{animation:chest 4.3s ease-in-out infinite;}
  .scene .bglow{animation:halo 4.3s ease-in-out infinite;}
  .tv .tsmk{animation:smk 9s ease-in-out infinite;}
}
@keyframes chest{0%,100%{transform:scaleY(1);} 45%{transform:scaleY(1.16);}}
.where .tile .tv{height:176px;}
.where .tile h3{margin-top:2px;}
.where .tile .tv{height:180px; -webkit-mask-image:linear-gradient(#000 86%, transparent); mask-image:linear-gradient(#000 86%, transparent);}
@media (max-width:900px){ .cph .ch-ans{transform-box:fill-box; transform-origin:0 50%; transform:scale(1.22);} }
.mt > span{grid-template-columns:1fr; row-gap:4px; align-content:start; align-items:start; padding:16px 16px 18px;}
.mt svg{grid-row:auto; margin-bottom:10px;}
.mt > span::after{top:16px; right:16px;}
@media (max-width:1100px) and (min-width:901px){ .mtiles{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .mt > span{grid-template-columns:auto 1fr; column-gap:14px; align-items:center; padding:14px 46px 14px 14px;}
  .mt svg{grid-row:1 / span 2; margin-bottom:0;} .mt > span::after{top:50%; margin-top:-10px;} }
@media (max-width:640px){ .mpick{grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto;} .mbtn{text-align:left; font-size:15px; padding:10px 14px 10px 10px;} }
@media (max-width:520px){ .oath{font-size:15.5px; letter-spacing:-0.012em; white-space:nowrap;} .oath::before, .oath::after{display:none;} }
@media (max-width:360px){ .oath{font-size:14px;} }

/* ── Governance · formal: cases, control register, emergency notice ── */
.cases{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:clamp(26px,4vw,44px);}
.case{border-radius:var(--r); padding:clamp(24px,3vw,36px); background:linear-gradient(180deg, rgba(76,141,255,0.06), rgba(76,141,255,0.01)), var(--panel);
  box-shadow:inset 0 0 0 1px rgba(107,161,255,0.22);}
.case.amber{background:linear-gradient(180deg, rgba(217,165,79,0.06), rgba(217,165,79,0.01)), var(--panel); box-shadow:inset 0 0 0 1px rgba(217,165,79,0.24);}
.case header{padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line2);}
.case .cn{font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent2);}
.case.amber .cn{color:var(--amber);}
.case h3{font-family:Georgia, 'Times New Roman', serif; font-weight:400; font-size:clamp(26px,2.6vw,32px); letter-spacing:-0.005em; margin:12px 0 6px;}
.case .cite{margin:0; font-family:Georgia, 'Times New Roman', serif; font-size:16px; color:var(--muted);}
.case dl{margin:0;} .case dt{font-family:var(--mono); font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--faint); margin:0 0 8px;}
.case dd{margin:0 0 22px; font-size:15.5px; line-height:1.65; color:#C4CAD3;} .case dd:last-child{margin-bottom:0;}
.case dd .ticks{margin-top:4px;}
.case.amber .ticks li::before{filter:hue-rotate(185deg) saturate(1.3);}
@media (max-width:900px){ .cases{grid-template-columns:1fr;} }
.reg{list-style:none; margin:clamp(26px,4vw,44px) 0 0; padding:0; border-radius:var(--r); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line); background:var(--panel);}
.reg li{display:grid; grid-template-columns:64px 1fr auto; gap:20px; align-items:center; padding:20px 26px; border-top:1px solid var(--line2);}
.reg li:first-child{border-top:0;}
.reg b{font-family:var(--mono); font-weight:500; font-size:20px; color:var(--accent2);}
.reg h4{font-family:var(--disp); font-weight:600; font-size:17px; margin:0 0 4px;}
.reg p{margin:0; font-size:14.5px; line-height:1.55; color:var(--muted); max-width:72ch;}
.enf{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:#74F5AA;
  padding:6px 11px; border-radius:999px; background:rgba(116,245,170,0.07); box-shadow:inset 0 0 0 1px rgba(116,245,170,0.3); white-space:nowrap;}
.enf::before{content:""; width:12px; height:12px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2.5' y='5.2' width='7' height='5' rx='1.2' fill='none' stroke='%2374F5AA' stroke-width='1.2'/%3E%3Cpath d='M4 5.2V3.8a2 2 0 0 1 4 0v1.4' fill='none' stroke='%2374F5AA' stroke-width='1.2'/%3E%3C/svg%3E") center/12px no-repeat;}
@media (max-width:640px){ .reg li{grid-template-columns:40px 1fr; gap:6px 14px; padding:18px;} .reg b{font-size:16px;} .reg .enf{grid-column:2; justify-self:start; margin-top:6px;} }
.enote{display:grid; gap:16px; padding:clamp(18px,3vw,30px); border-radius:var(--r); background:radial-gradient(80% 60% at 50% 0%, rgba(217,165,79,0.10), transparent), var(--panel); box-shadow:inset 0 0 0 1px var(--line);}
.en-card{border-radius:20px; padding:18px 20px; background:rgba(28,31,38,0.92); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1), 0 24px 50px -24px rgba(0,0,0,0.9);}
.en-top{display:flex; justify-content:space-between; font-size:12.5px; color:var(--faint); margin-bottom:10px;}
.en-app{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--muted);}
.en-app i{width:18px; height:18px; border-radius:5px; background:var(--amber);}
.en-card b{display:block; font-family:var(--disp); font-weight:600; font-size:16.5px; color:var(--ink); margin-bottom:6px;}
.en-card p{margin:0; font-size:14px; line-height:1.55; color:#C4CAD3;}
.en-meta{display:flex; justify-content:space-between; margin-top:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--amber);}
.en-log{list-style:none; margin:0; padding:4px 6px; display:grid; gap:10px; font-family:var(--mono); font-size:12px; color:var(--muted);}
.en-log span{color:var(--faint); margin-right:14px;} .en-log em{font-style:normal; color:#74F5AA;} .en-log em.amber{color:var(--amber);}
@media (prefers-reduced-motion:no-preference){ .enote.in .en-card{animation:enIn .7s cubic-bezier(.2,.7,.2,1) .2s both;} }
@keyframes enIn{from{opacity:0; transform:translateY(-14px) scale(0.98);} to{opacity:1; transform:none;}}

/* ── Statement variants (replacing repeated scroll-lit text) ── */
.amend-q{margin:0 auto; max-width:900px; text-align:center; padding:clamp(28px,5vw,60px) clamp(20px,4vw,56px); border-radius:28px;
  background:radial-gradient(70% 90% at 50% 0%, rgba(76,141,255,0.08), transparent), var(--panel); box-shadow:inset 0 0 0 1px var(--line);}
.amend-q blockquote{margin:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(22px,2.9vw,34px); line-height:1.4; color:var(--ink);}
.amend-q figcaption{margin:26px auto 0; max-width:52ch; color:var(--muted); font-size:16px;}
.ss{display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:clamp(12px,2vw,24px);}
.ss > div{border-radius:24px; padding:clamp(24px,4vw,44px);}
.ss-a{background:linear-gradient(180deg,#1A1511,#100D0B); box-shadow:inset 0 0 0 1px rgba(255,210,160,0.12);}
.ss-b{background:linear-gradient(180deg,rgba(76,141,255,0.18),rgba(76,141,255,0.05)); box-shadow:inset 0 0 0 1px rgba(107,161,255,0.45);}
.ss-k{font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint);}
.ss-b .ss-k{color:var(--accent2);}
.ss p{margin:14px 0 0; font-family:var(--disp); font-weight:600; font-size:clamp(28px,4vw,48px); letter-spacing:-0.03em; line-height:1.05; color:var(--ink);}
.ss-a p{color:#CDBBA2;}
.ss-arrow{align-self:center; font-size:28px; color:var(--accent2);}
@media (max-width:700px){ .ss{grid-template-columns:1fr;} .ss-arrow{justify-self:center; transform:rotate(90deg);} }
.rc-grid{display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; margin-top:clamp(26px,4vw,44px);}
.rc{border-radius:24px; padding:clamp(24px,3.5vw,38px); background:var(--panel); height:100%;}
.rc.bad{box-shadow:inset 0 0 0 1px rgba(217,104,94,0.4); background:linear-gradient(180deg,rgba(217,104,94,0.10),transparent),var(--panel);}
.rc.ok{box-shadow:inset 0 0 0 1px rgba(217,165,79,0.4); background:linear-gradient(180deg,rgba(217,165,79,0.10),transparent),var(--panel);}
.rc-k{font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;}
.rc.bad .rc-k{color:var(--red);} .rc.ok .rc-k{color:var(--amber);}
.rc b{display:block; margin:14px 0 10px; font-family:var(--disp); font-weight:600; font-size:clamp(22px,2.5vw,28px); letter-spacing:-0.02em; line-height:1.2;}
.rc p{margin:0; color:var(--muted);}
.rc-vs{font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint);}
@media (max-width:760px){ .rc-grid{grid-template-columns:1fr;} .rc-vs{justify-self:center;} }
.ed{display:grid; grid-template-columns:5fr 7fr; gap:clamp(28px,6vw,90px); padding-top:clamp(24px,3vw,36px); border-top:2px solid var(--accent);}
.ed h2{margin:0;}
.ed-body p{font-size:clamp(18px,1.8vw,21px); line-height:1.6; color:#C4CAD3; margin:0 0 18px;}
@media (max-width:800px){ .ed{grid-template-columns:1fr;} }
.bt{list-style:none; margin:clamp(22px,3vw,34px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:b;}
.bt li{position:relative; padding:28px 26px; border-radius:var(--r); background:var(--panel); box-shadow:inset 0 0 0 1px var(--line);}
.bt li:last-child{box-shadow:inset 0 0 0 1px rgba(107,161,255,0.45); background:linear-gradient(180deg,rgba(76,141,255,0.10),transparent),var(--panel);}
.bt span{font-family:var(--mono); font-size:12px; color:var(--accent2);}
.bt b{display:block; margin:14px 0 8px; font-family:var(--disp); font-weight:600; font-size:clamp(22px,2.3vw,27px); letter-spacing:-0.02em;}
.bt p{margin:0; color:var(--muted); font-size:15px;}
.bt li:not(:last-child)::after{content:"\2192"; position:absolute; right:-14px; top:50%; transform:translateY(-50%); z-index:1; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-size:13px; color:var(--accent2); background:var(--bg); box-shadow:inset 0 0 0 1px var(--line);}
@media (max-width:800px){ .bt{grid-template-columns:1fr;} .bt li:not(:last-child)::after{right:auto; left:50%; top:auto; bottom:-14px; transform:translateX(-50%) rotate(90deg);} }
.amend-q .eyebrow{max-width:none; margin-bottom:24px;}

/* ── Mission colors: each mission lights up in its own color ── */
.m-fire{--mc:#FF7A45; --mcs:rgba(255,122,69,0.16);}
.m-le{--mc:#4C8DFF; --mcs:rgba(76,141,255,0.16);}
.m-em{--mc:#E3A84A; --mcs:rgba(227,168,74,0.16);}
.m-fac{--mc:#4FC98A; --mcs:rgba(79,201,138,0.16);}
.m-fed{--mc:#A98BFF; --mcs:rgba(169,139,255,0.16);}
.mt:hover > span{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mc) 55%, transparent);}
.mt:hover svg{color:var(--mc);}
.mt input:checked + span{background:linear-gradient(180deg, var(--mcs), color-mix(in srgb, var(--mc) 5%, transparent));
  box-shadow:inset 0 0 0 1.5px var(--mc), 0 10px 30px -14px color-mix(in srgb, var(--mc) 70%, transparent);}
.mt input:checked + span svg{background:var(--mc); color:#0A0B0E;}
.mt input:checked + span::after{background-color:var(--mc);}
.mt input:focus-visible + span{outline-color:var(--mc);}
.mt.flash > span{animation:none;}
.mt.flash input:checked + span{animation:mtflash2 1.1s ease;}
@keyframes mtflash2{0%{box-shadow:inset 0 0 0 1.5px var(--mc), 0 0 0 0 color-mix(in srgb, var(--mc) 60%, transparent);} 100%{box-shadow:inset 0 0 0 1.5px var(--mc), 0 0 0 14px transparent;}}
.mbtn svg{color:var(--mc); background:var(--mcs); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mc) 35%, transparent);}
.mbtn:hover{background:linear-gradient(180deg, var(--mcs), color-mix(in srgb, var(--mc) 5%, transparent)), rgba(14,16,21,0.9);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mc) 65%, transparent), 0 16px 34px -16px color-mix(in srgb, var(--mc) 60%, transparent);}
.mbtn:hover svg{background:var(--mc); color:#0A0B0E;}
/* five missions: equal rows, federal spans the full width */
.mtiles{grid-auto-rows:1fr;}
.mt.m-fed{grid-column:1 / -1;}
.mt.m-fed > span{grid-template-columns:auto 1fr; column-gap:14px; align-items:center;}
.mt.m-fed svg{grid-row:1 / span 2; margin-bottom:0;}
@media (max-width:520px){ .mtiles{grid-auto-rows:auto;} }
.form select{cursor:pointer;} .form select:invalid{color:var(--dim);} .form select option{color:var(--ink); background:#13161C;}
.mtiles{grid-auto-rows:auto;}
.mt.m-fed > span{padding:16px 46px 16px 16px;}

/* ══ Vantage brand pass (29 Sep): logo, header, buttons, cards ══ */
/* logo */
.brand{gap:11px;}
.bmark{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; flex:none;
  background:radial-gradient(80% 80% at 50% 0%, rgba(76,141,255,0.22), transparent 70%), linear-gradient(180deg,#1A1D24,#0E1014);
  box-shadow:inset 0 0 0 1px rgba(107,161,255,0.28), inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 20px -8px rgba(76,141,255,0.45), 0 4px 10px rgba(0,0,0,0.6);}
.bmark img{width:27px; height:auto; filter:drop-shadow(0 0 6px rgba(76,141,255,0.55));}
.btype{height:13px; width:auto; display:block;}
.brand:hover .bmark{box-shadow:inset 0 0 0 1px rgba(107,161,255,0.5), inset 0 1px 0 rgba(255,255,255,0.1), 0 10px 26px -8px rgba(76,141,255,0.7), 0 4px 10px rgba(0,0,0,0.6);}
.brand.lgb .bmark{width:48px; height:48px; border-radius:14px;} .brand.lgb .bmark img{width:32px;} .brand.lgb .btype{height:15px;}
.appmark{width:16px; height:auto; flex:none; filter:drop-shadow(0 0 4px rgba(76,141,255,0.5));}
.ecmark{display:block; width:clamp(84px,9vw,120px); height:auto; margin:0 auto 26px; filter:drop-shadow(0 0 28px rgba(76,141,255,0.45)) drop-shadow(0 18px 30px rgba(0,0,0,0.8));}
.endcap .rings .core{display:none;}

/* header, in the style the owner chose: brand left, links and actions right */
nav.top{background:linear-gradient(180deg, rgba(20,22,27,0.94), rgba(10,11,14,0.9)); backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 1px 0 rgba(255,255,255,0.06), 0 18px 40px -24px rgba(0,0,0,0.95);}
.navin{padding:12px var(--pad); gap:14px;}
.navlinks{margin:0 10px 0 auto; gap:4px; font-size:14.5px; font-weight:500; color:#C9CFD8;}
.navlinks a{padding:8px 12px; border-radius:10px; transition:background .15s, color .15s;}
.navlinks a:hover{color:#fff; background:rgba(255,255,255,0.05);}
.navlinks a[aria-current="page"]{color:#fff; background:rgba(76,141,255,0.12); box-shadow:inset 0 0 0 1px rgba(107,161,255,0.25);}
.navright{gap:10px;}
@media (max-width:1180px){ .navlinks a{padding:8px 9px;} .navlinks{font-size:14px; gap:0;} }
@media (max-width:1060px){ .navright .btn.ghost{display:none;} }

/* buttons: metallic Vantage blue, deep shadows */
.btn{border-radius:12px; padding:10px 18px; font-weight:600; color:#fff; letter-spacing:0.005em; border:1px solid rgba(150,190,255,0.55);
  background:linear-gradient(180deg,#6BA3FF 0%,#3F7DEB 55%,#2E62CF 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -2px 6px rgba(10,30,90,0.35), 0 14px 32px -10px rgba(52,120,255,0.75), 0 4px 10px rgba(0,0,0,0.55);
  transition:transform .18s, box-shadow .18s, filter .18s; text-shadow:0 1px 1px rgba(10,30,80,0.45);}
.btn:hover{background:linear-gradient(180deg,#7DB0FF 0%,#4B88F2 55%,#3369D6 100%); transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -2px 6px rgba(10,30,90,0.3), 0 20px 40px -10px rgba(52,120,255,0.9), 0 6px 14px rgba(0,0,0,0.6);}
.btn:active{transform:translateY(0); filter:brightness(0.95);}
.btn.ghost{color:#E9ECEF; text-shadow:none; border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(180deg,#1B1E25,#111318);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 14px 30px -12px rgba(0,0,0,0.95), 0 3px 8px rgba(0,0,0,0.5);}
.btn.ghost:hover{background:linear-gradient(180deg,#22262F,#161920); border-color:rgba(107,161,255,0.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.09), 0 18px 36px -12px rgba(52,120,255,0.35), 0 4px 10px rgba(0,0,0,0.55);}
.btn.lg{padding:14px 26px; font-size:15px; border-radius:14px;}
.msheet .btn{color:#fff;} .msheet .btn.ghost{color:#E9ECEF;}
.msheet .btn:hover{background:linear-gradient(180deg,#7DB0FF 0%,#4B88F2 55%,#3369D6 100%);}
.form .send .btn{border:1px solid rgba(150,190,255,0.55);}

/* cards: dark, a colored glow in the top-right corner, a lit corner edge, deep shadow */
.tile{--tc:#4C8DFF; border-radius:24px; padding:28px;
  background:radial-gradient(90% 75% at 100% 0%, color-mix(in srgb, var(--tc) 26%, transparent), transparent 62%), linear-gradient(180deg,#13151A,#0C0D11);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07), 0 34px 60px -32px rgba(0,0,0,0.95), 0 14px 26px -14px rgba(0,0,0,0.8);
  transition:transform .25s, box-shadow .25s;}
.tile::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.2px; pointer-events:none; z-index:1;
  background:radial-gradient(70% 60% at 100% 0%, var(--tc), transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0.85; transition:opacity .25s;}
.tile:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.09), 0 40px 70px -30px rgba(0,0,0,0.95), 0 20px 40px -24px color-mix(in srgb, var(--tc) 45%, transparent);}
.tile:hover::before{opacity:1;}
.tiles > .tile:nth-child(4n+2){--tc:#1FC8A6;}
.tiles > .tile:nth-child(4n+3){--tc:#E3A84A;}
.tiles > .tile:nth-child(4n+4){--tc:#E0705F;}
.tile:has(.ico[style*="217,104,94"]){--tc:#E0705F;}
.tile:has(.ico[style*="95,207,132"]){--tc:#4FC98A;}
.tile:has(.ico[style*="217,165,79"]){--tc:#E3A84A;}
.tile .kicker{color:color-mix(in srgb, var(--tc) 70%, #9BA3AE);}
.tile .tv{margin:-28px -28px 24px;}
/* icons in soft rings */
.tile .ico{width:48px; height:48px; border-radius:50%; background:linear-gradient(180deg,#1B1E25,#101216) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1), 0 0 0 7px rgba(255,255,255,0.025), 0 0 0 8px rgba(255,255,255,0.06), 0 10px 24px -8px color-mix(in srgb, var(--tc) 50%, transparent) !important; margin:8px 0 24px 8px;}
.tile .ico svg{width:21px; height:21px;}

/* portal */
.portal{position:relative; overflow:hidden; min-height:calc(100vh - 64px); display:grid; place-items:center; padding:clamp(60px,9vw,110px) 0;}
.portal .rings{position:absolute; left:50%; top:46%; width:min(1000px,160vw); aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none;}
.portal .rings i{position:absolute; border-radius:50%; inset:var(--in); box-shadow:inset 0 0 0 1px rgba(76,141,255,var(--o,0.14));}
.portal .rings .tk{inset:4%; box-shadow:inset 0 0 0 1px rgba(76,141,255,0.08);} .portal .rings .dash{inset:13%; box-shadow:none; border:1px dashed rgba(76,141,255,0.2); animation:spin 140s linear infinite;}
.pcard{position:relative; max-width:620px; margin:0 auto; text-align:center; padding:clamp(30px,5vw,54px); border-radius:30px;
  background:radial-gradient(80% 50% at 50% 0%, rgba(76,141,255,0.16), transparent 70%), linear-gradient(180deg,#14161C,#0C0D11);
  box-shadow:inset 0 0 0 1px rgba(107,161,255,0.22), 0 50px 100px -40px rgba(0,0,0,0.95), 0 30px 80px -50px rgba(76,141,255,0.5);}
.pmark{width:96px; height:auto; margin:0 auto 18px; display:block; filter:drop-shadow(0 0 26px rgba(76,141,255,0.5));}
.ptype{height:20px; width:auto; margin:0 auto; display:block;}
.pcard h1{font-size:clamp(30px,4.2vw,44px); font-weight:600; letter-spacing:-0.025em; margin:0 auto 14px; max-width:16ch;}
.pcard .sub{margin:0 auto 22px; font-size:16px;}
.pcard .ticks{text-align:left; max-width:380px; margin:0 auto 30px;}
.pcard .ctas{justify-content:center;}

/* procurement bento */
.bento{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:clamp(26px,4vw,44px);}
.bx{--tc:#4C8DFF; position:relative; border-radius:24px; padding:28px; overflow:hidden;
  background:radial-gradient(90% 75% at 100% 0%, color-mix(in srgb, var(--tc) 24%, transparent), transparent 62%), linear-gradient(180deg,#13151A,#0C0D11);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07), 0 34px 60px -32px rgba(0,0,0,0.95), 0 14px 26px -14px rgba(0,0,0,0.8); transition:transform .25s, box-shadow .25s;}
.bx::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.2px; pointer-events:none;
  background:radial-gradient(70% 60% at 100% 0%, var(--tc), transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0.85;}
.bx:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.09), 0 40px 70px -30px rgba(0,0,0,0.95), 0 20px 40px -24px color-mix(in srgb, var(--tc) 45%, transparent);}
.bx.wide{grid-column:span 2;}
.bx .kicker{font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:color-mix(in srgb, var(--tc) 70%, #9BA3AE); margin:0 0 10px;}
.bx h3{font-family:var(--disp); font-weight:600; font-size:22px; letter-spacing:-0.015em; margin:0 0 10px;}
.bx p{margin:0; font-size:14.5px; line-height:1.6; color:var(--muted);}
.bx-vis{margin:-6px -6px 18px; border-radius:16px; background:rgba(0,0,0,0.25); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05);}
.bx-vis svg{display:block; width:100%; height:auto;}
.bx-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:center; height:100%;}
.gtags{list-style:none; margin:0; padding:0; display:grid; gap:12px; justify-items:end;}
.gtags li{display:inline-flex; align-items:center; gap:10px; padding:9px 14px; border-radius:12px; font-size:13.5px; font-weight:500; color:#E9ECEF;
  background:linear-gradient(180deg,#1B1E25,#121418); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1), 0 12px 24px -12px rgba(0,0,0,0.9);}
.gtags li:nth-child(2){margin-right:36px;} .gtags li:nth-child(3){margin-right:12px;}
.gtags i{width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c);}
.bx-ring{display:flex; align-items:center; justify-content:center; gap:26px;}
.bx-ring .ring{display:grid; place-items:center; width:112px; height:112px; border-radius:50%; flex:none;
  background:radial-gradient(circle, rgba(169,139,255,0.14), transparent 70%), linear-gradient(180deg,#1B1E25,#101216);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1), 0 0 0 12px rgba(255,255,255,0.02), 0 0 0 13px rgba(255,255,255,0.06), 0 0 0 28px rgba(255,255,255,0.015), 0 0 0 29px rgba(255,255,255,0.04), 0 20px 40px -12px rgba(169,139,255,0.4);}
.bx-ring .ring svg{width:48px; height:48px;}
.rchk{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#C9CFD8;}
.rchk li{display:flex; align-items:center; gap:9px;}
.rchk li::before{content:"\2713"; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; font-size:10px; color:#0A0B0E; background:#A98BFF;}
.bx .sig{stroke-dasharray:420; stroke-dashoffset:420;}
.bx.in .sig{animation:draw 2.2s ease .4s forwards;}
@media (prefers-reduced-motion:reduce){ .bx .sig{stroke-dashoffset:0;} }
@media (max-width:980px){ .bento{grid-template-columns:1fr 1fr;} .bx.wide{grid-column:span 2;} }
@media (max-width:640px){ .bento{grid-template-columns:1fr;} .bx.wide{grid-column:auto;} .bx-split{grid-template-columns:1fr;} .gtags{justify-items:start;} .gtags li:nth-child(n){margin-right:0;} }

/* briefing form: sending, errors, confirmation */
.hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form{position:relative;}
.form .btn{position:relative;}
.form .btn .bs{display:none; position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.35); border-top-color:#fff; animation:spin .8s linear infinite;}
.form.sending .btn .bl{visibility:hidden;} .form.sending .btn .bs{display:block;}
.form .btn:disabled{cursor:progress; filter:saturate(0.8);}
.ferr{margin:0; padding:12px 16px; border-radius:12px; font-size:14px; color:#FFB3A8; background:rgba(224,112,95,0.08); box-shadow:inset 0 0 0 1px rgba(224,112,95,0.35);}
.form :user-invalid{box-shadow:inset 0 0 0 1px rgba(224,112,95,0.7);}
.fdone{outline:none; text-align:left; animation:enIn .6s cubic-bezier(.2,.7,.2,1) both;}
.fd-ico{display:grid; place-items:center; width:64px; height:64px; border-radius:50%; margin-bottom:22px; color:#0A0B0E;
  background:linear-gradient(180deg,#7BE39E,#3FB86B); box-shadow:0 0 0 8px rgba(95,207,132,0.08), 0 0 0 9px rgba(95,207,132,0.2), 0 18px 40px -12px rgba(95,207,132,0.6);}
.fd-ico svg{width:32px; height:32px;}
.fdone > p{color:var(--muted); font-size:15.5px; line-height:1.6; margin:10px 0 0;}
.fd-ref{margin:24px 0; padding:16px 20px; border-radius:16px; background:var(--well); box-shadow:inset 0 0 0 1px rgba(107,161,255,0.3);}
.fd-ref dt{font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint);}
.fd-ref dd{margin:6px 0 0; font-family:var(--mono); font-size:22px; letter-spacing:0.08em; color:var(--ink);}
.fd-next{margin:0; padding-left:20px; display:grid; gap:10px; color:var(--muted); font-size:14.5px; line-height:1.55;}
.fd-next b{color:var(--ink); font-weight:600;}
.fdone .fd-note{font-size:13px; color:var(--faint); margin-top:20px;}
[hidden]{display:none !important;}
.formcard.is-done > .fhead, .formcard.is-done > .fsub{display:none;}