/* Self-hosted fonts (CSP-clean; same families the Resident self-hosts).
   Weight RANGES map the design's many weights onto the available static
   woff2 instances — nearest instance wins (Fraunces 300/340 -> Regular,
   520/560 -> SemiBold, 700+ -> Black). */
@font-face{font-family:'Fraunces';src:url(/static/fonts/Fraunces-Regular.woff2) format('woff2');font-weight:100 500;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(/static/fonts/Fraunces-SemiBold.woff2) format('woff2');font-weight:501 700;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(/static/fonts/Fraunces-Black.woff2) format('woff2');font-weight:701 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(/static/fonts/Fraunces-Italic.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url(/static/fonts/SourceSerif4-Regular.woff2) format('woff2');font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(/static/fonts/GeistMono-Regular.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --ink:#04070f; --ink-2:#070b16; --ink-3:#0b1120; --ink-card:#0a0f1d;
  --line:rgba(140,165,215,.14); --line-2:rgba(140,165,215,.28);
  --ice:#67d3e8; --baby:#a9cbff; --baby-dim:#7e93bf;
  --fg:#eaf0fb; --fg-dim:#aebdd9; --fg-faint:#6f80a3;
  --disp:'Fraunces',Georgia,serif; --body:'Source Serif 4',Georgia,serif; --mono:'Geist Mono',ui-monospace,monospace;
  --maxw:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; overflow-x:clip}
body{
  background:var(--ink); color:var(--fg); font-family:var(--body);
  font-size:clamp(16px,1.05vw,18px); line-height:1.6; letter-spacing:.005em;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:rgba(103,211,232,.22); color:#fff}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,72px)}

/* ── atmosphere ───────────────────────────────────────── */
.atmos{position:fixed; inset:0; z-index:-2; overflow:hidden; background:var(--ink)}
.atmos .mesh{position:absolute; inset:-30%;
  background:
    radial-gradient(40% 50% at 18% 12%, rgba(40,86,170,.30), transparent 70%),
    radial-gradient(38% 46% at 86% 22%, rgba(103,211,232,.12), transparent 70%),
    radial-gradient(50% 55% at 70% 88%, rgba(58,40,140,.22), transparent 72%),
    radial-gradient(45% 50% at 8% 82%, rgba(30,60,130,.18), transparent 72%);
  filter:blur(20px); animation:drift 26s ease-in-out infinite alternate;}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-3%,2%,0) scale(1.08)}}
.atmos .grain{position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");}
.atmos .scan{position:absolute; left:0; right:0; height:1px; top:0;
  background:linear-gradient(90deg,transparent,rgba(103,211,232,.5),transparent);
  opacity:.5; animation:scan 9s linear infinite;}
@keyframes scan{0%{top:-2%}100%{top:102%}}
.atmos .vign{position:absolute; inset:0; background:radial-gradient(120% 120% at 50% 0%,transparent 40%,rgba(2,4,9,.7) 100%)}

/* ── reveal system ────────────────────────────────────── */
.rv{opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1; transform:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}.rv[data-d="5"]{transition-delay:.40s}

/* redaction wipe — headings declassify left→right behind a hot cyan bar */
.rw{position:relative}
.rv.rw{opacity:1; transform:none; clip-path:inset(-12% 101% -16% -2%);
  transition:clip-path 1.05s cubic-bezier(.66,.05,.18,1)}
.rv.rw.in{clip-path:inset(-12% -6% -16% -2%)}
.rw::after{content:""; position:absolute; top:.02em; bottom:.06em; left:-1%; width:3px;
  background:var(--ice); opacity:0; box-shadow:0 0 22px rgba(103,211,232,.85), 0 0 60px rgba(103,211,232,.35);
  pointer-events:none}
.rw.in::after{animation:wipebar 1.05s cubic-bezier(.66,.05,.18,1) forwards}
@keyframes wipebar{0%{left:-1%; opacity:1}80%{opacity:1}100%{left:101%; opacity:0}}

/* scroll progress hairline */
.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:60; pointer-events:none}
.progress .bar{height:100%; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg,var(--ice),var(--baby) 70%,var(--ice));
  box-shadow:0 0 12px rgba(103,211,232,.5)}

/* ghost section numerals — counter-rate parallax depth layer */
section[data-num]{--par:0px}
section[data-num]::before{content:attr(data-num); position:absolute; z-index:-1;
  top:clamp(10px,4vh,46px); right:-2vw;
  font-family:var(--disp); font-style:italic; font-weight:700;
  font-size:clamp(11rem,26vw,23rem); line-height:.72; letter-spacing:-.04em;
  color:rgba(169,203,255,.022); -webkit-text-stroke:1.5px rgba(169,203,255,.062);
  transform:translate3d(0,var(--par),0); pointer-events:none; user-select:none}
/* ── shared type ──────────────────────────────────────── */
.kicker{font-family:var(--mono); font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--baby-dim)}
.idx{font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; color:var(--ice)}
.lead{font-family:var(--body); font-size:clamp(1.15rem,1.7vw,1.5rem); line-height:1.5; color:var(--fg-dim)}
h2.sec{font-family:var(--disp); font-weight:340; font-size:clamp(2.4rem,6vw,5rem); line-height:.98; letter-spacing:-.02em}
h2.sec em{font-style:italic; color:var(--baby)}
.rule{height:1px; background:linear-gradient(90deg,var(--line-2),transparent); margin:0}
/* rules draw themselves (override .rv fade-rise) */
.rule.rv{opacity:1; transform:scaleX(0); transform-origin:left;
  transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.rule.rv.in{transform:scaleX(1)}

/* ── topbar ───────────────────────────────────────────── */
.top{position:fixed; top:0; left:0; right:0; z-index:50; backdrop-filter:blur(8px);
  background:linear-gradient(180deg,rgba(4,7,15,.82),rgba(4,7,15,0)); transition:background .4s}
.top.solid{background:rgba(4,7,15,.9); border-bottom:1px solid var(--line)}
.top .bar{display:flex; align-items:center; justify-content:space-between; gap:28px; height:74px; max-width:min(1560px,96vw)}
.brand{display:flex; align-items:center; gap:12px}
.brand svg{width:26px; height:26px; overflow:visible}
.brand .wm{font-family:var(--disp); font-weight:500; font-size:1.42rem; letter-spacing:.12em}
.brand .wm b{color:var(--ice); font-weight:500}
/* V mark: the stroke draws itself in on load, then the dot pops + heartbeats (header only) */
.brand .vmark .vp{stroke-dasharray:40; stroke-dashoffset:40; animation:vdraw 1.05s cubic-bezier(.66,.05,.18,1) .15s forwards}
.brand .vmark .vd{opacity:0; transform-box:fill-box; transform-origin:center; animation:vpop .45s cubic-bezier(.16,1,.3,1) 1s forwards, vbeat 2.6s ease-in-out 1.7s infinite}
@keyframes vdraw{to{stroke-dashoffset:0}}
@keyframes vpop{0%{opacity:0; transform:scale(.2)}60%{opacity:1; transform:scale(1.35)}100%{opacity:1; transform:scale(1)}}
@keyframes vbeat{0%,40%,100%{filter:drop-shadow(0 0 .6px rgba(103,211,232,.4))}10%{filter:drop-shadow(0 0 4px rgba(103,211,232,1))}22%{filter:drop-shadow(0 0 .8px rgba(103,211,232,.5))}32%{filter:drop-shadow(0 0 3px rgba(103,211,232,.9))}}
.brand:hover .vmark{filter:drop-shadow(0 0 5px rgba(103,211,232,.55))}
@media(prefers-reduced-motion:reduce){.brand .vmark .vp{stroke-dashoffset:0; animation:none} .brand .vmark .vd{opacity:1; animation:none}}
.nav{display:flex; gap:clamp(14px,1.4vw,26px); align-items:center; white-space:nowrap; flex-wrap:nowrap}
.nav a{font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint); position:relative; padding:6px 0; transition:color .3s; white-space:nowrap}
.nav a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--ice); transition:width .35s cubic-bezier(.16,1,.3,1)}
.nav a:hover{color:var(--fg)} .nav a:hover::after{width:100%}
.nav a.cur{color:var(--fg)} .nav a.cur::after{width:100%; opacity:.7}
.nav .eng{color:var(--baby); border:1px solid var(--line-2); padding:9px 16px; border-radius:2px}
.nav .eng:hover{border-color:var(--ice); background:rgba(103,211,232,.06)}
.nav .eng::after{display:none}
/* mobile hamburger — desktop hides the button; ≤880px collapses the nav into a drawer */
.nav-toggle{display:none}
@media(max-width:880px){
  .bar{position:relative}
  .nav-toggle{display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:46px; height:40px; background:transparent; border:1px solid var(--line-2); border-radius:9px; cursor:pointer; -webkit-tap-highlight-color:transparent; padding:0}
  .nav-toggle span{display:block; width:22px; height:2px; background:var(--fg-dim); border-radius:2px; transition:transform .2s ease, opacity .2s ease}
  .nav-toggle[aria-expanded="true"]{border-color:var(--ice)}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav{display:none}
  .nav.open{display:flex; position:absolute; top:calc(100% + 10px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px; white-space:normal;
    background:rgba(7,11,22,.98); border:1px solid var(--line-2); border-radius:14px;
    padding:10px; box-shadow:0 30px 70px -24px rgba(0,0,0,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); z-index:70}
  .nav.open>a{display:block; padding:13px 14px; border-radius:8px}
  .nav.open>a::after{display:none}
  .nav.open>a:hover,.nav.open>a:focus-visible{background:rgba(103,211,232,.08); color:var(--fg)}
  .nav.open .eng{margin-top:6px; text-align:center; border-radius:8px; padding:13px 14px}
  .nav.open .res{display:block; position:static}
  .nav.open .res summary{padding:13px 14px}
  .nav.open .res-menu{position:static; min-width:0; margin:2px 0 8px; background:rgba(4,7,15,.45);
    box-shadow:none; border:none; border-left:1px solid var(--line-2); border-radius:0; padding:2px 0 2px 10px; backdrop-filter:none}
  .nav.open .platforms .res-menu{min-width:0}
}
/* scroll-morph (pc · iPad · laptop, ≥881px): on scroll the bar detaches from the
   top edge and condenses into a floating, blurred, bordered pill. Reuses the
   .solid toggle (vulnary.js, scrollY>40). The <881px bar keeps the plain solidify. */
@media(min-width:881px){
  .top{transition:padding .5s cubic-bezier(.4,0,.2,1), background .4s}
  .top .bar{transition:height .5s cubic-bezier(.4,0,.2,1), padding .5s cubic-bezier(.4,0,.2,1), background .45s, border-color .45s, box-shadow .45s, border-radius .45s; border:1px solid transparent; border-radius:0}
  .top.solid{background:transparent; border-bottom:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding-top:14px}
  .top.solid .bar{height:58px; padding-left:26px; padding-right:16px; background:rgba(8,12,22,.72); border-color:var(--line-2); border-radius:16px; box-shadow:0 28px 64px -30px rgba(0,0,0,.92); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3)}
  .top.solid .brand .wm{font-size:1.3rem; transition:font-size .5s}
}

