@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/Inter-var.woff2') format('woff2-variations'),url('/assets/fonts/Inter-var.woff2') format('woff2');}@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('/assets/fonts/JetBrainsMono-var.woff2') format('woff2-variations'),url('/assets/fonts/JetBrainsMono-var.woff2') format('woff2');}

:root{
  /* ground. Cooler and slightly lighter than part 1's #07090e: the flat palette needs the
     panels to separate from the ground without a glow doing the work. */
  --ground:#0A0D12; --panel:#11151C; --panel-2:#151A22; --raise:#1A2029;
  --line:#1E242E; --line-2:#28303C;

  /* ink. --ink-4 is #7A8492, measured 4.6:1, because it carries small labels. */
  --ink:#FFFFFF; --ink-2:#C3CBD6; --ink-3:#8D97A6; --ink-4:#7A8492;

  /* brand. #5E9DCE is the blue in quantum-ventura-logo.svg. 6.66:1 on the ground, so it
     is safe on text; --brand-deep is 3.62:1 and is fills and rules only. */
  --brand:#5E9DCE; --brand-t:#8FBEE4; --brand-deep:#3A6E9E; --brand-dim:#24405C;

  /* state. Console readouts only, never decoration. */
  --ok:#5FB98B; --warn:#D9A34A; --alert:#D96F6F;

  --shell:min(1240px,92vw);
  --bar:76px;
  --r-sm:4px; --r:6px; --r-lg:10px;

  --ease:cubic-bezier(.22,1,.36,1);
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ground);color:var(--ink-2);
  font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1rem;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--brand-deep);color:#fff}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}

/* Type. The step between a card heading and its body is deliberately small - Aaron, 45:49:
   "the disparity is way too big ... what you want is just a slight difference." Large
   display sizes are confined to page and section openers, where nothing sits beside them. */
h1,h2,h3,h4,h5{margin:0;color:var(--ink);font-weight:700;letter-spacing:-.022em;line-height:1.15}
.d1{font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.08;letter-spacing:-.032em;font-weight:800}
.d2{font-size:clamp(1.6rem,2.7vw,2.35rem);line-height:1.16;letter-spacing:-.028em;font-weight:800}
.d3{font-size:clamp(1.3rem,1.9vw,1.6rem);letter-spacing:-.024em;font-weight:700}
.d4{font-size:1.125rem;font-weight:700;letter-spacing:-.016em;line-height:1.35}
.d5{font-size:.9375rem;font-weight:700;letter-spacing:-.006em;line-height:1.4}
p{margin:0}

.lead{font-size:clamp(1rem,1.1vw,1.0625rem);line-height:1.72;color:var(--ink-3)}
.lead-lg{font-size:clamp(1.0625rem,1.3vw,1.1875rem);line-height:1.68;color:var(--ink-2)}
.sm{font-size:.9375rem;line-height:1.7;color:var(--ink-3)}
.xs{font-size:.8125rem;line-height:1.6;color:var(--ink-4)}

.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:500;font-variant-ligatures:none}

/* The only uppercase in the design, at 11px, which is where the reference puts it too. */
.eyebrow{display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;font-size:.6875rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brand)}
.eyebrow .tr{color:var(--brand-deep);flex:none}

.ic{width:1.25rem;height:1.25rem;flex:none}
.ic-lg{width:1.5rem;height:1.5rem;flex:none}
.ic-sm{width:1rem;height:1rem;flex:none}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brand);
  color:#06121c;padding:12px 20px;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--brand-t);outline-offset:3px}


