@font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/Sora-500.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/Sora-600.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/Sora-700.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/PublicSans-400.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/PublicSans-500.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/PublicSans-600.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/JetBrainsMono-500.woff2') format('woff2')}

:root{
  --bone:#F7F6F1; --paper:#FFFFFF; --band:#ECEAE1; --band-2:#E0DDD1;
  --spruce:#0F3D2E; --spruce-2:#164A38; --mid:#1C5C46; --sage:#8FA89B;

  /* brass: fill vs text. See the module docstring. */
  --brass:#B8892B; --brass-ink:#8A6414; --brass-on-dark:#D9A94A;

  /* --ink-3 is #616C66 and not lighter: it must clear 4.5:1 on --band, the darkest
     light surface. #66716B read fine on bone and measured 4.21 on band. */
  --ink:#14201B; --ink-2:#4A5650; --ink-3:#616C66;
  --on-dark:#F2F0E8; --on-dark-2:#A9BBB0;

  --rule:#E1DED2; --rule-2:#CFCABA; --rule-dark:#2A5546;

  --shell:min(1300px,92vw);
  --bar:96px;                 /* taller bar so the mark can be 46px */
  --r:18px; --r-sm:12px;      /* rounded corners on every image, per the brief */

  --ease:cubic-bezier(.22,.61,.36,1);      /* power2.out */
  --ease-out:cubic-bezier(.16,1,.3,1);     /* expo.out   */
  --back:cubic-bezier(.34,1.56,.64,1);     /* back.out(1.4), slight overshoot */
  --t:.5s;
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 24px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bone);color:var(--ink);
  /* 19px base. Public Sans is the US Web Design System face - the right body voice
     for a federal contractor, and it holds up at large sizes. */
  font:400 19px/1.68 'Public 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}

h1,h2,h3,h4{margin:0;font-family:Sora,'Public Sans',sans-serif;font-weight:700;
  line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.d0{font-size:clamp(3.2rem,8.4vw,7.6rem);line-height:.94;letter-spacing:-.045em}
.d1{font-size:clamp(2.5rem,5vw,4.2rem);line-height:1;letter-spacing:-.035em}
.d2{font-size:clamp(2rem,3.7vw,3.2rem);letter-spacing:-.03em}
.d3{font-size:clamp(1.35rem,2vw,1.8rem);letter-spacing:-.022em;font-weight:600}
.d4{font-size:1.22rem;letter-spacing:-.014em;font-weight:600;line-height:1.32}
p{margin:0 0 1.15em;max-width:64ch;text-wrap:pretty;color:var(--ink-2)}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.22rem,1.55vw,1.44rem);line-height:1.58;color:var(--ink-2);max-width:52ch}
.sm{font-size:1.02rem;line-height:1.62;color:var(--ink-2)}

/* the smallest type on the site, and it is only ever short tracked-out labels */
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;
  font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums}

.eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--brass-ink);margin:0 0 22px}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--brass);border-radius:2px}
.b-dark .eyebrow{color:var(--brass-on-dark)}
.accent{color:var(--mid)}
.b-dark .accent{color:var(--brass-on-dark)}

::selection{background:var(--spruce);color:var(--bone)}
:focus-visible{outline:3px solid var(--brass-ink);outline-offset:3px;border-radius:4px}
input,textarea{caret-color:var(--mid)}


.top{position:fixed;inset:0 0 auto;z-index:90;height:var(--bar);
  background:rgba(247,246,241,.86);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),height .3s var(--ease)}
.top.scrolled{border-bottom-color:var(--rule-2)}
.top .in{width:var(--shell);margin:0 auto;height:100%;display:flex;align-items:center;
  gap:clamp(16px,2.6vw,40px)}

/* The mark is 46px and stands alone. The wordmark is hidden and unfurls on hover or
   keyboard focus, which is both the "this goes home" affordance and the reason the hero
   is free to set "Quantum Ventura" at full display size without repeating itself. */
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:0 0 auto;
  padding:6px 10px 6px 6px;margin-left:-6px;border-radius:var(--r-sm);
  transition:background .3s var(--ease)}
.brand:hover,.brand:focus-visible{background:var(--band)}
.brand img{height:46px;width:auto;flex:0 0 auto;transition:transform .5s var(--back)}
.brand:hover img,.brand:focus-visible img{transform:rotate(-9deg) scale(1.07)}
.brand .word{font-family:Sora,sans-serif;font-weight:700;font-size:1.12rem;letter-spacing:-.03em;
  white-space:nowrap;overflow:hidden;max-width:0;opacity:0;transform:translateX(-10px);
  transition:max-width .5s var(--ease),opacity .32s var(--ease),transform .5s var(--ease)}