/* ── hero ─────────────────────────────────────────────── */
.hero{min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:90px; padding-bottom:72px; position:relative}
.hero .eyebrow{display:flex; align-items:center; gap:16px; margin-bottom:38px}
.hero .eyebrow .ln{height:1px; width:64px; background:var(--line-2)}
.hero h1{font-family:var(--disp); font-weight:300; font-size:clamp(3.3rem,12.5vw,12rem); line-height:.86; letter-spacing:-.035em; margin:0}
.hero h1 .line{display:block; will-change:transform,opacity}
.hero h1 .line:first-child .t{color:var(--baby)}
.hero h1 .l2{font-style:italic; font-weight:340}
.hero h1 .dot{color:var(--ice); font-style:normal}
.hero .sub{margin:34px auto 0; max-width:64ch; font-size:clamp(1.15rem,1.9vw,1.55rem); line-height:1.5; color:var(--fg-dim); text-align:justify; text-align-last:center}
.hero .sub b{color:var(--fg); font-weight:600; font-style:italic; font-family:var(--disp)}
.hero{isolation:isolate}
.hero-fx{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none;
  -webkit-mask:radial-gradient(125% 92% at 50% 30%, #000 34%, rgba(0,0,0,.34) 70%, transparent 100%);
          mask:radial-gradient(125% 92% at 50% 30%, #000 34%, rgba(0,0,0,.34) 70%, transparent 100%)}
@media(prefers-reduced-motion:reduce){.hero-fx{opacity:.55}}
/* ── hero reveal: a soft, staggered rise into focus (rack-focus blur) ── */
.rh .t{display:block; opacity:0; transform:translateY(.42em); filter:blur(16px);
  will-change:transform,opacity,filter; animation:hrise 1.2s cubic-bezier(.19,1,.22,1) forwards}
.rh .line:nth-child(1) .t{animation-delay:.1s}
.rh .line:nth-child(2) .t{animation-delay:.28s}
@keyframes hrise{to{opacity:1; transform:translateY(0); filter:blur(0)}}

.ticker{margin-top:clamp(36px,6vh,72px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ticker .run{display:flex; gap:0; width:max-content; animation:run 38s linear infinite}
.ticker .run:hover{animation-play-state:paused}
.ticker .it{font-family:var(--mono); font-size:.82rem; letter-spacing:.12em; color:var(--fg-faint); padding:0 34px; white-space:nowrap; display:flex; align-items:center; gap:10px}
.ticker .it b{color:var(--ice); font-weight:500}
.ticker .it::before{content:"›"; color:var(--baby-dim)}
@keyframes run{to{transform:translateX(-50%)}}
.scrollcue{position:absolute; left:clamp(20px,5vw,72px); bottom:26px; font-family:var(--mono); font-size:.66rem; letter-spacing:.3em; color:var(--fg-faint); text-transform:uppercase; display:flex; gap:10px; align-items:center}
.scrollcue .b{width:1px; height:40px; background:linear-gradient(var(--ice),transparent); animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}

/* ── section frame ────────────────────────────────────── */
section{position:relative; padding:clamp(80px,13vh,160px) 0}
.shead{display:grid; grid-template-columns:1fr; gap:22px; margin-bottom:clamp(40px,7vh,78px)}
.shead .top-row{display:flex; align-items:baseline; gap:18px}

/* thesis */
.thesis .grid{display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(34px,6vw,90px); align-items:start}
.thesis p.manifesto{font-family:var(--disp); font-weight:320; font-size:clamp(1.7rem,3.2vw,2.7rem); line-height:1.18; letter-spacing:-.012em; color:var(--fg); text-align:justify}
.thesis p.manifesto em{font-style:italic; color:var(--baby)}
.thesis p.manifesto .ice{color:var(--ice); font-style:italic}
.dossier{border-left:1px solid var(--line); padding-left:clamp(20px,2.4vw,34px); display:flex; flex-direction:column; gap:26px}
.dossier .row .k{font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-faint); margin-bottom:7px}
.dossier .row .v{font-size:1.02rem; color:var(--fg-dim); line-height:1.45; text-align:justify}
.dossier .row .v b{color:var(--fg); font-family:var(--disp); font-weight:600}
@media(max-width:880px){.thesis .grid{grid-template-columns:1fr; gap:48px}.dossier{border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:30px}}

/* practice — bordered tier-style grid, mirrors the pricing tiers */
.prac{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.prac-card{background:var(--ink-2); padding:clamp(24px,2.5vw,32px); display:flex; flex-direction:column; transition:.45s}
.prac-card:hover{background:var(--ink-card)}
.prac .tcat{font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ice); margin-bottom:10px}
.prac .tn{font-family:var(--disp); font-weight:560; font-size:1.5rem; letter-spacing:-.01em; line-height:1.05; margin-bottom:14px}
.prac .tn em{font-style:italic; color:var(--baby)}
.prac .scope{color:var(--fg-dim); font-size:.92rem; line-height:1.5; margin:0 0 18px; padding-bottom:18px; border-bottom:1px dashed var(--line)}
.prac ul{list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:auto}
.prac ul li{position:relative; padding-left:18px; font-size:.86rem; color:var(--fg-dim); line-height:1.4}
.prac ul li::before{content:"+"; position:absolute; left:0; top:0; color:var(--ice); font-family:var(--mono); font-size:.9em}
@media(max-width:1200px){.prac{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.prac{grid-template-columns:1fr}}
/* Our Platforms (§04): 3-up grid, cards are links to each platform page */
.prac.prac-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){.prac.prac-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.prac.prac-3{grid-template-columns:1fr}}
.prac-card{text-decoration:none; color:inherit}
.prac-go{margin-top:16px; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ice); display:inline-block; transition:transform .3s, color .3s}
.prac-card:hover .prac-go{transform:translateX(5px); color:var(--baby)}

/* practice · the one on your side (Proof Engine) — a distinct full-width card below the four offensive ones */
.prac-side{display:grid; grid-template-columns:1.7fr .82fr; gap:clamp(26px,3vw,46px); align-items:center; margin-top:1px; padding:clamp(26px,3vw,40px); text-decoration:none; transition:.45s; background:linear-gradient(110deg,rgba(103,211,232,.07),var(--ink-2) 62%); border:1px solid var(--line); border-top:2px solid var(--ice)}
.prac-side:hover{background:linear-gradient(110deg,rgba(103,211,232,.12),var(--ink-card) 62%); border-top-color:var(--baby)}
.prac-side .tcat{font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ice); margin-bottom:10px}
.prac-side .tn{font-family:var(--disp); font-weight:560; font-size:1.7rem; letter-spacing:-.01em; line-height:1.05; margin-bottom:14px}
.prac-side .tn em{font-style:italic; color:var(--baby)}
.prac-side .scope{color:var(--fg-dim); font-size:.94rem; line-height:1.55; margin:0}
.ps-r{display:flex; flex-direction:column; gap:14px; align-items:flex-start; border-left:1px solid var(--line); padding-left:clamp(24px,3vw,40px)}
.ps-stat{display:flex; align-items:baseline; gap:9px}
.ps-n{font-family:var(--disp); font-size:1.95rem; line-height:1; color:var(--ice)}
.ps-n.bad{color:#ff5a6a}
.ps-l2{font-size:.8rem; color:var(--fg-dim)}
.ps-cta{font-family:var(--mono); font-size:.82rem; letter-spacing:.06em; color:var(--ice); margin-top:6px}
.prac-side:hover .ps-cta{color:var(--baby)}
@media(max-width:880px){.prac-side{grid-template-columns:1fr; gap:22px} .ps-r{border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:20px; flex-direction:row; flex-wrap:wrap; gap:24px}}

/* resident */
.resident{background:linear-gradient(180deg,transparent,rgba(7,11,22,.6) 30%,rgba(7,11,22,.6) 70%,transparent)}
.resident .grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,86px); align-items:center}
.resident .copy h2{margin-bottom:26px}
.resident .copy p{color:var(--fg-dim); font-size:1.12rem; line-height:1.6; max-width:52ch; text-align:justify}
.resident .copy p b{color:var(--fg); font-style:italic; font-family:var(--disp); font-weight:600}
.resident ul{list-style:none; margin:30px 0 34px; display:flex; flex-direction:column; gap:14px}
.resident ul li{display:flex; gap:14px; align-items:flex-start; font-size:1.02rem; color:var(--fg-dim)}
.resident ul li svg{flex-shrink:0; margin-top:5px; width:15px; height:15px}
.resident ul li b{color:var(--fg)}

/* ── 01 · PRODUCTIZED — hero elevation ────────────────────────────
   Premium framing for the site's hook: a mono "The Resident" tag, a
   ledgered value list, an "on shift" live status. The mascot and its
   surroundings are deliberately STILL — no idle/looping/circular
   motion; only the shared one-shot scroll reveal + hover states. */
.copy .res-top{display:flex; align-items:center; gap:16px; margin-bottom:20px}
.res-tag{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--baby-dim); padding:5px 11px; border:1px solid var(--line); border-radius:30px; background:rgba(103,211,232,.045)}
.res-tag .rt-dot{width:6px; height:6px; border-radius:50%; background:var(--ice); box-shadow:0 0 8px var(--ice)}
.resident .copy h2.sec{margin-bottom:22px}
.res-lead{max-width:54ch}
.res-lead em{font-style:italic; color:var(--baby); font-family:var(--disp); font-weight:600}
/* value ledger */
.resident ul.res-props{margin:32px 0 6px; gap:0}
.resident ul.res-props li{position:relative; align-items:center; gap:16px; padding:15px 14px 15px 2px; border-top:1px solid var(--line); font-size:1rem; transition:padding .4s cubic-bezier(.16,1,.3,1), background .4s}
.resident ul.res-props li:last-child{border-bottom:1px solid var(--line)}
.res-props .pn{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; color:var(--fg-faint); min-width:20px; flex:0 0 auto; transition:color .4s}
.resident ul.res-props li svg{margin-top:0; width:16px; height:16px; opacity:.92; transition:transform .4s}
.resident ul.res-props li:hover{padding-left:12px; background:linear-gradient(90deg,rgba(103,211,232,.05),transparent 70%)}
.res-props li:hover .pn{color:var(--ice)}
.res-props li:hover svg{transform:scale(1.12)}
/* on-shift live status */
.resident-status.on-shift{padding:8px 8px 8px 14px; border:1px solid var(--line); border-radius:30px; background:rgba(7,11,22,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.resident-status.on-shift .rs-shift{margin-left:2px; font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; color:#04070f; background:linear-gradient(90deg,var(--ice),var(--baby)); padding:5px 10px; border-radius:20px; font-weight:600}
/* mode-card lift + note framing */
.resident-modes .mode{transition:transform .3s cubic-bezier(.16,1,.3,1), background .3s, border-color .3s, box-shadow .3s}
.resident-modes .mode:hover{transform:translateY(-3px); box-shadow:0 20px 42px -26px rgba(0,0,0,.85)}
.mode-proof{transition:transform .3s cubic-bezier(.16,1,.3,1), background .3s, border-color .3s}
.mode-proof:hover{transform:translateY(-2px)}
.resident-modes-note{margin-top:6px; padding-top:15px; border-top:1px solid var(--line); width:100%; max-width:430px; text-align:center}
@media(max-width:880px){.resident-modes-note,.resident-status.on-shift{max-width:none}}

/* ── resident console — live autonomous-agent instrument ──────────
   An instrument panel, not a macOS window: corner ticks, a pulsing
   LIVE dot + heartbeat, CRT scanline/sweep, breathing perimeter glow.
   The transcript is typed in by JS (cinematic cadence, finding flares,
   a calm "watching" steady-state). All motion is transform/opacity. */
.console{position:relative; isolation:isolate; border:1px solid var(--line-2); border-radius:8px;
  background:
    linear-gradient(180deg,#0c1426,#070b16 72%),
    radial-gradient(130% 90% at 50% -12%, rgba(103,211,232,.10), transparent 62%);
  overflow:hidden;
  box-shadow:
    0 50px 110px -55px rgba(0,0,0,.95),
    0 0 70px -28px rgba(44,95,255,.40),
    inset 0 1px 0 rgba(255,255,255,.05);}
/* breathing perimeter glow */
.console::after{content:""; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 34px -14px rgba(103,211,232,.42);
  animation:cglow 6.5s ease-in-out infinite}
@keyframes cglow{0%,100%{opacity:.45}50%{opacity:1}}
/* corner instrument ticks */
.console .tick{position:absolute; width:14px; height:14px; z-index:6; pointer-events:none; opacity:.6}
.console .tick::before,.console .tick::after{content:""; position:absolute; background:var(--ice);
  box-shadow:0 0 7px rgba(103,211,232,.65)}
.console .tick::before{width:100%; height:1px} .console .tick::after{width:1px; height:100%}
.console .tick.tl{top:8px; left:8px}
.console .tick.tr{top:8px; right:8px} .console .tick.tr::before{right:0} .console .tick.tr::after{right:0}
.console .tick.bl{bottom:8px; left:8px} .console .tick.bl::before{bottom:0} .console .tick.bl::after{bottom:0}
.console .tick.br{bottom:8px; right:8px} .console .tick.br::before{bottom:0;right:0} .console .tick.br::after{bottom:0;right:0}

/* header — instrument status bar */
.console .hd{position:relative; z-index:5; display:flex; align-items:center; gap:14px;
  padding:13px 18px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(103,211,232,.06),transparent);
  font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase}
.console .hd .live{display:inline-flex; align-items:center; gap:8px; color:var(--ice); font-weight:500}
.console .hd .live .dot{width:7px; height:7px; border-radius:50%; background:var(--ice);
  box-shadow:0 0 9px rgba(103,211,232,.9); animation:cpulse 2.1s ease-out infinite}
@keyframes cpulse{
  0%{box-shadow:0 0 0 0 rgba(103,211,232,.55), 0 0 9px rgba(103,211,232,.9)}
  70%{box-shadow:0 0 0 8px rgba(103,211,232,0), 0 0 9px rgba(103,211,232,.9)}
  100%{box-shadow:0 0 0 0 rgba(103,211,232,0), 0 0 9px rgba(103,211,232,.9)}}
.console .hd .who{color:var(--fg-faint); letter-spacing:.14em}
.console .hd .rgt{margin-left:auto; display:inline-flex; align-items:center; gap:8px; color:var(--baby-dim)}
.console .hd .rgt .hb{width:6px; height:6px; border-radius:50%; background:var(--baby);
  animation:hbeat 2.6s ease-in-out infinite}
@keyframes hbeat{0%,100%{transform:scale(.6); opacity:.3}50%{transform:scale(1); opacity:.95}}

/* body — fixed viewport with an internal scrollbar, so the transcript can
   run long and reads as "lots happening" (JS auto-scrolls to the newest line) */
.console .bd{position:relative; z-index:1; overflow-y:auto; overflow-x:hidden; padding:22px 20px;
  font-family:var(--mono); font-size:.8rem; line-height:1.9;
  height:clamp(300px,42vh,400px);
  scrollbar-width:thin; scrollbar-color:rgba(103,211,232,.34) transparent;
  overscroll-behavior:contain}
.console .bd::-webkit-scrollbar{width:8px}
.console .bd::-webkit-scrollbar-track{background:transparent}
.console .bd::-webkit-scrollbar-thumb{background:rgba(103,211,232,.28); border-radius:8px;
  border:2px solid transparent; background-clip:padding-box}
.console .bd:hover::-webkit-scrollbar-thumb{background:rgba(103,211,232,.5); background-clip:padding-box}
/* scanline grain (behind the text) */
.console .bd::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(180deg, rgba(140,165,215,.05) 0 1px, transparent 1px 3px)}
/* slow CRT sweep band */
.console .bd::after{content:""; position:absolute; left:0; right:0; top:0; height:40%; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(103,211,232,.06), transparent);
  animation:csweep 7.5s linear infinite}
@keyframes csweep{0%{transform:translateY(-130%)}100%{transform:translateY(420%)}}

.console .bd .l{position:relative; z-index:1; white-space:pre-wrap; word-break:break-word}
.console .pmt{color:var(--ice)}
.console .ok{color:var(--baby)}
.console .mut{color:var(--fg-faint)}
.console .hi{color:var(--fg)}
/* semantic line treatment */
.console .l.task{color:var(--fg-faint)}
.console .l.find{color:var(--fg); padding-left:14px}
.console .l.res{color:var(--ice); padding-left:14px; text-shadow:0 0 16px rgba(103,211,232,.45);
  animation:respop .5s cubic-bezier(.16,1,.3,1)}
.console .l.idle{color:var(--ice); font-weight:500}
@keyframes respop{0%{opacity:0; transform:translateX(-6px)}100%{opacity:1; transform:none}}
/* actor tag — which of the three operators is speaking. A small mono badge
   at the head of a line, colour-coded white / red / black-cyan. */
.console .who-tag{display:inline-block; min-width:3.4em; margin-right:9px; padding:0 5px;
  border-radius:3px; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  text-align:center; border:1px solid var(--line-2); color:var(--baby-dim);
  background:rgba(140,165,215,.06); vertical-align:1px}
.console .who-tag.wb{border-color:rgba(169,203,255,.4); color:#dfe8fb; background:rgba(169,203,255,.08)}
.console .who-tag.rt{border-color:rgba(255,107,90,.5); color:#ff8473; background:rgba(255,107,90,.1)}
.console .who-tag.bb{border-color:rgba(103,211,232,.45); color:var(--ice); background:rgba(103,211,232,.1)}
/* section header line — a faint mono divider when the focus shifts operator */
.console .l.head{color:var(--fg-faint); letter-spacing:.16em; text-transform:uppercase;
  font-size:.66rem; margin-top:6px; opacity:.85}
.console .l.head::before{content:""; display:inline-block; width:18px; height:1px;
  margin-right:8px; vertical-align:middle; background:var(--line-2)}
/* note line — neutral progress chatter */
.console .l.note{color:var(--fg-dim)}
/* extra chips */
.console .chip.ok{border-color:rgba(169,203,255,.4); color:var(--baby); background:rgba(169,203,255,.08)}
.console .chip.warn{border-color:rgba(255,107,90,.5); color:#ff8473; background:rgba(255,107,90,.12)}
/* "thinking" dots */
.console .dots{color:var(--ice); animation:dotpulse 1.3s ease-in-out infinite}
@keyframes dotpulse{0%,100%{opacity:.35}50%{opacity:.95}}
/* chips */
.console .chip{display:inline-block; margin-left:9px; padding:1px 7px; border-radius:3px;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; vertical-align:1px;
  border:1px solid rgba(103,211,232,.30); color:var(--ice); background:rgba(103,211,232,.08);
  transform-origin:left center; animation:chippop .42s cubic-bezier(.16,1,.3,1)}
@keyframes chippop{0%{opacity:0; transform:scale(.6)}60%{opacity:1; transform:scale(1.12)}100%{transform:scale(1)}}
.console .chip.done{border-color:var(--line-2); color:var(--baby); background:rgba(169,203,255,.06)}
.console .chip.sev{border-color:rgba(103,211,232,.55); color:#04070f; background:var(--ice);
  font-weight:600; box-shadow:0 0 16px rgba(103,211,232,.55)}
.console .chip.cve{border-color:rgba(75,124,255,.6); color:var(--baby); background:rgba(44,95,255,.18)}
.console .chip.res{border-color:rgba(103,211,232,.45); color:var(--ice); background:rgba(103,211,232,.12)}
/* finding flare — left accent bar + underline sweep + brief flash */
.console .l.find::before{content:""; position:absolute; left:0; top:-.15em; bottom:-.15em; width:2px;
  background:var(--ice); opacity:0; box-shadow:0 0 12px rgba(103,211,232,.8)}
.console .l.find::after{content:""; position:absolute; left:14px; right:6px; bottom:.04em; height:1px;
  background:linear-gradient(90deg,var(--ice),transparent); transform:scaleX(0); transform-origin:left}
.console .l.find.flare{animation:findflash 1.1s ease-out}
.console .l.find.flare::before{animation:findbar 1.1s ease-out}
.console .l.find.flare::after{animation:findline 1.1s cubic-bezier(.16,1,.3,1)}
@keyframes findbar{0%{opacity:0}15%{opacity:1}100%{opacity:.5}}
@keyframes findline{0%{transform:scaleX(0); opacity:1}100%{transform:scaleX(1); opacity:.55}}
@keyframes findflash{0%{background:rgba(103,211,232,0)}16%{background:rgba(103,211,232,.13)}100%{background:rgba(103,211,232,0)}}
/* the mic-drop */
.console .l.idle .zero{color:#fff; font-weight:600; text-shadow:0 0 18px rgba(103,211,232,.75)}
.console .l.idle.land{animation:idleland 1.2s cubic-bezier(.16,1,.3,1)}
@keyframes idleland{0%{transform:scale(1)}30%{transform:scale(1.035)}100%{transform:scale(1)}}
/* the agent is still alive — slow breathing heartbeat */
.console .watch{display:inline-block; width:8px; height:8px; border-radius:50%; margin-left:10px;
  vertical-align:0; background:var(--ice); box-shadow:0 0 12px rgba(103,211,232,.85);
  animation:breathe 3.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.55); opacity:.4}50%{transform:scale(1); opacity:1}}
/* live caret */
.console .cur{display:inline-block; width:8px; height:1.05em; margin-left:1px; background:var(--ice);
  vertical-align:-2px; box-shadow:0 0 8px rgba(103,211,232,.7); animation:blink 1.05s step-end infinite}
@keyframes blink{50%{opacity:0}}
.resident-vis{display:flex; flex-direction:column; gap:clamp(44px,5.5vh,72px)}

/* ── rotating podium ──────────────────────────────────────
   Three operators share one carousel. Every cycle they swap slots:
   FRONT (large, centred, lit) → RIGHT (small, receding) → LEFT
   (small, receding) → back to FRONT. Each bot animates the same
   `podium` keyframe; .resident-slot[--slot] only shifts the
   animation-delay so the three are evenly phased around one loop.
   Pure CSS — transform/opacity/filter only. */
.resident-carousel{position:relative; height:clamp(272px,30vw,324px); margin:0 auto;
  perspective:1100px}
.resident-slot{position:absolute; left:50%; top:0; width:clamp(118px,15vw,158px);
  transform-origin:center bottom; will-change:transform,opacity,filter;
  animation:podium 18s cubic-bezier(.62,.04,.34,1) infinite;
  animation-delay:calc(var(--slot) * -6s)}
/* the podium choreography: 3 dwell states (front / right / left), each a
   third of the loop, with smooth turns between. Front rises + faces you;
   sides shrink, slide out, and rotate away (the "turning around" feel). */
@keyframes podium{
  /* FRONT — large, centred, lit, looking at you */
  0%,   22%{transform:translateX(-50%) translateY(0) scale(1) rotateY(0deg); opacity:1; z-index:3; filter:drop-shadow(0 26px 46px rgba(44,95,255,.30)) brightness(1)}
  /* turn out to the RIGHT */
  33%      {transform:translateX(58%)  translateY(34px) scale(.5) rotateY(-30deg); opacity:.62; z-index:2; filter:drop-shadow(0 12px 22px rgba(0,0,0,.45)) brightness(.74)}
  55%      {transform:translateX(58%)  translateY(34px) scale(.5) rotateY(-30deg); opacity:.62; z-index:2; filter:drop-shadow(0 12px 22px rgba(0,0,0,.45)) brightness(.74)}
  /* swing across the back to the LEFT */
  66%      {transform:translateX(-158%) translateY(34px) scale(.5) rotateY(30deg);  opacity:.62; z-index:1; filter:drop-shadow(0 12px 22px rgba(0,0,0,.45)) brightness(.74)}
  88%      {transform:translateX(-158%) translateY(34px) scale(.5) rotateY(30deg);  opacity:.62; z-index:1; filter:drop-shadow(0 12px 22px rgba(0,0,0,.45)) brightness(.74)}
  /* rise back to FRONT */
  100%     {transform:translateX(-50%) translateY(0) scale(1) rotateY(0deg); opacity:1; z-index:3; filter:drop-shadow(0 26px 46px rgba(44,95,255,.30)) brightness(1)}
}
.resident-bot{width:100%; filter:none}
.resident-bot svg{width:100%; height:auto; display:block}
.resident-bot .eye{transform-origin:center; transform-box:fill-box}
/* mascot deliberately STILL — no eye-blink, no float, no eye-tracking */

/* role caption — only legible while its bot is at FRONT (fades with the
   same phasing). Sits just under the podium plane. */
.resident-cap{position:absolute; left:50%; top:calc(100% + 10px); transform:translateX(-50%);
  width:max(200px,16vw); text-align:center; pointer-events:none;
  animation:podium-cap 18s cubic-bezier(.62,.04,.34,1) infinite;
  animation-delay:calc(var(--slot) * -6s)}
.resident-cap .cap-role{display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ice)}
.resident-cap .cap-line{display:block; margin-top:5px; font-family:var(--body); font-size:.82rem;
  line-height:1.35; color:var(--fg-dim)}
.cap--red .cap-role{color:#ff8473} .cap--black .cap-role{color:var(--baby)}
@keyframes podium-cap{0%,22%{opacity:1; transform:translateX(-50%) translateY(0)}
  30%,90%{opacity:0; transform:translateX(-50%) translateY(8px)}
  100%{opacity:1; transform:translateX(-50%) translateY(0)}}

@media(max-width:880px){.resident .grid{grid-template-columns:1fr; gap:44px}
  .resident-carousel{height:clamp(260px,62vw,320px)}
  .resident-slot{width:clamp(140px,40vw,180px)}}
/* §01 hero: the white Resident as a single dignified mascot + three static
   mode labels (replaces the cartoony rotating trio + the finicky live console) */
.resident-hero{display:flex; flex-direction:column; align-items:center; gap:clamp(20px,3.4vh,32px)}
.rh-stage{position:relative; display:grid; place-items:center; width:clamp(176px,22vw,236px)}
.rh-glow{position:absolute; inset:-34% -24%; background:radial-gradient(closest-side,rgba(103,211,232,.17),transparent 70%); filter:blur(8px); pointer-events:none}
.resident-mascot{position:relative; width:clamp(168px,22vw,232px)}
.resident-mascot svg{width:100%; height:auto; display:block; filter:drop-shadow(0 34px 64px rgba(0,0,0,.55))}
.resident-status{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--fg-faint)}
.resident-status .rs-dot{width:7px; height:7px; border-radius:50%; background:#37e0a6; box-shadow:0 0 11px #37e0a6; flex:0 0 auto}
.resident-status .rs-who{color:var(--ice)}
.resident-status b{color:var(--baby); font-weight:600; font-style:normal}
.resident-modes{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.resident-modes .mode{position:relative; display:flex; flex-direction:column; gap:4px; align-items:flex-start; min-width:118px; padding:14px 36px 13px 18px; border:1px solid var(--line); border-radius:8px; background:var(--ink-2); transition:.3s; text-decoration:none}
.resident-modes a.mode:hover .mk{color:var(--ice)}
.resident-modes .mode:hover{background:var(--ink-card); border-color:var(--line-2)}
.resident-modes .mode::before{content:""; position:absolute; top:-1px; left:16px; right:16px; height:2px; border-radius:0 0 3px 3px}
.resident-modes .mode--verdict::before{background:var(--ice)}
.resident-modes .mode--cr::before{background:var(--baby)}
.resident-modes .mode--pentest::before{background:#ff5a6a}
.resident-modes .mk{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg)}
.resident-modes .ml{font-size:.8rem; color:var(--fg-dim)}
.resident-modes .mode-arrow{position:absolute; top:50%; right:13px; transform:translateY(-50%); color:var(--fg-faint); font-size:1.05rem; line-height:1; transition:transform .3s, color .3s}
.resident-modes a.mode:hover .mode-arrow{transform:translateY(-50%) translateX(3px); color:var(--ice)}
.resident-modes-note{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint)}
@media(max-width:880px){.resident-modes{gap:10px} .resident-modes .mode{min-width:96px; padding:12px 30px 12px 14px}}
/* §01 Proof Engine chip — the "on your side" one, cyan + set apart, links to the page */
.mode-proof{display:flex; align-items:center; gap:14px; width:100%; max-width:430px; margin-top:2px; padding:13px 18px; border:1px solid var(--line); border-left:2px solid var(--ice); border-radius:8px; background:linear-gradient(100deg,rgba(103,211,232,.08),var(--ink-2) 70%); text-decoration:none; transition:.3s}
.mode-proof:hover{background:linear-gradient(100deg,rgba(103,211,232,.14),var(--ink-card) 70%); border-left-color:var(--baby)}
.mode-proof .mp-l{display:flex; flex-direction:column; gap:3px}
.mode-proof .mk{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ice)}
.mode-proof .ml{font-size:.8rem; color:var(--fg-dim)}
.mode-proof .mp-arrow{margin-left:auto; color:var(--ice); font-size:1.15rem; transition:transform .3s}
.mode-proof:hover .mp-arrow{transform:translateX(4px)}
.resident-modes-note .ice{color:var(--ice)}
/* §01 mascot: eye-tracking removed — the mascot is fully static */
/* aurora — soft cursor-following radial glow in the .atmos background layer */
.aurora{position:fixed; left:0; top:0; width:62vmax; height:62vmax; margin:-31vmax 0 0 -31vmax; border-radius:50%; pointer-events:none; will-change:transform; background:radial-gradient(closest-side,rgba(103,211,232,.09),rgba(103,211,232,0) 70%)}
.nomotion .aurora{display:none}

/* reduced motion: freeze the trio in a static lineup, all captions shown */
.nomotion .resident-slot{animation:none}
.nomotion .resident-slot[style*="--slot:0"]{transform:translateX(-130%) scale(.62)}
.nomotion .resident-slot[style*="--slot:1"]{transform:translateX(-50%) scale(1)}
.nomotion .resident-slot[style*="--slot:2"]{transform:translateX(28%) scale(.62)}
.nomotion .resident-cap{animation:none; opacity:0}
.nomotion .resident-slot[style*="--slot:1"] .resident-cap{opacity:1}
@media(prefers-reduced-motion:reduce){
  .resident-slot{animation:none}
  .resident-slot[style*="--slot:0"]{transform:translateX(-130%) scale(.62)}
  .resident-slot[style*="--slot:1"]{transform:translateX(-50%) scale(1)}
  .resident-slot[style*="--slot:2"]{transform:translateX(28%) scale(.62)}
  .resident-cap{animation:none; opacity:0}
  .resident-slot[style*="--slot:1"] .resident-cap{opacity:1}}

/* how the resident works — coordinated-system architecture diagram */
.how{margin-top:clamp(64px,9vh,116px)}
.how .hh{text-align:center; margin-bottom:clamp(32px,5vh,50px)}
.how .hh .idx{display:inline-block; margin-bottom:16px}
.how .hh h3{font-family:var(--disp); font-weight:340; font-size:clamp(1.8rem,4vw,3rem); line-height:1; letter-spacing:-.02em}
.how .hh h3 em{font-style:italic; color:var(--baby)}
.how .how-lead{max-width:66ch; margin:20px auto 0; color:var(--fg-dim); font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.5; text-align:justify; text-align-last:center}
/* ── the reactor — perpetual-loop diagram ─────────────────
   SVG = static instrument (ring, dial ticks, stations, core).
   Canvas overlay = the living part (orbiting comet, surface
   particles in, deliverable pulses out, scope handshake).
   HTML chips = responsive labels. Assemble runs once on enter
   (.orbit.lit), then the loop turns forever. */
.orbit{position:relative; isolation:isolate; display:grid;
  grid-template-areas:". scope ." "in ring out" ". cap .";
  grid-template-columns:minmax(168px,250px) minmax(0,auto) minmax(168px,250px);
  align-items:center; justify-content:center; gap:12px clamp(16px,3vw,44px);
  border:1px solid var(--line); border-radius:14px;
  background:
    radial-gradient(55% 46% at 50% 42%, rgba(44,95,255,.10), transparent 70%),
    linear-gradient(180deg, rgba(7,11,22,.55), rgba(4,7,15,.3));
  padding:clamp(18px,3vw,32px) clamp(14px,2.6vw,32px) clamp(14px,2.2vw,24px);
  overflow:hidden}
.orbfx{position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .9s ease 1.2s}
.orbit.lit .orbfx{opacity:1}
/* scope — the one human touch */
.orb-scope{grid-area:scope; justify-self:center; position:relative; z-index:3; text-align:center;
  opacity:0; transform:translateY(-12px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1)}
.orbit.lit .orb-scope{opacity:1; transform:none}
.scope-node{display:inline-flex; flex-direction:column; gap:3px; padding:10px 26px;
  border:1px solid rgba(103,211,232,.32); border-radius:999px;
  background:linear-gradient(180deg,#0c1426,#0a0f1d);
  box-shadow:0 0 30px -14px rgba(103,211,232,.45)}
.scope-node .k{font-family:var(--mono); font-size:.7rem; letter-spacing:.3em; color:var(--ice)}
.scope-node .s{font-family:var(--mono); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-faint)}
/* stem stub under the scope pill on stacked (mobile) layout */
.orb-scope::after{content:""; position:absolute; left:50%; top:100%; width:1px; height:16px;
  background:linear-gradient(rgba(103,211,232,.5),transparent); display:none}
/* side columns */
.orb-in{grid-area:in} .orb-out{grid-area:out}
.orb-in,.orb-out{display:flex; flex-direction:column; gap:12px; position:relative; z-index:3}
.zlbl{font-family:var(--mono); font-size:.6rem; letter-spacing:.22em; color:var(--baby-dim); margin-bottom:2px;
  opacity:0; transition:opacity .8s ease .9s}
.orbit.lit .zlbl{opacity:1}
.chip{position:relative; border:1px solid var(--line-2); border-radius:9px; padding:13px 16px;
  background:linear-gradient(180deg,#0c1426,#0a0f1d); opacity:0;
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), border-color .45s, box-shadow .45s}
.orb-in .chip{transform:translateX(-26px)} .orb-out .chip{transform:translateX(26px)}
.orbit.lit .chip{opacity:1; transform:none}
.orbit.lit .orb-in .chip:nth-child(2){transition-delay:.95s,.95s,0s,0s}
.orbit.lit .orb-in .chip:nth-child(3){transition-delay:1.07s,1.07s,0s,0s}
.orbit.lit .orb-in .chip:nth-child(4){transition-delay:1.19s,1.19s,0s,0s}
.orbit.lit .orb-out .chip:nth-child(2){transition-delay:1.35s,1.35s,0s,0s}
.orbit.lit .orb-out .chip:nth-child(3){transition-delay:1.5s,1.5s,0s,0s}
.chip:hover{border-color:rgba(103,211,232,.34)}
.chip b{display:block; font-family:var(--mono); font-weight:500; font-size:.82rem; letter-spacing:.04em; color:var(--fg)}
.chip i{display:block; font-style:normal; font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; color:var(--fg-faint); margin-top:4px; text-transform:uppercase}
.chip.hit{animation:chiphit .9s cubic-bezier(.16,1,.3,1)}
@keyframes chiphit{
  0%{border-color:var(--ice); box-shadow:0 0 26px -6px rgba(103,211,232,.6), inset 0 0 18px -10px rgba(103,211,232,.5)}
  100%{border-color:var(--line-2); box-shadow:0 0 0 0 rgba(103,211,232,0)}}
/* knowledge base — accreting strata */
.chip.kb{padding-bottom:32px}
.kbrow{position:absolute; left:16px; right:62px; bottom:11px; display:flex; gap:3px; align-items:flex-end; height:12px; overflow:hidden}
.kbrow i{flex:0 0 3px; border-radius:1px; height:100%;
  background:linear-gradient(180deg,var(--ice),rgba(103,211,232,.22));
  transform-origin:bottom; animation:kbpop .6s cubic-bezier(.16,1,.3,1) backwards}
.kbrow i:nth-child(odd){height:68%}
.kbrow i:nth-child(3n){height:84%}
.kbrow i.rp{animation:kbpop .6s cubic-bezier(.16,1,.3,1)}
@keyframes kbpop{0%{transform:scaleY(0)}60%{transform:scaleY(1.25)}100%{transform:scaleY(1)}}
.kbn{position:absolute; right:14px; bottom:9px; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; color:var(--ice); white-space:nowrap}
.kbn b{display:inline; font-weight:500; font-size:inherit; color:inherit; letter-spacing:inherit}
/* the ring instrument */
.orb-ring{grid-area:ring; position:relative; z-index:1; width:clamp(300px,36vw,470px); justify-self:center}
.orbsvg{display:block; width:100%; height:auto; overflow:visible}
.o-ring{fill:none; stroke:rgba(169,203,255,.38); stroke-width:1.3;
  stroke-dasharray:943; stroke-dashoffset:943;
  transition:stroke-dashoffset 1.4s cubic-bezier(.6,.05,.25,1) .25s}
.orbit.lit .o-ring{stroke-dashoffset:0}
.o-ticks{fill:none; stroke:rgba(169,203,255,.16); stroke-width:6; stroke-dasharray:1.5 12.99;
  opacity:0; transition:opacity 1s ease .9s}
.o-arcs path{fill:none; stroke:rgba(169,203,255,.14); stroke-width:1}
.o-arcs{opacity:0; transition:opacity 1s ease 1.05s}
.orbit.lit .o-ticks,.orbit.lit .o-arcs{opacity:1}
.o-chev path{fill:none; stroke:rgba(169,203,255,.45); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.o-chev{opacity:0; transition:opacity .9s ease 1.25s}
.orbit.lit .o-chev{opacity:.55}
.o-core{opacity:0; transform:scale(.86); transform-origin:50% 50%; transform-box:fill-box;
  transition:opacity .9s cubic-bezier(.16,1,.3,1) 1.15s, transform .9s cubic-bezier(.16,1,.3,1) 1.15s}
.orbit.lit .o-core{opacity:1; transform:scale(1)}
.o-glow{animation:obreathe 6s ease-in-out infinite}
@keyframes obreathe{0%,100%{opacity:.7}50%{opacity:1}}
.o-spin{fill:none; stroke:rgba(103,211,232,.30); stroke-width:1; stroke-dasharray:3 15;
  transform-origin:center; transform-box:fill-box; animation:ospin 36s linear infinite}
@keyframes ospin{to{transform:rotate(360deg)}}
.o-t1{font-family:var(--mono); font-size:13px; letter-spacing:.16em; fill:var(--fg); text-anchor:middle}
.o-t2{font-family:var(--mono); font-size:8.4px; letter-spacing:.1em; fill:var(--baby-dim); text-anchor:middle; text-transform:uppercase}
.o-cyc{font-family:var(--mono); font-size:8.4px; letter-spacing:.14em; fill:var(--ice); text-anchor:middle}
/* stations — lit per-frame by the canvas engine as the comet passes */
.o-st .halo{fill:var(--ice); opacity:.06}
.o-st .ring2{fill:none; stroke:rgba(103,211,232,.4); stroke-width:1}
.o-st .dot{fill:var(--ice); opacity:.5}
.o-st .slbl{font-family:var(--mono); font-size:13px; letter-spacing:.2em; fill:var(--baby-dim); text-anchor:middle}
.o-st .snum{font-family:var(--mono); font-size:8px; letter-spacing:.2em; fill:var(--fg-faint); text-anchor:middle; opacity:.5}
.o-st{opacity:0; transform:scale(.5); transform-origin:center; transform-box:fill-box;
  transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.34,1.56,.64,1)}
.orbit.lit .o-st{opacity:1; transform:scale(1)}
.orbit.lit .o-st[data-st="0"]{transition-delay:.75s}
.orbit.lit .o-st[data-st="1"]{transition-delay:.9s}
.orbit.lit .o-st[data-st="2"]{transition-delay:1.05s}
.orbit.lit .o-st[data-st="3"]{transition-delay:1.2s}
/* caption */
.orb-cap{grid-area:cap; justify-self:center; text-align:center; position:relative; z-index:3;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--baby-dim);
  opacity:0; transition:opacity .9s ease 1.7s}
.orbit.lit .orb-cap{opacity:1}
.orb-cap .z{color:#fff; text-shadow:0 0 14px rgba(103,211,232,.6)}
.retbar{display:flex; justify-content:center; margin-top:clamp(24px,3.5vh,38px)}
.retbar .badge{display:inline-flex; align-items:center; gap:11px; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--baby-dim); border:1px solid var(--line); border-radius:30px; padding:10px 20px; background:rgba(7,11,22,.5)}
.retbar .badge svg{width:14px; height:14px; stroke:var(--ice); fill:none; stroke-width:1.7; animation:spin 7s linear infinite; transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
/* reactor — stacked layout for phones / narrow viewports */
@media(max-width:860px){
  .orbit{grid-template-areas:"scope" "in" "ring" "out" "cap"; grid-template-columns:minmax(0,1fr); gap:16px}
  .orb-scope::after{display:block}
  .orb-ring{width:min(86vw,380px)}
  .orb-in,.orb-out{flex-direction:row; flex-wrap:wrap; justify-content:center; gap:10px}
  .zlbl{flex-basis:100%; text-align:center; margin-bottom:0}
  .orb-in .chip{flex:1 1 30%; min-width:96px; padding:10px 10px}
  .orb-out .chip{flex:1 1 45%; min-width:150px}
  .orb-in .chip,.orb-out .chip{transform:translateY(16px)}
  .chip b{font-size:.72rem} .chip i{font-size:.53rem}
  .kbrow{left:10px; right:56px} .kbn{right:9px}
  .chip.kb{padding-bottom:30px}
}

/* proof */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:clamp(50px,8vh,90px)}
.stats .st{background:var(--ink); padding:clamp(26px,4vw,42px) clamp(20px,2.5vw,30px); text-align:left}
.stats .st .num{font-family:var(--disp); font-weight:300; font-size:clamp(2.6rem,6vw,4.6rem); line-height:1; letter-spacing:-.03em; color:var(--fg)}
.stats .st .num .u{color:var(--ice); font-style:italic}
.stats .st .lb{font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-faint); margin-top:12px}
@media(max-width:880px){.stats{grid-template-columns:1fr 1fr}}

