@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/Archivo-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/Archivo-700.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/Geist-400.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/Geist-500.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/Geist-600.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/GeistMono-500.woff2') format('woff2')}

:root{
  /* ground */
  --ground:#08070F; --surface:#141221; --surface-2:#1C1930; --surface-3:#252140;

  /* ink. --ink-3 is #8683A0 and not darker: it has to clear 4.5:1 on --surface-2,
     the deepest card fill. #6E6B85 looked right and measured 3.33:1. */
  --ink:#FFFFFF; --ink-2:#A5A3B8; --ink-3:#8683A0;

  /* spectral ramp, FILL tier - gradients, glows, large display. Not for body text. */
  --indigo:#3B1E7A; --violet:#6D28D9; --blue:#2563EB; --sky:#0EA5E9; --amber:#F59E0B;

  /* spectral ramp, TEXT tier - the tints, all >=4.5:1 on the ground */
  --violet-t:#A78BFA; --blue-t:#7CA8FF; --sky-t:#38BDF8; --amber-t:#FBBF24;
  --cyan-t:#22D3EE;

  /* No magenta. The first pass ran indigo->violet->magenta->orange->amber and read as
     pink, which is both Accenture's palette and not ours. Cooled to violet->blue->sky. */
  --spectrum:linear-gradient(90deg,#3B1E7A,#6D28D9,#2563EB,#0EA5E9);

  /* lines */
  --rule:#241F3D; --rule-2:#332C52; --rule-hi:#443A68;

  --shell:min(1280px,92vw);
  --bar:72px;
  --r:14px; --r-sm:10px;

  /* Accenture's house curve, measured off their site. A timing function is a
     technique, not a brand asset. */
  --ease:cubic-bezier(.85,0,0,1);
  --t:.55s;
}


*,*::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(--ground);color:var(--ink);
  font:400 17px/1.65 Geist,-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:Archivo,Geist,sans-serif;font-weight:700;line-height:1.02;text-wrap:balance}
/* The display sizes are uppercase and very tight - the Accenture register. Archivo
   holds up at this scale where a text face would fall apart. */
.d1{font-size:clamp(2.7rem,7.4vw,7rem);letter-spacing:-.035em;text-transform:uppercase;line-height:.96}
.d2{font-size:clamp(2rem,4.6vw,3.9rem);letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.d3{font-size:clamp(1.2rem,2vw,1.7rem);letter-spacing:-.02em;font-weight:600}
.d4{font-size:1.05rem;letter-spacing:-.012em;font-weight:600;line-height:1.3}
p{margin:0 0 1.1em;max-width:64ch;text-wrap:pretty;color:var(--ink-2)}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.08rem,1.4vw,1.3rem);line-height:1.6;color:var(--ink-2);max-width:56ch}
.sm{font-size:.9rem;line-height:1.6;color:var(--ink-2)}

.mono{
  font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums;
}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--violet-t);margin:0 0 18px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--spectrum);border-radius:2px}

/* Gradient type. -webkit-text-fill-color:transparent hides the real colour, so a
   fallback colour is set first for any engine that does not support the clip. */
.grad{
  color:var(--violet-t);
  background:var(--spectrum);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{-webkit-text-fill-color:currentColor;background:none;color:var(--violet-t)}
}

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


/* ---- top bar ------------------------------------------------------------ */
.top{
  position:fixed;inset:0 0 auto;z-index:80;height:var(--bar);
  background:rgba(8,7,15,.72);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease);
}
.top.scrolled{border-bottom-color:var(--rule);background:rgba(8,7,15,.92)}
.top .in{width:var(--shell);margin:0 auto;height:100%;display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}

/* ---- the brand mark ------------------------------------------------------ */
/* On the home page the wordmark is always shown. On every other page only the
   mark shows, and the wordmark unfurls on hover or focus as the affordance for
   "this takes you home". The width transition animates from 0, so it needs a
   fixed max-width rather than `auto`, which is not animatable. */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand img{height:30px;width:auto;flex:0 0 auto}
