@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/Fraunces-400.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/Fraunces-600.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/Fraunces-700.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/InstrumentSans-400.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/InstrumentSans-500.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/InstrumentSans-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/PlexMono-500.woff2') format('woff2')}

:root{
  /* warm paper */
  --canvas:#FAF7F2; --paper:#FFFFFF; --band:#F1ECE3; --band-2:#E7E0D4;
  --ink:#1A1714; --ink-2:#55504A; --ink-3:#6E6862;
  --on-dark:#FAF7F2; --on-dark-2:#B8AFA3;

  /* one accent hue, split by role. See the module docstring for the measured ratios. */
  --vermilion:#D23608;     /* fill and graphics; carries white text at 4.92:1 */
  --vermilion-ink:#AE3008; /* the same hue darkened for accent TEXT on any light ground */
  --vermilion-deep:#B32C05;/* pressed/hover state of a filled accent */
  --vermilion-t:#FF7A45;   /* the tint, only ever ON the ink band: 6.90:1 there */

  --rule:#E2DACC; --rule-2:#D2C8B6; --rule-ink:#332E28;

  --shell:min(1240px,92vw);
  --bar:74px;
  --r:4px;                 /* nearly square. Printed matter does not have rounded corners. */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);   /* power2.out, for reveals */
  --back:cubic-bezier(.34,1.56,.64,1);   /* back.out(1.4), so grids assemble rather than fade */
  --t:.45s;
  --shadow:0 14px 34px -18px rgba(26,23,20,.34); /* "a hair of a shadow", Nick 09-02 08:44 */
}


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

/* Fraunces is the voice. Editorial serif, mixed case, never uppercase - uppercase
   display was site 7's register and this is deliberately the opposite. */
h1,h2,h3,h4{margin:0;font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.06;
  letter-spacing:-.018em;text-wrap:balance}
.d1{font-size:clamp(2.5rem,5.6vw,4.6rem);line-height:1.02;letter-spacing:-.024em}
.d2{font-size:clamp(1.9rem,3.5vw,3rem);letter-spacing:-.022em}
.d3{font-size:clamp(1.25rem,1.9vw,1.6rem);letter-spacing:-.014em}
.d4{font-family:'Instrument Sans',sans-serif;font-size:1.02rem;font-weight:600;
  letter-spacing:-.008em;line-height:1.35}
p{margin:0 0 1.15em;max-width:66ch;text-wrap:pretty;color:var(--ink-2)}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.08rem,1.35vw,1.28rem);line-height:1.62;color:var(--ink-2);max-width:58ch}
.sm{font-size:.9rem;line-height:1.62;color:var(--ink-2)}

.mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;
  font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;font-variant-numeric:tabular-nums}

/* the eyebrow rule is one of the permitted uses of the accent */
.eyebrow{display:block;color:var(--ink-3);margin:0 0 20px;padding-top:14px;
  border-top:2px solid var(--vermilion);max-width:max-content}
.accent{color:var(--vermilion)}

/* The wordmark, exactly once per page and at display size.
   Site 8 previously set "Quantum Ventura" as a 0.71rem eyebrow above the headline while
   also carrying it as text in the nav, so the company name appeared twice and neither
   instance was display type. The nav now carries the mark alone; this is the nameplate.
   Sized as a printed masthead rather than 9-11's 5.8rem slab: it has to sit above a 4.6rem
   headline without the two competing. build/audit.py asserts the singleness. */
.wordmark{display:block;font-family:Fraunces,Georgia,serif;font-weight:700;
  font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.05;letter-spacing:-.022em;
  color:var(--ink);margin:0 0 14px}
.mastrule{display:block;height:4px;width:clamp(96px,13vw,168px);background:var(--vermilion);
  margin:0 0 26px}
/* the one italic in the system, used on a single word of a headline */
.em{font-style:italic;font-weight:400;color:var(--vermilion)}

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


/* .90, not .85: the ink CTA band scrolls under this bar, and at .85 the composited
   backdrop is #D8D5D1, where an accent nav link measures 4.45:1. At .90 it is 4.99:1.
   The bar is still translucent and still moves with what is behind it. */
.top{position:fixed;inset:0 0 auto;z-index:80;height:var(--bar);
  background:rgba(250,247,242,.90);backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;transition:border-color .3s 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(14px,2.4vw,36px)}