.record{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px)}
.ledger{display:flex; flex-direction:column}
.ledger .ti{font-family:var(--mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--baby-dim); margin-bottom:20px}
.cve{display:grid; grid-template-columns:auto 1fr; gap:16px; padding:15px 0; border-top:1px solid var(--line); align-items:baseline; transition:.3s}
.cve:hover{padding-left:8px}
.cve .id{font-family:var(--mono); font-size:.76rem; color:var(--ice); letter-spacing:.02em; white-space:nowrap}
.cve .ds{color:var(--fg-dim); font-size:.98rem} .cve .ds b{color:var(--fg); font-family:var(--disp)}
.honors{display:flex; flex-direction:column; gap:24px}
.honor{display:flex; gap:16px; align-items:baseline; border-top:1px solid var(--line); padding-top:16px}
.honor .y{font-family:var(--mono); font-size:.72rem; color:var(--fg-faint); white-space:nowrap; min-width:62px}
.honor .x{color:var(--fg-dim)} .honor .x b{color:var(--fg); font-family:var(--disp)}
@media(max-width:880px){.record{grid-template-columns:1fr; gap:50px}}

/* arsenal */
.arsenal{margin-top:clamp(50px,8vh,90px)}
.tools{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.tool{background:var(--ink-2); padding:clamp(24px,3vw,34px); transition:.45s; position:relative; overflow:hidden}
.tool:hover{background:var(--ink-card)}
.tool::after{content:""; position:absolute; left:0; top:0; height:2px; width:0; background:linear-gradient(90deg,var(--ice),var(--baby)); transition:width .5s}
.tool:hover::after{width:100%}
.tool .nm{font-family:var(--disp); font-weight:520; font-size:1.3rem; letter-spacing:-.01em; margin-bottom:6px}
.tool .cat{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ice); margin-bottom:14px}
.tool .ds{color:var(--fg-faint); font-size:.92rem; line-height:1.5}
.tool .src{display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-family:var(--mono); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; padding:5px 10px; border:1px solid var(--line-2); border-radius:3px}
.tool .src svg{width:11px; height:11px; fill:currentColor}
.tool .src.closed{color:var(--fg-faint)}
.tool .src.open{color:var(--baby); border-color:var(--baby-dim); transition:.3s}
.tool .src.open:hover{border-color:var(--ice); background:rgba(103,211,232,.07); color:var(--fg)}
@media(max-width:880px){.tools{grid-template-columns:1fr}}