.brand:hover .word,.brand:focus-visible .word{max-width:260px;opacity:1;transform:none}

.nav{display:flex;gap:clamp(14px,1.9vw,30px);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:1.02rem;font-weight:500;color:var(--ink-2);
  background:none;border:0;cursor:pointer;padding:0;white-space:nowrap;position:relative;
  display:inline-flex;align-items:center;gap:8px;transition:color .25s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--brass);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav a:hover,.nav button:hover{color:var(--spruce)}
.nav .caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .35s var(--ease)}
.nav li.open .caret{transform:rotate(225deg) translateY(-2px)}

.menu{position:absolute;top:calc(100% - 14px);left:50%;translate:-50% 0;
  width:min(620px,88vw);padding:12px;margin:0;list-style:none;
  background:var(--paper);border:1px solid var(--rule-2);border-radius:var(--r);
  box-shadow:0 30px 70px -26px rgba(15,61,46,.3);
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:top center;
  transition:opacity .3s var(--ease),transform .3s var(--back),visibility .3s}
.nav li.open .menu{opacity:1;visibility:visible;transform:none}
.menu a{display:block;padding:14px 16px;border-radius:var(--r-sm);transition:background .22s var(--ease)}
.menu a::after{display:none}
.menu a:hover{background:var(--band)}
.menu .n{display:block;font-family:Sora,sans-serif;font-weight:600;color:var(--ink);
  font-size:1.06rem;margin-bottom:3px}
.menu .d{display:block;font-size:.92rem;color:var(--ink-3);line-height:1.45}

.burger{display:none;margin-left:auto;width:50px;height:50px;border:1px solid var(--rule-2);
  border-radius:var(--r-sm);background:var(--paper);cursor:pointer;padding:0;
  align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;
  background:var(--ink);transition:transform .3s var(--ease)}
.burger span::before{top:-7px} .burger span::after{top:7px}

.foot{background:var(--spruce);color:var(--on-dark);padding:96px 0 40px}
.foot .in{width:var(--shell);margin:0 auto}
.foot-grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:clamp(28px,4vw,60px);
  align-items:start}
.foot img{height:52px;width:auto;margin-bottom:22px}
.foot .tag{font-size:1.06rem;line-height:1.62;color:var(--on-dark-2);max-width:32ch}
.foot h4{color:var(--brass-on-dark);margin-bottom:18px;font-family:'JetBrains Mono',monospace;
  font-weight:500;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.foot ul a{text-decoration:none;font-size:1.04rem;color:var(--on-dark-2);
  transition:color .25s var(--ease)}
.foot ul a:hover{color:var(--bone)}
.foot-base{margin-top:70px;padding-top:26px;border-top:1px solid var(--rule-dark);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--on-dark-2)}


main{padding-top:var(--bar)}
.sec{padding:clamp(80px,11vh,160px) 0;position:relative}
.sec > .in{width:var(--shell);margin:0 auto}
.sec.tight{padding:clamp(52px,7vh,96px) 0}
.b-bone{background:var(--bone)}
.b-band{background:var(--band)}
.b-paper{background:var(--paper)}
.b-dark{background:var(--spruce);color:var(--on-dark)}
.b-dark p,.b-dark .lead,.b-dark .sm{color:var(--on-dark-2)}

.head{max-width:56ch;margin-bottom:clamp(40px,5.5vh,72px)}
.head .lead{margin-top:22px}
.rowend{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;
  margin-bottom:clamp(38px,5vh,64px)}
.rowend .head{margin-bottom:0}

.btnrow{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;
  font-family:'Public Sans',sans-serif;font-size:1.06rem;font-weight:600;line-height:1;
  padding:19px 32px;border-radius:999px;border:2px solid transparent;
  transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease),
             transform .28s var(--back)}
