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

:root{
  /* the ground is mid-tone: never white, never black */
  --concrete:#C9C4BB; --concrete-lo:#D8D4CC; --concrete-hi:#B4AEA3;
  --charcoal:#1C1A17; --charcoal-2:#282520;
  --amber:#FFB703;                  /* fill only on the ground. See the docstring. */

  /* two ink levels only - a mid-tone canvas has no room for a third */
  --ink:#1C1A17; --ink-2:#454039;
  --on-dark:#DCD7CD; --on-dark-2:#A69F93;

  --rule:#B0AA9F; --rule-2:#9A9388; --rule-dark:#3A362F;

  --shell:min(1340px,93vw);
  --bar:94px;
  --r:20px; --r-sm:12px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --back:cubic-bezier(.34,1.56,.64,1);
  --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(--concrete);color:var(--ink);
  font:400 19px/1.66 Asap,-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}

/* Anybody is a variable grotesque with real width character - it reads industrial and
   stencil-adjacent at display sizes, which suits cast metal and concrete. */
h1,h2,h3,h4{margin:0;font-family:Anybody,Asap,sans-serif;font-weight:700;line-height:1.02;
  letter-spacing:-.028em;text-wrap:balance}
.d0{font-size:clamp(3.4rem,9vw,8rem);line-height:.93;letter-spacing:-.04em;text-transform:uppercase}
.d1{font-size:clamp(2.6rem,5.2vw,4.5rem);line-height:1;letter-spacing:-.032em}
.d2{font-size:clamp(2.1rem,3.8vw,3.3rem);letter-spacing:-.03em}
.d3{font-size:clamp(1.38rem,2.1vw,1.85rem);letter-spacing:-.022em}
.d4{font-size:1.24rem;letter-spacing:-.014em;font-weight:600;line-height:1.3}
p{margin:0 0 1.15em;max-width:62ch;text-wrap:pretty;color:var(--ink-2)}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.2rem,1.5vw,1.42rem);line-height:1.56;color:var(--ink-2);max-width:50ch}
.sm{font-size:1.02rem;line-height:1.6;color:var(--ink-2)}
.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-weight:500;font-size:.84rem;
  letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums}

/* the eyebrow is a solid amber block carrying charcoal text: 9.94:1. Amber can never
   simply be coloured text on this ground. */
.eyebrow{display:inline-block;background:var(--amber);color:var(--charcoal);
  padding:7px 14px;border-radius:4px;margin:0 0 24px}
.b-dark .eyebrow{background:var(--amber);color:var(--charcoal)}
.accent{color:var(--charcoal);background:var(--amber);padding:0 .18em;border-radius:3px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

::selection{background:var(--amber);color:var(--charcoal)}
:focus-visible{outline:3px solid var(--charcoal);outline-offset:3px;border-radius:3px}
.b-dark :focus-visible{outline-color:var(--amber)}
input,textarea{caret-color:var(--charcoal)}


.top{position:fixed;inset:0 0 auto;z-index:90;height:var(--bar);
  background:rgba(201,196,187,.9);backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:2px solid transparent;transition:border-color .3s var(--ease)}
.top.scrolled{border-bottom-color:var(--charcoal)}
.top .in{width:var(--shell);margin:0 auto;height:100%;display:flex;align-items:center;gap:20px}

.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:0 0 auto;
  padding:8px 12px 8px 8px;margin-left:-8px;border-radius:var(--r-sm);
  transition:background .3s var(--ease)}
.brand:hover,.brand:focus-visible{background:var(--concrete-lo)}
.brand img{height:48px;width:auto;flex:0 0 auto;transition:transform .55s var(--back)}
.brand:hover img,.brand:focus-visible img{transform:rotate(-8deg) scale(1.08)}
.brand .word{font-family:Anybody,sans-serif;font-weight:700;font-size:1.14rem;
  letter-spacing:-.03em;white-space:nowrap;overflow:hidden;max-width:0;opacity:0;
  transform:translateX(-10px);
  transition:max-width .55s var(--ease),opacity .34s var(--ease),transform .55s var(--ease)}
.brand:hover .word,.brand:focus-visible .word{max-width:270px;opacity:1;transform:none}

/* nav items are boxed with a hard 2px rule - a stencilled, industrial silhouette,
   different again from site 9's underline and site 10's pill */
.nav{display:flex;gap:4px;margin-left:auto;align-items:center;list-style:none;
  margin-block:0;padding:0}
