@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/InterTight-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/InterTight-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/Inter-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/Inter-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/Inter-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/Inter-700-normal.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/DMMono-400-normal.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/DMMono-500-normal.woff2') format('woff2')}

:root{
  /* neutrals: the range that keeps a near-white page from going bland */
  --canvas:#FAFAF9; --surface:#FFFFFF; --sunk:#F2F2F0; --band:#E9E9E6;
  --slate:#282C33; --slate-deep:#16181C;

  /* ink */
  /* ink-3 is #62676E and not lighter: it has to clear 4.5:1 on --band, which is
     where the footer headings sit. #6B7078 read fine on white and failed there. */
  --ink:#16181C; --ink-2:#4A4F57; --ink-3:#62676E;
  --on-dark:#F5F6F5; --on-dark-2:#AEB4BB;

  /* accent
     Raised 2026-09-03. Srini, 09-02 06:25: "the color is a little bit subdued"; 07:23:
     "when someone visits the website, there has to be some energy." The old #204F73 was a
     muted navy and read as corporate wallpaper on a near-white ground.
     #004DFF is the electric blue measured off accenture.com, the reference Srini and Nick
     both named. The near-white canvas and the restrained layout do not change; only the
     accent gets louder, which is the Accenture discipline: monochrome ground, one vivid
     accent on a few elements per screen.
     Measured, not eyeballed:
       #004DFF on --canvas  5.74:1   #004DFF on --band     4.92:1
       #004DFF on --wash    5.38:1   white on #004DFF      5.99:1
       white on --blue-hi   8.15:1
     blue-hi goes DARKER than blue, reversing the old lighter-on-hover pattern: a lighter
     tint of #004DFF drops white text to 4.09:1 and fails. */
  --blue:#004DFF; --blue-hi:#003AD6; --blue-wash:#EDF3FF;

  /* lines */
  --rule:#E3E3E0; --rule-strong:#CECEC9; --rule-dark:#383D45;

  --shell:min(1200px,92vw);
  --bar:60px; --rail:clamp(88px,10vw,132px);
  --r-card:12px; --r-ctl:8px;
  --ease:cubic-bezier(.16,.84,.24,1);
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 18px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font:400 17px/1.65 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-ligatures:none;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}

h1,h2,h3,h4{
  margin:0;font-family:'Inter Tight',Inter,sans-serif;font-weight:700;
  letter-spacing:-.025em;line-height:1.06;text-wrap:balance;
}
.d1{font-size:clamp(2.4rem,5.2vw,4.15rem);letter-spacing:-.038em;line-height:1.02}
.d2{font-size:clamp(1.85rem,3.4vw,2.85rem);letter-spacing:-.032em}
.d3{font-size:clamp(1.15rem,1.8vw,1.45rem);font-weight:600;letter-spacing:-.022em;line-height:1.25}
.d4{font-size:1.02rem;font-weight:600;letter-spacing:-.015em;line-height:1.35}
p{margin:0 0 1.1em;max-width:66ch;text-wrap:pretty}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.06rem,1.35vw,1.25rem);line-height:1.6;color:var(--ink-2);max-width:60ch}
.sm{font-size:.9rem;line-height:1.6;color:var(--ink-2)}

.mono{
  font-family:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-variant-numeric:tabular-nums;
}
.eyebrow{display:block;color:var(--blue);margin:0 0 14px}
.fig{
  font-family:Inter,sans-serif;font-weight:700;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;font-size:1.75rem;line-height:1.1;display:block;
}

::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
input,textarea{caret-color:var(--blue)}


/* ---- top bar ---------------------------------------------------------- */
.top{
  position:fixed;inset:0 0 auto;z-index:60;height:var(--bar);
  background:rgba(250,250,249,.82);backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease);
}
.top.scrolled{border-bottom-color:var(--rule)}
.top .in{
  width:var(--shell);margin:0 auto;height:100%;
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto}
.brand img{height:26px;width:auto}
.brand b{font-size:1rem;font-weight:600;letter-spacing:-.02em}
.nav{display:flex;gap:clamp(14px,2vw,26px);margin-left:auto;align-items:center}
.nav a{
  text-decoration:none;font-size:.875rem;font-weight:500;color:var(--ink-2);
  letter-spacing:-.005em;transition:color .18s var(--ease);white-space:nowrap;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{font-weight:600}
.top .cta{flex:0 0 auto}
.burger{
  display:none;margin-left:auto;width:38px;height:38px;border:1px solid var(--rule-strong);
  border-radius:var(--r-ctl);background:var(--surface);cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.burger span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink);
}
.burger span::before{top:-5px} .burger span::after{top:5px}