.btn.pri{background:var(--spruce);color:var(--bone)}
.btn.pri:hover{background:var(--mid);transform:translateY(-3px)}
.btn.sec{border-color:var(--rule-2);color:var(--ink)}
.btn.sec:hover{border-color:var(--spruce);transform:translateY(-3px)}
.b-dark .btn.pri{background:var(--brass);color:var(--ink)}
.b-dark .btn.pri:hover{background:var(--brass-on-dark)}
.b-dark .btn.sec{border-color:var(--rule-dark);color:var(--on-dark)}
.b-dark .btn.sec:hover{border-color:var(--bone)}
.btn .ar{transition:transform .28s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.tlink{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--brass-ink);
  font-size:1.06rem;font-weight:600;transition:gap .28s var(--ease)}
.tlink:hover{gap:16px}
.b-dark .tlink{color:var(--brass-on-dark)}


/* ---- motion -----------------------------------------------------------------
   Two layers, both pure CSS:

   1. `animation-timeline: view()` drives reveal and parallax directly from scroll
      position where the browser supports it. No JavaScript, no scroll listener,
      no jank - the compositor runs it.
   2. Browsers without scroll-driven timelines fall back to a class toggled by one
      IntersectionObserver.

   Both are gated on .js so a script failure cannot leave the page blank, and both
   collapse entirely under prefers-reduced-motion.
------------------------------------------------------------------------------ */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes riseScale{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes wipeIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes drift{from{transform:translateY(-4%)}to{transform:translateY(4%)}}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.js .rv{opacity:0;transform:translateY(26px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .rv.vis{opacity:1;transform:none}
.rv.s1{transition-delay:.06s} .rv.s2{transition-delay:.12s} .rv.s3{transition-delay:.18s}
.rv.s4{transition-delay:.24s} .rv.s5{transition-delay:.30s} .rv.s6{transition-delay:.36s}

@supports (animation-timeline: view()){
  .js .rv{opacity:1;transform:none;transition:none;
    animation:rise .8s var(--ease) both;
    animation-timeline:view();animation-range:entry 5% cover 26%}
  /* the grid stagger overshoots slightly on arrival, which is what makes a grid feel
     assembled rather than faded in */
  .js .stagger > *{animation:riseScale .7s var(--back) both;
    animation-timeline:view();animation-range:entry 2% cover 24%}
  /* images drift against the scroll inside their own rounded frame */
  .js .par img{animation:drift linear both;animation-timeline:view();animation-range:cover}
}

/* hero opening sequence: mark, wordmark, headline lines, lead, buttons, facts */
.stage > *{opacity:0;animation:rise .85s var(--ease-out) both}
.stage > *:nth-child(1){animation-delay:.06s}
.stage > *:nth-child(2){animation-delay:.16s}
.stage > *:nth-child(3){animation-delay:.26s}
.stage > *:nth-child(4){animation-delay:.36s}
.stage > *:nth-child(5){animation-delay:.46s}
.stage > *:nth-child(6){animation-delay:.56s}
.ln{display:block;overflow:hidden}
.ln > span{display:block;opacity:0;animation:rise .95s var(--ease-out) both}
.ln:nth-child(1) > span{animation-delay:.20s}
.ln:nth-child(2) > span{animation-delay:.31s}
.ln:nth-child(3) > span{animation-delay:.42s}

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .stagger > *,.stage > *,.ln > span{
    opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .js .par img{animation:none!important}
  .btn:hover,.card:hover{transform:none!important}
}


/* ---- hero ------------------------------------------------------------------- */
.hero{padding:clamp(56px,8vh,110px) 0 clamp(48px,6vh,88px)}
/* "Quantum Ventura" at full display size. It is not repeated in the nav bar, which
   shows the mark alone - that is the whole reason this can be large here. */
.wordmark{font-family:Sora,sans-serif;font-weight:700;font-size:clamp(2.6rem,6.4vw,5.4rem);
  line-height:.96;letter-spacing:-.045em;color:var(--spruce);margin:0 0 6px;display:block}
.hero .d1{margin:0 0 30px;max-width:16ch}
.hero .lead{margin-bottom:40px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(32px,4.5vw,76px);align-items:center}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,40px);
  margin-top:clamp(44px,5.5vh,74px);padding-top:clamp(26px,3vh,38px);
  border-top:1px solid var(--rule-2)}
.facts dt{color:var(--ink-3);margin-bottom:10px}
.facts dd{margin:0;font-family:Sora,sans-serif;font-size:1.14rem;line-height:1.4;
  color:var(--ink);font-weight:600}

/* ---- images: rounded, and they drift against the scroll --------------------- */
.figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--band)}
.figure img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:var(--r);will-change:transform}
.figure.wide img{aspect-ratio:16/9}
.figcap{margin-top:16px;color:var(--ink-3)}