/* --- header. No utility banner: that strip was the reference's, not ours. ---------- */
.top{position:sticky;top:0;z-index:60;height:var(--bar);background:rgba(10,13,18,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.top.scrolled{background:rgba(10,13,18,.96);border-bottom-color:var(--line)}
.top .in{width:var(--shell);margin:0 auto;height:100%;display:flex;align-items:center;
  gap:clamp(14px,2.4vw,40px)}

/* The real lockup. Not a glyph, not a tagline we made up. */
.brand{flex:none;display:flex;align-items:center}
/* The lockup carries a detailed badge; below ~30px it reads as a blob. */
.brand img{height:30px;width:auto}
@media (max-width:420px){.brand img{height:22px}}

.nav{display:flex;align-items:center;gap:clamp(12px,1.7vw,28px);margin-left:auto;
  list-style:none;margin-block:0;padding:0;height:100%}
.nav>li{position:relative;height:100%;display:flex;align-items:center}
.nav>li>a,.nav>li>button{display:inline-flex;align-items:center;gap:7px;background:none;
  border:0;padding:0;font-size:.875rem;font-weight:500;color:var(--ink-3);cursor:pointer;
  transition:color .2s;white-space:nowrap;position:relative;height:100%}
.nav>li>a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--brand);transform:scaleX(0);transition:transform .25s var(--ease)}
.nav>li>a:hover,.nav>li>button:hover,.nav>li.open>button{color:var(--ink)}
.nav>li>a[aria-current]{color:var(--ink)}
.nav>li>a[aria-current]::after,.nav>li>a:hover::after{transform:scaleX(1)}
.caret{width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  opacity:.55;transition:transform .25s}
.nav>li.open .caret{transform:rotate(225deg) translate(-1px,-1px)}

/* A plain dropdown, sized to its content. The reference's 540px two-column mega panel
   was its idea of a products menu, not a requirement of ours. */
.menu{position:absolute;top:100%;left:-14px;width:296px;padding-top:10px;list-style:none;
  margin:0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s,transform .18s,visibility .18s}
.nav>li.open .menu{opacity:1;visibility:visible;transform:none}
.menu .sheet{background:var(--panel);border:1px solid var(--line-2);
  box-shadow:0 24px 50px -18px rgba(0,0,0,.8);padding:6px}
.menu li a{display:block;padding:10px 12px;border-left:2px solid transparent;
  transition:background .16s,border-color .16s}
.menu li a:hover{background:var(--raise);border-left-color:var(--brand)}
.menu .n{display:block;font-size:.875rem;font-weight:600;color:var(--ink)}
.menu .d{display:block;font-size:.75rem;color:var(--ink-4);margin-top:2px;line-height:1.5}

.burger{display:none;width:40px;height:40px;background:none;border:1px solid var(--line-2);
  cursor:pointer;position:relative;flex:none;margin-left:auto}
.burger span,.burger span::before,.burger span::after{position:absolute;left:10px;width:18px;
  height:1.5px;background:var(--ink-2);transition:transform .3s var(--ease),opacity .2s}
.burger span{top:calc(50% - .75px)}
.burger span::before{content:"";top:-6px;left:0}
.burger span::after{content:"";top:6px;left:0}
.top.open .burger span{background:transparent}
.top.open .burger span::before{transform:translateY(6px) rotate(45deg)}
.top.open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* --- footer ------------------------------------------------------------- */
.foot{border-top:1px solid var(--line);background:#080A0E;
  padding:clamp(46px,6.5vh,72px) 0 30px;margin-top:clamp(56px,9vh,110px)}
.foot .in{width:var(--shell);margin:0 auto}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(24px,4vw,56px);
  align-items:start}
.foot .bmk img{height:24px;width:auto;margin-bottom:18px}
.foot .tag{font-size:.875rem;line-height:1.7;color:var(--ink-4);max-width:34ch}
.foot h4{font-family:'JetBrains Mono',monospace;font-size:.6875rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);margin:0 0 15px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot ul a{font-size:.875rem;color:var(--ink-3);transition:color .2s}
.foot ul a:hover{color:var(--brand-t)}
.foot-base{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  margin-top:clamp(30px,5vh,48px);padding-top:22px;border-top:1px solid var(--line);
  font-size:.6875rem;color:var(--ink-4)}