/* ---- footer ----------------------------------------------------------- */
.foot{background:var(--band);border-top:1px solid var(--rule-strong);padding:64px 0 30px}
.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 img{height:34px;width:auto;margin-bottom:14px}
.foot .tag{font-size:.9rem;line-height:1.6;color:var(--ink-2);max-width:34ch}
.foot h4{color:var(--ink-3);margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot ul a{
  text-decoration:none;font-size:.88rem;color:var(--ink-2);transition:color .18s var(--ease);
}
.foot ul a:hover{color:var(--blue)}
.foot-base{
  margin-top:48px;padding-top:20px;border-top:1px solid var(--rule-strong);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-3);
}


/* ---- bands ------------------------------------------------------------ */
main{padding-top:var(--bar)}
.sec{padding:clamp(64px,9vh,120px) 0;position:relative}
.sec > .in{width:var(--shell);margin:0 auto}
.sec.tight{padding:clamp(44px,6vh,76px) 0}

.b-canvas{background:var(--canvas)}
.b-sunk{background:var(--sunk)}
.b-band{background:var(--band)}
.b-dark{background:var(--slate);color:var(--on-dark)}
.b-deep{background:var(--slate-deep);color:var(--on-dark)}
.b-dark .lead,.b-deep .lead,.b-dark .sm,.b-deep .sm{color:var(--on-dark-2)}
.b-dark .eyebrow,.b-deep .eyebrow{color:var(--on-dark-2)}
.b-dark p,.b-deep p{color:var(--on-dark-2)}
.b-sunk + .b-sunk,.b-canvas + .b-canvas{padding-top:0}

.head{max-width:62ch;margin-bottom:clamp(32px,4.5vh,58px)}
.head.wide{max-width:none}
.head .lead{margin-top:16px}
.rowend{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(28px,4vh,48px);
}
.rowend .head{margin-bottom:0}

/* ---- buttons ---------------------------------------------------------- */
.btnrow{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;cursor:pointer;
  font-size:.9rem;font-weight:500;letter-spacing:-.005em;line-height:1;
  padding:12px 20px;border-radius:var(--r-ctl);border:1px solid transparent;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
  white-space:nowrap;
}
.btn.pri{background:var(--blue);color:#fff}
.btn.pri:hover{background:var(--blue-hi)}
.btn.sec{background:transparent;border-color:var(--rule-strong);color:var(--ink)}
.btn.sec:hover{border-color:var(--ink);background:var(--surface)}
.btn.sm{padding:9px 15px;font-size:.84rem}
.b-dark .btn.sec,.b-deep .btn.sec{border-color:var(--rule-dark);color:var(--on-dark)}
.b-dark .btn.sec:hover,.b-deep .btn.sec:hover{border-color:var(--on-dark);background:transparent}
.btn .ext{font-size:.85em;opacity:.8}
.tlink{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--blue);
  font-size:.9rem;font-weight:500;transition:gap .18s var(--ease);
}
.tlink:hover{gap:10px;color:var(--blue-hi)}
.b-dark .tlink,.b-deep .tlink{color:#8FBEE3}


/* ---- hero -------------------------------------------------------------- */
/* Left-weighted, not centred: centred hero + big image is the template answer.
   The product image gets the full shell width underneath, Apple product-page
   style, and the spec strip below it states real facts in mono. No fake
   telemetry, no invented live numbers. */
.hero{padding:clamp(46px,7vh,88px) 0 0}

/* The product name, and the one thing a visitor should leave with. It is set in
   the display face rather than the mono label style: mono on this site means
   data, and a product name is a name. Sized to be read at a glance without
   competing with the headline under it. */
/* Masthead rule. The company name sat directly above the headline in the same colour
   family, with only a few px between them, so the hero read as one run-on sentence:
   "Quantum Ventura Applied AI research for federal programs." The accent on the headline's
   last phrase made it worse, bookending the block in one colour. A short accent bar plus
   real space separates identity from message. Same device as site 8, which never had the
   problem. Client note, 2026-09-03. */
.mastrule{display:block;height:3px;width:clamp(72px,9vw,104px);
  background:var(--blue);margin:0 0 22px;border-radius:2px}
.ptag{
  display:block;font-family:'Inter Tight',Inter,sans-serif;font-weight:700;
  font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.025em;line-height:1.1;
  color:var(--blue);margin:0 0 12px;
}
.hero .d1{margin:0 0 22px}
.hero .d1 .accent{color:var(--blue)}
.hero .lead{max-width:52ch;margin-bottom:26px}
.hero .note{margin-top:20px;font-size:.78rem;line-height:1.55;color:var(--ink-3);max-width:56ch}
.hero-top{
  display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:start;margin-bottom:clamp(30px,4.5vh,50px);
}
.herofig{margin:0}
.herofig img{
  width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center;display:block;
  border-radius:var(--r-card);background:var(--band);
}
.herofig figcaption{margin-top:12px;color:var(--ink-3)}

/* real product facts, set as a spec sheet */
.specstrip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,34px);
  margin-top:clamp(22px,3vh,34px);padding-top:clamp(20px,2.6vh,30px);
  border-top:1px solid var(--rule);
}
.specstrip dt{color:var(--ink-3);margin-bottom:7px}
.specstrip dd{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink);font-weight:500}