/* Brand mark, alone. It used to sit beside the words "Quantum Ventura", which put the
   wordmark on the page a second time; see .wordmark. The mark carries the height the
   text used to carry. The mark itself is the way home: a separate back control was
   tried on 2026-09-03 and removed on 2026-09-04 as redundant with it. */
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{height:46px;width:auto;flex:0 0 auto;transition:transform var(--t) var(--back)}
.brand:hover img,.brand:focus-visible img{transform:rotate(-6deg)}
/* The name unrolls from behind the mark on hover. Set in --ink, not in the nav ground:
   the bar is cream and anything lighter vanishes into it. Jivan, 2026-09-04. */
.brand .word{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:1.06rem;
  letter-spacing:-.02em;white-space:nowrap;overflow:hidden;max-width:0;opacity:0;
  color:var(--ink);margin-left:0;
  transition:max-width .55s var(--ease),opacity .34s var(--ease),margin-left .55s var(--ease)}
.brand:hover .word,.brand:focus-visible .word{max-width:250px;opacity:1;margin-left:12px}

.nav{display:flex;gap:clamp(12px,1.7vw,26px);margin-left:auto;align-items:center;height:100%;
  list-style:none;margin-block:0;padding:0}
.nav > li{height:100%;display:flex;align-items:center;position:relative}
.nav a,.nav button{text-decoration:none;font-size:.92rem;font-weight:500;color:var(--ink-2);
  background:none;border:0;cursor:pointer;padding:0;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;transition:color .22s var(--ease)}
.nav a:hover,.nav button:hover,.nav a[aria-current="page"]{color:var(--vermilion-ink)}
.nav .caret{width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--ease)}
.nav li.open .caret{transform:rotate(225deg) translateY(-2px)}

.menu{position:absolute;top:calc(100% - 10px);left:50%;translate:-50% 0;
  width:min(540px,86vw);padding:8px;margin:0;list-style:none;
  background:var(--paper);border:1px solid var(--rule-2);border-radius:var(--r);
  box-shadow:0 24px 60px -22px rgba(26,23,20,.28);
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s}
.nav li.open .menu{opacity:1;visibility:visible;transform:none}
.menu a{display:block;padding:12px 14px;border-radius:2px;transition:background .2s var(--ease)}
.menu a:hover{background:var(--band)}
.menu .n{display:block;font-family:Fraunces,serif;font-weight:600;color:var(--ink);
  font-size:1rem;margin-bottom:2px}
.menu .d{display:block;font-size:.79rem;color:var(--ink-3);line-height:1.4}

.burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--rule-2);
  border-radius:var(--r);background:var(--paper);cursor:pointer;padding:0;
  align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;
  height:1.5px;background:var(--ink)}
.burger span::before{top:-6px} .burger span::after{top:6px}


.foot{background:var(--band);border-top:1px solid var(--rule-2);padding:80px 0 34px}
.foot .in{width:var(--shell);margin:0 auto}
.foot-grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:clamp(24px,4vw,56px);
  align-items:start}
.foot img{height:40px;width:auto;margin-bottom:18px}
.foot .tag{font-size:.92rem;line-height:1.65;color:var(--ink-2);max-width:32ch;
  font-family:Fraunces,serif}
.foot h4{color:var(--ink-3);margin-bottom:15px;font-family:'IBM Plex Mono',monospace;
  font-weight:500;font-size:.71rem;letter-spacing:.13em;text-transform:uppercase}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot ul a{text-decoration:none;font-size:.92rem;color:var(--ink-2);transition:color .22s var(--ease)}
.foot ul a:hover{color:var(--vermilion-ink)}
.foot-base{margin-top:60px;padding-top:24px;border-top:1px solid var(--rule-2);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-3)}


main{padding-top:var(--bar)}
.sec{padding:clamp(70px,10vh,140px) 0;position:relative}
.sec > .in{width:var(--shell);margin:0 auto}
.sec.tight{padding:clamp(46px,6vh,84px) 0}
.b-canvas{background:var(--canvas)}
.b-band{background:var(--band)}
.b-paper{background:var(--paper)}
.b-ink{background:var(--ink);color:var(--on-dark)}
.b-ink p,.b-ink .lead{color:var(--on-dark-2)}
.b-ink .eyebrow{color:var(--on-dark-2);border-top-color:var(--vermilion-t)}
.b-ink .accent,.b-ink .em{color:var(--vermilion-t)}