main{display:block}
.sec{padding:clamp(54px,7.5vh,92px) 0;position:relative}
.sec.tight{padding:clamp(38px,5vh,60px) 0}
.sec.band{background:#0C1016;border-block:1px solid var(--line)}
section[id],[id]{scroll-margin-top:calc(var(--bar) + 20px)}
.in{width:var(--shell);margin:0 auto;position:relative;z-index:1}

/* Section openers range left under a trace rule. Part 1 centred every head because the
   reference did; ranged left reads as a document rather than a landing template, and it
   leaves the opposite side free for a control. */
.head{max-width:60ch;margin-bottom:clamp(32px,4.5vh,52px)}
.head .eyebrow{margin-bottom:14px}
.head .lead{margin-top:14px}
.head-split{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;
  justify-content:space-between;margin-bottom:clamp(30px,4vh,48px)}
.head-split .t{max-width:58ch}
.head-split .eyebrow{margin-bottom:14px}
.head-split .lead{margin-top:12px}

/* --- the trace, as page texture ---------------------------------------- */
.tracefield{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  color:var(--brand);opacity:.09}
.tracefield svg{position:absolute}
.tracefield .t1{top:14%;left:-40px;width:420px;height:auto}
.tracefield .t2{bottom:18%;right:-60px;width:520px;height:auto;transform:scaleX(-1)}
.glowline{position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand-dim) 30%,var(--brand-deep) 50%,
  var(--brand-dim) 70%,transparent)}

/* --- scroll reveal ------------------------------------------------------
   Aswin, 12:25: cards that "render left and right in the animation basis ... from fade to
   block". Gated on .js so a script failure cannot blank the page. */
.js .rv{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rv-l{transform:translate3d(-30px,8px,0)}
.js .rv-r{transform:translate3d(30px,8px,0)}
.js .rv.vis{opacity:1;transform:none}
.js .dl1{transition-delay:.05s}.js .dl2{transition-delay:.1s}
.js .dl3{transition-delay:.15s}.js .dl4{transition-delay:.2s}
.js .dl5{transition-delay:.25s}.js .dl6{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}


/* --- surfaces. Flat panels with a hairline, no glass, no glow. ---------- */
.panel{background:var(--panel);border:1px solid var(--line)}
.panel-h{transition:border-color .25s,background .25s}
.panel-h:hover{border-color:var(--line-2);background:var(--panel-2)}

/* The signature card: a brand rule along the top edge that draws in on hover, echoing the
   trace running through the logo. */
.edge{position:relative}
.edge::before{content:"";position:absolute;top:-1px;left:-1px;width:38px;height:2px;
  background:var(--brand);transition:width .4s var(--ease)}
.edge:hover::before{width:calc(100% + 2px)}

/* --- buttons. Flat. No gradient. -------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;font-size:.875rem;font-weight:600;letter-spacing:.005em;cursor:pointer;
  border:1px solid transparent;transition:background .2s,border-color .2s,color .2s;
  text-align:center}
.btn-pri{background:var(--brand);color:#06121c;font-weight:700}
.btn-pri:hover{background:var(--brand-t)}
.btn-sec{background:transparent;color:var(--ink-2);border-color:var(--line-2)}
.btn-sec:hover{border-color:var(--brand);color:var(--ink)}
.btn-sm{padding:10px 17px;font-size:.8125rem}
.btn .ar,.btn .ic-sm{transition:transform .25s var(--ease)}
.btn:hover .ar,.btn:hover .ic-sm{transform:translateX(3px)}

.tag{display:inline-block;padding:3px 9px;font-family:'JetBrains Mono',monospace;
  font-size:.625rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand-t);background:rgba(94,157,206,.1);border:1px solid rgba(94,157,206,.22)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;background:var(--raise);
  border:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:.75rem;
  font-weight:500;color:var(--ink-3)}
.chip .ic-sm{color:var(--brand);width:.875rem;height:.875rem}

/* --- hero. Ranged left, product console beside it, so the first screen already
   answers "what does this company make". Aswin, 28:01: "do you see the product
   visibility? That is what I wanted to prove." ------------------------------- */
.hero{position:relative;padding:clamp(44px,7vh,84px) 0 clamp(48px,7vh,84px);overflow:hidden}
/* Scoped to .split: the credential strip sits in its own full-width `.in` underneath, and
   an unscoped `.hero .in{display:grid}` caught that one too and squeezed it into column one. */
.hero .in.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4vw,64px);
  align-items:center}