/* ---- card grids -------------------------------------------------------- */
.grid{display:grid;gap:clamp(12px,1.6vw,20px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:clamp(20px,2.2vw,28px);
}
.card h3{margin-bottom:9px}
.card p{font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.card .fig{color:var(--blue);margin-bottom:6px}
.b-dark .card,.b-deep .card{background:#20242A;border-color:var(--rule-dark)}
.b-dark .card p,.b-deep .card p{color:var(--on-dark-2)}
.card.plain{background:transparent;border:0;padding:0}
.card.plain{border-top:1px solid var(--rule);padding-top:20px}
.b-dark .card.plain,.b-deep .card.plain{border-top-color:var(--rule-dark);background:transparent}

/* Hairline-ruled columns for sets that are a list, not a sequence. Deliberately
   not numbered: the capability set has no order, so numbering it would assert
   something untrue. Numbering on this site is reserved for the TRL ladder. */
.ruled{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 clamp(20px,3vw,44px);
}
.ruled > div{padding:clamp(20px,2.4vh,28px) 0;border-top:1px solid var(--rule-strong)}
.ruled h3{margin-bottom:8px}
.ruled p{font-size:.9rem;line-height:1.6;color:var(--ink-2);max-width:34ch}
.b-dark .ruled > div,.b-deep .ruled > div{border-top-color:var(--rule-dark)}
.b-dark .ruled p,.b-deep .ruled p{color:var(--on-dark-2)}

/* ---- media ------------------------------------------------------------- */
/* Every image on this site is a product shot on a near-white sweep. Framing one
   in a bordered grey card turns the white background into a visible hole and
   shrinks the subject. They float on the page instead, which is both cleaner and
   how product photography is normally handled. */
.shot{border-radius:var(--r-card);overflow:hidden;background:transparent}
.shot img{width:100%;aspect-ratio:16/9;object-fit:cover}
figure{margin:0}
figcaption{margin-top:10px;color:var(--ink-3)}

/* ---- the TRL ladder: the signature ------------------------------------- */
/* Technology Readiness Level is a real DoD 1-9 scale, so it is the one ordering
   on this page that carries information rather than decoration. Programs hang
   off the rung they have actually reached. This is why there is no 01/02/03
   numbering anywhere else on the site. */
.ladder{list-style:none;margin:0;padding:0}
.rung{
  display:grid;grid-template-columns:var(--rail) 1fr;gap:clamp(18px,3vw,44px);
  padding:clamp(20px,2.6vh,30px) 0;border-top:1px solid var(--rule-strong);
}
.ladder > .rung:last-child{border-bottom:1px solid var(--rule-strong)}
.lvl{position:sticky;top:calc(var(--bar) + 20px);align-self:start}
.lvl .n{
  font-family:'Inter Tight',sans-serif;font-weight:700;font-size:clamp(1.6rem,2.6vw,2.1rem);
  letter-spacing:-.035em;line-height:1;display:block;color:var(--ink);
}
.lvl .k{display:block;color:var(--ink-3);margin-top:6px}
/* readiness read as a proportion of the 9-level scale */
.lvl .gauge{display:block;height:3px;background:var(--rule-strong);margin-top:12px;border-radius:2px}
.lvl .gauge i{display:block;height:100%;background:var(--blue);border-radius:2px;width:calc(var(--f) * 100%)}
.progs{display:grid;gap:10px}

.tile{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-card);
  overflow:hidden;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.tile:hover{border-color:var(--rule-strong);box-shadow:0 8px 24px -14px rgba(22,24,28,.2)}
.tile > summary{
  cursor:pointer;list-style:none;padding:20px clamp(18px,2vw,24px);display:grid;gap:10px;
}
.tile > summary::-webkit-details-marker{display:none}
.tile .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--ink-3)}
.tile .ag{
  padding:3px 8px;border-radius:4px;background:var(--blue-wash);color:var(--blue);
  font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.09em;font-weight:500;
}
.tile .topic{font-size:1rem;font-weight:600;letter-spacing:-.015em;line-height:1.4;padding-right:26px}
.tile .more{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:var(--blue);font-size:.82rem;font-weight:500;
}
.tile .more::after{content:"+";font-size:1.1rem;line-height:1;color:var(--ink-3)}
.tile[open] .more::after{content:"\2212"}
.tile .body{
  padding:0 clamp(18px,2vw,24px) 22px;border-top:1px solid var(--rule);margin-top:2px;
  padding-top:18px;
}
.tile .body p{font-size:.9rem;color:var(--ink-2);margin-bottom:14px}
.tile dl{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0;font-size:.85rem}
.tile dt{color:var(--ink-3);font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;padding-top:2px}
.tile dd{margin:0;color:var(--ink-2)}
/* /programs/ runs the same ladder with agencies on the rail instead of TRL levels, and
   with every synopsis already on the page rather than folded into a <details>. That is the
   whole point of the page, so the card has no <summary> to click and must not carry a
   hover affordance promising one. Declared after `.tile` so the equal-specificity
   overrides below win. */
.entry > .cap{padding:20px clamp(18px,2vw,24px);display:grid;gap:10px}
.entry .topic{padding-right:0}
.entry:hover{border-color:var(--rule);box-shadow:none}
/* the partners list is dropped when a program has none, leaving the synopsis last */
.entry .body p:last-child{margin-bottom:0}
/* Navy alone runs eight of the fourteen, so the full page needs a second column to stay
   scannable; `min(100%,...)` keeps auto-fit from overflowing a narrow rung. */
.ladder.full .progs{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));align-items:start;
}