.head{max-width:58ch;margin-bottom:clamp(36px,5vh,66px)}
.head .lead{margin-top:20px}
.rowend{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  flex-wrap:wrap;margin-bottom:clamp(34px,4.6vh,58px)}
.rowend .head{margin-bottom:0}

.btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;cursor:pointer;
  font-size:.93rem;font-weight:500;line-height:1;padding:15px 26px;border-radius:var(--r);
  border:1px solid transparent;transition:background .25s var(--ease),color .25s var(--ease),
  border-color .25s var(--ease)}
.btn.pri{background:var(--vermilion);color:#fff}
.btn.pri:hover{background:var(--vermilion-deep)}
.btn.sec{border-color:var(--rule-2);color:var(--ink)}
.btn.sec:hover{border-color:var(--ink);background:var(--paper)}
.btn .ar{transition:transform .25s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.b-ink .btn.sec{border-color:var(--rule-ink);color:var(--on-dark)}
.b-ink .btn.sec:hover{border-color:var(--on-dark);background:transparent}
.tlink{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--vermilion-ink);font-size:.93rem;font-weight:500;transition:gap .25s var(--ease)}
.tlink:hover{gap:13px}
.b-ink .tlink{color:var(--vermilion-t)}

/* ---- scroll motion -----------------------------------------------------------
   Two mechanisms, one result. Where the browser has scroll-driven animations the reveal
   is a `view()` timeline and no JS is involved in the motion at all; everywhere else an
   IntersectionObserver adds .vis and the same movement runs as a transition. Nothing is
   loaded to do this - no GSAP, no Lottie - because the whole point is a page that arrives
   over Japanese broadband.

   .rv    a block arriving on its own: 500ms, power2.out.
   .stagger  a grid whose children arrive in sequence: 60ms apart with a back.out(1.4)
             overshoot, so the grid reads as assembled rather than faded in.

   Both are gated on .js. Unhide-by-script means a script failure blanks everything below
   the fold, which shipped on site 7; build/audit.py asserts the gate. */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes riseSet{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

.js .rv{opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.js .rv.vis{opacity:1;transform:none}
.rv.dl1{transition-delay:.07s}
.js .stagger > *{opacity:0;transform:translateY(16px) scale(.97);
  transition:opacity .5s var(--ease-out),transform .5s var(--back)}
.js .stagger > *.vis{opacity:1;transform:none}
.js .stagger > *:nth-child(2){transition-delay:.06s}
.js .stagger > *:nth-child(3){transition-delay:.12s}
.js .stagger > *:nth-child(4){transition-delay:.18s}
.js .stagger > *:nth-child(5){transition-delay:.24s}
.js .stagger > *:nth-child(6){transition-delay:.30s}
.js .stagger > *:nth-child(7){transition-delay:.36s}
.js .stagger > *:nth-child(n+8){transition-delay:.42s}

@supports (animation-timeline: view()){
  .js .rv{opacity:1;transform:none;transition:none;
    animation:rise .5s var(--ease-out) both;
    animation-timeline:view();animation-range:entry 6% cover 24%}
  .js .stagger > *{opacity:1;transform:none;transition:none;
    animation:riseSet .55s var(--back) both;
    animation-timeline:view();animation-range:entry 4% cover 20%}
  /* A view() timeline advances on scroll distance, not on time, so the stagger has to be
     expressed as range offsets. Each child starts a little further into its own entry. */
  .js .stagger > *:nth-child(2){animation-range:entry 6% cover 22%}
  .js .stagger > *:nth-child(3){animation-range:entry 8% cover 24%}
  .js .stagger > *:nth-child(4){animation-range:entry 10% cover 26%}
  .js .stagger > *:nth-child(5){animation-range:entry 12% cover 28%}
  .js .stagger > *:nth-child(6){animation-range:entry 14% cover 30%}
  .js .stagger > *:nth-child(n+7){animation-range:entry 16% cover 32%}
}

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .stagger > *{opacity:1!important;transform:none!important;
    transition:none!important;animation:none!important}
  .btn,.tlink,.brand img,.back,.back .ar{transition:none}
  /* the hover lift collapses too; the border and shadow change still signals the target */
  .tile:hover,.loc:hover,.person:hover,.org:hover,.prog:hover{transform:none}
}


/* ---- hero: editorial masthead --------------------------------------------- */
.hero{padding:clamp(52px,8vh,104px) 0 clamp(40px,5vh,72px)}
.hero .d1{margin:0 0 26px;max-width:19ch}
.hero .lead{margin-bottom:34px}
.masthead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,72px);align-items:end}
.hero .figure{margin:0}
.hero .figure img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r)}