.brand .word{
  font-family:Archivo,sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;
}
.brand.compact .word{
  max-width:0;opacity:0;transform:translateX(-6px);
  transition:max-width var(--t) var(--ease),opacity .3s var(--ease),transform var(--t) var(--ease);
}
.brand.compact:hover .word,.brand.compact:focus-visible .word{max-width:220px;opacity:1;transform:none}
.brand.compact:hover img,.brand.compact:focus-visible img{transform:rotate(-8deg) scale(1.06)}
.brand img{transition:transform var(--t) var(--ease)}

/* ---- nav + products dropdown -------------------------------------------- */
.nav{display:flex;gap:clamp(12px,1.6vw,24px);margin-left:auto;align-items:center;height:100%}
.nav > li{list-style:none;height:100%;display:flex;align-items:center;position:relative}
.nav a,.nav button{
  text-decoration:none;font-size:.9rem;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:6px;transition:color .22s var(--ease);
}
.nav a:hover,.nav button:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav .caret{width:8px;height:8px;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% - 8px);left:50%;translate:-50% 0;
  width:min(560px,86vw);padding:10px;margin:0;list-style:none;
  background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.85);
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.nav li.open .menu{opacity:1;visibility:visible;transform:none}
.menu a{
  display:block;padding:12px 14px;border-radius:var(--r-sm);
  transition:background .22s var(--ease);
}
.menu a:hover{background:var(--surface-2)}
.menu .n{display:block;font-weight:600;color:var(--ink);font-size:.94rem;margin-bottom:2px}
.menu .d{display:block;font-size:.8rem;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-sm);background:var(--surface);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}

/* ---- footer -------------------------------------------------------------- */
.foot{background:var(--surface);border-top:1px solid var(--rule);padding:76px 0 32px;position:relative}
.foot::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--spectrum)}
.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:38px;width:auto;margin-bottom:16px}
.foot .tag{font-size:.9rem;line-height:1.6;color:var(--ink-2);max-width:34ch}
.foot h4{color:var(--ink-3);margin-bottom:14px;font-family:'Geist Mono',monospace;font-weight:500;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot ul a{text-decoration:none;font-size:.9rem;color:var(--ink-2);transition:color .22s var(--ease)}
.foot ul a:hover{color:var(--violet-t)}
.foot-base{margin-top:56px;padding-top:22px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-3)}


main{padding-top:var(--bar)}
.sec{padding:clamp(72px,11vh,150px) 0;position:relative}
.sec > .in{width:var(--shell);margin:0 auto;position:relative;z-index:1}
.sec.tight{padding:clamp(48px,7vh,90px) 0}
.b-ground{background:var(--ground)}
.b-surface{background:var(--surface)}
.b-deep{background:linear-gradient(180deg,var(--ground),var(--surface-2))}

/* a hairline spectral divider between bands */
.edge{position:relative}
.edge::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--spectrum);opacity:.5}

.head{max-width:60ch;margin-bottom:clamp(34px,5vh,64px)}
.head .lead{margin-top:18px}
.rowend{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;
  margin-bottom:clamp(32px,4.5vh,56px)}
.rowend .head{margin-bottom:0}

/* ---- buttons ------------------------------------------------------------- */
.btnrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;cursor:pointer;
  font-size:.92rem;font-weight:500;line-height:1;padding:15px 26px;border-radius:999px;
  border:1px solid transparent;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.btn.pri{background:var(--violet);color:#fff;
  transition:background .3s var(--ease),transform .3s var(--ease)}
.btn.pri:hover{background:var(--blue);transform:translateY(-2px)}
.btn.sec{border-color:var(--rule-hi);color:var(--ink)}
.btn.sec:hover{border-color:var(--violet-t);color:var(--violet-t);transform:translateY(-2px)}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.tlink{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--violet-t);
  font-size:.92rem;font-weight:500;transition:gap .3s var(--ease)}
.tlink:hover{gap:14px}


/* ---- hero ---------------------------------------------------------------- */
.hero{min-height:calc(100svh - var(--bar));display:flex;align-items:center;
  padding:clamp(50px,8vh,110px) 0 clamp(40px,6vh,80px);overflow:hidden}