/* ---- big-type field list ------------------------------------------------ */
.fields{display:grid;gap:0;margin-top:clamp(24px,4vh,44px)}
.fields a,.fields div{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:clamp(16px,2.2vh,24px) 0;border-top:1px solid var(--rule-dark);text-decoration:none;
}
.fields > *:last-child{border-bottom:1px solid var(--rule-dark)}
.fields .f{
  font-size:clamp(1.5rem,3.4vw,2.5rem);font-weight:700;letter-spacing:-.035em;
  line-height:1.1;color:var(--on-dark);
}
.fields .s{color:var(--on-dark-2);font-size:.9rem;text-align:right}

/* ---- products ----------------------------------------------------------- */
.prods{display:grid;gap:clamp(14px,2vw,22px)}
.prod{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:clamp(22px,2.6vw,34px);
}
.prod.flip{direction:rtl} .prod.flip > *{direction:ltr}
.prod .tag{color:var(--blue);margin-bottom:12px;display:block}
.prod h3{margin-bottom:12px}
.prod p{font-size:.94rem;color:var(--ink-2);margin-bottom:20px}
/* grid, not flex-wrap: three facts of uneven label length wrapped 2+1 and went
   ragged. Equal columns keep the figures on one baseline. */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);margin-bottom:22px}
.stats .fig{font-size:1.4rem;color:var(--blue)}
.stats .l{font-size:.8rem;line-height:1.45;color:var(--ink-3)}

/* ---- locations ---------------------------------------------------------- */
.locs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.loc{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-card);padding:24px}
.loc .k{color:var(--blue);display:block;margin-bottom:10px}
.loc h3{margin-bottom:6px}
.loc .a{font-size:.88rem;line-height:1.6;color:var(--ink-2)}
.loc.hq{border-color:var(--blue);background:var(--blue-wash)}