/* the standfirst rule: a hairline above a set of facts, like a printed masthead */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,34px);
  margin-top:clamp(38px,5vh,64px);padding-top:clamp(22px,3vh,32px);
  border-top:1px solid var(--rule-2)}
.facts dt{color:var(--ink-3);margin-bottom:8px}
.facts dd{margin:0;font-family:Fraunces,serif;font-size:1.02rem;line-height:1.45;
  color:var(--ink);font-weight:600}

/* ---- the capability bento: the signature ----------------------------------- */
/* Tile area is proportional to how many federal programs sit in that field, so the
   grid is a picture of where the company is actually strong. It is derived from the
   programme list, not decided by eye - that is the whole point of it. */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px);
  grid-auto-flow:dense}
.tile{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:12px;
  min-height:180px;transition:border-color var(--t) var(--ease),transform .3s var(--ease),
  box-shadow .3s var(--ease)}
.tile:hover{border-color:var(--rule-2);transform:translateY(-4px) scale(1.02);
  box-shadow:var(--shadow)}
.tile .n{font-family:Fraunces,serif;font-size:clamp(1.9rem,3.4vw,3rem);font-weight:700;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.tile h3{font-family:Fraunces,serif;font-size:1.18rem;font-weight:600;line-height:1.2}
/* The programme count used to be set with an inline `color:inherit;opacity:.7`, which on
   the accent tile resolved to body ink at 70% over the fill - 2.49:1. Set explicitly now. */
.tile .count{color:var(--ink-3)}
.tile .ags,.prog .ags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.tile .ags span,.prog .ags span{font-family:'IBM Plex Mono',monospace;font-size:.66rem;
  letter-spacing:.1em;padding:4px 8px;border:1px solid var(--rule-2);border-radius:2px;
  color:var(--ink-2)}
.tile.w2{grid-column:span 2}
.tile.h2{grid-row:span 2}
/* the single largest field carries the accent - the loudest use of it on the page */
/* Text on the fill is solid white, not a 0.86 alpha: composited, that measured 3.99:1
   against the accent, under the 4.5:1 body floor. Solid white measures 4.92:1. */
.tile.lead-tile{background:var(--vermilion);border-color:var(--vermilion)}
.tile.lead-tile .n,.tile.lead-tile h3,.tile.lead-tile p,
.tile.lead-tile .mono,.tile.lead-tile .ags span{color:#fff}
.tile.lead-tile .ags span{border-color:rgba(255,255,255,.5)}
.tile p{font-size:.9rem;line-height:1.55;margin:0}

/* ---- programmes: an index, set like a contents page ------------------------ */
.index{display:grid;border-top:1px solid var(--rule-2)}
.entry{border-bottom:1px solid var(--rule);transition:background .25s var(--ease)}
.entry:hover{background:var(--paper)}
.entry summary{cursor:pointer;list-style:none;display:grid;
  grid-template-columns:88px 1fr auto auto;gap:clamp(14px,2.4vw,34px);align-items:baseline;
  padding:clamp(16px,2vh,22px) clamp(8px,1vw,14px)}
.entry summary::-webkit-details-marker{display:none}
.entry .ag{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.11em;
  color:var(--vermilion-ink);font-weight:500}
.entry .tp{font-family:Fraunces,serif;font-size:1.06rem;font-weight:600;line-height:1.3;
  color:var(--ink)}
.entry .ph,.entry .tl{font-family:'IBM Plex Mono',monospace;font-size:.72rem;
  letter-spacing:.09em;color:var(--ink-3);white-space:nowrap}
.entry .bd{padding:0 clamp(8px,1vw,14px) clamp(20px,2.4vh,28px) calc(88px + clamp(14px,2.4vw,34px))}
.entry .bd p{font-size:.93rem;max-width:62ch;margin:0}
.entry .bd .pt{margin-top:10px;color:var(--ink-3);font-size:.86rem}

/* ---- the full programme file: one card per programme, grouped by agency ------ */
/* A7: tiles or agency columns, never a table. The synopsis sits open here rather than
   folded into a <details> as it is in the landing index - the open synopsis is the whole
   reason /programs/ exists. `.prog` borrows the card surface from `.person,.org` below;
   only the internals are new. The chips row takes `margin-top:auto` so phase, TRL and
   partners line up along the bottom of a row of unequal synopses. */
.progs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:clamp(16px,2vw,26px)}
.prog{display:flex;flex-direction:column}
.prog .lbl{display:block;color:var(--vermilion-ink);margin-bottom:11px}
.prog h3{font-family:Fraunces,serif;font-size:1.08rem;font-weight:600;line-height:1.3;
  color:var(--ink);margin-bottom:11px}
.prog .syn{font-size:.89rem;line-height:1.65;margin:0 0 18px}
.prog .pt{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--rule);
  color:var(--ink-3);font-size:.78rem;letter-spacing:.04em}