.hero .in{width:var(--shell);margin:0 auto}
.hero .d1{margin:0 0 26px}
.hero .lead{margin-bottom:34px}

/* the ambient spectral bloom behind the hero. Desktop only - it is the one piece
   of pure atmosphere on the page and a phone gets the flat composition instead. */
.bloom{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bloom i{position:absolute;border-radius:50%;filter:blur(110px);opacity:.28}
.bloom i:nth-child(1){width:44vw;height:44vw;left:-8vw;top:-10vw;background:var(--indigo)}
.bloom i:nth-child(2){width:38vw;height:38vw;right:-6vw;top:6vw;background:var(--blue);opacity:.22}
.bloom i:nth-child(3){width:30vw;height:30vw;right:14vw;bottom:-12vw;background:var(--sky);opacity:.16}
@media (max-width:900px),(hover:none){ .bloom{display:none} }

/* ---- staged load reveal --------------------------------------------------- */
/* Srini's "when you go to it, it opens up". Sequenced, not simultaneous: rule,
   then eyebrow, then each headline line, then body, then buttons. */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes wipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.stage > *{opacity:0;animation:rise .9s var(--ease) forwards}
.stage > *:nth-child(1){animation-delay:.05s}
.stage > *:nth-child(2){animation-delay:.17s}
.stage > *:nth-child(3){animation-delay:.29s}
.stage > *:nth-child(4){animation-delay:.41s}
.stage > *:nth-child(5){animation-delay:.53s}
.hero .d1 .ln{display:block;overflow:hidden}
.hero .d1 .ln > span{display:block;opacity:0;animation:rise 1s var(--ease) forwards}
.hero .d1 .ln:nth-child(1) > span{animation-delay:.2s}
.hero .d1 .ln:nth-child(2) > span{animation-delay:.32s}
.hero .d1 .ln:nth-child(3) > span{animation-delay:.44s}

/* ---- scroll reveal -------------------------------------------------------- */
/* Gated on .js, which an inline script sets on <html> before first paint. Without
   that gate the starting state is opacity:0 and any JS failure - script error,
   blocked bundle, JS disabled, a crawler - leaves every section below the fold
   permanently invisible. Hiding content is only safe once you know you can unhide it. */
.js .rv{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.vis{opacity:1;transform:none}
/* Named dl* and NOT d1..d5: .d1-.d4 are the type-scale classes, so a reveal delay
   called .d2 silently gave every delayed element 3.9rem uppercase display type. */
.rv.dl1{transition-delay:.09s} .rv.dl2{transition-delay:.18s} .rv.dl3{transition-delay:.27s}
.rv.dl4{transition-delay:.36s} .rv.dl5{transition-delay:.45s}

/* ---- spec strip ----------------------------------------------------------- */
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,36px);
  margin-top:clamp(34px,5vh,60px);padding-top:clamp(24px,3vh,36px);border-top:1px solid var(--rule)}
.specs dt{color:var(--ink-3);margin-bottom:9px}
.specs dd{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink);font-weight:500}

/* ---- cards, the Accenture pattern ----------------------------------------- */
/* Square corners, image bleeding to the edge, caps label, and a CTA cover that
   rises on hover. The whole card lifts and the image scales inside its own
   overflow box so the crop tightens rather than the card growing. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(14px,1.8vw,22px)}
.card{
  position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;isolation:isolate;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.card .shot{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--surface-2)}
.card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(8,7,15,.85));opacity:.7;transition:opacity var(--t) var(--ease)}
.card .body{padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column;gap:10px;flex:1}
.card .lbl{color:var(--violet-t)}
.card h3{color:var(--ink)}
.card p{font-size:.92rem;line-height:1.58;margin:0;flex:1}
.card .meta{color:var(--ink-3);padding-top:12px;border-top:1px solid var(--rule)}
/* the spectral edge that wipes across the top on hover */
.card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--spectrum);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease);z-index:2}
a.card:hover{transform:translateY(-8px);border-color:var(--rule-hi);
  box-shadow:0 34px 70px -30px rgba(37,99,235,.42)}