/* ---- product cards (landing) -------------------------------------------- */
/* Vanguard and CodeLens have no page to link to, so their cards are statements
   rather than links. A card that looks clickable and is not is worse than a card
   that plainly is not clickable, so only the linked one gets hover affordance. */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.pcard{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:12px;
  text-decoration:none;color:inherit;
}
.pcard .tag{color:var(--blue)}
.pcard h3{margin:0}
.pcard p{font-size:.92rem;line-height:1.6;color:var(--ink-2);margin:0;flex:1}
.pcard .meta{color:var(--ink-3);padding-top:12px;border-top:1px solid var(--rule)}
a.pcard{transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
a.pcard:hover{border-color:var(--rule-strong);box-shadow:0 8px 24px -14px rgba(22,24,28,.2)}
a.pcard .go{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-size:.88rem;font-weight:500}

/* ---- partners: continuous carousel -------------------------------------- */
/* Duplicated track translated by exactly -50%, so the second copy lands where the
   first began and the loop is seamless. Pauses on hover, and stops dead under
   prefers-reduced-motion, where an endlessly moving strip is a genuine problem. */
.marquee{
  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);
}
/* The spacing is margin-right on each figure, NOT flex `gap`. With `gap`, the track
   is 2N*W + (2N-1)*G wide but item N sits at N*(W+G), so translateX(-50%) lands half
   a gap short and the loop visibly jumps once per cycle. Uniform per-item margin makes
   the track exactly 2N*(W+G), so -50% is exactly one copy. */
.marquee-track{
  display:flex;width:max-content;
  animation:marquee 46s linear infinite;
}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee figure{
  flex:0 0 auto;width:clamp(120px,13vw,164px);
  margin:0 clamp(10px,1.4vw,18px) 0 0;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-ctl);
  padding:16px;display:grid;place-items:center;aspect-ratio:1;
}
.marquee img{max-height:100%;width:auto;object-fit:contain}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:12px}
  .marquee-track figure{margin:0}
  /* the duplicate half is redundant once it is a static wrapped grid */
  .marquee-track figure[aria-hidden="true"]{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---- consortium cards (partnerships page) -------------------------------- */
.orgs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,22px)}
.org{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:clamp(20px,2.4vw,30px);display:grid;grid-template-rows:auto auto 1fr;gap:14px;
}
.org .plate{
  width:64px;height:64px;display:grid;place-items:center;background:var(--sunk);
  border-radius:var(--r-ctl);padding:8px;
}
.org .plate img{max-width:100%;max-height:100%;object-fit:contain}
.org p{font-size:.89rem;line-height:1.62;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{
  padding:7px 13px;border:1px solid var(--rule-strong);border-radius:var(--r-ctl);
  background:var(--surface);font-family:'DM Mono',monospace;font-size:.8rem;
  font-variant-numeric:tabular-nums;color:var(--ink-2);
}

/* ---- people -------------------------------------------------------------- */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.person{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:clamp(20px,2.4vw,28px);
}
.person .role{color:var(--blue);display:block;margin:6px 0 14px}
.person p{font-size:.88rem;line-height:1.62;color:var(--ink-2)}
.person a.li{
  display:inline-flex;margin-top:14px;font-size:.84rem;color:var(--blue);text-decoration:none;
}
.person a.li:hover{text-decoration:underline}

/* ---- spec table (product pages) ------------------------------------------ */
.spec{width:100%;border-collapse:collapse;font-size:.92rem}
.spec th,.spec td{text-align:left;padding:15px 0;border-top:1px solid var(--rule);vertical-align:top}
.spec th{
  width:34%;font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:500;color:var(--ink-3);padding-right:24px;
}
.spec td{color:var(--ink-2)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:1px solid var(--rule)}

/* ---- bullet lists -------------------------------------------------------- */
.bul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.bul li{position:relative;padding-left:20px;font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.bul li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--blue);
}
.b-dark .bul li,.b-deep .bul li{color:var(--on-dark-2)}

/* ---- what is at stake (CNRT page) ---------------------------------------- */
/* The industry cost figures lead, because they are the only numbers on the page
   a buyer already believes. The attack types then read as a reference list
   rather than as twelve marketing cards. */
.bigstats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);
  margin-bottom:clamp(34px,5vh,64px);
}
.bigstats .fig{font-size:clamp(2.1rem,4.6vw,3.4rem);color:var(--on-dark)}
.bigstats .l{font-size:.88rem;line-height:1.5;color:var(--on-dark-2);margin-top:10px;display:block;max-width:26ch}
.tlist{display:grid}
.tlist > div{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);
  gap:clamp(14px,3vw,44px);padding:clamp(16px,2.2vh,24px) 0;
  border-top:1px solid var(--rule-dark);align-items:baseline;
}
.tlist > div:last-child{border-bottom:1px solid var(--rule-dark)}
.tlist h3{color:var(--on-dark);margin-bottom:6px}
.tlist .cost{color:#8FBEE3;display:block}
.tlist p{font-size:.9rem;line-height:1.6;color:var(--on-dark-2);margin:0}
.statrow{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);
  margin-top:clamp(24px,3.5vh,40px);padding-top:clamp(24px,3.5vh,40px);
  border-top:1px solid var(--rule);
}
.statrow .fig{font-size:clamp(1.8rem,4vw,2.7rem);color:var(--blue)}
.statrow .l{font-size:.85rem;color:var(--ink-2);margin-top:8px;display:block}