/* ---- editorial product cards ----------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:clamp(16px,2vw,26px)}
/* The card is image-led with no surface of its own, so the "hair of a shadow" Nick asked
   for lands on the image plate; the card itself just lifts. */
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:transparent;transition:transform .3s var(--ease)}
.card .shot{overflow:hidden;border-radius:var(--r);background:var(--band);margin-bottom:18px;
  transition:box-shadow .3s var(--ease)}
.card .shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s var(--ease)}
.card .lbl{color:var(--ink-3);display:block;margin-bottom:9px}
.card h3{margin-bottom:9px}
.card p{font-size:.92rem;line-height:1.6;margin:0}
.card .meta{margin-top:12px;color:var(--ink-3)}
a.card:hover{transform:translateY(-4px)}
a.card:hover .shot{box-shadow:var(--shadow)}
a.card:hover .shot img{transform:scale(1.02)}
a.card:hover h3{color:var(--vermilion-ink)}
.card h3{transition:color .25s var(--ease)}
.card .go{display:inline-flex;align-items:center;gap:7px;color:var(--vermilion-ink);
  font-size:.9rem;font-weight:500;margin-top:14px;transition:gap .25s var(--ease)}
a.card:hover .go{gap:12px}
@media (prefers-reduced-motion:reduce){
  .card,.card .shot img{transition:none}
  a.card:hover,a.card:hover .shot img{transform:none}
}

.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(16px,2vw,26px)}
a.fitem:hover{border-color:var(--rule-2);transform:translateY(-4px) scale(1.02);
  box-shadow:var(--shadow)}
a.fitem:hover .go{gap:12px}
@media (prefers-reduced-motion:reduce){a.fitem:hover{transform:none}}

/* ---- locations, people, orgs ------------------------------------------------ */
.locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));
  gap:clamp(12px,1.5vw,20px)}
.loc{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:26px;
  transition:border-color .25s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.loc:hover{border-color:var(--rule-2);transform:translateY(-4px) scale(1.02);
  box-shadow:var(--shadow)}
.loc .k{color:var(--ink-3);display:block;margin-bottom:12px}
.loc h3{font-size:1.12rem;margin-bottom:7px}
.loc .a{font-size:.88rem;line-height:1.6;margin:0}
.loc.hq{border-color:var(--vermilion)}
.loc.hq .k{color:var(--vermilion-ink)}

.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(16px,2vw,28px)}
.person,.org,.prog{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(22px,2.5vw,30px);
  transition:border-color .25s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.person:hover,.org:hover,.prog:hover{border-color:var(--rule-2);
  transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow)}
.person .role{color:var(--vermilion-ink);display:block;margin:8px 0 16px}
.person p,.org p{font-size:.89rem;line-height:1.65}
.person a.li{display:inline-flex;margin-top:16px;font-size:.85rem;color:var(--vermilion-ink);
  text-decoration:none}
.person a.li:hover{text-decoration:underline}
.orgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:clamp(16px,2vw,26px)}
.org .plate{width:64px;height:64px;display:grid;place-items:center;background:var(--band);
  border-radius:var(--r);padding:8px;margin-bottom:16px}