/* operator */
.operator .grid{display:grid; grid-template-columns:.9fr 1.3fr; gap:clamp(34px,6vw,86px); align-items:center}
.opcard{border:1px solid var(--line); border-radius:6px; background:linear-gradient(160deg,var(--ink-3),var(--ink)); padding:clamp(28px,3.5vw,44px); position:relative; overflow:hidden}
.opcard .mono-bg{position:absolute; inset:0; font-family:var(--mono); font-size:8.5rem; font-weight:700; color:rgba(103,211,232,.04); line-height:.8; padding:10px; overflow:hidden; user-select:none}
.opcard .role{font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ice); position:relative}
.opcard .nm{font-family:var(--disp); font-weight:360; font-size:clamp(2rem,3.4vw,2.8rem); line-height:1.04; margin:14px 0 18px; letter-spacing:-.02em; position:relative}
.opcard .meta{font-family:var(--mono); font-size:.78rem; color:var(--fg-faint); letter-spacing:.05em; position:relative; line-height:1.9}
.opcard .meta b{color:var(--baby)}
.operator .say p{font-family:var(--disp); font-weight:320; font-size:clamp(1.5rem,2.8vw,2.3rem); line-height:1.24; color:var(--fg); letter-spacing:-.01em}
.operator .say p em{font-style:italic; color:var(--baby)}
.operator .say .sig{margin-top:26px; font-family:var(--mono); font-size:.76rem; letter-spacing:.14em; color:var(--fg-faint)}
@media(max-width:880px){.operator .grid{grid-template-columns:1fr; gap:40px}}
/* sign-off — firm's collective closing statement */
.signoff{text-align:center}
.signoff .mark{display:flex; justify-content:center; margin-bottom:34px}
.signoff .mark svg{width:32px; height:32px; overflow:visible}
.signoff .say{max-width:min(90vw,820px); margin:0 auto}
.signoff .say p{font-family:var(--disp); font-weight:300; font-size:clamp(1.6rem,3vw,2.6rem); line-height:1.26; letter-spacing:-.015em; text-align:justify; text-align-last:center}
.signoff .say .sig{margin-top:38px; font-family:var(--disp); font-weight:500; font-size:1.05rem; letter-spacing:.32em; color:var(--baby)}

/* cve reconstruction samples (proof) */
.proof .lead-row{max-width:64ch; margin-bottom:clamp(40px,7vh,72px)}
.proof .lead-row p{font-size:clamp(1.12rem,1.7vw,1.42rem); color:var(--fg-dim); line-height:1.5; text-align:justify}
.proof .lead-row p b{color:var(--fg); font-family:var(--disp); font-style:italic; font-weight:600}
.receipts{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.receipt{background:var(--ink-2); padding:clamp(20px,2vw,26px); display:flex; flex-direction:column; gap:7px; transition:.4s}
.receipt:hover{background:var(--ink-card)}
.receipt .rk{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--ice)}
.receipt .rt{font-family:var(--disp); font-weight:560; font-size:1.18rem; letter-spacing:-.01em; color:var(--fg)}
.receipt .rc{font-size:.84rem; color:var(--fg-dim)}
.receipt .rr{font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--baby-dim); margin-top:4px}