/* ---- forms ---------------------------------------------------------------- */
.form{display:grid;gap:16px;max-width:520px}
.form label{display:grid;gap:7px;font-size:.85rem;font-weight:500}
.form input,.form textarea{
  padding:12px 14px;border:1px solid var(--rule-strong);border-radius:var(--r-ctl);
  background:var(--surface);font-size:.95rem;width:100%;
  transition:border-color .18s var(--ease);
}
.form input:hover,.form textarea:hover{border-color:var(--ink-3)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash)}
.form input:user-invalid{border-color:#B4462F}
.form textarea{resize:vertical;min-height:130px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{font-size:.9rem;min-height:1.4em;margin:0}
.status.ok{color:#1F7A52} .status.err{color:#B4462F}


/* ---- reveal --------------------------------------------------------------- */
/* Gated on .js, which an inline script sets before paint. Ungated, a script failure or a
   blocked bundle leaves every .rise element at opacity:0 and the page renders blank below
   the fold. That shipped on site 7 once; audit.py now asserts the gate exists. */
.js .rise{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),
             border-color .18s var(--ease),box-shadow .18s var(--ease)}
.js .rise.vis{opacity:1;transform:none}
/* Must outrank `.js .rise` (0,2,0), whose `transition` SHORTHAND resets delay to 0.
   As bare `.d1x` (0,1,0) these lost silently, which is why the card grids all
   revealed on the same frame instead of stepping. G7 wants 60ms steps. */
.js .rise.d1x{transition-delay:.06s}
.js .rise.d2x{transition-delay:.12s}
.js .rise.d3x{transition-delay:.18s}
.d1x{transition-delay:.06s} .d2x{transition-delay:.12s} .d3x{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){
  /* Must match the .js specificity above, otherwise the gated rule wins and reduced-motion
     users get the hidden state with no transition to un-hide it. */
  .js .rise,.rise,
  .js .rise.d1x,.js .rise.d2x,.js .rise.d3x{
    opacity:1;transform:none;transition:none;transition-delay:0s}
  .btn,.tlink,.tile,.nav a{transition:none}
}


@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero-top{grid-template-columns:1fr;gap:26px;align-items:start}
  .hero .lead{max-width:none}
  .specstrip{grid-template-columns:repeat(2,1fr);gap:22px}
  .ruled{grid-template-columns:repeat(2,1fr)}
  .prod,.prod.flip{grid-template-columns:1fr;direction:ltr;gap:26px}
  .locs,.people{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:760px){
  .nav,.top .cta{
    display:none;position:fixed;inset:var(--bar) 0 auto;background:var(--canvas);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;
    margin:0;padding:14px 4vw;gap:2px;
  }
  .top.open .nav{display:flex}
  .top.open .cta{display:flex;justify-content:center;margin-top:10px;inset:auto}
  .top.open .cta{position:static;border:0;padding:0 4vw 18px}
  .nav a{padding:12px 0;font-size:1rem;border-bottom:1px solid var(--rule)}
  .burger{display:flex}
  .orgs,.g2,.g3,.g4,.locs,.people,.ruled,.pgrid{grid-template-columns:1fr}
  .statrow{grid-template-columns:1fr;gap:22px}
  /* the ladder folds: the rung label sits above its programs rather than beside */
  .rung{grid-template-columns:1fr;gap:14px;padding:22px 0}
  .lvl{position:static;display:flex;align-items:baseline;gap:12px}
  .lvl .k{margin-top:0}
  .lvl .gauge{display:none}
  .herofig img{aspect-ratio:16/10}
  .stats{grid-template-columns:repeat(2,1fr);gap:18px}
  .spec th{width:38%;padding-right:14px}
}
@media (max-width:480px){
  body{font-size:16px}
  .foot-grid{grid-template-columns:1fr}
  .ptag{font-size:1.2rem}
  .flag{max-width:none}
}