.org .plate img{max-width:100%;max-height:100%;object-fit:contain}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips span{padding:9px 15px;border:1px solid var(--rule-2);border-radius:var(--r);
  background:var(--paper);font-family:'IBM Plex Mono',monospace;font-size:.8rem;
  color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ---- partner carousel -------------------------------------------------------- */
/* Spacing is margin-right per item, not flex gap: with gap the track measures
   2N*W+(2N-1)*G while the duplicate sits at N*(W+G), so -50% lands half a gap short
   and the loop jumps once a cycle. */
.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mtrack{display:flex;width:max-content;animation:marq 52s linear infinite}
.marquee:hover .mtrack,.marquee:focus-within .mtrack{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee figure{flex:0 0 auto;width:clamp(124px,12.5vw,162px);margin:0 clamp(12px,1.5vw,20px) 0 0;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:18px;
  display:grid;place-items:center;aspect-ratio:1}
.marquee img{max-height:100%;width:auto;object-fit:contain}
@media (prefers-reduced-motion:reduce){
  .mtrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:14px}
  .mtrack figure{margin:0}
  .mtrack figure[aria-hidden="true"]{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---- prose bits --------------------------------------------------------------- */
.figure{margin:0}
.figure img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}
.figcap{margin-top:14px;color:var(--ink-3)}
.bul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bul li{position:relative;padding-left:22px;font-size:.93rem;line-height:1.62;color:var(--ink-2)}
.bul li::before{content:"";position:absolute;left:0;top:.68em;width:8px;height:1.5px;
  background:var(--vermilion)}
.spec{width:100%;border-collapse:collapse;font-size:.93rem}
.spec th,.spec td{text-align:left;padding:17px 0;border-top:1px solid var(--rule);vertical-align:top}
.spec th{width:32%;font-family:'IBM Plex Mono',monospace;font-size:.71rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:500;color:var(--ink-3);padding-right:26px}
.spec td{color:var(--ink-2)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:1px solid var(--rule)}
.ruled{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:0 clamp(24px,3vw,50px)}
.ruled > div{padding:clamp(22px,2.6vh,30px) 0;border-top:1px solid var(--rule)}
.ruled h3{margin-bottom:10px}
.ruled p{font-size:.9rem;line-height:1.62;max-width:34ch;margin:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap:clamp(20px,3vw,44px)}
.stats .fig{font-family:Fraunces,serif;font-weight:700;font-size:clamp(2rem,4.2vw,3.1rem);
  line-height:1;display:block;font-variant-numeric:tabular-nums;color:var(--vermilion)}
.stats .l{font-size:.87rem;line-height:1.5;color:var(--ink-2);margin-top:10px;display:block;max-width:22ch}

.form{display:grid;gap:17px;max-width:540px}
.form label{display:grid;gap:8px;font-size:.86rem;font-weight:500}
.form input,.form textarea{padding:14px 16px;border:1px solid var(--rule-2);border-radius:var(--r);
  background:var(--paper);font-size:.95rem;width:100%;transition:border-color .25s var(--ease)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--vermilion);
  box-shadow:0 0 0 3px rgba(210,54,8,.16)}
.form input:user-invalid{border-color:#B4462F}
.form textarea{resize:vertical;min-height:140px}
.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}


@media (max-width:1000px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile.w2{grid-column:span 2}
  .tile.h2{grid-row:span 1}
  .facts{grid-template-columns:repeat(2,1fr);gap:24px}
  .masthead{grid-template-columns:1fr;gap:34px;align-items:start}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:820px){
  .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:16px 4vw;gap:0;height:auto;max-height:calc(100svh - var(--bar));overflow-y:auto}
  .top.open .nav{display:flex}
  .nav > li{height:auto;display:block;border-bottom:1px solid var(--rule)}
  .nav > li:last-child{border-bottom:0}
  .nav a,.nav button{padding:15px 0;font-size:1.05rem;width:100%;justify-content:space-between}
  .menu{position:static;translate:none;width:auto;opacity:1;visibility:visible;transform:none;
    background:none;border:0;box-shadow:none;display:none;grid-template-columns:1fr;padding:0 0 12px}
  .nav li.open .menu{display:grid}
  .menu a{padding:11px 14px;background:var(--paper);margin-bottom:4px}
  .burger{display:flex}
  .top.open .cta{display:flex;position:static;border:0;padding:14px 4vw 20px;justify-content:center}
  .entry summary{grid-template-columns:70px 1fr;row-gap:8px}
  .entry .ph,.entry .tl{grid-column:2}
  .entry .bd{padding-left:calc(70px + clamp(14px,2.4vw,34px))}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .bento{grid-template-columns:1fr}
  .tile.w2{grid-column:span 1}
  .facts{grid-template-columns:1fr;gap:20px}
  .entry summary{grid-template-columns:1fr;row-gap:6px}
  .entry .ph,.entry .tl{grid-column:1}
  .entry .bd{padding-left:clamp(8px,1vw,14px)}
}