/* ── casework "case files": resting face declassifies to proof on hover ── */
.receipt.case{position:relative; overflow:hidden; padding:0; min-height:158px; --lang:#67d3e8; transition:background .38s ease}
.receipt.case::before{content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--lang); opacity:.45; transition:opacity .38s, height .38s; z-index:2}
.receipt.case:hover::before{opacity:1; height:3px}
.receipt.case[data-lang="c"]{--lang:#ff6b6e}
.receipt.case[data-lang="java"]{--lang:#e0913b}
.receipt.case[data-lang="php"]{--lang:#a78bfa}
.receipt.case[data-lang="python"]{--lang:#67d3e8}
.receipt.case[data-lang="go"]{--lang:#49c5e6}
.receipt.case[data-lang="js"]{--lang:#e6c34a}
.receipt.case[data-lang="groovy"]{--lang:#7ee2a8}
.rcp-front{position:absolute; inset:0; padding:clamp(18px,1.9vw,24px); display:flex; flex-direction:column; gap:5px; transition:transform .42s cubic-bezier(.2,.8,.2,1), opacity .26s ease}
.receipt.case:hover .rcp-front{transform:translateY(-10px); opacity:0}
.rcp-front .rk{font-family:var(--mono); font-size:.7rem; letter-spacing:.07em; color:var(--ice)}
.rcp-front .rt{font-family:var(--disp); font-weight:560; font-size:1.2rem; letter-spacing:-.01em; color:var(--fg); margin-top:2px}
.rcp-front .rc{font-size:.83rem; color:var(--fg-dim); display:flex; align-items:center; gap:8px}
.rcp-front .rr{font-family:var(--mono); font-size:.57rem; letter-spacing:.09em; text-transform:uppercase; color:var(--baby-dim); margin-top:auto}
.lang-dot{width:7px; height:7px; border-radius:50%; background:var(--lang); box-shadow:0 0 7px var(--lang); flex:none}
.rcp-proof{position:absolute; inset:0; padding:clamp(16px,1.7vw,22px); display:flex; flex-direction:column; gap:8px; justify-content:center; transform:translateY(100%); transition:transform .44s cubic-bezier(.2,.8,.2,1); background:linear-gradient(180deg,rgba(10,16,27,.5),rgba(6,11,20,.93)); z-index:1}
.receipt.case:hover .rcp-proof{transform:translateY(0)}
.pf-h{font-family:var(--mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; color:#79e2a5; display:flex; align-items:center; gap:8px; margin-bottom:3px}
.pf-live{width:6px; height:6px; border-radius:50%; background:#57e08e; flex:none; animation:pf-pulse 1.9s ease-out infinite}
@keyframes pf-pulse{0%{box-shadow:0 0 0 0 rgba(87,224,142,.5)} 70%{box-shadow:0 0 0 6px rgba(87,224,142,0)} 100%{box-shadow:0 0 0 0 rgba(87,224,142,0)}}
.pf-row{display:flex; gap:10px; align-items:baseline; line-height:1.3}
.pf-k{font-family:var(--mono); font-size:.55rem; letter-spacing:.07em; text-transform:uppercase; color:var(--baby-dim); min-width:52px; flex:none}
.pf-v{font-size:.8rem; color:var(--fg); line-height:1.4}
.pf-v.redact{font-family:var(--mono); letter-spacing:1px; color:rgba(180,205,240,.4); user-select:none}
.receipt.case.king{background:linear-gradient(180deg,rgba(229,72,77,.10),var(--ink-2)); box-shadow:inset 0 0 0 1px rgba(229,72,77,.32)}
.receipt.case.king:hover{background:linear-gradient(180deg,rgba(229,72,77,.14),var(--ink-2))}
.receipt.case.king .rcp-front .rr{color:#ff6b6e}
.receipt.case .crown{position:absolute; top:12px; right:13px; width:17px; height:17px; line-height:0; z-index:3}
.receipt.case .crown svg{width:17px; height:17px; fill:#e5484d; filter:drop-shadow(0 0 5px rgba(229,72,77,.6))}
.nomotion .rcp-front,.nomotion .rcp-proof,.nomotion .receipt.case::before{transition:none}
.nomotion .pf-live{animation:none}
.proof .fineprint{margin-top:26px; font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; color:var(--fg-faint); line-height:1.8; max-width:80ch}
.proof .fineprint b{color:var(--baby)}
@media(max-width:900px){.receipts{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.receipts{grid-template-columns:1fr}}
/* "always hunting" card — fills the trailing empty grid cell with the white mascot */
.receipt.hunting{align-items:center; justify-content:center; text-align:center; gap:10px; background:linear-gradient(180deg,rgba(229,72,77,.05),var(--ink-2)); box-shadow:inset 0 0 0 1px rgba(229,72,77,.16)}
.receipt.hunting .hunt-bot{width:58px; opacity:.94}
.receipt.hunting .hunt-bot svg{width:100%; height:auto; display:block}
.receipt.hunting .hunt-lbl{color:#ff5e6e; font-weight:600}
.receipt.hunting .rr{color:var(--fg-faint)}
@keyframes hunt-bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}
.nomotion .receipt.hunting .hunt-bot{animation:none}

/* pricing */
.pricing .lead-row{max-width:64ch; margin-bottom:clamp(40px,7vh,72px)}
.pricing .lead-row p{font-size:clamp(1.12rem,1.7vw,1.42rem); color:var(--fg-dim); line-height:1.5; text-align:justify}
.pricing .lead-row p b{color:var(--fg); font-family:var(--disp); font-style:italic; font-weight:600}
.pricing .lead-row p .ice{color:var(--ice); font-style:normal}
.tiers{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.tier{background:var(--ink-2); padding:clamp(24px,2.5vw,32px); display:flex; flex-direction:column; position:relative; transition:.45s}
.tier:hover{background:var(--ink-card)}
.tier.feat{background:linear-gradient(180deg,rgba(103,211,232,.07),var(--ink-card))}
.tier .tcat{font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ice); margin-bottom:10px}
.tier .tn{font-family:var(--disp); font-weight:560; font-size:1.5rem; letter-spacing:-.01em; margin-bottom:14px}
.tier .price{font-family:var(--disp); font-weight:300; font-size:clamp(2rem,2.7vw,2.7rem); line-height:1; letter-spacing:-.02em; color:var(--fg)}
.tier .price .cur{font-size:.5em; vertical-align:.55em; color:var(--baby-dim); margin-right:1px}
.tier .price .unit{font-size:.4em; vertical-align:.1em; color:var(--baby-dim); letter-spacing:.04em; margin-left:1px}
.tier .price.req{font-size:clamp(1.25rem,1.7vw,1.6rem); font-style:italic; color:var(--baby)}
.tier .per{font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; color:var(--fg-faint); text-transform:uppercase; margin-top:9px}
.tier .scope{color:var(--fg-dim); font-size:.92rem; line-height:1.5; margin:18px 0; padding-bottom:18px; border-bottom:1px dashed var(--line)}
.tier ul{list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:20px}
.tier ul li{position:relative; padding-left:18px; font-size:.86rem; color:var(--fg-dim); line-height:1.4}
.tier ul li::before{content:"+"; position:absolute; left:0; top:0; color:var(--ice); font-family:var(--mono); font-size:.9em}
.tier .vs{font-family:var(--mono); font-size:.62rem; letter-spacing:.03em; color:var(--fg-faint); margin-bottom:16px; line-height:1.5}
.tier .vs b{color:var(--baby-dim); font-weight:500}
.tier .pick{margin-top:auto; font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--baby); border:1px solid var(--line-2); padding:11px 0; text-align:center; border-radius:3px; transition:.3s}
.tier .pick:hover{border-color:var(--ice); background:rgba(103,211,232,.06); color:var(--fg)}
.tier.feat .pick{background:var(--ice); color:var(--ink); border-color:var(--ice)}
.tier.feat .pick:hover{background:var(--baby); border-color:var(--baby); color:var(--ink)}
.pricing .fineprint{margin-top:26px; font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; color:var(--fg-faint); line-height:1.8; max-width:80ch}
.pricing .fineprint b{color:var(--baby)}
@media(max-width:1200px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.tiers{grid-template-columns:1fr}}
/* the advisor — horizontal retainer band under the four engagement tiers */
.advisor{margin-top:clamp(16px,2.2vw,26px); background:linear-gradient(110deg,rgba(103,211,232,.06),var(--ink-2)); border:1px solid var(--line); padding:clamp(26px,3vw,40px); display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,56px); align-items:center; justify-content:space-between; transition:.45s}
.advisor:hover{border-color:var(--line-2)}
.advisor .a-lede{flex:1 1 360px; min-width:280px}
.advisor .tcat{font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ice); margin-bottom:10px}
.advisor .tn{font-family:var(--disp); font-weight:560; font-size:1.7rem; letter-spacing:-.01em; line-height:1.05}
.advisor .tn em{font-style:italic; color:var(--baby)}
.advisor .a-desc{color:var(--fg-dim); font-size:.95rem; line-height:1.55; margin-top:12px; max-width:54ch}
.advisor .a-right{flex:1 1 340px; display:flex; flex-direction:column; gap:20px; align-items:flex-start}
.advisor .a-areas{display:flex; flex-wrap:wrap; gap:9px}
.advisor .a-areas span{font-family:var(--mono); font-size:.64rem; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-dim); border:1px solid var(--line-2); border-radius:3px; padding:8px 12px; transition:.3s}
.advisor .a-areas span:hover{border-color:var(--ice); color:var(--fg)}
.advisor .pick{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--baby); border:1px solid var(--line-2); padding:12px 26px; border-radius:3px; transition:.3s}
.advisor .pick:hover{border-color:var(--ice); background:rgba(103,211,232,.06); color:var(--fg)}
@media(max-width:760px){.advisor{flex-direction:column; align-items:stretch; gap:24px}}

/* engage */
.engage{text-align:center}
.engage h2{font-family:var(--disp); font-weight:300; font-size:clamp(2.6rem,8vw,7rem); line-height:.94; letter-spacing:-.03em; margin-bottom:20px}
.engage h2 em{font-style:italic; color:var(--ice)}
.engage .sub{max-width:46ch; margin:0 auto 56px; color:var(--fg-dim); font-size:1.15rem}
.card-stage{perspective:1600px; max-width:560px; margin:0 auto}
.card{position:relative; width:100%; aspect-ratio:1.62/1; transform-style:preserve-3d; transition:transform 1s cubic-bezier(.16,1,.3,1); cursor:pointer}
.card-stage:hover .card,.card-stage:focus-within .card{transform:rotateY(180deg)}
.face{position:absolute; inset:0; backface-visibility:hidden; border:1px solid var(--line-2); border-radius:10px; padding:clamp(26px,4vw,40px); display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(150deg,var(--ink-3),var(--ink)); box-shadow:0 50px 100px -50px rgba(0,0,0,.9)}
.face .tl{display:flex; align-items:center; justify-content:space-between}
.face .mono{font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-faint)}
.front .big{font-family:var(--disp); font-weight:320; font-size:clamp(1.7rem,3.4vw,2.5rem); text-align:left; letter-spacing:-.02em; line-height:1.05}
.front .big em{font-style:italic; color:var(--baby)}
.front .brandrow{display:flex; align-items:center; gap:11px}
.front .brandrow .wm{font-family:var(--disp); font-weight:500; letter-spacing:.14em; font-size:1.3rem}
.front .brandrow .wm b{color:var(--ice); font-weight:500}
.back{transform:rotateY(180deg); text-align:left}
.back .off{display:flex; flex-direction:column; gap:18px; margin:6px 0}
.back .off .o{border-top:1px solid var(--line); padding-top:13px}
.back .off .o .ot{font-family:var(--disp); font-weight:560; font-size:1.12rem}
.back .off .o .od{font-size:.9rem; color:var(--fg-faint); margin-top:3px}
.back .mail{font-family:var(--mono); font-size:1rem; color:var(--ice); letter-spacing:.02em}
.card-hint{font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-faint); margin-top:26px}
.cta{display:inline-flex; align-items:center; gap:12px; margin-top:46px; font-family:var(--mono); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:var(--ice); padding:16px 30px; border-radius:3px; transition:.35s; box-shadow:0 0 0 0 rgba(103,211,232,.4); position:relative; overflow:hidden}
.cta::after{content:""; position:absolute; top:0; bottom:0; left:-70%; width:46%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg); transition:left .6s cubic-bezier(.4,0,.2,1)}
.cta:hover{transform:translateY(-2px); box-shadow:0 14px 40px -12px rgba(103,211,232,.6)}
.cta:hover::after{left:130%}
.book-lead{margin-top:40px; font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-faint)}
.book-row{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:16px}
.book-btn{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--baby); background:transparent; border:1px solid var(--line-2); padding:11px 18px; border-radius:3px; cursor:pointer; transition:.3s}
.book-btn:hover{border-color:var(--ice); background:rgba(103,211,232,.06); color:var(--fg)}
.biz-card{position:relative; display:block; max-width:560px; margin:0 auto; aspect-ratio:1.62/1; cursor:pointer; will-change:transform}
.biz-card .face{transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .4s}
.biz-card:hover .face{transform:translateY(-6px); border-color:rgba(103,211,232,.4)}
.biz-card .big{text-align:center}
/* sign-off focus-read words (opacity driven per-frame by JS) */
.signoff .say .w{opacity:1}
/* tiers are choreographed per-frame */
.tier{will-change:transform}

/* footer */
footer{border-top:1px solid var(--line); padding:48px 0 60px}
footer .row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px}
footer .brand .wm{font-size:1.2rem}
footer .tag{font-family:var(--disp); font-style:italic; color:var(--fg-faint); font-size:1.02rem}
footer .meta{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; color:var(--fg-faint); text-transform:uppercase}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}.rv{opacity:1; transform:none}.rh .t{opacity:1!important;transform:none!important;filter:none!important}}
/* html.nomotion is set by JS under prefers-reduced-motion: the scroll engine
   never starts, so neutralize every scroll-choreographed scene statically. */
.nomotion .rv, .nomotion .rv.rw{opacity:1!important; transform:none!important; clip-path:none!important}
.nomotion .rw::after{display:none}
.nomotion .rule.rv{transform:scaleX(1)!important}
.nomotion .progress{display:none}
.nomotion section[data-num]::before{transform:none}
.nomotion .tier, .nomotion .biz-card, .nomotion .prac-card{opacity:1!important; transform:none!important}
.nomotion .signoff .say .w{opacity:1!important}
.nomotion .cve, .nomotion .honor, .nomotion .tool, .nomotion .resident .copy ul li{opacity:1!important; transform:none!important}
.nomotion .hero h1 .line, .nomotion .hero .sub, .nomotion .hero .ticker, .nomotion .hero .eyebrow{opacity:1!important; transform:none!important}
/* reduced motion: full transcript renders statically, no caret */
.nomotion .console .bd .l{opacity:1!important; transform:none!important}
.nomotion .console .cur{display:none!important}
/* reduced motion: the reactor renders fully assembled + legible, no loop */
.nomotion .orbit .orbfx, .nomotion .orb-scope, .nomotion .orbit .zlbl,
.nomotion .orbit .chip, .nomotion .orb-cap{opacity:1!important; transform:none!important}
.nomotion .o-ring{stroke-dashoffset:0!important}
.nomotion .o-ticks, .nomotion .o-arcs{opacity:1!important}
.nomotion .o-chev{opacity:.55!important}
.nomotion .o-core, .nomotion .o-st{opacity:1!important; transform:none!important}
.nomotion .o-st .halo{opacity:.22!important}
.nomotion .o-st .dot{opacity:.9!important}
.nomotion .o-st .slbl{fill:var(--fg)!important}
.nomotion .kbrow i{animation:none!important; transform:none!important}

/* Resources dropdown (home masthead) */
.nav .res{position:relative}
.nav .res summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);transition:color .3s}
.nav .res summary::-webkit-details-marker{display:none}
.nav .res summary::after{content:" \25BE"}
.nav .res[open] summary,.nav .res summary:hover{color:var(--fg)}
.nav .res-menu{position:absolute;right:0;top:160%;min-width:16rem;background:rgba(7,11,22,.97);border:1px solid var(--line-2);border-radius:6px;padding:8px;display:flex;flex-direction:column;backdrop-filter:blur(8px);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.nav .res-menu a{font-family:var(--body);font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--fg-dim);padding:9px 12px;border-radius:4px;transition:.2s}
.nav .res-menu a:hover{background:rgba(103,211,232,.08);color:var(--fg)}
/* "Our Platforms" dropdown: wider, with a mono sub-label under each platform */
.nav .platforms .res-menu{min-width:19rem}
.nav .platforms .res-menu a{display:flex;flex-direction:column;gap:2px;font-weight:600}
.nav .platforms .res-menu a .rm-sub{font-family:var(--mono);font-size:.66rem;font-weight:400;letter-spacing:.04em;color:var(--fg-faint);text-transform:none}
.nav .platforms .res-menu a:hover .rm-sub{color:var(--ice)}
@media(max-width:880px){.nav .res{display:none}}
/* Record — recognition links (e.g. RUSI taskforce) */
.honor a{color:var(--baby);text-decoration:none;border-bottom:1px solid var(--line-2);transition:color .2s,border-color .2s}
.honor a:hover{color:var(--ice);border-color:var(--ice)}

/* ═══════════════════════════════════════════════════════════
   CAREERS PAGE — vetted-bench recruiting. Self-contained: reuses the
   Vulnary tokens (atmosphere, .biz-card, .cta, .idx) but defines its own
   layout so it renders standalone under vulnary.css + the masthead chrome.
   ═══════════════════════════════════════════════════════════ */
.careers-page{padding-top:74px}                 /* clear the fixed masthead */
main.careers{padding-top:clamp(34px,7vh,82px); padding-bottom:clamp(48px,9vh,110px)}
main.careers .rule{margin:clamp(48px,8vh,92px) 0}
/* eyebrow (careers-scoped — hero version is .hero-scoped) */
.careers .eyebrow{display:flex; align-items:center; gap:16px; margin-bottom:30px}
.careers .eyebrow .ln{height:1px; width:64px; background:var(--line-2)}
/* section heading block */
.cr-shead{margin-bottom:clamp(26px,4vh,46px)}
.cr-shead .idx{display:block; margin-bottom:14px}
.cr-sec{font-family:var(--disp); font-weight:340; font-size:clamp(2rem,5vw,3.8rem); line-height:1; letter-spacing:-.02em}
.cr-sec em{font-style:italic; color:var(--baby)}
.cr-lead{max-width:68ch; font-size:clamp(1.08rem,1.6vw,1.34rem); line-height:1.55; color:var(--fg-dim)}
.cr-fine{margin-top:26px; max-width:74ch; font-family:var(--mono); font-size:.78rem; line-height:1.7; color:var(--fg-faint)}
.cr-fine .ice{color:var(--ice)}

/* hero */
.cr-hero{padding-top:clamp(20px,4vh,44px)}
.cr-h1{font-family:var(--disp); font-weight:300; font-size:clamp(2.7rem,8.5vw,6.4rem); line-height:.92; letter-spacing:-.03em; margin-bottom:clamp(26px,4vh,40px)}
.cr-h1 .line{display:block}
.cr-h1 em{font-style:italic; color:var(--baby)}
.cr-h1 .ice{color:var(--ice)}
.cr-sub{max-width:62ch; font-size:clamp(1.12rem,1.8vw,1.42rem); line-height:1.5; color:var(--fg-dim)}
.cr-sub b{color:var(--fg)}
.cr-cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:clamp(32px,5vh,52px)}
.cr-apply{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:var(--ice);
  padding:15px 28px; border-radius:3px; transition:.35s; box-shadow:0 0 0 0 rgba(103,211,232,.4)}
.cr-apply:hover{transform:translateY(-2px); box-shadow:0 14px 40px -12px rgba(103,211,232,.6)}
.cr-mailnote{font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; color:var(--fg-faint)}
.cr-mailnote a{color:var(--baby); border-bottom:1px solid var(--line-2); transition:.2s}
.cr-mailnote a:hover{color:var(--ice); border-color:var(--ice)}

/* the pitch */
.cr-pitch-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:start; margin-top:clamp(20px,3vh,34px)}
.cr-why{list-style:none; display:flex; flex-direction:column; gap:20px}
.cr-why li{display:flex; gap:14px; line-height:1.5; color:var(--fg-dim)}
.cr-why li b{color:var(--fg)}
.cr-tick{flex:0 0 auto; width:9px; height:9px; margin-top:.5em; border-radius:50%;
  background:var(--ice); box-shadow:0 0 10px rgba(103,211,232,.7)}
@media(max-width:820px){.cr-pitch-grid{grid-template-columns:1fr; gap:34px}}

/* what we look for — four discipline cards, each with its own accent, a big ghost
   numeral (CSS counter — no markup change) and a colored glow-lift on hover. */
.cr-disc{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,24px); margin-top:clamp(28px,4vh,44px); counter-reset:disc}
.cr-card{position:relative; --ac:var(--ice); counter-increment:disc; border:1px solid var(--line-2); border-radius:12px; padding:clamp(24px,2.8vw,34px);
  background:linear-gradient(150deg,var(--ink-3),var(--ink)); transition:border-color .4s, transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; overflow:hidden}
.cr-card:nth-child(1){--ac:#67d3e8} .cr-card:nth-child(2){--ac:#37e0a6} .cr-card:nth-child(3){--ac:#ff9d5c} .cr-card:nth-child(4){--ac:#a78bfa}
.cr-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--ac),transparent 82%); opacity:.65; transition:opacity .4s, width .4s}
.cr-card::after{content:counter(disc,decimal-leading-zero); position:absolute; right:2px; bottom:-30px; z-index:0;
  font-family:var(--disp); font-weight:300; font-size:9rem; line-height:1; color:var(--ac); opacity:.07; pointer-events:none;
  transition:opacity .45s, transform .45s cubic-bezier(.2,.8,.2,1)}
.cr-card:hover{border-color:color-mix(in srgb, var(--ac) 46%, transparent); transform:translateY(-6px);
  box-shadow:0 34px 74px -36px color-mix(in srgb, var(--ac) 62%, transparent)}