a.card:hover::before{transform:scaleX(1)}
a.card:hover .shot img{transform:scale(1.07)}
a.card:hover .shot::after{opacity:.45}
.card .go{display:inline-flex;align-items:center;gap:7px;color:var(--violet-t);
  font-size:.9rem;font-weight:500;transition:gap .3s var(--ease)}
a.card:hover .go{gap:13px}
@media (prefers-reduced-motion:reduce){
  a.card:hover{transform:none}
  a.card:hover .shot img{transform:none}
}

/* ---- agency columns: the site 7 signature ---------------------------------- */
/* Aaron's proposal on the 09-01 call, which Srini approved: a column per agency
   with the programmes cascading beneath it. Different structure from site 6's TRL
   ladder, and it staggers naturally on scroll. */
.agencies{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:clamp(12px,1.5vw,20px);align-items:start}
.agcol{display:flex;flex-direction:column;gap:10px}
.agcol > .hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:12px;border-bottom:2px solid;margin-bottom:2px}
.agcol .ag{font-family:Archivo,sans-serif;font-weight:700;font-size:1.35rem;letter-spacing:-.02em;color:var(--ink)}
.agcol .ct{color:var(--ink-3)}
.prog{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:16px 16px 14px;transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.prog:hover{border-color:var(--rule-hi);transform:translateX(3px);background:var(--surface-2)}
.prog .ph{color:var(--ink-3);margin-bottom:8px;display:block}
.prog .tp{font-size:.92rem;line-height:1.45;font-weight:500;color:var(--ink);margin-bottom:10px}
.prog .syn{font-size:.85rem;line-height:1.55;color:var(--ink-2);margin:0}
.prog summary{cursor:pointer;list-style:none}
.prog summary::-webkit-details-marker{display:none}
.prog .tog{color:var(--violet-t);font-size:.8rem;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.prog[open] .tog .pm{transform:rotate(45deg)}
.prog .pm{display:inline-block;transition:transform .3s var(--ease)}
.prog .bd{padding-top:12px;margin-top:12px;border-top:1px solid var(--rule)}

/* ---- big-type field list ---------------------------------------------------- */
.fields{display:grid;margin-top:clamp(26px,4vh,48px)}
.fields > *{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:clamp(18px,2.4vh,28px) 0;border-top:1px solid var(--rule);position:relative}
.fields > *:last-child{border-bottom:1px solid var(--rule)}
.fields .f{font-family:Archivo,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,3.6vw,2.9rem);letter-spacing:-.03em;line-height:1;
  transition:color .4s var(--ease),transform .4s var(--ease)}
.fields > *:hover .f{transform:translateX(10px)}
.fields .s{color:var(--ink-3);font-size:.9rem;text-align:right}
/* each field takes the next stop on the ramp, so the list reads as a spectrum */
.fields > *:nth-child(1):hover .f{color:var(--violet-t)}
.fields > *:nth-child(2):hover .f{color:#B79BFB}
.fields > *:nth-child(3):hover .f{color:var(--blue-t)}
.fields > *:nth-child(4):hover .f{color:#6FBDF5}
.fields > *:nth-child(5):hover .f{color:var(--sky-t)}
.fields > *:nth-child(6):hover .f{color:var(--cyan-t)}
.fields > *:nth-child(7):hover .f{color:var(--amber-t)}

/* ---- locations --------------------------------------------------------------- */
/* Back-to-home control. Srini asked for this explicitly: a first-time visitor who cannot
   see a way back leaves rather than hunting for the logo. */
.backbar{border-bottom:1px solid var(--rule);background:var(--surface)}
.backbar .in{width:var(--shell);margin:0 auto;padding:13px 0}
.back{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;
  font-size:.84rem;letter-spacing:.04em;color:var(--ink-2);
  transition:color .3s var(--ease),gap .3s var(--ease)}
.back .ar{transition:transform .3s var(--ease)}
.back:hover{color:var(--violet-t);gap:13px}
.back:hover .ar{transform:translateX(-4px)}

.locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:clamp(12px,1.6vw,20px)}
.loc{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:26px;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.loc:hover{border-color:var(--rule-hi);transform:translateY(-4px)}
.loc .k{color:var(--violet-t);display:block;margin-bottom:12px}
.loc h3{margin-bottom:7px}
.loc .a{font-size:.88rem;line-height:1.6;color:var(--ink-2);margin:0}
.loc.hq{border-color:var(--violet)}
.loc.hq .k{color:var(--sky-t)}

/* ---- partner carousel ---------------------------------------------------------- */
/* Spacing is margin-right on each item, NOT flex gap: with gap the track measures
   2N*W+(2N-1)*G but the duplicate sits at N*(W+G), so translateX(-50%) lands half a
   gap short and the loop visibly jumps once per 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 48s 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(126px,13vw,168px);margin:0 clamp(12px,1.5vw,20px) 0 0;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);padding:18px;
  display:grid;place-items:center;aspect-ratio:1;transition:border-color .3s var(--ease)}
.marquee figure:hover{border-color:var(--rule-hi)}
/* the seals are dark-on-white artwork, so they need a light plate on a dark page */
.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}
}

/* ---- stats ---------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap:clamp(18px,3vw,44px)}
.stats .fig{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(2.1rem,4.6vw,3.4rem);
  letter-spacing:-.035em;line-height:1;display:block;font-variant-numeric:tabular-nums}
.stats .l{font-size:.86rem;line-height:1.5;color:var(--ink-2);margin-top:10px;display:block;max-width:22ch}

/* ---- prose / lists ---------------------------------------------------------------- */
.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.6;color:var(--ink-2)}
.bul li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;
  background:var(--spectrum)}