.nav > li{position:relative}
.nav a,.nav button{text-decoration:none;font-size:1rem;font-weight:600;color:var(--ink);
  background:none;border:2px solid transparent;cursor:pointer;white-space:nowrap;
  border-radius:6px;padding:10px 16px;display:inline-flex;align-items:center;gap:8px;
  transition:border-color .22s var(--ease),background .22s var(--ease)}
.nav a:hover,.nav button:hover,.nav a[aria-current="page"]{border-color:var(--charcoal)}
.nav .caret{width:7px;height:7px;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% + 10px);left:50%;translate:-50% 0;width:min(620px,88vw);
  padding:10px;margin:0;list-style:none;background:var(--concrete-lo);
  border:2px solid var(--charcoal);border-radius:var(--r-sm);
  box-shadow:8px 8px 0 rgba(28,26,23,.16);
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .28s var(--back),visibility .28s}
.nav li.open .menu{opacity:1;visibility:visible;transform:none}
.menu a{display:block;padding:14px 16px;border-radius:6px;border:2px solid transparent}
.menu a:hover{background:var(--concrete);border-color:transparent}
.menu .n{display:block;font-family:Anybody,sans-serif;font-weight:700;color:var(--ink);
  font-size:1.06rem;margin-bottom:3px}
.menu .d{display:block;font-size:.92rem;color:var(--ink-2);line-height:1.45}

.burger{display:none;margin-left:auto;width:52px;height:52px;border:2px solid var(--charcoal);
  border-radius:8px;background:none;cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:2px;background:var(--charcoal);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;
  background:var(--charcoal)}
.burger span::before{top:-7px} .burger span::after{top:7px}

.foot{background:var(--charcoal);color:var(--on-dark);padding:100px 0 42px}
.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:54px;width:auto;margin-bottom:22px}
.foot .tag{font-size:1.06rem;line-height:1.6;color:var(--on-dark-2);max-width:32ch}
.foot h4{color:var(--amber);margin-bottom:18px;font-family:'IBM Plex Mono',monospace;
  font-weight:500;font-size:.84rem;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(--amber)}
.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,158px) 0;position:relative}
.sec > .in{width:var(--shell);margin:0 auto}
.sec.tight{padding:clamp(54px,7vh,100px) 0}
.b-conc{background:var(--concrete)}
.b-lo{background:var(--concrete-lo)}
.b-hi{background:var(--concrete-hi)}
.b-dark{background:var(--charcoal);color:var(--on-dark)}
.b-dark p,.b-dark .lead,.b-dark .sm{color:var(--on-dark-2)}

.head{max-width:54ch;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}

/* hard-edged buttons with an offset shadow - printed/stencilled, not soft */
.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:Asap,sans-serif;font-size:1.06rem;font-weight:600;line-height:1;
  padding:18px 30px;border-radius:8px;border:2px solid var(--charcoal);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}
.btn.pri{background:var(--amber);color:var(--charcoal);box-shadow:4px 4px 0 var(--charcoal)}
.btn.pri:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--charcoal)}
.btn.pri:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--charcoal)}
.btn.sec{background:transparent;color:var(--ink);box-shadow:4px 4px 0 rgba(28,26,23,.22)}
.btn.sec:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(28,26,23,.28)}
.b-dark .btn.sec{border-color:var(--on-dark);color:var(--on-dark);box-shadow:4px 4px 0 rgba(220,215,205,.22)}
.btn .ar{transition:transform .22s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.tlink{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-size:1.06rem;font-weight:600;border-bottom:2px solid var(--amber);padding-bottom:3px;
  transition:gap .25s var(--ease)}
.tlink:hover{gap:16px}
.b-dark .tlink{color:var(--on-dark)}


@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes riseScale{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}
@keyframes drift{from{transform:translateY(-4%)}to{transform:translateY(4%)}}
@keyframes sweep{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

.js .rv{opacity:0;transform:translateY(28px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .rv.vis{opacity:1;transform:none}
.rv.s1{transition-delay:.07s} .rv.s2{transition-delay:.14s} .rv.s3{transition-delay:.21s}
.rv.s4{transition-delay:.28s} .rv.s5{transition-delay:.35s}

@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%}
  .js .stagger > *{animation:riseScale .72s var(--back) both;
    animation-timeline:view();animation-range:entry 2% cover 24%}
  .js .par img{animation:drift linear both;animation-timeline:view();animation-range:cover}
  /* the amber rule under each section heading wipes in as it arrives */
  .js .sweep{animation:sweep .7s var(--ease) both;
    animation-timeline:view();animation-range:entry 10% cover 22%}
}

.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}
.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}

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