.hero .copy{max-width:36rem}
.hero .eyebrow{margin-bottom:20px}
.hero .d1{margin-bottom:20px}
.hero .d1 em{font-style:normal;color:var(--brand)}
.hero .lead-lg{margin-bottom:30px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}

/* Credential strip. Four facts on a single rule, not four boxes: boxes made it look like
   a feature grid competing with the hero. */
.creds{margin-top:clamp(34px,5vh,56px);padding-top:26px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px)}
.creds .c{display:grid;gap:7px;align-content:start}
.creds .c .ic-sm{color:var(--brand)}
.creds .c b{font-size:.875rem;font-weight:600;color:var(--ink);letter-spacing:-.008em;
  line-height:1.4}
.creds .c span{font-family:'JetBrains Mono',monospace;font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);line-height:1.5}

/* --- capability grid. Cards, never a list. ------------------------------ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.grid-3>.cell{background:var(--ground);padding:clamp(22px,2.4vw,32px);position:relative;
  transition:background .25s}
.grid-3>.cell:hover{background:var(--panel)}
.cell .ic-lg{color:var(--brand);margin-bottom:20px}
.cell h3{margin-bottom:10px}
.cell p{font-size:.9375rem;line-height:1.72;color:var(--ink-3)}
.cell .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.cell .n{position:absolute;top:clamp(22px,2.4vw,32px);right:clamp(22px,2.4vw,32px);
  font-family:'JetBrains Mono',monospace;font-size:.6875rem;color:var(--line-2);
  font-weight:600;letter-spacing:.1em}

/* 2x2 variant, used where there are exactly four things to say. */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.grid-2>.cell{background:var(--ground);padding:clamp(24px,2.6vw,36px);position:relative;
  transition:background .25s}
.grid-2>.cell:hover{background:var(--panel)}

/* Points inside a card. This is what replaces the bulleted lists Aswin rejected: each
   point is its own block on a hairline, not a li with a dot. */
.points{display:grid;margin-top:18px}
.points .pt{padding:12px 0;border-top:1px solid var(--line);display:flex;gap:11px;
  align-items:flex-start}
.points .pt .ic-sm{color:var(--brand-deep);margin-top:3px;flex:none;width:.875rem;height:.875rem}
.points .pt span{font-size:.875rem;line-height:1.62;color:var(--ink-3)}

/* --- product showcase --------------------------------------------------- */
.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:clamp(28px,4vh,44px);
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{display:inline-flex;align-items:center;gap:9px;padding:14px 20px;border:0;
  background:none;font-size:.875rem;font-weight:600;color:var(--ink-4);cursor:pointer;
  white-space:nowrap;position:relative;transition:color .2s}
.tabs button .ic-sm{opacity:.75}
.tabs button:hover{color:var(--ink-2)}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--brand);transform:scaleX(0);transition:transform .3s var(--ease)}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.tabs button[aria-selected="true"] .ic-sm{opacity:1;color:var(--brand)}

.panel-tab[hidden]{display:none}
.pwrap{display:grid;grid-template-columns:5fr 7fr;gap:clamp(26px,3.2vw,52px);align-items:center}
.pcopy{display:grid;gap:18px;align-content:start}
.pcopy .tag{justify-self:start}
.pcopy>p.sm{color:var(--ink-2)}
.pcopy .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}

/* --- the product console -----------------------------------------------
   Carried over from part 1 because it is the one idea in Aswin's reference that answers
   Aaron's "nothing is representative of the actual technologies" without a photograph.
   Restyled flat: square corners, hairline borders, brand blue instead of the reference's
   cyan-to-violet. */