/* ---- teaser cards ------------------------------------------------------------ */
/* The landing page teases each product; the depth lives on the product page. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(18px,2.2vw,30px)}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .25s var(--ease)}
.card .shot{overflow:hidden;border-radius:var(--r);background:var(--band);margin-bottom:22px;
  position:relative}
.card .shot img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .7s var(--ease)}
.card .lbl{color:var(--brass-ink);display:block;margin-bottom:11px}
.card h3{margin-bottom:11px;transition:color .25s var(--ease)}
.card p{font-size:1.04rem;line-height:1.6;margin:0}
.card .go{display:inline-flex;align-items:center;gap:9px;color:var(--brass-ink);
  font-size:1.02rem;font-weight:600;margin-top:18px;transition:gap .25s var(--ease)}
a.card:hover{transform:translateY(-4px)}
a.card:hover .shot img{transform:scale(1.05)}
a.card:hover h3{color:var(--mid)}
a.card:hover .go{gap:15px}

/* ---- capability rows: big type, brass bar that grows on reveal ---------------- */
.work{display:grid}
.wrow{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,48px);
  align-items:baseline;padding:clamp(24px,3.2vh,38px) 0;border-top:1px solid var(--rule-2);
  position:relative}
.work > *:last-child{border-bottom:1px solid var(--rule-2)}
.wrow .num{font-family:'JetBrains Mono',monospace;font-size:.9rem;color:var(--ink-3);
  min-width:2.4ch}
.wrow .nm{font-family:Sora,sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.06;color:var(--ink);
  transition:color .3s var(--ease),transform .3s var(--ease)}
.wrow .ct{font-family:'JetBrains Mono',monospace;font-size:.9rem;color:var(--ink-3);
  white-space:nowrap}
.wrow::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.wrow:hover::after{transform:scaleX(1)}
.wrow:hover .nm{color:var(--mid);transform:translateX(8px)}

/* ---- programme index ---------------------------------------------------------- */
.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:96px 1fr auto auto;gap:clamp(16px,2.6vw,36px);align-items:baseline;
  padding:clamp(20px,2.4vh,28px) clamp(10px,1vw,18px)}
.entry summary::-webkit-details-marker{display:none}
.entry .ag{font-family:'JetBrains Mono',monospace;font-size:.86rem;letter-spacing:.1em;
  color:var(--brass-ink);font-weight:500}
.entry .tp{font-family:Sora,sans-serif;font-size:1.2rem;font-weight:600;line-height:1.32;
  color:var(--ink)}
.entry .ph,.entry .tl{font-family:'JetBrains Mono',monospace;font-size:.84rem;
  letter-spacing:.08em;color:var(--ink-3);white-space:nowrap}
.entry .bd{padding:0 clamp(10px,1vw,18px) clamp(24px,2.6vh,32px)
  calc(96px + clamp(16px,2.6vw,36px))}
.entry .bd p{font-size:1.04rem;max-width:62ch;margin:0}
.entry .bd .pt{margin-top:12px;color:var(--ink-3);font-size:.98rem}

/* ---- locations / people / orgs -------------------------------------------------- */
.locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:clamp(14px,1.7vw,22px)}
.loc{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:30px;
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.loc:hover{border-color:var(--rule-2);transform:translateY(-4px)}
.loc .k{color:var(--brass-ink);display:block;margin-bottom:14px}
.loc h3{font-size:1.24rem;margin-bottom:8px}
.loc .a{font-size:1rem;line-height:1.6;margin:0}
.loc.hq{border-color:var(--mid)}

.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(18px,2.2vw,30px)}
.person,.org{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(26px,2.6vw,34px);transition:border-color .25s var(--ease)}
.person:hover,.org:hover{border-color:var(--rule-2)}
.person .role{color:var(--brass-ink);display:block;margin:10px 0 18px}
.person p,.org p{font-size:1rem;line-height:1.65}
.person a.li{display:inline-flex;margin-top:18px;font-size:.98rem;color:var(--brass-ink);
  text-decoration:none;font-weight:600}
.person a.li:hover{text-decoration:underline}
.orgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:clamp(18px,2.2vw,30px)}
.org .plate{width:74px;height:74px;display:grid;place-items:center;background:var(--band);
  border-radius:var(--r-sm);padding:10px;margin-bottom:20px}