.cr-card:hover::before{opacity:1; width:4px}
.cr-card:hover::after{opacity:.13; transform:translateY(-8px)}
.cr-card > *{position:relative; z-index:1}
.cr-cat{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ac)}
.cr-cat::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ac); box-shadow:0 0 10px var(--ac)}
.cr-cn{font-family:var(--disp); font-weight:500; font-size:clamp(1.25rem,2vw,1.6rem); margin:13px 0 12px; letter-spacing:-.01em}
.cr-cd{color:var(--fg-dim); font-size:.98rem; line-height:1.55}
.cr-card ul{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.cr-card li{font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--baby-dim); border:1px solid var(--line); border-radius:20px; padding:5px 11px; transition:border-color .3s, color .3s}
.cr-card:hover li{border-color:color-mix(in srgb, var(--ac) 38%, transparent); color:var(--fg)}
@media(max-width:820px){.cr-disc{grid-template-columns:1fr}}

/* the model — apply / screen / interview / on-call */
.cr-flow{list-style:none; counter-reset:none; display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,26px); margin-top:clamp(28px,4vh,46px)}
.cr-step{position:relative; border-top:1px solid var(--line-2); padding-top:22px}
.cr-step::before{content:""; position:absolute; top:-1px; left:0; width:34px; height:2px;
  background:var(--ice); box-shadow:0 0 12px rgba(103,211,232,.7)}
.cr-sn{font-family:var(--mono); font-size:.84rem; letter-spacing:.16em; color:var(--ice)}
.cr-sl{font-family:var(--disp); font-weight:500; font-size:clamp(1.15rem,1.8vw,1.42rem); margin:10px 0 10px; letter-spacing:-.01em}
.cr-st-body p{color:var(--fg-dim); font-size:.95rem; line-height:1.5}
@media(max-width:880px){.cr-flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cr-flow{grid-template-columns:1fr}}

/* apply CTA (reuses .biz-card + .cta) */
.cr-engage{text-align:center; padding-top:clamp(20px,4vh,40px)}
.cr-eh{font-family:var(--disp); font-weight:300; font-size:clamp(2.4rem,7vw,5.2rem); line-height:.96; letter-spacing:-.03em; margin-bottom:18px}
.cr-eh em{font-style:italic; color:var(--ice)}
.cr-esub{max-width:46ch; margin:0 auto 48px; color:var(--fg-dim); font-size:1.12rem}

/* VulnaryColophon fallback — the shared colophon uses Tailwind utility
   classes that don't exist under vulnary.css; give it self-contained styling
   so it renders cleanly on Vulnary content pages loaded with vulnary.css. */
.careers-page footer.mt-32{margin-top:clamp(56px,9vh,110px); border-top:1px solid var(--line)}
.careers-page footer.mt-32 > div{max-width:var(--maxw); margin:0 auto; padding:40px clamp(20px,5vw,72px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-faint)}
.careers-page footer.mt-32 a{color:var(--baby-dim); transition:color .25s}
.careers-page footer.mt-32 a:hover{color:var(--baby)}