.app{border:1px solid var(--line-2);background:var(--panel);overflow:hidden}
.app .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 15px;background:#0C1016;border-bottom:1px solid var(--line)}
.app .lights{display:flex;align-items:center;gap:9px;min-width:0}
.app .lights i{width:7px;height:7px;border-radius:50%;background:var(--line-2);flex:none}
.app .lights i:first-child{background:var(--brand-deep)}
.app .lights span{font-family:'JetBrains Mono',monospace;font-size:.6875rem;color:var(--ink-4);
  margin-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .live{font-family:'JetBrains Mono',monospace;font-size:.5625rem;font-weight:600;
  letter-spacing:.11em;padding:3px 8px;color:var(--ok);border:1px solid rgba(95,185,139,.28);
  flex:none}
.app .canvas{padding:clamp(15px,1.8vw,20px);background:#090C11;display:grid;gap:14px}
.app .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.app .stat{padding:13px;background:var(--panel)}
.app .stat .k{font-family:'JetBrains Mono',monospace;font-size:.5625rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);line-height:1.4}
.app .stat .v{font-family:'JetBrains Mono',monospace;font-size:1.0625rem;font-weight:700;
  margin-top:6px;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.app .stat .n{font-family:'JetBrains Mono',monospace;font-size:.5625rem;margin-top:5px;
  color:var(--ink-4);line-height:1.4}
.v-brand{color:var(--brand-t)!important}.v-ok{color:var(--ok)!important}
.v-warn{color:var(--warn)!important}.v-alert{color:var(--alert)!important}

.app .log{padding:13px;background:var(--panel);border:1px solid var(--line);display:grid;
  gap:9px;font-family:'JetBrains Mono',monospace;font-size:.6875rem}
.app .log .hd{font-size:.5625rem;color:var(--ink-4);letter-spacing:.12em;text-transform:uppercase}
.app .log .ln{display:flex;gap:10px;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap}
.app .log .ln .t{color:var(--brand);flex:none}
.app .log .ln .m{color:var(--ink-3);flex:1;min-width:0}
.app .log .ln .s{flex:none;font-weight:600}

.app .meters{display:grid;gap:12px;padding:13px;background:var(--panel);
  border:1px solid var(--line)}
.app .meter .row{display:flex;justify-content:space-between;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:.6875rem;margin-bottom:6px}
.app .meter .row span{color:var(--ink-4)}
.app .track{height:3px;background:var(--line)}
.app .fill{height:100%}
.preview-note{margin-top:11px;font-size:.6875rem;color:var(--ink-4);line-height:1.55;
  font-family:'JetBrains Mono',monospace}

/* --- joint venture ------------------------------------------------------ */
.jv{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.jv>div{background:var(--panel);padding:clamp(26px,3vw,40px)}
.jv .lhs .tag{margin-bottom:16px}
.jv .lhs h2{margin-bottom:14px}
.jv .lhs .sm{margin-bottom:24px}
.jv .facts{display:grid;align-content:center;gap:0;background:var(--panel-2)}
.jv .fact{padding:16px 0;border-top:1px solid var(--line);display:flex;gap:13px;
  align-items:flex-start}
.jv .fact:first-child{border-top:0;padding-top:0}
.jv .fact:last-child{padding-bottom:0}
.jv .fact .ic-sm{color:var(--brand);margin-top:2px;flex:none}
.jv .fact b{display:block;font-size:.875rem;color:var(--ink);font-weight:700;margin-bottom:3px}
.jv .fact span{font-size:.8125rem;color:var(--ink-4);line-height:1.62}

/* --- pipeline. Corelight-style marketing architecture, per Aswin 22:16. --- */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.flow .step{background:var(--panel);padding:clamp(24px,2.8vw,36px);position:relative;
  transition:background .25s}
.flow .step:hover{background:var(--panel-2)}
.flow .num{font-family:'JetBrains Mono',monospace;font-size:.6875rem;font-weight:700;
  letter-spacing:.14em;color:var(--brand);margin-bottom:16px;display:block}
.flow .step h3{margin-bottom:10px}
.flow .step p{font-size:.875rem;color:var(--ink-3);line-height:1.7}
.flow .out{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:.625rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-4)}

/* --- programs ----------------------------------------------------------- */
.filter{position:relative;width:min(100%,280px)}
.filter .ic-sm{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--ink-4);pointer-events:none}
.filter input{width:100%;padding:11px 15px 11px 38px;background:var(--panel);
  border:1px solid var(--line-2);color:var(--ink);font-family:'JetBrains Mono',monospace;
  font-size:.75rem;transition:border-color .2s}
.filter input::placeholder{color:var(--ink-4)}
.filter input:focus{outline:none;border-color:var(--brand)}

.progs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
.prog{background:var(--panel);padding:20px;display:grid;align-content:start;gap:10px;
  transition:background .22s}
.prog:hover{background:var(--panel-2)}
.prog .meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.prog .ag{font-family:'JetBrains Mono',monospace;font-size:.6875rem;font-weight:700;
  letter-spacing:.11em;color:var(--brand)}
.prog h3{font-size:.9375rem;font-weight:700;line-height:1.48;letter-spacing:-.006em}
.prog p{font-size:.8125rem;line-height:1.65;color:var(--ink-4)}
.prog.hide{display:none}
.progs:not(.all) .prog.extra{display:none}
.progs.all .prog.extra{display:grid}
.progs .prog.hide{display:none}
.more-row{display:flex;justify-content:center;margin-top:clamp(22px,3vh,34px)}
.count{font-family:'JetBrains Mono',monospace;font-size:.6875rem;color:var(--ink-4);
  text-align:center;margin-top:16px;letter-spacing:.06em}
.count b{color:var(--ink-2);font-weight:600}
.empty{text-align:center;padding:38px 0;color:var(--ink-3);font-size:.9375rem}

/* --- locations ---------------------------------------------------------- */
.locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
.loc{background:var(--panel);padding:22px;transition:background .22s;position:relative}
.loc:hover{background:var(--panel-2)}
.loc .k{font-family:'JetBrains Mono',monospace;font-size:.5625rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);display:block;
  margin-bottom:12px}