.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:'Geist Mono',monospace;font-size:.72rem;letter-spacing:.12em;
  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%,240px),1fr));
  gap:0 clamp(22px,3vw,48px)}
.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.6;max-width:34ch;margin:0}

/* ---- people / orgs ------------------------------------------------------------------ */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(14px,2vw,22px)}
.person,.org{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(22px,2.5vw,30px);transition:border-color .3s var(--ease)}
.person:hover,.org:hover{border-color:var(--rule-hi)}
.person .role{color:var(--violet-t);display:block;margin:8px 0 15px}
.person p,.org p{font-size:.89rem;line-height:1.62}
.person a.li{display:inline-flex;margin-top:15px;font-size:.85rem;color:var(--violet-t);text-decoration:none}
.person a.li:hover{text-decoration:underline}
.orgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(14px,2vw,22px)}
.org .plate{width:66px;height:66px;display:grid;place-items:center;background:#fff;
  border-radius:var(--r-sm);padding:9px;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:999px;background:var(--surface);
  font-family:'Geist Mono',monospace;font-size:.8rem;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ---- forms ---------------------------------------------------------------------------- */
.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-sm);
  background:var(--surface);font-size:.95rem;width:100%;color:var(--ink);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(124,58,237,.25)}
.form input:user-invalid{border-color:#F87171}
.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:#4ADE80} .status.err{color:#F87171}

/* ---- media ------------------------------------------------------------------------------ */
.figure{border-radius:var(--r);overflow:hidden;border:1px solid var(--rule);margin:0}
.figure img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.figcap{margin-top:14px;color:var(--ink-3)}


@media (max-width:980px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .specs{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media (max-width:820px){
  .nav,.top .cta{display:none;position:fixed;inset:var(--bar) 0 auto;background:var(--ground);
    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}
  /* the dropdown becomes an inline accordion rather than a floating panel */
  .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(--surface);margin-bottom:4px}
  .burger{display:flex}
  .top.open .cta{display:flex;position:static;border:0;padding:14px 4vw 20px;justify-content:center}
  .fields .s{text-align:left;width:100%}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  body{font-size:16px}
  .specs{grid-template-columns:1fr;gap:20px}
  .hero{min-height:0}
}