.org .plate img{max-width:100%;max-height:100%;object-fit:contain}
.chips{display:flex;flex-wrap:wrap;gap:11px}
.chips span{padding:11px 18px;border:1px solid var(--rule-2);border-radius:999px;
  background:var(--paper);font-family:'JetBrains Mono',monospace;font-size:.92rem;
  color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ---- carousel -------------------------------------------------------------------- */
/* margin-right per item, not flex gap: with gap the track is 2N*W+(2N-1)*G while the
   duplicate sits at N*(W+G), so -50% lands half a gap short and the loop jumps. */
.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 50s 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(140px,13vw,180px);margin:0 clamp(14px,1.6vw,22px) 0 0;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);padding:20px;
  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:16px}
  .mtrack figure{margin:0}
  .mtrack figure[aria-hidden="true"]{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---- prose ------------------------------------------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
  gap:clamp(22px,3vw,48px)}
.stats .fig{font-family:Sora,sans-serif;font-weight:700;font-size:clamp(2.4rem,4.6vw,3.6rem);
  line-height:1;display:block;font-variant-numeric:tabular-nums;color:var(--mid)}
.b-dark .stats .fig{color:var(--brass-on-dark)}
.stats .l{font-size:1rem;line-height:1.5;color:var(--ink-2);margin-top:12px;display:block;
  max-width:22ch}
.b-dark .stats .l{color:var(--on-dark-2)}
.bul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.bul li{position:relative;padding-left:26px;font-size:1.04rem;line-height:1.62;color:var(--ink-2)}
.bul li::before{content:"";position:absolute;left:0;top:.66em;width:11px;height:2px;
  background:var(--brass)}
.spec{width:100%;border-collapse:collapse;font-size:1.04rem}
.spec th,.spec td{text-align:left;padding:20px 0;border-top:1px solid var(--rule);vertical-align:top}
.spec th{width:30%;font-family:'JetBrains Mono',monospace;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;color:var(--ink-3);padding-right:28px}
.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%,260px),1fr));
  gap:0 clamp(26px,3vw,54px)}
.ruled > div{padding:clamp(26px,2.8vh,34px) 0;border-top:1px solid var(--rule)}
.ruled h3{margin-bottom:12px}
.ruled p{font-size:1.02rem;line-height:1.62;max-width:34ch;margin:0}

.form{display:grid;gap:20px;max-width:560px}
.form label{display:grid;gap:9px;font-size:1rem;font-weight:600}
.form input,.form textarea{padding:16px 18px;border:1px solid var(--rule-2);border-radius:var(--r-sm);
  background:var(--paper);font-size:1.04rem;width:100%;transition:border-color .25s var(--ease)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--mid);
  box-shadow:0 0 0 3px rgba(28,92,70,.16)}
.form input:user-invalid{border-color:#B4462F}
.form textarea{resize:vertical;min-height:150px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{font-size:1rem;min-height:1.4em;margin:0}
.status.ok{color:#1F7A52} .status.err{color:#B4462F}


@media (max-width:1040px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .facts{grid-template-columns:repeat(2,1fr);gap:28px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:38px}
}
@media (max-width:860px){
  :root{--bar:82px}
  .nav,.top .cta{display:none;position:fixed;inset:var(--bar) 0 auto;background:var(--bone);
    border-bottom:1px solid var(--rule-2);flex-direction:column;align-items:stretch;margin:0;
    padding:18px 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:18px 0;font-size:1.18rem;width:100%;justify-content:space-between}
  .nav a::after{display:none}
  .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 14px}
  .nav li.open .menu{display:grid}
  .menu a{padding:14px 16px;background:var(--paper);margin-bottom:6px}
  .burger{display:flex}
  .top.open .cta{display:flex;position:static;border:0;padding:16px 4vw 22px;justify-content:center}
  .wrow{grid-template-columns:auto 1fr;row-gap:8px}
  .wrow .ct{grid-column:2}
  .entry summary{grid-template-columns:76px 1fr;row-gap:10px}
  .entry .ph,.entry .tl{grid-column:2}
  .entry .bd{padding-left:calc(76px + clamp(16px,2.6vw,36px))}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:18px}
  .facts{grid-template-columns:1fr;gap:24px}
  .entry summary{grid-template-columns:1fr;row-gap:8px}
  .entry .ph,.entry .tl{grid-column:1}
  .entry .bd{padding-left:clamp(10px,1vw,18px)}
  .wrow{grid-template-columns:1fr;row-gap:6px}
  .wrow .num,.wrow .ct{grid-column:1}
}