/* Aaron's ratio complaint landed exactly here: 62px against 16.8px on site 7. */
.loc h3{font-size:1.0625rem;font-weight:700;letter-spacing:-.014em;line-height:1.35;
  margin-bottom:6px}
.loc p{font-size:.8125rem;line-height:1.6;color:var(--ink-4)}
.loc.hq{background:var(--panel-2)}
.loc.hq::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;
  background:var(--brand)}
.loc.hq .k{color:var(--brand)}

/* --- partner marquee. Aswin 49:57: keep it running. --------------------- */
.mq{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq .trk{display:flex;gap:clamp(30px,4.5vw,62px);width:max-content;align-items:center}
@media (prefers-reduced-motion:no-preference){
  .mq .trk{animation:slide 52s linear infinite}
  .mq:hover .trk{animation-play-state:paused}
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq ul{display:flex;gap:clamp(30px,4.5vw,62px);list-style:none;margin:0;padding:0;
  align-items:center}
/* Measured mean luminance across the eight files runs 83 to 166 and only SeaPort carries
   its own light background, so the dark ones need lifting to read on this ground. */
.mq img{height:clamp(32px,3.4vw,44px);width:auto;opacity:.75;
  filter:grayscale(1) brightness(2.4) contrast(.92);transition:opacity .25s,filter .25s}
.mq a:hover img,.mq li:hover img{opacity:1}

/* --- contact ------------------------------------------------------------ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);
  align-items:start}
.contact-grid .aside{display:grid;gap:26px;align-content:start}
.form{display:grid;gap:15px;background:var(--panel);border:1px solid var(--line);
  padding:clamp(22px,2.6vw,32px)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field{display:grid;gap:7px}
.field label{font-family:'JetBrains Mono',monospace;font-size:.625rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.field input,.field textarea{width:100%;padding:12px 13px;background:#0C1016;
  border:1px solid var(--line-2);color:var(--ink);font-size:.9375rem;font-family:inherit;
  transition:border-color .2s}
.field textarea{resize:vertical;min-height:110px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand)}
.form .note{font-size:.75rem;color:var(--ink-4);line-height:1.6}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{padding:12px 15px;font-size:.875rem;line-height:1.6;background:var(--raise);
  border:1px solid var(--line-2);color:var(--ink-3)}
.status:empty{display:none}
.status.ok{border-color:rgba(95,185,139,.3);color:var(--ok)}
.status.err{border-color:rgba(217,111,111,.3);color:var(--alert)}
.cf-turnstile{min-height:65px}

/* --- CTA band ----------------------------------------------------------- */
.cta-band{border:1px solid var(--line);background:var(--panel);
  padding:clamp(28px,3.4vw,52px);display:grid;gap:clamp(24px,3vh,36px)}
.cta-band .top-row{max-width:46rem}
.cta-band .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.cta-band .aud{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border-top:1px solid var(--line);margin-top:4px}
.cta-band .aud .a{background:var(--panel);padding:20px 0 0;display:grid;gap:7px;
  align-content:start;padding-right:22px}
.cta-band .aud .a .ic-sm{color:var(--brand)}
.cta-band .aud .a b{font-size:.9375rem;color:var(--ink);font-weight:700}
.cta-band .aud .a span{font-size:.8125rem;color:var(--ink-4);line-height:1.65}
.cta-band .base{display:flex;flex-wrap:wrap;gap:10px 26px;
  font-family:'JetBrains Mono',monospace;font-size:.6875rem;color:var(--ink-4)}
.cta-band .base .it{display:inline-flex;align-items:center;gap:8px}
.cta-band .base a{color:var(--ink-3)}
.cta-band .base a:hover{color:var(--brand-t)}

/* --- page furniture ----------------------------------------------------- */
.stage{max-width:60ch;position:relative;z-index:1}
.stage .eyebrow{margin-bottom:16px}
.stage .lead{margin-top:16px}
.page-hero{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,4vw,64px);
  align-items:center}
.hero-facts{background:var(--panel);border:1px solid var(--line);
  padding:clamp(20px,2.4vw,28px);display:grid}
.hero-facts>div{display:grid;gap:6px;padding:clamp(13px,1.7vh,17px) 0;
  border-top:1px solid var(--line)}
.hero-facts>div:first-child{border-top:0;padding-top:0}
.hero-facts>div:last-child{padding-bottom:0}
.hero-facts .v{font-size:1.25rem;font-weight:800;letter-spacing:-.024em;line-height:1.2;
  color:var(--ink)}
.hero-facts .k{font-family:'JetBrains Mono',monospace;font-size:.625rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);line-height:1.5}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