.hero{padding:clamp(60px,9vh,120px) 0 clamp(56px,7vh,100px)}
.wordmark{font-family:Anybody,sans-serif;font-weight:700;font-size:clamp(2.7rem,6.8vw,5.8rem);
  line-height:.94;letter-spacing:-.04em;color:var(--charcoal);margin:0 0 10px;display:block;
  text-transform:uppercase}
.hero .d1{margin:0 0 30px;max-width:16ch}
.hero .lead{margin-bottom:40px;max-width:46ch}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:clamp(32px,4.5vw,74px);align-items:center}

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

.figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--concrete-hi)}
.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-2)}

/* ---- the plate grid: site 11's signature ------------------------------------------
   Each field is a bordered plate stamped with its programme count, laid out like a
   materials board. Hard 2px borders and an offset shadow rather than soft cards. */
.plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(14px,1.8vw,22px)}
.plate{background:var(--concrete-lo);border:2px solid var(--charcoal);border-radius:var(--r-sm);
  padding:clamp(24px,2.5vw,32px);display:flex;flex-direction:column;gap:14px;min-height:200px;
  box-shadow:5px 5px 0 rgba(28,26,23,.14);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.plate:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 rgba(28,26,23,.2)}
.plate .n{font-family:Anybody,sans-serif;font-size:clamp(2.4rem,4vw,3.4rem);font-weight:700;
  line-height:1;color:var(--charcoal);font-variant-numeric:tabular-nums}
.plate h3{font-size:1.24rem;line-height:1.2}
.plate p{font-size:.98rem;line-height:1.5;margin:0;flex:1}
.plate .ags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.plate .ags span{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;
  padding:5px 9px;border:2px solid var(--rule-2);border-radius:4px;color:var(--ink-2)}
/* the busiest field is stamped amber - the single largest use of the accent */
.plate.mark{background:var(--amber)}
.plate.mark p{color:rgba(28,26,23,.82)}
.plate.mark .ags span{border-color:rgba(28,26,23,.4);color:var(--charcoal)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(18px,2.2vw,30px)}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--concrete-lo);border:2px solid var(--charcoal);border-radius:var(--r);
  overflow:hidden;box-shadow:5px 5px 0 rgba(28,26,23,.14);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.card .shot{overflow:hidden;background:var(--concrete-hi)}
.card .shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--ease)}
.card .body{padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;gap:12px;flex:1}
.card .lbl{display:inline-block;background:var(--amber);color:var(--charcoal);padding:5px 10px;
  border-radius:4px;align-self:flex-start}
.card p{font-size:1.02rem;line-height:1.56;margin:0;flex:1}
.card .go{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-size:1.02rem;
  font-weight:600;border-bottom:2px solid var(--amber);padding-bottom:3px;align-self:flex-start;
  transition:gap .25s var(--ease)}
a.card:hover{transform:translate(-4px,-4px);box-shadow:9px 9px 0 rgba(28,26,23,.2)}
a.card:hover .shot img{transform:scale(1.05)}
a.card:hover .go{gap:15px}

.index{display:grid;border-top:2px solid var(--charcoal)}
.entry{border-bottom:1px solid var(--rule);transition:background .25s var(--ease)}
.entry:hover{background:var(--concrete-lo)}
.entry summary{cursor:pointer;list-style:none;display:grid;
  grid-template-columns:104px 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:'IBM Plex Mono',monospace;font-size:.86rem;letter-spacing:.1em;
  color:var(--charcoal);background:var(--amber);padding:4px 8px;border-radius:4px;
  justify-self:start}
.entry .tp{font-family:Anybody,sans-serif;font-size:1.2rem;font-weight:700;line-height:1.3;
  color:var(--ink);letter-spacing:-.02em}
.entry .ph,.entry .tl{font-family:'IBM Plex Mono',monospace;font-size:.86rem;color:var(--ink-2);
  white-space:nowrap}
.entry .bd{padding:0 clamp(10px,1vw,18px) clamp(24px,2.6vh,32px)
  calc(104px + 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-2);font-size:.98rem}

.locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(14px,1.7vw,22px)}
.loc{background:var(--concrete-lo);border:2px solid var(--charcoal);border-radius:var(--r-sm);
  padding:30px;box-shadow:5px 5px 0 rgba(28,26,23,.14);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.loc:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 rgba(28,26,23,.2)}
.loc .k{display:inline-block;background:var(--amber);color:var(--charcoal);padding:5px 10px;
  border-radius:4px;margin-bottom:14px}
.loc h3{font-size:1.26rem;margin-bottom:8px}
.loc .a{font-size:1rem;line-height:1.56;margin:0}
.loc.hq{background:var(--amber)}
.loc.hq .k{background:var(--charcoal);color:var(--amber)}
.loc.hq .a{color:rgba(28,26,23,.82)}

.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(18px,2.2vw,30px)}
.person,.org{background:var(--concrete-lo);border:2px solid var(--charcoal);
  border-radius:var(--r-sm);padding:clamp(26px,2.6vw,34px);box-shadow:5px 5px 0 rgba(28,26,23,.14)}
.person .role{display:inline-block;background:var(--amber);color:var(--charcoal);padding:5px 10px;
  border-radius:4px;margin:10px 0 18px}
.person p,.org p{font-size:1rem;line-height:1.62}
.person a.li{display:inline-flex;margin-top:18px;font-size:.98rem;color:var(--ink);
  text-decoration:none;font-weight:600;border-bottom:2px solid var(--amber)}
.orgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:clamp(18px,2.2vw,30px)}
.org .plate-img{width:76px;height:76px;display:grid;place-items:center;background:var(--concrete);
  border:2px solid var(--charcoal);border-radius:8px;padding:10px;margin-bottom:20px}
.org .plate-img img{max-width:100%;max-height:100%;object-fit:contain}
.chips{display:flex;flex-wrap:wrap;gap:11px}
.chips span{padding:10px 17px;border:2px solid var(--charcoal);border-radius:6px;
  background:var(--concrete-lo);font-family:'IBM Plex Mono',monospace;font-size:.92rem;
  color:var(--ink);font-variant-numeric:tabular-nums}

.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(--concrete-lo);border:2px solid var(--charcoal);border-radius:8px;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}
}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
  gap:clamp(22px,3vw,48px)}
.stats .fig{font-family:Anybody,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(--charcoal)}
.b-dark .stats .fig{color:var(--amber)}
.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:28px;font-size:1.04rem;line-height:1.6;color:var(--ink-2)}
.bul li::before{content:"";position:absolute;left:0;top:.56em;width:14px;height:4px;
  background:var(--amber);border-radius:2px}
.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:'IBM Plex Mono',monospace;font-size:.84rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);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:2px solid var(--charcoal)}
.ruled h3{margin-bottom:12px}
.ruled p{font-size:1.02rem;line-height:1.6;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:2px solid var(--charcoal);border-radius:8px;
  background:var(--concrete-lo);font-size:1.04rem;width:100%;
  transition:box-shadow .2s var(--ease)}
.form input:focus,.form textarea:focus{outline:none;box-shadow:4px 4px 0 var(--amber)}
.form input:user-invalid{border-color:#8C2F1B}
.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:#1F5E3A} .status.err{color:#8C2F1B}


@media (max-width:1080px){
  .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:880px){
  :root{--bar:80px}
  .nav,.top .cta{display:none;position:fixed;inset:var(--bar) 0 auto;background:var(--concrete);
    border-bottom:2px solid var(--charcoal);flex-direction:column;align-items:stretch;margin:0;
    padding:18px 4vw;gap:6px;max-height:calc(100svh - var(--bar));overflow-y:auto}
  .top.open .nav{display:flex}
  .nav > li{display:block}
  .nav a,.nav button{padding:16px;font-size:1.16rem;width:100%;justify-content:space-between;
    border-color:var(--charcoal);background:var(--concrete-lo)}
  .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:6px 0 10px}
  .nav li.open .menu{display:grid}
  .menu a{padding:14px 16px;background:var(--concrete);margin-bottom:6px;border-color:var(--charcoal)}
  .burger{display:flex}
  .top.open .cta{display:flex;position:static;padding:16px 4vw 22px;justify-content:center}
  .entry summary{grid-template-columns:84px 1fr;row-gap:10px}
  .entry .ph,.entry .tl{grid-column:2}
  .entry .bd{padding-left:calc(84px + 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)}
}