/* ============================================================= */
/* THE PROOF ENGINE page (/proof-engine) — dossier-grade, native */
/* ============================================================= */
.pe{padding-top:clamp(40px,7vh,72px)}
.pe .bad{color:#ff5a6a}
.pe .vchip{font-family:var(--mono); font-size:.58rem; font-weight:700; letter-spacing:.06em; padding:3px 7px; border-radius:2px; flex:0 0 auto}
.pe .vchip.ok{color:#37e0a6; background:rgba(55,224,166,.1)}
.pe .vchip.no{color:#ff5a6a; background:rgba(255,90,106,.1)}
.pe .vchip.ov{color:#ffc24d; background:rgba(255,193,77,.1)}
.pe-shead{margin-bottom:clamp(28px,4vh,46px)}
.pe-shead .idx{display:block; margin-bottom:14px}
.pe-sec{font-family:var(--disp); font-weight:360; font-size:clamp(1.9rem,3.4vw,2.5rem); letter-spacing:-.015em; line-height:1.04; margin:0}
.pe-sec em{font-style:italic; color:var(--baby)}

/* hero */
.pe-hero{padding:clamp(34px,6vh,68px) 0 clamp(30px,4vh,46px)}
.pe-hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,64px); align-items:center}
.pe-h1{font-family:var(--disp); font-weight:310; font-size:clamp(2.8rem,6vw,4.6rem); line-height:.98; letter-spacing:-.02em; margin:18px 0 0}
.pe-h1 .line{display:block}
.pe-h1 em{font-style:italic; color:var(--ice)}
.pe-sub{font-size:clamp(1rem,1.3vw,1.14rem); line-height:1.62; color:var(--fg-dim); max-width:34rem; margin:24px 0 0}
.pe-sub b{color:var(--fg)}
.pe-cta-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:30px}
.pe-book{font-family:var(--body); font-weight:600; font-size:.95rem; padding:14px 24px; border-radius:3px; background:var(--ice); color:#041517; transition:.3s; box-shadow:0 16px 44px -18px rgba(103,211,232,.5)}
.pe-book:hover{filter:brightness(1.08); transform:translateY(-1px)}
.pe-ghost{font-family:var(--body); font-weight:600; font-size:.95rem; padding:14px 22px; border-radius:3px; border:1px solid var(--line-2); color:var(--fg); transition:.3s}
.pe-ghost:hover{border-color:var(--ice); color:var(--ice)}
.pe-note{font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--fg-faint); margin:16px 0 0}

/* hero mini-dossier */
.pe-mini{position:relative; border:1px solid var(--line-2); border-radius:3px; background:linear-gradient(180deg,var(--ink-card),var(--ink-2)); box-shadow:0 50px 120px -50px #000, inset 0 1px 0 rgba(255,255,255,.03); transform:rotate(-1.1deg); font-family:var(--mono)}
.pm-head{display:flex; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--line); font-size:.66rem; letter-spacing:.12em; color:var(--fg-faint)}
.pm-body{padding:18px}
.pm-big{font-family:var(--disp); font-size:1.7rem; line-height:1.05}
.pm-big .ice{color:var(--ice)} .pm-big .bad{color:#ff5a6a}
.pm-sub{font-size:.72rem; color:var(--fg-dim); margin:4px 0 16px}
.pm-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:.72rem}
.pm-row .nm{color:var(--fg)} .pm-row .s{margin-left:auto; color:var(--fg-faint)}
.pm-stamp{position:absolute; top:16px; right:-6px; font-weight:700; font-size:.7rem; letter-spacing:.18em; color:#ff5a6a; border:2px solid #ff5a6a; padding:6px 12px; border-radius:3px; transform:rotate(6deg); opacity:.85}
/* enriched live-reconstruction panel */
.pm-chrome{display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--line); font-size:.64rem; letter-spacing:.1em; color:var(--fg-faint)}
.pm-dots{display:flex; gap:6px} .pm-dots i{width:8px; height:8px; border-radius:50%; background:var(--line-2)}
.pm-title{color:var(--fg-dim)}
.pm-live{margin-left:auto; display:flex; align-items:center; gap:6px; color:#37e0a6; text-transform:uppercase; letter-spacing:.14em}
.pm-pulse{width:6px; height:6px; border-radius:50%; background:#37e0a6; animation:pm-pulse 1.9s ease-out infinite}
@keyframes pm-pulse{0%{box-shadow:0 0 0 0 rgba(55,224,166,.5)} 70%{box-shadow:0 0 0 6px rgba(55,224,166,0)} 100%{box-shadow:0 0 0 0 rgba(55,224,166,0)}}
.pm-trace{padding:12px 16px; font-size:.67rem; color:var(--fg-dim); border-bottom:1px solid var(--line); line-height:1.5}
.pm-trace b{color:var(--ice); font-weight:500}
.pm-caret{display:inline-block; width:7px; height:12px; background:var(--ice); margin-left:5px; vertical-align:-1px; animation:pm-blink 1.1s steps(1) infinite}
@keyframes pm-blink{50%{opacity:0}}
.pm-xpl{margin:14px 16px 2px; padding:11px 13px; background:#070c15; border:1px solid var(--line); border-radius:4px; font-size:.65rem; line-height:1.5; overflow:hidden}
.pm-xk{display:block; color:var(--fg-faint); font-size:.56rem; letter-spacing:.1em; margin-bottom:6px}
.pm-xpl code{color:var(--fg); white-space:nowrap}
.pm-redact{background:rgba(255,90,106,.16); color:transparent; border-radius:2px; padding:0 2px; user-select:none}
.pm-cmt{color:var(--fg-faint)}
.pm-verdict{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 16px 18px; flex-wrap:wrap}
.pm-fix{font-size:.65rem; color:#37e0a6; letter-spacing:.05em; font-weight:600}
.nomotion .pm-pulse,.nomotion .pm-caret{animation:none}

/* on-your-side strip */
.pe-strip{display:flex; align-items:center; gap:16px; padding:18px clamp(20px,3vw,30px); margin:8px 0 0; border:1px solid var(--line); border-left:2px solid var(--ice); background:var(--ink-2); font-size:.92rem; color:var(--fg-dim)}
.pe-strip b{color:var(--fg)}
.pe-strip .dot{width:7px; height:7px; border-radius:50%; background:var(--ice); flex:0 0 auto; box-shadow:0 0 12px var(--ice)}

/* method spine */
.pe-method{padding:clamp(54px,8vh,84px) 0 0}
/* scroll-driven stepper: a glowing progress rail + node dots; steps dim until
   they cross the viewport centre, then light up + slide in (pe-scroll.js). Without
   JS the .pe-scroll class is never added, so steps stay fully visible (static). */
.pe-spine{position:relative; padding-left:clamp(26px,3.6vw,48px)}
.pe-spine::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:var(--line-2); border-radius:2px}
.pe-spine.pe-scroll::after{content:""; position:absolute; left:0; top:6px; width:2px; height:calc(var(--p,0) * (100% - 12px)); background:var(--ice); border-radius:2px; box-shadow:0 0 14px rgba(103,211,232,.55); transition:height .6s cubic-bezier(.4,0,.2,1)}
.pe-spine .pe-step{position:relative; display:grid; grid-template-columns:170px 1fr 116px; gap:clamp(20px,3vw,40px); align-items:start; padding:clamp(30px,5vh,54px) 0}
.pe-spine .pe-step::before{content:""; position:absolute; top:calc(clamp(30px,5vh,54px) + 6px); left:calc(-1 * clamp(26px,3.6vw,48px) - 4px); width:10px; height:10px; border-radius:50%; background:var(--ink-2); border:2px solid var(--line-2); transition:border-color .45s, background .45s, box-shadow .45s}
.pe-spine.pe-scroll .pe-step.now::before{border-color:var(--ice); background:var(--ice); box-shadow:0 0 12px rgba(103,211,232,.8)}
.pe-spine.pe-scroll .pe-step.in::before{border-color:var(--ice)}
.pe-spine .k{font-family:var(--mono); font-size:.76rem; letter-spacing:.18em; color:var(--ice); padding-top:4px; transition:color .45s}
.pe-spine.pe-scroll .pe-step:not(.in) .k{color:var(--fg-faint)}
.pe-spine h3{font-family:var(--disp); font-weight:540; font-size:clamp(1.3rem,2vw,1.5rem); margin:0; letter-spacing:-.01em; transition:color .45s}
.pe-spine.pe-scroll .pe-step.now h3{color:#fff}
.pe-spine p{margin:9px 0 0; color:var(--fg-dim); font-size:.94rem; line-height:1.58; max-width:40rem}
.pe-spine .v{font-family:var(--mono); font-size:.62rem; letter-spacing:.07em; text-transform:uppercase; color:var(--baby-dim); text-align:right; line-height:1.55; padding-top:6px}
.pe-spine.pe-scroll .pe-step{opacity:.32; transform:translateY(10px); transition:opacity .55s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
.pe-spine.pe-scroll .pe-step.in{opacity:1; transform:none}
@media(max-width:720px){.pe-spine .pe-step{grid-template-columns:1fr; gap:6px} .pe-spine .v{text-align:left; padding-top:2px}}
.pe-spine .v{font-family:var(--mono); font-size:.68rem; color:var(--fg-faint); text-align:right; line-height:1.5}

/* exhibit dossier */
.pe-exhibit{padding:clamp(54px,8vh,84px) 0 0}
.pe-dossier{border:1px solid var(--line-2); border-radius:3px; background:var(--ink-2); box-shadow:0 50px 120px -56px #000; overflow:hidden}
.pd-top{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:15px 22px; border-bottom:1px solid var(--line); background:var(--ink-card); font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--fg-faint)}
.pd-top .t{color:var(--fg); letter-spacing:.2em}
.pd-grid{display:grid; grid-template-columns:1fr 1fr}
.pd-col{padding:24px}
.pd-col + .pd-col{border-left:1px solid var(--line)}
.pd-stat{display:flex; align-items:baseline; gap:12px; margin-bottom:16px}
.pd-stat .big{font-family:var(--disp); font-size:2.6rem; line-height:.9}
.pd-stat .big.ice{color:var(--ice)} .pd-stat .big.bad{color:#ff5a6a}
.pd-stat .l{font-size:.78rem; color:var(--fg-dim); line-height:1.4}
.pd-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:.86rem}
.pd-row .nm{color:var(--fg)} .pd-row.miss .nm{color:#fff}
.pd-row .s{margin-left:auto; color:var(--fg-faint); font-family:var(--mono); font-size:.74rem}
.pd-foot{padding:14px 22px; border-top:1px solid var(--line); background:var(--ink-card); font-family:var(--mono); font-size:.72rem; color:var(--fg-faint)}

/* ladder */
.pe-ways{padding:clamp(54px,8vh,84px) 0 0}
.pe-ladder{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.pe-ladder .rung{background:var(--ink-2); padding:clamp(24px,2.6vw,32px); display:flex; flex-direction:column; position:relative}
.pe-ladder .rung.feat{background:linear-gradient(180deg,rgba(103,211,232,.06),var(--ink-2))}
.pe-ladder .rung.feat::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--ice)}
.pe-ladder .tn{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ice)}
.pe-ladder .pr{font-family:var(--disp); font-size:1.7rem; margin:16px 0 2px}
.pe-ladder .pn{font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:var(--fg-faint)}
.pe-ladder ul{list-style:none; display:flex; flex-direction:column; gap:11px; margin:20px 0 24px}
.pe-ladder li{position:relative; padding-left:16px; font-size:.86rem; color:var(--fg-dim); line-height:1.45}
.pe-ladder li::before{content:"—"; position:absolute; left:0; color:var(--ice)}
.rung-cta{margin-top:auto; text-align:center; font-family:var(--body); font-weight:600; font-size:.9rem; padding:12px; border-radius:3px; border:1px solid var(--line-2); color:var(--fg); transition:.3s}
.rung-cta:hover{border-color:var(--ice); color:var(--ice)}
.rung-cta.on{background:var(--ice); color:#041517; border-color:var(--ice)}
.rung-cta.on:hover{filter:brightness(1.08); color:#041517}

/* why us */
.pe-why{padding:clamp(54px,8vh,84px) 0 clamp(40px,6vh,68px)}
.pe-why-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,56px); align-items:center}
.pe-why-big{font-family:var(--disp); font-weight:520; font-size:clamp(1.5rem,2.4vw,1.95rem); line-height:1.32; margin-top:16px}
.pe-why-big em{font-style:italic; color:var(--ice)}
.pe-why-p{color:var(--fg-dim); font-size:.98rem; line-height:1.7; margin:20px 0 0}
.pe-ev{border:1px solid var(--line); border-radius:3px; background:var(--ink-2); font-family:var(--mono)}
.pe-ev .ev-row{display:flex; align-items:center; gap:14px; padding:15px 18px; border-bottom:1px solid var(--line); font-size:.78rem}
.pe-ev .ev-row:last-child{border-bottom:0}
.pe-ev .id{color:var(--ice)} .pe-ev .ds{color:var(--fg-dim)} .pe-ev .pv{margin-left:auto; color:#37e0a6; font-weight:700; letter-spacing:.08em; font-size:.7rem}
.pe-ev .ev-row.you .id{color:#fff} .pe-ev .ev-row.you .pv{color:var(--ice)}

/* engage */
.pe-engage{text-align:center; padding:clamp(60px,9vh,96px) 0 clamp(40px,6vh,72px)}
.pe-engage-h{font-family:var(--disp); font-weight:520; font-size:clamp(2.2rem,4vw,3rem); margin:0; letter-spacing:-.01em}
.pe-engage-h em{font-style:italic; color:var(--ice)}
.pe-engage-sub{color:var(--fg-dim); max-width:34rem; margin:18px auto 28px; line-height:1.6}

/* per-platform "how it works" orb — reuses the home orb visual, rendered pre-lit
   (no JS engine on platform pages); just centre the ring + size it */
.orbit.pe-orb{display:flex; justify-content:center; align-items:center; margin:clamp(22px,4.5vh,48px) auto clamp(10px,2vh,24px); max-width:560px; padding:0; min-height:0}
.pe-orb .orb-ring{width:clamp(280px,42vw,452px); justify-self:center}

/* per-platform ANIMATED flow diagram (How it works): input → 4 stages → proof.
   A pulse travels the rail and lights each stage as it passes; pure CSS so it
   runs without the home's JS engine. 4.6s loop. */
.vflow{margin:clamp(20px,4vh,44px) auto clamp(10px,2vh,22px); max-width:740px; padding:0 10px}
.vflow-svg{display:block; width:100%; height:auto; overflow:visible}
.vf-rail{stroke:var(--line-2); stroke-width:1.4}
.vf-rail-lit{stroke:var(--ice); stroke-width:1.8; stroke-dasharray:480; stroke-dashoffset:480; opacity:.55; animation:vf-draw 4.6s cubic-bezier(.55,0,.45,1) infinite}
@keyframes vf-draw{0%,6%{stroke-dashoffset:480} 84%{stroke-dashoffset:0; opacity:.55} 100%{stroke-dashoffset:0; opacity:0}}
.vf-src rect{fill:var(--ink-2); stroke:var(--line-2); stroke-width:1}
.vf-src-t{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; fill:var(--fg-dim); text-anchor:middle; text-transform:uppercase}
.vf-st .vf-halo{fill:var(--ice); opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.5); animation:vf-halo 4.6s ease-out infinite}
.vf-st .vf-ring{fill:var(--ink); stroke:var(--line-2); stroke-width:1.4}
.vf-st .vf-core{fill:var(--fg-faint); animation:vf-core 4.6s ease-out infinite}
.vf-num{font-family:var(--mono); font-size:9px; letter-spacing:.18em; fill:var(--fg-faint); text-anchor:middle}
.vf-lbl{font-family:var(--mono); font-size:12px; letter-spacing:.16em; fill:var(--baby-dim); text-anchor:middle; animation:vf-lbl 4.6s ease-out infinite}
@keyframes vf-halo{0%,9%{opacity:0; transform:scale(.5)} 15%{opacity:.22; transform:scale(1)} 32%{opacity:0; transform:scale(1.55)} 100%{opacity:0; transform:scale(1.55)}}
@keyframes vf-core{0%,9%{fill:var(--fg-faint)} 15%{fill:var(--ice)} 34%{fill:var(--fg-faint)} 100%{fill:var(--fg-faint)}}
@keyframes vf-lbl{0%,9%{fill:var(--baby-dim)} 15%{fill:var(--fg)} 34%{fill:var(--baby-dim)} 100%{fill:var(--baby-dim)}}
.vf-st.s2 .vf-halo,.vf-st.s2 .vf-core,.vf-st.s2 .vf-lbl{animation-delay:1.36s}
.vf-st.s3 .vf-halo,.vf-st.s3 .vf-core,.vf-st.s3 .vf-lbl{animation-delay:2.69s}
.vf-pulse{fill:var(--ice); filter:drop-shadow(0 0 6px var(--ice)); animation:vf-run 4.6s cubic-bezier(.55,0,.45,1) infinite}
@keyframes vf-run{0%{transform:translateX(120px); opacity:0} 6%{opacity:1} 84%{transform:translateX(600px); opacity:1} 100%{transform:translateX(648px); opacity:0}}
.vf-check{stroke:#37e0a6; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; opacity:0; animation:vf-proof 4.6s ease-out infinite}
.vf-out-t{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; fill:var(--fg-faint); text-anchor:middle; text-transform:uppercase; animation:vf-proofT 4.6s ease-out infinite}
@keyframes vf-proof{0%,80%{opacity:0; transform:scale(.6)} 90%{opacity:1; transform:scale(1)} 100%{opacity:1}}
@keyframes vf-proofT{0%,80%{fill:var(--fg-faint)} 92%{fill:#37e0a6} 100%{fill:#37e0a6}}
@media(max-width:560px){.vf-lbl{font-size:14px} .vf-src-t,.vf-out-t{font-size:12px}}
.nomotion .vf-rail-lit,.nomotion .vf-pulse{display:none}
.nomotion .vf-halo{display:none}
.nomotion .vf-core,.nomotion .vf-lbl,.nomotion .vf-check,.nomotion .vf-out-t{animation:none}
.nomotion .vf-core{fill:var(--ice)} .nomotion .vf-lbl{fill:var(--fg)} .nomotion .vf-check{opacity:1} .nomotion .vf-out-t{fill:#37e0a6}

/* self-contained colophon (every Vulnary content page; replaces the Tailwind
   footer that was unstyled outside the home/careers stylesheet scope) */
.vn-colophon{margin-top:clamp(56px,12vh,128px); border-top:1px solid var(--line)}
.vn-colophon-in{max-width:var(--maxw); margin:0 auto; padding:clamp(26px,4vw,40px) clamp(20px,5vw,72px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-faint)}
.vn-colophon-in a{color:var(--baby-dim); transition:color .25s}
.vn-colophon-in a:hover{color:var(--baby)}

@media(max-width:880px){
  .pe-hero-grid,.pe-why-grid{grid-template-columns:1fr}
  .pe-mini{transform:none; margin-top:8px}
  .pe-spine .pe-step{grid-template-columns:1fr; gap:8px} .pe-spine .v{text-align:left}
  .pd-grid{grid-template-columns:1fr} .pd-col + .pd-col{border-left:0; border-top:1px solid var(--line)}
  .pe-ladder{grid-template-columns:1fr}
}

/* ===== Pentest kill-chain diagram (vkc) ===== */
.vkc{margin:clamp(20px,4vh,44px) auto clamp(10px,2vh,22px); max-width:720px; padding:0 10px}
.vkc-svg{display:block; width:100%; height:auto; overflow:visible}
.vkc-edge{fill:none; stroke:var(--line-2); stroke-width:1.6}
.vkc-edge.branch{stroke-dasharray:2 5; opacity:.35}
.vkc-edge.e1,.vkc-edge.e2,.vkc-edge.e3{stroke:var(--ice); stroke-dasharray:175; stroke-dashoffset:175}
.vkc-edge.e1{animation:vkc-e1 5s linear infinite}
.vkc-edge.e2{animation:vkc-e2 5s linear infinite}
.vkc-edge.e3{animation:vkc-e3 5s linear infinite}
@keyframes vkc-e1{0%,10%{stroke-dashoffset:175;opacity:.9} 22%{stroke-dashoffset:0} 86%{stroke-dashoffset:0;opacity:.9} 93%{opacity:0} 100%{stroke-dashoffset:175;opacity:0}}
@keyframes vkc-e2{0%,26%{stroke-dashoffset:175;opacity:.9} 38%{stroke-dashoffset:0} 86%{stroke-dashoffset:0;opacity:.9} 93%{opacity:0} 100%{stroke-dashoffset:175;opacity:0}}
@keyframes vkc-e3{0%,46%{stroke-dashoffset:175;opacity:.9} 58%{stroke-dashoffset:0} 86%{stroke-dashoffset:0;opacity:.9} 93%{opacity:0} 100%{stroke-dashoffset:175;opacity:0}}
.vkc-node rect{fill:var(--ink-2); stroke:var(--line-2); stroke-width:1.4}
.vkc-node text{font-family:var(--mono); font-size:11px; letter-spacing:.12em; fill:var(--fg-dim); text-anchor:middle}
.vkc-node.branch rect{stroke-dasharray:3 4; fill:none} .vkc-node.branch text{fill:var(--fg-faint); opacity:.55}
.vkc-node.n0 rect{stroke:var(--ice)} .vkc-node.n0 text{fill:var(--fg)}
.vkc-node.n1 rect{animation:vkc-nlit1 5s ease-out infinite} .vkc-node.n1 text{animation:vkc-ntext1 5s ease-out infinite}
.vkc-node.n2 rect{animation:vkc-nlit2 5s ease-out infinite} .vkc-node.n2 text{animation:vkc-ntext2 5s ease-out infinite}
.vkc-node.n3 rect{animation:vkc-nlit3 5s ease-out infinite}
@keyframes vkc-nlit1{0%,26%{stroke:var(--line-2)} 30%{stroke:var(--ice)} 86%{stroke:var(--ice)} 95%{stroke:var(--line-2)}}
@keyframes vkc-ntext1{0%,26%{fill:var(--fg-dim)} 30%{fill:var(--fg)} 86%{fill:var(--fg)} 95%{fill:var(--fg-dim)}}
@keyframes vkc-nlit2{0%,46%{stroke:var(--line-2)} 50%{stroke:var(--ice)} 86%{stroke:var(--ice)} 95%{stroke:var(--line-2)}}
@keyframes vkc-ntext2{0%,46%{fill:var(--fg-dim)} 50%{fill:var(--fg)} 86%{fill:var(--fg)} 95%{fill:var(--fg-dim)}}
@keyframes vkc-nlit3{0%,66%{stroke:var(--line-2)} 70%{stroke:#ff5a6a} 86%{stroke:#ff5a6a} 95%{stroke:var(--line-2)}}
.vkc-goal .vkc-glow{fill:#ff5a6a; opacity:0; animation:vkc-goalglow 5s ease-out infinite}
.vkc-node .vkc-goal-t{font-family:var(--disp); font-size:13px; letter-spacing:.08em; fill:var(--fg)}
.vkc-node .vkc-goal-s{font-size:8px; letter-spacing:.08em; fill:var(--fg-faint); animation:vkc-goals 5s ease-out infinite}
@keyframes vkc-goalglow{0%,66%{opacity:0} 72%{opacity:.3} 86%{opacity:.14} 95%{opacity:0}}
@keyframes vkc-goals{0%,66%{fill:var(--fg-faint)} 72%{fill:#ff8a96} 86%{fill:#ff8a96} 95%{fill:var(--fg-faint)}}
.vkc-pulse{fill:var(--ice); filter:drop-shadow(0 0 6px var(--ice)); animation:vkc-hop 5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes vkc-hop{0%{transform:translate(78px,100px);opacity:0} 8%{opacity:1} 10%{transform:translate(78px,100px)} 26%{transform:translate(270px,64px)} 46%{transform:translate(469px,100px)} 66%{transform:translate(662px,100px)} 80%{transform:translate(662px,100px);opacity:1} 88%{opacity:0} 100%{transform:translate(662px,100px);opacity:0}}
.nomotion .vkc-pulse,.nomotion .vkc-edge.e1,.nomotion .vkc-edge.e2,.nomotion .vkc-edge.e3{animation:none}
.nomotion .vkc-edge.e1,.nomotion .vkc-edge.e2,.nomotion .vkc-edge.e3{stroke-dashoffset:0}
.nomotion .vkc-node rect,.nomotion .vkc-node text,.nomotion .vkc-goal .vkc-glow,.nomotion .vkc-goal-s{animation:none}

/* ===== Pentest attack-graph (kcg) — complex multi-surface graph, one live path ===== */
.kcg{margin:clamp(18px,3.5vh,40px) auto clamp(8px,2vh,18px); max-width:880px; padding:0 6px}
.kcg-svg{display:block; width:100%; height:auto; overflow:visible}
.kcg-cap{font-family:var(--mono); font-size:9px; letter-spacing:.18em; fill:var(--fg-faint); text-transform:uppercase}
.kcg-cap.end{text-anchor:end}
.kcg-mesh path{fill:none; stroke:var(--line-2); stroke-width:1; opacity:.32; stroke-dasharray:5 9; animation:kcg-flow 2.4s linear infinite}
.kcg-mesh path:nth-child(2n){animation-duration:3.1s} .kcg-mesh path:nth-child(3n){animation-duration:2.7s; animation-direction:reverse}
@keyframes kcg-flow{to{stroke-dashoffset:-14}}
.kcg-pulse2{fill:var(--baby); filter:drop-shadow(0 0 5px var(--baby)); opacity:.85; animation:kcg-hop2 5.4s cubic-bezier(.5,0,.5,1) infinite}
.kcg-pulse3{fill:var(--baby); filter:drop-shadow(0 0 5px var(--baby)); opacity:.85; animation:kcg-hop3 5.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes kcg-hop2{0%{transform:translate(86px,146px);opacity:0} 14%{opacity:.85} 16%{transform:translate(86px,146px)} 30%{transform:translate(298px,148px)} 44%{transform:translate(510px,178px)} 58%{transform:translate(700px,124px)} 72%{transform:translate(838px,180px);opacity:.85} 84%{opacity:0} 100%{transform:translate(838px,180px);opacity:0}}
@keyframes kcg-hop3{0%{transform:translate(86px,226px);opacity:0} 22%{opacity:.85} 24%{transform:translate(86px,226px)} 38%{transform:translate(298px,248px)} 52%{transform:translate(510px,272px)} 66%{transform:translate(700px,206px)} 80%{transform:translate(838px,180px);opacity:.85} 90%{opacity:0} 100%{transform:translate(838px,180px);opacity:0}}
.nomotion .kcg-mesh path,.nomotion .kcg-pulse2,.nomotion .kcg-pulse3{animation:none}
.kcg-live{fill:none; stroke:var(--ice); stroke-width:1.8; stroke-dasharray:260; stroke-dashoffset:260}
.kcg-live.e1{animation:kcg-d1 5.4s linear infinite}
.kcg-live.e2{animation:kcg-d2 5.4s linear infinite}
.kcg-live.e3{animation:kcg-d3 5.4s linear infinite}
.kcg-live.e4{animation:kcg-d4 5.4s linear infinite}
@keyframes kcg-d1{0%,8%{stroke-dashoffset:260;opacity:.9} 20%{stroke-dashoffset:0} 88%{stroke-dashoffset:0;opacity:.9} 94%{opacity:0} 100%{stroke-dashoffset:260;opacity:0}}
@keyframes kcg-d2{0%,22%{stroke-dashoffset:260;opacity:.9} 34%{stroke-dashoffset:0} 88%{stroke-dashoffset:0;opacity:.9} 94%{opacity:0} 100%{stroke-dashoffset:260;opacity:0}}
@keyframes kcg-d3{0%,36%{stroke-dashoffset:260;opacity:.9} 48%{stroke-dashoffset:0} 88%{stroke-dashoffset:0;opacity:.9} 94%{opacity:0} 100%{stroke-dashoffset:260;opacity:0}}
@keyframes kcg-d4{0%,50%{stroke-dashoffset:260;opacity:.9} 62%{stroke-dashoffset:0} 88%{stroke-dashoffset:0;opacity:.9} 94%{opacity:0} 100%{stroke-dashoffset:260;opacity:0}}
.kcg-node rect{fill:var(--ink-2); stroke:var(--line); stroke-width:1.2}
.kcg-node text{font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; fill:var(--fg-faint); text-anchor:middle}
.kcg-node.p0 rect{stroke:var(--ice)} .kcg-node.p0 text{fill:var(--fg)}
.kcg-node.p1 rect{animation:kcg-r1 5.4s ease-out infinite} .kcg-node.p1 text{animation:kcg-t1 5.4s ease-out infinite}
.kcg-node.p2 rect{animation:kcg-r2 5.4s ease-out infinite} .kcg-node.p2 text{animation:kcg-t2 5.4s ease-out infinite}
.kcg-node.p3 rect{animation:kcg-r3 5.4s ease-out infinite} .kcg-node.p3 text{animation:kcg-t3 5.4s ease-out infinite}
@keyframes kcg-r1{0%,20%{stroke:var(--line)} 24%{stroke:var(--ice)} 88%{stroke:var(--ice)} 95%{stroke:var(--line)}}
@keyframes kcg-t1{0%,20%{fill:var(--fg-faint)} 24%{fill:var(--fg)} 88%{fill:var(--fg)} 95%{fill:var(--fg-faint)}}
@keyframes kcg-r2{0%,34%{stroke:var(--line)} 38%{stroke:var(--ice)} 88%{stroke:var(--ice)} 95%{stroke:var(--line)}}
@keyframes kcg-t2{0%,34%{fill:var(--fg-faint)} 38%{fill:var(--fg)} 88%{fill:var(--fg)} 95%{fill:var(--fg-faint)}}
@keyframes kcg-r3{0%,48%{stroke:var(--line)} 52%{stroke:var(--ice)} 88%{stroke:var(--ice)} 95%{stroke:var(--line)}}
@keyframes kcg-t3{0%,48%{fill:var(--fg-faint)} 52%{fill:var(--fg)} 88%{fill:var(--fg)} 95%{fill:var(--fg-faint)}}
.kcg-node.goal .kcg-glow{fill:#ff5a6a; opacity:0; animation:kcg-glow 5.4s ease-out infinite}
.kcg-node.goal rect{fill:rgba(255,90,106,.06); stroke:var(--line-2)}
.kcg-node.goal .kcg-goal-t{font-family:var(--disp); font-size:11px; letter-spacing:.05em; fill:var(--fg-dim); animation:kcg-gt 5.4s ease-out infinite}
.kcg-node.goal .kcg-goal-s{font-size:7.5px; letter-spacing:.07em; fill:var(--fg-faint)}
@keyframes kcg-glow{0%,64%{opacity:0} 70%{opacity:.32} 88%{opacity:.16} 96%{opacity:0}}
@keyframes kcg-gt{0%,64%{fill:var(--fg-dim)} 70%{fill:#ff8a96} 88%{fill:#ff8a96} 96%{fill:var(--fg-dim)}}
.kcg-pulse{fill:var(--ice); filter:drop-shadow(0 0 6px var(--ice)); animation:kcg-hop 5.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes kcg-hop{0%{transform:translate(86px,66px);opacity:0} 6%{opacity:1} 10%{transform:translate(86px,66px)} 24%{transform:translate(298px,50px)} 38%{transform:translate(510px,88px)} 52%{transform:translate(700px,124px)} 66%{transform:translate(838px,180px)} 82%{transform:translate(838px,180px);opacity:1} 90%{opacity:0} 100%{transform:translate(838px,180px);opacity:0}}
.nomotion .kcg-live{animation:none; stroke-dashoffset:0} .nomotion .kcg-pulse{animation:none; opacity:0}
.nomotion .kcg-node rect,.nomotion .kcg-node text,.nomotion .kcg-node.goal .kcg-glow,.nomotion .kcg-node.goal .kcg-goal-t{animation:none}
@media(max-width:620px){.kcg-node text{font-size:11px} .kcg-cap{font-size:11px}}

/* playbook caption under the kill-chain */
.kcg-meta{text-align:center; font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:var(--fg-faint); margin:0 auto clamp(10px,2vh,18px); max-width:48rem; line-height:1.5}
.kcg-meta b{color:var(--ice); font-weight:600; font-size:.92rem; font-family:var(--disp); letter-spacing:.02em}

/* hero subtitle: the closing word "Hunting." in a warm red (static) */
.hero-hunt{font-style:italic; font-weight:500; color:#ff5e6e; text-shadow:0 0 18px rgba(255,94,110,.25)}

/* network + cloud live chains (baby) — all three paths drawn + lit */
.kcg-live2,.kcg-live3{fill:none; stroke:var(--baby); stroke-width:1.5; stroke-dasharray:240; stroke-dashoffset:240; opacity:.8}
.kcg-live2.ne1{animation:kcg-ne1 5.4s linear infinite} .kcg-live2.ne2{animation:kcg-ne2 5.4s linear infinite} .kcg-live2.ne3{animation:kcg-ne3 5.4s linear infinite}
.kcg-live3.ce1{animation:kcg-ce1 5.4s linear infinite} .kcg-live3.ce2{animation:kcg-ce2 5.4s linear infinite} .kcg-live3.ce3{animation:kcg-ce3 5.4s linear infinite} .kcg-live3.ce4{animation:kcg-ce4 5.4s linear infinite}
@keyframes kcg-ne1{0%,16%{stroke-dashoffset:240;opacity:.8}28%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:.8}94%{opacity:0}100%{stroke-dashoffset:240;opacity:0}}
@keyframes kcg-ne2{0%,30%{stroke-dashoffset:240;opacity:.8}42%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:.8}94%{opacity:0}100%{stroke-dashoffset:240;opacity:0}}
@keyframes kcg-ne3{0%,44%{stroke-dashoffset:240;opacity:.8}56%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:.8}94%{opacity:0}100%{stroke-dashoffset:240;opacity:0}}
@keyframes kcg-ce1{0%,24%{stroke-dashoffset:240;opacity:.8}36%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:.8}94%{opacity:0}100%{stroke-dashoffset:240;opacity:0}}
@keyframes kcg-ce2{0%,38%{stroke-dashoffset:240;opacity:.8}50%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:.8}94%{opacity:0}100%{stroke-dashoffset:240;opacity:0}}
@keyframes kcg-ce3{0%,52%{stroke-dashoffset:240;opacity:.8}64%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:.8}94%{opacity:0}100%{stroke-dashoffset:240;opacity:0}}
@keyframes kcg-ce4{0%,66%{stroke-dashoffset:240;opacity:.8}78%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:.8}94%{opacity:0}100%{stroke-dashoffset:240;opacity:0}}
.kcg-node.np0 rect,.kcg-node.cp0 rect{stroke:var(--baby)} .kcg-node.np0 text,.kcg-node.cp0 text{fill:var(--fg-dim)}
.kcg-node.np1 rect{animation:kcg-b30 5.4s ease-out infinite} .kcg-node.np1 text{animation:kcg-bt30 5.4s ease-out infinite}
.kcg-node.np2 rect{animation:kcg-b44 5.4s ease-out infinite} .kcg-node.np2 text{animation:kcg-bt44 5.4s ease-out infinite}
.kcg-node.cp1 rect{animation:kcg-b38 5.4s ease-out infinite} .kcg-node.cp1 text{animation:kcg-bt38 5.4s ease-out infinite}
.kcg-node.cp2 rect{animation:kcg-b52 5.4s ease-out infinite} .kcg-node.cp2 text{animation:kcg-bt52 5.4s ease-out infinite}
.kcg-node.cp3 rect{animation:kcg-b66 5.4s ease-out infinite} .kcg-node.cp3 text{animation:kcg-bt66 5.4s ease-out infinite}
@keyframes kcg-b30{0%,30%{stroke:var(--line)}34%{stroke:var(--baby)}88%{stroke:var(--baby)}95%{stroke:var(--line)}}
@keyframes kcg-bt30{0%,30%{fill:var(--fg-faint)}34%{fill:var(--fg-dim)}88%{fill:var(--fg-dim)}95%{fill:var(--fg-faint)}}
@keyframes kcg-b38{0%,38%{stroke:var(--line)}42%{stroke:var(--baby)}88%{stroke:var(--baby)}95%{stroke:var(--line)}}
@keyframes kcg-bt38{0%,38%{fill:var(--fg-faint)}42%{fill:var(--fg-dim)}88%{fill:var(--fg-dim)}95%{fill:var(--fg-faint)}}
@keyframes kcg-b44{0%,44%{stroke:var(--line)}48%{stroke:var(--baby)}88%{stroke:var(--baby)}95%{stroke:var(--line)}}
@keyframes kcg-bt44{0%,44%{fill:var(--fg-faint)}48%{fill:var(--fg-dim)}88%{fill:var(--fg-dim)}95%{fill:var(--fg-faint)}}
@keyframes kcg-b52{0%,52%{stroke:var(--line)}56%{stroke:var(--baby)}88%{stroke:var(--baby)}95%{stroke:var(--line)}}
@keyframes kcg-bt52{0%,52%{fill:var(--fg-faint)}56%{fill:var(--fg-dim)}88%{fill:var(--fg-dim)}95%{fill:var(--fg-faint)}}
@keyframes kcg-b66{0%,66%{stroke:var(--line)}70%{stroke:var(--baby)}88%{stroke:var(--baby)}95%{stroke:var(--line)}}
@keyframes kcg-bt66{0%,66%{fill:var(--fg-faint)}70%{fill:var(--fg-dim)}88%{fill:var(--fg-dim)}95%{fill:var(--fg-faint)}}
.nomotion .kcg-live2,.nomotion .kcg-live3{animation:none;stroke-dashoffset:0}
.nomotion .kcg-node.np1 rect,.nomotion .kcg-node.np2 rect,.nomotion .kcg-node.cp1 rect,.nomotion .kcg-node.cp2 rect,.nomotion .kcg-node.cp3 rect{animation:none;stroke:var(--baby)}

/* AI / agent live chain (violet) — the LLM red-team surface, animated */
.kcg-live4{fill:none; stroke:#b794ff; stroke-width:1.6; stroke-dasharray:280; stroke-dashoffset:280; opacity:.85}
.kcg-live4.ae1{animation:kcg-ae1 5.4s linear infinite} .kcg-live4.ae2{animation:kcg-ae2 5.4s linear infinite} .kcg-live4.ae3{animation:kcg-ae3 5.4s linear infinite} .kcg-live4.ae4{animation:kcg-ae4 5.4s linear infinite}
@keyframes kcg-ae1{0%,8%{stroke-dashoffset:280;opacity:.85}20%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:.85}94%{opacity:0}100%{stroke-dashoffset:280;opacity:0}}
@keyframes kcg-ae2{0%,22%{stroke-dashoffset:280;opacity:.85}34%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:.85}94%{opacity:0}100%{stroke-dashoffset:280;opacity:0}}
@keyframes kcg-ae3{0%,36%{stroke-dashoffset:280;opacity:.85}48%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:.85}94%{opacity:0}100%{stroke-dashoffset:280;opacity:0}}
@keyframes kcg-ae4{0%,50%{stroke-dashoffset:280;opacity:.85}62%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:.85}94%{opacity:0}100%{stroke-dashoffset:280;opacity:0}}
.kcg-node.ap0 rect{stroke:#b794ff} .kcg-node.ap0 text{fill:var(--fg-dim)}
.kcg-node.ap1 rect{animation:kcg-ar1 5.4s ease-out infinite} .kcg-node.ap1 text{animation:kcg-at1 5.4s ease-out infinite}
.kcg-node.ap2 rect{animation:kcg-ar2 5.4s ease-out infinite} .kcg-node.ap2 text{animation:kcg-at2 5.4s ease-out infinite}
.kcg-node.ap3 rect{animation:kcg-ar3 5.4s ease-out infinite} .kcg-node.ap3 text{animation:kcg-at3 5.4s ease-out infinite}
@keyframes kcg-ar1{0%,22%{stroke:var(--line)}26%{stroke:#b794ff}88%{stroke:#b794ff}95%{stroke:var(--line)}}
@keyframes kcg-at1{0%,22%{fill:var(--fg-faint)}26%{fill:var(--fg-dim)}88%{fill:var(--fg-dim)}95%{fill:var(--fg-faint)}}
@keyframes kcg-ar2{0%,36%{stroke:var(--line)}40%{stroke:#b794ff}88%{stroke:#b794ff}95%{stroke:var(--line)}}
@keyframes kcg-at2{0%,36%{fill:var(--fg-faint)}40%{fill:var(--fg-dim)}88%{fill:var(--fg-dim)}95%{fill:var(--fg-faint)}}
@keyframes kcg-ar3{0%,50%{stroke:var(--line)}54%{stroke:#b794ff}88%{stroke:#b794ff}95%{stroke:var(--line)}}
@keyframes kcg-at3{0%,50%{fill:var(--fg-faint)}54%{fill:var(--fg-dim)}88%{fill:var(--fg-dim)}95%{fill:var(--fg-faint)}}
.kcg-pulse4{fill:#b794ff; filter:drop-shadow(0 0 5px #b794ff); opacity:.85; animation:kcg-hop4 5.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes kcg-hop4{0%{transform:translate(86px,300px);opacity:0}8%{opacity:.85}10%{transform:translate(86px,300px)}24%{transform:translate(298px,300px)}38%{transform:translate(510px,320px)}52%{transform:translate(700px,284px)}66%{transform:translate(838px,180px)}82%{transform:translate(838px,180px);opacity:.85}90%{opacity:0}100%{transform:translate(838px,180px);opacity:0}}
.nomotion .kcg-live4{animation:none;stroke-dashoffset:0} .nomotion .kcg-pulse4{animation:none;opacity:0}
.nomotion .kcg-node.ap1 rect,.nomotion .kcg-node.ap2 rect,.nomotion .kcg-node.ap3 rect{animation:none;stroke:#b794ff}

/* footer columns — shared by the home footer + content-page colophon
   (vulnaryFooterCols). Kept here (not vulnary-legal.css) so the home page,
   which only loads vulnary.css, styles them too. */
footer .fcols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; max-width: 1100px; margin: 0 auto; padding: 18px 22px 26px; }
footer .fcol h4 { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: #7f90a8; margin: 0 0 12px; font-weight: 600; }
footer .fcol a { display: block; color: #a9bad4; text-decoration: none; font-size: .88rem; margin-bottom: 8px; }
footer .fcol a.brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
footer .fcol a:hover { color: #eaf2ff; }
footer .fcol .blurb { color: #8496af; font-size: .84rem; line-height: 1.55; max-width: 260px; }
@media (max-width: 720px) { footer .fcols { grid-template-columns: 1fr 1fr; gap: 22px; } }

/* slim copyright bar below the footer columns (brand lives in the columns now) */
footer .foot-bottom {
  max-width: 1100px; margin: 0 auto; padding: 16px 22px 6px;
  border-top: 1px solid rgba(120, 160, 210, .12);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
footer .foot-bottom .tag { color: #8496af; font-size: .84rem; }
footer .foot-bottom .meta { color: #6b7c96; font-size: .78rem; }

/* floating "Let's talk" FAB → morphs into the Resident on hover (lets-talk-fab.js).
   The morph itself is WAAPI (spring); CSS here is layout + the idle micro-motion. */
#vly-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; text-decoration: none; display: inline-flex; }
.fab-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #67d3e8; color: #04070f; font-weight: 700; font-size: .9rem;
  padding: .72rem 1.35rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 8px 26px -6px rgba(0, 0, 0, .55), 0 0 0 1px rgba(103, 211, 232, .35);
}
.fab-dot { width: 8px; height: 8px; border-radius: 50%; background: #04070f; opacity: .5; animation: fabDot 1.8s ease-in-out infinite; }
@keyframes fabDot { 50% { opacity: .12; transform: scale(.65); } }

/* hover stage: anchored bottom-right, floats above the pill without shifting layout.
   The bot is the real @vulnaryBot SVG (tall, viewBox 560x1000) — target it as
   `.fab-botwrap svg` since that markup carries no .fab-bot class. */
.fab-stage { position: absolute; right: 0; bottom: 0; width: 230px; height: 300px; opacity: 0; pointer-events: none; }
#vly-fab.fab-open .fab-stage { pointer-events: auto; }
.fab-glow { position: absolute; right: 8px; bottom: 6px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(103, 211, 232, .38), transparent 68%); opacity: 0; transform: scale(.25); }
.fab-botwrap { position: absolute; right: 6px; bottom: 2px; width: 104px; height: 186px; transform-origin: 70% 100%; opacity: 0; }
.fab-botwrap svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .55)); }
.fab-sign {
  position: absolute; right: 10px; top: 4px; z-index: 2;
  background: #eaf0fb; color: #04121a; font-family: var(--body); font-weight: 700; font-size: .86rem;
  padding: .52rem .9rem; border-radius: 11px; white-space: nowrap;
  box-shadow: 0 10px 22px -6px rgba(0, 0, 0, .5); transform-origin: 30% 120%; opacity: 0;
}
.fab-sign b { color: #1466ff; }
.fab-sign::after { content: ''; position: absolute; left: 22px; bottom: -5px; width: 12px; height: 12px; background: #eaf0fb; transform: rotate(45deg); border-radius: 2px; }

/* idle micro-motion — the whole Resident gently bobs, only while open */
#vly-fab.fab-open .fab-botwrap svg { animation: fabBob 2.8s ease-in-out infinite; }
@keyframes fabBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(1deg); } }

@media (max-width: 560px) {
  #vly-fab { right: 14px; bottom: 14px; }
  .fab-pill { font-size: .84rem; padding: .62rem 1.1rem; }
  .fab-stage { display: none; } /* touch: keep just the pill */
}