.phero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.4vw,56px);
  align-items:center}
.phero .stage{max-width:none}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap:clamp(14px,1.8vw,24px);margin:30px 0}
.stats>div{display:grid;gap:6px;align-content:start;padding-left:14px;
  border-left:2px solid var(--brand-dim)}
.stats .fig{font-size:1.0625rem;font-weight:700;letter-spacing:-.016em;line-height:1.35;
  color:var(--ink)}
.stats .l{font-family:'JetBrains Mono',monospace;font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4);line-height:1.55}

.spec{width:100%;border-collapse:collapse;font-size:.875rem;border:1px solid var(--line)}
.spec tr{border-bottom:1px solid var(--line)}
.spec tr:last-child{border-bottom:0}
.spec th{text-align:left;padding:14px 18px;width:min(240px,34%);vertical-align:top;
  font-family:'JetBrains Mono',monospace;font-size:.625rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);background:var(--panel)}
.spec td{padding:14px 18px;color:var(--ink-2);line-height:1.7;vertical-align:top}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
.card{display:flex;flex-direction:column;background:var(--panel);transition:background .25s}
.card:hover{background:var(--panel-2)}
.card .shot{aspect-ratio:16/9;overflow:hidden;background:#0C1016;
  border-bottom:1px solid var(--line)}
.card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .shot img{transform:scale(1.03)}
.card .body{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1}
.card .lbl{font-family:'JetBrains Mono',monospace;font-size:.5625rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.card .body h3{font-size:1.0625rem;font-weight:700;letter-spacing:-.016em;line-height:1.35}
.card .body p{font-size:.875rem;line-height:1.65;color:var(--ink-4);flex:1}
.card .go{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;font-weight:600;
  color:var(--brand);margin-top:2px}
.card .go span{transition:transform .25s var(--ease)}
.card:hover .go span{transform:translateX(3px)}

.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
.person{background:var(--panel);padding:24px;display:grid;gap:9px;align-content:start;
  transition:background .25s}
.person:hover{background:var(--panel-2)}
.person h3{font-size:1.0625rem;font-weight:700;letter-spacing:-.016em;line-height:1.35}
.person .role{font-family:'JetBrains Mono',monospace;font-size:.625rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--brand)}
.person p{font-size:.875rem;line-height:1.7;color:var(--ink-4)}
.person .li{font-size:.8125rem;font-weight:600;color:var(--brand);margin-top:4px;
  justify-self:start}

.orgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
.org{background:var(--panel);padding:24px;display:grid;gap:13px;align-content:start;
  transition:background .25s}
.org:hover{background:var(--panel-2)}
.org .plate{height:52px;display:flex;align-items:center;padding:8px 12px;background:#0C1016;
  border:1px solid var(--line);width:fit-content}
.org .plate img{height:34px;width:auto}
.org h3{font-size:1rem;font-weight:700;letter-spacing:-.014em;line-height:1.4}
.org p{font-size:.875rem;line-height:1.7;color:var(--ink-4)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips>span{display:inline-flex;align-items:center;padding:6px 12px;background:var(--panel);
  border:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:.75rem;
  color:var(--ink-3)}

.fields-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
.fld{background:var(--panel);padding:22px;transition:background .25s}
.fld:hover{background:var(--panel-2)}
.fld h3{font-size:1rem;font-weight:700;letter-spacing:-.014em;margin-bottom:7px}
.fld p{font-size:.8125rem;line-height:1.62;color:var(--ink-4)}

.figure{margin:0;border:1px solid var(--line);overflow:hidden}
.figcap{padding:10px 14px;font-size:.6875rem;color:var(--ink-4);background:var(--panel);
  border-top:1px solid var(--line);font-family:'JetBrains Mono',monospace}
.note-band{padding:16px 20px;background:var(--panel);border:1px solid var(--line);
  border-left:2px solid var(--brand);font-size:.875rem;line-height:1.7;color:var(--ink-3)}


@media (max-width:1080px){
  .hero .in.split{grid-template-columns:1fr;gap:34px}
  .hero .copy{max-width:none}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:980px){
  /* Stacked below here, so a left/right entry has no column to enter from - and the
     horizontal start offset gave the document a scrollbar until the reveal finished. */
  .js .rv-l,.js .rv-r{transform:translateY(18px)}
  .pwrap{grid-template-columns:1fr;gap:26px}
  .jv{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .page-hero{grid-template-columns:1fr;gap:28px}
  .phero{grid-template-columns:1fr;gap:30px}
  .creds{grid-template-columns:repeat(2,1fr);gap:22px}
}
@media (max-width:820px){
  :root{--bar:64px}
  .burger{display:block}
  .top .in{gap:12px}
  .nav{position:fixed;top:var(--bar);left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;height:auto;max-height:calc(100dvh - var(--bar));overflow-y:auto;
    background:var(--ground);border-bottom:1px solid var(--line);padding:6px 4vw 22px;margin:0;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .24s,transform .24s,visibility .24s}
  .top.open .nav{opacity:1;visibility:visible;transform:none}
  .nav>li{height:auto;display:block;border-bottom:1px solid var(--line)}
  .nav>li>a,.nav>li>button{width:100%;padding:15px 2px;justify-content:space-between;
    font-size:1rem;height:auto}
  .nav>li>a::after{display:none}
  .menu{position:static;width:auto;padding-top:0;opacity:1;visibility:visible;transform:none;
    max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
  .nav>li.open .menu{max-height:560px}
  .menu .sheet{background:none;border:0;box-shadow:none;padding:0 0 10px}
  .cta-nav{display:none}
}
@media (max-width:760px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .app .stats{grid-template-columns:1fr}
  .form .two{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .foot-base{flex-direction:column;gap:8px}
  .head-split{flex-direction:column;align-items:stretch}
  .filter{width:100%}
  .cta-band .aud{grid-template-columns:1fr}
  .cta-band .aud .a{padding:20px 0 0}
  .app .log .ln{gap:2px}
  .app .log .ln .m{flex-basis:100%}
}
@media (max-width:520px){
  body{font-size:.9375rem}
  .creds{grid-template-columns:1fr;gap:18px}
  .tabs button{padding:12px 14px;font-size:.8125rem}
}