:root{
  /* temperature ladder, not a lightness ramp */
  --ground:#F4F7F3;--surface:#FFFFFF;--surface-2:#EDF2E6;--sunk:#DCE5E4;--surface-lit:#FFFFFF;
  --ink:#0B120E;--ink-2:#46524A;--ink-3:#5B675F;
  --rule:#D6DFD3;--rule-2:#BDC9BA;--seal-line:#93A490;--seal-plate:#FFFFFF;
  --brand:#00CC3E;--brand-text:#007A26;--brand-soft:#E2F7E7;
  --flag:#8A5A00;--flag-soft:#FBF0DA;--flag-line:#D9A94A;
  --glow:0 0 0 rgba(0,0,0,0);

  /* two optical masters: Safari swaps SF Text/Display at 20px, Windows must be told */
  --sans-display:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --sans-text:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --display:var(--sans-display);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --max:1200px;

  /* three weights. nine resolve to two rasterisations on Windows. */
  --w-body:400;--w-mid:600;--w-disp:700;
  /* light ground: let the OS render text as it renders native apps */
  --smooth:auto;--smooth-moz:auto;--grade:0;--track-grade:0em;--rule-alpha:1;

  /* one key light, upper right, where the hero glow already sits */
  --spec:255 255 255;--sh:24 47 34;--lift:0;
  --groove:inset 0 1px 0 rgb(255 255 255/.85), inset 1px 0 0 rgb(255 255 255/.55);
  --e-1:0 0 0 1px rgb(var(--sh)/.08), 0 1px 1px rgb(var(--sh)/.05), 0 2px 4px -1px rgb(var(--sh)/.05);
  --e-2:0 0 0 1px rgb(var(--sh)/.09), -2px 6px 10px -3px rgb(var(--sh)/.09), -4px 16px 28px -12px rgb(var(--sh)/.11);

  /* one clock */
  --beat:90ms;--dur-enter:820ms;--dur-exit:190ms;
  --ease-enter:cubic-bezier(.16,1,.30,1);--ease-exit:cubic-bezier(.50,0,.90,.60);
  --rise:44px;--hdr-h:68px;

  --dither:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23d)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#070B09;--surface:#0E1613;--surface-2:#171F19;--sunk:#04080A;--surface-lit:#131C17;
  --ink:#EAF1E9;--ink-2:#9DAB9F;--ink-3:#8C988E;
  --rule:#1C2721;--rule-2:#2C3A31;--seal-line:#4E6455;--seal-plate:#EEF2F7;
  --brand:#00CC3E;--brand-text:#3FE072;--brand-soft:#0D2415;
  --flag:#E8B45C;--flag-soft:#241B0C;--flag-line:#7A5C20;
  --glow:0 0 60px rgba(0,204,62,.14);
  /* greyscale AA is correct light-on-dark; type gains weight from halation, give some back */
  --smooth:antialiased;--smooth-moz:grayscale;--grade:-20;--track-grade:.004em;--rule-alpha:.72;
  --spec:210 255 228;--lift:.05;
  --groove:inset 0 1px 0 rgb(210 255 228/.055), inset 1px 0 0 rgb(210 255 228/.035);
  --e-1:inset 0 1px 0 rgb(var(--spec)/.06), 0 1px 2px rgb(0 0 0/.5);
  --e-2:inset 0 1px 0 rgb(var(--spec)/.085), inset 0 0 0 1px rgb(var(--spec)/.02), 0 2px 4px rgb(0 0 0/.5), 0 12px 28px -8px rgb(0 0 0/.55);
}}
:root[data-theme="dark"]{
  --ground:#070B09;--surface:#0E1613;--surface-2:#171F19;--sunk:#04080A;--surface-lit:#131C17;
  --ink:#EAF1E9;--ink-2:#9DAB9F;--ink-3:#8C988E;
  --rule:#1C2721;--rule-2:#2C3A31;--seal-line:#4E6455;--seal-plate:#EEF2F7;
  --brand:#00CC3E;--brand-text:#3FE072;--brand-soft:#0D2415;
  --flag:#E8B45C;--flag-soft:#241B0C;--flag-line:#7A5C20;
  --glow:0 0 60px rgba(0,204,62,.14);
  /* greyscale AA is correct light-on-dark; type gains weight from halation, give some back */
  --smooth:antialiased;--smooth-moz:grayscale;--grade:-20;--track-grade:.004em;--rule-alpha:.72;
  --spec:210 255 228;--lift:.05;
  --groove:inset 0 1px 0 rgb(210 255 228/.055), inset 1px 0 0 rgb(210 255 228/.035);
  --e-1:inset 0 1px 0 rgb(var(--spec)/.06), 0 1px 2px rgb(0 0 0/.5);
  --e-2:inset 0 1px 0 rgb(var(--spec)/.085), inset 0 0 0 1px rgb(var(--spec)/.02), 0 2px 4px rgb(0 0 0/.5), 0 12px 28px -8px rgb(0 0 0/.55);
}
:root[data-theme="light"]{
  --ground:#F4F7F3;--surface:#FFFFFF;--surface-2:#EDF2E6;--sunk:#DCE5E4;--surface-lit:#FFFFFF;
  --ink:#0B120E;--ink-2:#46524A;--ink-3:#5B675F;
  --rule:#D6DFD3;--rule-2:#BDC9BA;--seal-line:#93A490;--seal-plate:#FFFFFF;
  --brand:#00CC3E;--brand-text:#007A26;--brand-soft:#E2F7E7;
  --flag:#8A5A00;--flag-soft:#FBF0DA;--flag-line:#D9A94A;
  --glow:0 0 0 rgba(0,0,0,0);
  --smooth:auto;--smooth-moz:auto;--grade:0;--track-grade:0em;--rule-alpha:1;
  --spec:255 255 255;--lift:0;
  --groove:inset 0 1px 0 rgb(255 255 255/.85), inset 1px 0 0 rgb(255 255 255/.55);
  --e-1:0 0 0 1px rgb(var(--sh)/.08), 0 1px 1px rgb(var(--sh)/.05), 0 2px 4px -1px rgb(var(--sh)/.05);
  --e-2:0 0 0 1px rgb(var(--sh)/.09), -2px 6px 10px -3px rgb(var(--sh)/.09), -4px 16px 28px -12px rgb(var(--sh)/.11);
}

*{box-sizing:border-box}
html{font-size:100%;scroll-padding-top:84px}  /* clears the 68px sticky header */
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans-text);
  font-size:1.03rem;line-height:1.6;font-weight:var(--w-body);
  -webkit-font-smoothing:var(--smooth);-moz-osx-font-smoothing:var(--smooth-moz);
  font-synthesis:none;font-optical-sizing:auto;letter-spacing:var(--track-grade);
  overflow-x:clip}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* ---- type ---- */
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-text);margin:0 0 18px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--brand-text);flex:none}
.eyebrow.mid{justify-content:center}
h1{font-family:var(--sans-display);font-weight:calc(var(--w-disp) + var(--grade));
  font-size:clamp(2.4rem,5.8vw,4.2rem);
  letter-spacing:calc(-0.077em + 2.15px + var(--track-grade));
  line-height:1.02;margin:0 0 24px;text-wrap:balance}
h1 em{font-style:normal;color:var(--brand-text)}
h2{font-family:var(--sans-display);font-weight:calc(var(--w-disp) + var(--grade));
  font-size:clamp(1.85rem,4vw,2.85rem);
  letter-spacing:calc(-0.055em + 1.25px + var(--track-grade));
  line-height:1.08;margin:0 0 18px;text-wrap:balance;max-width:21ch}
h3{font-family:var(--sans-display);font-weight:var(--w-mid);
  letter-spacing:calc(-0.030em + 0.42px);font-size:1.16rem;margin:0 0 11px}
.lede{color:var(--ink-2);max-width:min(60ch,100%);font-size:1.05rem;margin:0 0 40px;text-wrap:pretty}
.hero p.sub,.cell p,.step p,.res p,.office .addr,.bench .bd p{text-wrap:pretty}
.lede.mid{margin-inline:auto}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
p{margin:0 0 15px}

/* ---- figure system: mono reports data, the sans carries labels ---- */
.num,.metric .v,.res .big,.bench .bv,.cred .v{font-family:var(--mono)}
.eyebrow,.tag,.chip,.crumb,.res .sector,.gcard .fmt,footer.site h4,
.cred .l,.step .n,.compare .hd .c,.demo-label,.adnote,.bench cite,.metric .k,.office .role{
  font-family:var(--sans-text);font-weight:var(--w-mid);
  letter-spacing:calc(0.20em - 0.4px);
  font-feature-settings:"case" 1;font-variant-numeric:lining-nums}
.metric .v,.res .big,.bench .bv,.cred .v{font-variant-numeric:tabular-nums lining-nums slashed-zero}

/* ---- machined seams: the 1px grid gaps become incised channels, not drawn lines ---- */
.g3,.steps{background:var(--sunk)}
.cell,.step{box-shadow:var(--groove)}
.step.on{box-shadow:none}
/* These four blocks are the LIGHT treatment; the base rules above them are already
   correct for dark. They were guarded with :root:not([data-theme="dark"]), which is
   true whenever the attribute is absent - and nothing ever sets it, because there is
   no theme toggle. So in system dark they all matched and painted the light theme on
   top of the dark one. Guarded properly now: the media query handles the no-attribute
   case, the [data-theme="light"] copy handles a forced light. Mirrors exactly what the
   token blocks do with :not([data-theme="light"]). */
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .sec.alt .cell,
:root:not([data-theme="dark"]) .sec.alt .step{
  --groove:inset 0 1px 0 rgb(24 47 34/.055), inset 1px 0 0 rgb(24 47 34/.035)}}
:root[data-theme="light"] .sec.alt .cell,
:root[data-theme="light"] .sec.alt .step{
  --groove:inset 0 1px 0 rgb(24 47 34/.055), inset 1px 0 0 rgb(24 47 34/.035)}

/* ---- surface material: dither over a short-throw gradient ---- */
.res,.office,.demo,.adstage,.bench{
  background-color:var(--surface);
  background-image:var(--dither),linear-gradient(180deg,var(--surface-lit) 0,var(--surface) 112px);
  background-size:160px 160px,auto;background-repeat:repeat,no-repeat}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .res,
:root:not([data-theme="dark"]) .office,
:root:not([data-theme="dark"]) .demo{
  background-image:var(--dither),linear-gradient(180deg,var(--surface-lit) 0,var(--surface) 100%);
  background-blend-mode:overlay,normal}}
:root[data-theme="light"] .res,
:root[data-theme="light"] .office,
:root[data-theme="light"] .demo{
  background-image:var(--dither),linear-gradient(180deg,var(--surface-lit) 0,var(--surface) 100%);
  background-blend-mode:overlay,normal}

/* ---- #3 lit-edge hairline: the stroke varies around the perimeter, specular
   where the panel faces the key light (upper right), shaded where it falls away.
   Fallback is the flat 1px border already declared on each of these. ---- */
:root{--lit:205deg;--edge-hi:rgb(var(--spec)/.95);--edge-mid:var(--rule);--edge-lo:rgb(24 47 34/.16)}
:root[data-theme="dark"]{--edge-hi:rgb(var(--spec)/.085);--edge-lo:rgb(0 0 0/.34)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --edge-hi:rgb(var(--spec)/.085);--edge-lo:rgb(0 0 0/.34)}}

@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .res::before,.office::before,.demo::before,.adstage::before,.bench::before{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:0;
    background:linear-gradient(var(--lit),var(--edge-hi),var(--edge-mid) 42%,var(--edge-lo));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude}
  .adstage,.bench{position:relative}
  .res > *,.office > *,.demo > *,.adstage > *,.bench > *{position:relative;z-index:1}
}

/* ---- dual-logic elevation: luminance lift on dark, tinted ink on light ---- */
.res,.office,.demo{position:relative;box-shadow:var(--e-1)}
/* E - cursor spotlight. Replaces the flat luminance lift: same job, follows the pointer. */
:root{--spot:rgb(0 204 62/.085)}
:root[data-theme="dark"]{--spot:rgb(210 255 228/.075)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--spot:rgb(210 255 228/.075)}}
.cell{position:relative}
.res::after,.office::after,.demo::after,.cell::after{content:"";position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .28s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),var(--spot),transparent 62%)}
.res:hover,.office:hover,.demo:hover{box-shadow:var(--e-2);transform:translateY(-3px)}
.res:hover::after,.office:hover::after,.demo:hover::after,.cell:hover::after{opacity:1}
@media (hover:none){.res::after,.office::after,.demo::after,.cell::after{display:none}}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .btn-primary{
  background:linear-gradient(180deg,#12D94A,#00BE39);border:1px solid #00922C;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.45), inset 0 -1px 0 rgb(0 60 20/.18),
    0 1px 1px rgb(0 72 26/.16), 0 6px 12px -4px rgb(0 102 36/.28)}}
:root[data-theme="light"] .btn-primary{
  background:linear-gradient(180deg,#12D94A,#00BE39);border:1px solid #00922C;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.45), inset 0 -1px 0 rgb(0 60 20/.18),
    0 1px 1px rgb(0 72 26/.16), 0 6px 12px -4px rgb(0 102 36/.28)}

/* ---- placeholders ---- */
body.flagging [data-ph]{background:var(--flag-soft);box-shadow:0 0 0 1px var(--flag-line);border-radius:3px;position:relative}
body.flagging [data-ph]::after{content:"PLACEHOLDER";position:absolute;top:-7px;left:0;
  font-family:var(--mono);font-size:8px;letter-spacing:.1em;background:var(--flag-line);color:#000;
  padding:1px 4px;border-radius:2px;white-space:nowrap;z-index:5;pointer-events:none}
#flagbar{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;gap:8px;align-items:center;
  background:var(--surface);border:1px solid var(--rule-2);border-radius:999px;padding:7px 8px 7px 14px;
  box-shadow:0 6px 24px rgba(0,0,0,.28)}
#flagbar span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ink-2);text-transform:uppercase}
#flagbar button{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--flag-line);background:transparent;color:var(--flag);padding:5px 11px;border-radius:999px;cursor:pointer}
#flagbar button[aria-pressed="true"]{background:var(--flag-line);color:#000}

/* ---- header ---- */
header.site{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--ground) 84%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
header.site.stuck{border-bottom-color:var(--rule)}
header.site{height:var(--hdr-h)}
header.site .bar{display:flex;align-items:center;gap:26px;height:100%}
.brand{color:var(--ink);display:flex;align-items:center;flex:none;text-decoration:none}
.brand svg{height:32px;width:auto;display:block;transform-origin:left center;
  transition:transform .34s var(--ease-enter)}
header.site.stuck .brand svg{transform:scale(.84)}
nav.main{display:flex;gap:24px;margin-left:auto;align-items:center}
/* WordPress menus come out as <li> elements. The prototype's nav was plain <a>
   tags, so nothing here reset list styling and every link rendered with a bullet
   beside it, stacked as list items. */
nav.main li,#mobnav li{list-style:none;margin:0;padding:0;display:block}
nav.main li{display:inline-flex;align-items:center}
nav.main ul,#mobnav ul{list-style:none;margin:0;padding:0;display:contents}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:0 0 8px}
nav.main a{color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:520;transition:color .18s;
  display:inline-flex;align-items:center;min-height:24px}
nav.main a:hover,nav.main a.on{color:var(--ink)}
nav.main a.on{color:var(--brand-text)}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;padding:11px 22px;
  border-radius:999px;text-decoration:none;border:1px solid transparent;transition:transform .18s,border-color .18s;cursor:pointer}
.btn-primary{background:var(--brand);color:#04120A;box-shadow:var(--glow)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{border-color:var(--rule-2);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-text)}
.btn-lg{padding:15px 30px;font-size:15.5px}
.burger{display:none;margin-left:auto;background:none;border:0;color:var(--ink);cursor:pointer;padding:8px}
#mobnav{display:none;border-top:1px solid var(--rule);background:var(--surface);padding:14px 28px 20px}
@media (max-width:1000px){#mobnav.open{display:block}}
/* :not(.btn) matters. #mobnav a is an ID selector (1,0,1) and was beating
   .btn-primary (0,1,0), so the menu's CTA rendered --ink-2 grey on bright green
   at 3.28:1 - under AA. Scoping the rule to non-button links restores 7.7-10:1. */
#mobnav a:not(.btn){display:block;padding:11px 0;color:var(--ink-2);text-decoration:none;
  font-size:1rem;border-bottom:1px solid var(--rule)}
#mobnav a:not(.btn):last-of-type{border-bottom:0}
#mobnav a:not(.btn):hover{color:var(--ink)}
#mobnav .btn{margin-top:14px;width:100%;justify-content:center}
@media (max-width:1000px){nav.main{display:none}header.site .bar > .btn{display:none}.burger{display:block}}

/* ---- sections ---- */
.sec{padding:clamp(66px,8vw,110px) 0}
.sec.alt{background:var(--surface);border-block:1px solid var(--rule)}
.sec.tight{padding:clamp(46px,5vw,70px) 0}
.sec-head{margin-bottom:48px}
.sec-head.mid{text-align:center;max-width:auto}
.sec-head.mid h2,.sec-head.mid .lede{margin-inline:auto}

/* ---- hero ---- */
.hero{padding:clamp(60px,9vw,110px) 0 clamp(46px,6vw,72px);overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
@media (max-width:940px){.hero .grid{grid-template-columns:1fr;gap:40px}}
.hero p.sub{font-size:clamp(1.05rem,2vw,1.2rem);color:var(--ink-2);max-width:52ch;margin:0 0 34px}
.cta-row{display:flex;gap:13px;flex-wrap:wrap}
.cta-row.mid{justify-content:center}
.metrics{display:grid;grid-template-columns:repeat(3,auto);gap:36px;justify-content:start;margin-top:42px}
@media (max-width:560px){.metrics{grid-template-columns:repeat(2,auto);gap:24px 30px}}
.metric .v{font-family:var(--mono);font-size:clamp(1.65rem,3.4vw,2.2rem);font-weight:600;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.metric .k{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-top:9px;max-width:15ch;line-height:1.5}

.rings{position:relative;aspect-ratio:1;width:100%;max-width:430px;margin-inline:auto;
  perspective:900px}
.rings svg{width:100%;height:100%;display:block;overflow:visible;
  transform:rotateX(calc(var(--py,0) * -7deg)) rotateY(calc(var(--px,0) * 7deg));
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.rings circle{fill:none;stroke:var(--brand);transform-origin:50% 50%}
.rings .rg{transform-origin:50% 50%}
.r-track{stroke:var(--rule-2);stroke-width:1}
.r-arc{stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(0,204,62,.4))}

@keyframes rgspin{to{transform:rotate(360deg)}}
@keyframes rgspinr{to{transform:rotate(-360deg)}}
/* Deliberately fast. The previous 8-26s range was technically running but slow
   enough to read as static, which is what the client was reporting. */
.rg1{animation:rgspin 11s linear infinite}
.rg2{animation:rgspinr 7.5s linear infinite}
.rg3{animation:rgspin 5s linear infinite}
.rg4{animation:rgspinr 3.2s linear infinite}

/* a radar sweep: the single most obviously-moving element available */
.sweep{transform-origin:100px 100px;animation:rgspin 3.6s linear infinite}

/* core breathes; the halo pulses outward like a sweep returning */
@keyframes corepulse{0%,100%{r:11;opacity:.8}50%{r:17;opacity:1}}
.rings .core{fill:var(--brand);stroke:none;animation:corepulse 1.9s ease-in-out infinite;
  filter:drop-shadow(0 0 18px rgba(0,204,62,.75))}
@keyframes halo{0%{r:13;opacity:.7;stroke-width:2.5}100%{r:94;opacity:0;stroke-width:.5}}
.rings .halo{fill:none;stroke:var(--brand);animation:halo 2.2s cubic-bezier(.2,.6,.3,1) infinite}
.rings .halo2{fill:none;stroke:var(--brand);animation:halo 2.2s cubic-bezier(.2,.6,.3,1) infinite;
  animation-delay:1.1s}

/* blips ride their own orbits */
.rings .blip{fill:var(--brand);transform-origin:100px 100px;
  filter:drop-shadow(0 0 6px rgba(0,204,62,.8))}
.b1{animation:rgspin 11s linear infinite}
.b2{animation:rgspinr 5s linear infinite}

@media (prefers-reduced-motion:reduce){
  .rg1,.rg2,.rg3,.rg4,.b1,.b2,.sweep,.rings .core,.rings .halo,.rings .halo2{animation:none}
  .rings .halo,.rings .halo2,.sweep{opacity:0}
  .rings svg{transform:none}}
.rings .core{fill:var(--brand);stroke:none;filter:drop-shadow(0 0 14px rgba(0,204,62,.55))}
.rings .blip{fill:var(--brand);opacity:.9}

/* ---- ticker ---- */
/* F - editorial marquee: display scale, masked at both edges */
.ticker{border-block:1px solid var(--rule);background:var(--surface);overflow:hidden;padding:30px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker .track{display:flex;width:max-content;animation:slide 52s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker .item{font-family:var(--sans-display);font-weight:var(--w-disp);
  font-size:clamp(1.15rem,2.6vw,1.85rem);letter-spacing:-.028em;
  color:var(--ink);padding:0 22px;white-space:nowrap;display:flex;align-items:center;gap:22px}
.ticker .item::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none}
.ticker .item:nth-child(even){color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none}}

/* ---- grids ---- */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (max-width:900px){.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.g3{grid-template-columns:1fr}}
.cell{background:var(--ground);padding:32px 28px;transition:background .25s}
.sec.alt .cell{background:var(--surface)}
.cell:hover{background:var(--surface-2)}
.cell .ix{font-family:var(--mono);font-size:10px;color:var(--brand-text);letter-spacing:.1em;margin-bottom:20px}
.cell p{color:var(--ink-2);font-size:.935rem;line-height:1.6;margin:0 0 18px;max-width:36ch}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-text);
  border:1px solid var(--rule-2);border-radius:999px;padding:4px 10px;display:inline-block}
/* Was scoped .cell a.more, but every .more link on the site lives in .res, not
   .cell - so the rule matched nothing and all 14 case-study links across the
   home, results, service and sector pages rendered as UA-default underlined
   blue. De-scoped. */
a.more{font-size:.87rem;color:var(--brand-text);text-decoration:none;font-weight:560;display:inline-block;margin-top:4px}
a.more:hover{text-decoration:underline}
/* An odd item count leaves a lone orphan in the last row. Let it span instead,
   laid out horizontally so the width reads as deliberate rather than stretched. */
@media (min-width:901px){
  .g3 > :last-child:nth-child(3n+1){grid-column:1/-1;display:grid;
    grid-template-columns:auto minmax(0,1.1fr) auto;gap:34px;align-items:center}
  .g3 > :last-child:nth-child(3n+1) .ix{margin:0}
  .g3 > :last-child:nth-child(3n+1) h3{margin:0;min-width:12ch}
  .g3 > :last-child:nth-child(3n+1) p{margin:0;max-width:none}
  .g3 > :last-child:nth-child(3n+1) .tag{margin-right:14px}
  .g3 > :last-child:nth-child(3n+1) br{display:none}
}

/* ---- split ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.split.center{align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:38px}}

/* ---- compare ---- */
.compare{border:1px solid var(--rule);background:var(--ground)}
.sec.alt .compare{background:var(--surface)}
.compare .row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--rule)}
.compare .row:last-child{border-bottom:0}
.compare .c{padding:15px 18px;font-size:.9rem;line-height:1.5}
.compare .c.them{color:var(--ink-3);border-right:1px solid var(--rule)}
.compare .hd .c{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;background:var(--surface-2);padding:11px 18px}
.compare .hd .c.us{color:var(--brand-text)}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:var(--ground);padding:28px 22px;transition:background .3s}
.sec.alt .step{background:var(--surface)}
.step.on{background:var(--brand-soft)}
.step .n{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.step .n::before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid var(--rule-2);transition:background .3s,border-color .3s}
.step.on .n{color:var(--brand-text)}
.step.on .n::before{background:var(--brand);border-color:var(--brand)}
.step h3{font-size:1rem;margin:0 0 8px}
.step p{color:var(--ink-2);font-size:.875rem;line-height:1.55;margin:0}

/* ---- legal prose. Content is copied verbatim; only the typography is ours. ---- */
.legal-label{font-family:var(--sans-text);font-weight:var(--w-mid);font-size:10px;
  letter-spacing:calc(0.20em - 0.4px);text-transform:uppercase;color:var(--ink-3);margin:0}
.legal{max-width:74ch;color:var(--ink-2);font-size:1rem;line-height:1.72}
/* a document that owns its h1 renders it at page scale */
.legal > h1:first-child{font-size:clamp(2.1rem,4.8vw,3.4rem);letter-spacing:-.033em;
  line-height:1.04;margin:0 0 20px}
.legal h1,.legal h2,.legal h3,.legal h4{color:var(--ink);font-family:var(--sans-display);
  font-weight:var(--w-disp);letter-spacing:-.018em;line-height:1.22;margin:38px 0 12px}
.legal h1{font-size:1.6rem}.legal h2{font-size:1.32rem}
.legal h3{font-size:1.12rem}.legal h4{font-size:1rem}
.legal p{margin:0 0 16px}
.legal ul,.legal ol{margin:0 0 18px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal a{color:var(--brand-text);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.legal strong,.legal b{color:var(--ink);font-weight:var(--w-mid)}
.legal blockquote{margin:0 0 18px;padding-left:18px;border-left:2px solid var(--rule-2)}
.legal table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.9rem;
  display:block;overflow-x:auto;white-space:normal}
.legal th,.legal td{border:1px solid var(--rule);padding:10px 12px;text-align:left;vertical-align:top;
  min-width:150px}
.legal th{background:var(--surface-2);color:var(--ink);font-weight:var(--w-mid);
  font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}

/* ---- brand band: two rows, counter-scrolling ---- */
.brands{border-block:1px solid var(--rule);background:var(--surface);padding:34px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brow{display:flex;width:max-content;gap:0}
.brow.r1{animation:bslide 62s linear infinite}
.brow.r2{animation:bslider 74s linear infinite;margin-top:14px}
@keyframes bslide{to{transform:translateX(-50%)}}
@keyframes bslider{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.brand-i{font-family:var(--sans-display);font-weight:var(--w-disp);
  font-size:clamp(1.05rem,2.1vw,1.5rem);letter-spacing:-.024em;color:var(--ink-3);
  padding:10px 24px;white-space:nowrap;display:flex;align-items:center;gap:24px;
  transition:color .3s}
.brand-i::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--rule-2);flex:none}
.brands:hover .brow{animation-play-state:paused}
.brand-i:hover{color:var(--brand-text)}
.brand-i:hover::after{background:var(--brand)}
@media (prefers-reduced-motion:reduce){.brow{animation:none}}

/* ---- client logo wall ---- */
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
@media (max-width:900px){.logos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.logos{grid-template-columns:repeat(2,1fr)}}
.logo{background:var(--ground);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  padding:16px;position:relative;overflow:hidden}
.sec.alt .logo{background:var(--surface)}
.logo span{font-family:var(--sans-text);font-weight:var(--w-mid);font-size:10px;
  letter-spacing:calc(0.20em - 0.4px);text-transform:uppercase;color:var(--ink-3);text-align:center;
  transition:color .3s}
.logo:hover span{color:var(--brand-text)}
.logo::before{content:"";position:absolute;inset:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),var(--spot),transparent 62%);
  opacity:0;transition:opacity .3s}
.logo:hover::before{opacity:1}

/* ---- FAQ ---- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:var(--sans-display);font-weight:var(--w-mid);font-size:1.05rem;letter-spacing:-.014em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--brand-text);border-bottom:1.5px solid var(--brand-text);
  transform:translateY(-70%) rotate(45deg);transition:transform .28s var(--ease-enter)}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq summary:hover{color:var(--brand-text)}
.faq .a{padding:0 44px 22px 0;color:var(--ink-2);font-size:.95rem;max-width:70ch}
.faq .a p{margin:0 0 10px}.faq .a p:last-child{margin:0}

/* ---- contact form ---- */
.cform{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.cform{grid-template-columns:1fr}}
.cform .full{grid-column:1/-1}
.cform label{display:block;font-family:var(--sans-text);font-weight:var(--w-mid);font-size:10px;
  letter-spacing:calc(0.20em - 0.4px);text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.cform input,.cform select,.cform textarea{width:100%;background:var(--ground);
  border:1px solid var(--ink-3);color:var(--ink);font-family:var(--sans-text);font-size:.98rem;
  padding:12px 14px;border-radius:0}
.cform textarea{min-height:120px;resize:vertical}
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{
  outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent)}
.cform .req{color:var(--brand-text)}
.fielderr{display:block;font-family:var(--sans-text);font-size:.8rem;line-height:1.4;
  color:var(--flag);margin-top:6px;min-height:0}
.fielderr:empty{margin-top:0}
.cform [aria-invalid="true"]{border-color:var(--flag)}
.formnote{font-size:.82rem;color:var(--ink-3);margin-top:14px}

/* D - scroll-drawn performance curve */
.curve{border:1px solid var(--rule);background:var(--surface);padding:26px 28px 20px;position:relative}
.curve-hd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.curve-hd .t{font-family:var(--sans-display);font-weight:var(--w-mid);font-size:1.02rem;letter-spacing:-.015em}
.curve-hd .s{font-family:var(--sans-text);font-weight:var(--w-mid);font-size:10px;
  letter-spacing:calc(0.20em - 0.4px);text-transform:uppercase;color:var(--ink-3)}
.curve svg{width:100%;height:clamp(220px,26vw,360px);display:block;overflow:visible}
.curve .cgrid{stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke}
.curve .ctick{stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.55}
/* non-scaling-stroke keeps the weight true under the non-uniform viewBox stretch */
.curve .cline{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.curve .carea{fill:var(--brand);opacity:0}
.curve .cdot{fill:var(--brand);opacity:0}
.curve-ax{display:flex;justify-content:space-between;margin-top:10px;
  font-family:var(--sans-text);font-weight:var(--w-mid);font-size:10px;
  letter-spacing:calc(0.20em - 0.4px);text-transform:uppercase;color:var(--ink-3)}

/* ---- #5b tear sheet: figures aligned on the decimal, with a dedicated sign
   column, the way a financial statement sets them. CSS Text L3 specs
   text-align:"." but nothing implements it; subgrid does the same job. ---- */
.tearsheet{display:grid;grid-template-columns:1fr 1ch max-content max-content max-content;
  border-top:1px solid var(--rule);margin-top:8px}
.tearsheet .row{display:grid;grid-column:1/-1;grid-template-columns:subgrid;
  align-items:baseline;padding-block:13px;border-bottom:1px solid var(--rule)}
@supports not (grid-template-columns:subgrid){
  .tearsheet .row{grid-template-columns:1fr 1ch max-content max-content max-content}
}
.tearsheet .k{font-family:var(--sans-text);color:var(--ink-2);font-size:.92rem}
.tearsheet .sgn,.tearsheet .int,.tearsheet .frac{font-family:var(--mono);
  font-variant-numeric:tabular-nums lining-nums slashed-zero;
  letter-spacing:-.02em;font-weight:var(--w-mid);font-size:1.06rem}
.tearsheet .sgn{text-align:center}
.tearsheet .int{text-align:right}
.tearsheet .frac{text-align:left;color:var(--ink-2)}
.tearsheet .u{font-family:var(--sans-text);font-size:.62em;font-weight:var(--w-mid);
  color:var(--ink-3);letter-spacing:.03em;margin-left:.4em}
.tearsheet .row.up .int,.tearsheet .row.up .sgn,.tearsheet .row.up .frac{color:var(--brand-text)}

/* ---- results ---- */
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.results{grid-template-columns:1fr}}
.res{border:1px solid var(--rule);background-color:var(--ground);padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.sec.alt .res{background-color:var(--surface)}
.res .sector{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.res .big{font-family:var(--mono);font-size:2.4rem;font-weight:600;letter-spacing:-.035em;color:var(--brand-text);line-height:1;font-variant-numeric:tabular-nums}
.res p{margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.58}
.res .chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--rule-2);color:var(--ink-3);padding:3px 9px;border-radius:999px}

/* ---- page head (inner) ---- */
.phead{padding:clamp(52px,6.5vw,86px) 0 clamp(34px,4vw,52px);border-bottom:1px solid var(--rule)}
.phead h1{font-size:clamp(2.1rem,4.8vw,3.4rem);margin-bottom:20px;max-width:20ch}
.phead .lede{margin-bottom:28px}
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:20px}
.crumb a{color:var(--brand-text);text-decoration:none;
  display:inline-flex;align-items:center;min-height:24px}

/* ---- prose / lists ---- */
.plist{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.plist li{background:var(--ground);padding:19px 22px;display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start}
.sec.alt .plist li{background:var(--surface)}
.plist .k{font-family:var(--mono);font-size:10px;color:var(--brand-text);padding-top:4px}
.plist .t{font-weight:600;margin-bottom:3px;font-size:.98rem}
.plist .d{color:var(--ink-2);font-size:.9rem;line-height:1.55}

/* ---- team & offices ---- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:900px){.team{grid-template-columns:repeat(2,1fr)}}
.member{border:1px dashed var(--rule-2);background:var(--surface-2);padding:24px 20px;text-align:center;border-radius:4px}
.member .av{width:62px;height:62px;border-radius:50%;background:var(--rule);margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.member .nm{font-weight:620;font-size:.96rem;margin-bottom:4px}
.member .rl{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
/* city cards: local time instead of an address */
.office .clock{font-family:var(--mono);font-size:1.75rem;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;color:var(--ink);line-height:1;margin:12px 0 6px}
.office .clock .ampm{font-size:.5em;color:var(--ink-3);margin-left:5px;letter-spacing:.06em}
.office .tzname{font-family:var(--sans-text);font-weight:var(--w-mid);font-size:9.5px;
  letter-spacing:calc(0.20em - 0.4px);text-transform:uppercase;color:var(--ink-3)}
.office .pinrow{display:flex;align-items:center;gap:7px;color:var(--brand-text);margin-bottom:10px}
.office .pinrow svg{flex:none}
.offices{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1050px){.offices{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.offices{grid-template-columns:1fr}}
.office{border:1px solid var(--rule);padding:24px 22px;background-color:var(--ground)}
.sec.alt .office{background-color:var(--surface)}
.office .city{font-weight:640;font-size:1.06rem;margin-bottom:8px;letter-spacing:-.014em}
.office .addr{color:var(--ink-2);font-size:.88rem;line-height:1.6;margin:0}
.office .role{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-text);margin-bottom:12px}

/* ---- gallery ---- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}
.gcard{aspect-ratio:4/5;border:1px dashed var(--rule-2);background:var(--surface-2);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink-3);text-align:center;padding:18px;border-radius:4px}
.gcard .fmt{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--brand-text)}
.gcard .note{font-size:.79rem;line-height:1.45;max-width:20ch}

/* ---- final ---- */
.final{text-align:center;padding:clamp(70px,9vw,118px) 0}
.final h2{margin-inline:auto;max-width:17ch}

/* ---- footer ---- */
footer.site{background:var(--sunk);border-top:1px solid var(--rule);padding:60px 0 96px}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:38px;margin-bottom:48px}
@media (max-width:820px){.fgrid{grid-template-columns:1fr 1fr;gap:30px}}
footer.site h4{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 15px;font-weight:500}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
/* WCAG 2.2 SC 2.5.8: targets need 24x24. These were 17px tall. */
footer.site a{color:var(--ink-2);text-decoration:none;font-size:.9rem;
  display:inline-flex;align-items:center;min-height:24px;padding:2px 0}
footer.site a:hover{color:var(--brand-text)}
footer.site .soc{display:inline-flex;align-items:center;gap:9px;min-height:24px}
footer.site .soc svg{flex:none;opacity:.75;transition:opacity .2s}
footer.site .soc:hover svg{opacity:1}
/* No official GDPR mark exists - the EU and the EDPB do not issue one, and the
   only recognised seal (Europrivacy) requires paid certification. So this is a
   self-declaration, designed to read as a considered statement rather than an
   imitation of a certification badge. Deliberately avoids EU stars/flag, which
   would imply endorsement. */
.gdpr{display:inline-flex;align-items:stretch;margin-top:22px;color:var(--ink-2);
  border:1px solid var(--seal-line);border-radius:6px;overflow:hidden;background:var(--ground)}
.gdpr .gicon{display:flex;align-items:center;justify-content:center;padding:8px 12px;
  background:var(--seal-plate);border-right:1px solid var(--seal-line)}
.gdpr .gicon img{display:block;width:52px;height:52px}
.gdpr .gtxt{padding:9px 14px 8px}
a.gdpr{text-decoration:none}
a.gdpr:hover{border-color:var(--brand-text)}
a.gdpr:hover .gicon{background:var(--brand-text);color:var(--ground)}
.gdpr cite{display:block;font-style:normal;font-family:var(--sans-text);font-size:10px;
  letter-spacing:.01em;color:var(--ink-3);margin-top:3px}
.gdpr cite b{display:inline;font-size:10px;letter-spacing:.01em;color:var(--ink-2);font-weight:var(--w-mid)}
.gdpr b{display:block;font-family:var(--sans-text);font-weight:var(--w-disp);font-size:.9rem;
  letter-spacing:.06em;color:var(--ink);line-height:1.15}
.gdpr small{display:block;font-family:var(--sans-text);font-weight:var(--w-mid);font-size:9px;
  letter-spacing:calc(0.20em - 0.4px);text-transform:uppercase;color:var(--ink-3);margin-top:4px}
footer.site .brand{color:var(--ink)}
footer.site .brand svg{height:29px;margin-bottom:16px}
footer.site .addr{color:var(--ink-3);font-size:.85rem;line-height:1.65;margin:0;max-width:30ch}
.fbase{border-top:1px solid var(--rule);padding-top:20px;display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;align-items:center}
.fbase p{margin:0;color:var(--ink-3);font-size:.81rem}
.fbase .legal{display:flex;gap:18px;flex-wrap:wrap}
.fbase .legal a{font-size:.81rem}

/* ================= BENCHMARK BLOCK ================= */
.bench{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;
  border:1px solid var(--rule);border-left:3px solid var(--brand);padding:26px 30px;background:var(--ground)}
.sec.alt .bench{background-color:var(--surface)}
@media (max-width:640px){.bench{grid-template-columns:1fr;gap:12px}}
.bench .bv{font-family:var(--mono);font-size:clamp(2.4rem,5vw,3.4rem);font-weight:600;
  letter-spacing:-.04em;color:var(--brand-text);line-height:1;font-variant-numeric:tabular-nums}
.bench .bd p{margin:0 0 8px;font-size:1.05rem;max-width:46ch;line-height:1.45}
.bench cite{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-style:normal}

/* ================= AD FORMAT DEMOS ================= */
.adstage{border:1px solid var(--rule);background-color:var(--surface-2);padding:38px 30px 24px;
  display:flex;flex-direction:column;align-items:center;gap:16px;border-radius:6px}
.adnote{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0}
.adunit{width:100%;max-width:600px;display:flex;flex-direction:column;align-items:center;gap:14px}

.ad-rings{position:relative;width:44px;height:44px;flex:none}
.ad-rings.sm{width:30px;height:30px}
.ad-rings span{position:absolute;inset:0;border:2px solid var(--brand);border-radius:50%;
  border-right-color:transparent;border-bottom-color:transparent;animation:adspin 3s linear infinite}
.ad-rings span:nth-child(2){inset:7px;animation-duration:2.2s;animation-direction:reverse}
.ad-rings span:nth-child(3){inset:14px;animation-duration:1.6s}
.ad-rings.sm span:nth-child(2){inset:5px}.ad-rings.sm span:nth-child(3){inset:10px}
@keyframes adspin{to{transform:rotate(360deg)}}

#ad-expand .ad-collapsed{display:flex;align-items:center;gap:16px;width:min(300px,100%);height:250px;
  flex-direction:column;justify-content:center;text-align:center;padding:22px;
  background:linear-gradient(155deg,var(--surface),var(--ground));border:1px solid var(--rule-2);border-radius:5px;
  transition:opacity .35s,transform .35s}
#ad-expand .ad-copy strong{display:block;font-size:1.05rem;margin-bottom:5px}
#ad-expand .ad-copy small{color:var(--ink-2);font-size:.85rem}
#ad-expand .ad-expanded{display:none;width:100%;max-width:600px;height:400px;
  background:linear-gradient(155deg,var(--surface),var(--ground));border:1px solid var(--brand);border-radius:5px;
  align-items:center;justify-content:center;padding:34px;box-shadow:var(--glow)}
#ad-expand.open .ad-collapsed{display:none}
#ad-expand.open .ad-expanded{display:flex;animation:adpop .4s cubic-bezier(.22,1,.36,1)}
@keyframes adpop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.ad-panel{text-align:center;max-width:34ch}
.ad-panel strong{display:block;font-size:1.5rem;letter-spacing:-.02em;margin-bottom:10px}
.ad-panel p{color:var(--ink-2);margin-bottom:20px}
.ad-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ad-cta{font-family:var(--display);font-size:.85rem;font-weight:600;padding:9px 18px;border-radius:999px;
  border:1px solid var(--rule-2);background:transparent;color:var(--ink);cursor:pointer;transition:transform .18s,background .18s}
.ad-cta:hover{transform:translateY(-1px)}
.ad-cta.solid{background:var(--brand);color:#04120A;border-color:var(--brand)}
.ad-cta.ghost{color:var(--ink-2)}

#ad-scratch{gap:12px}
.scratch-head{text-align:center}
.scratch-head strong{display:block;font-size:1.05rem}
.scratch-head small{color:var(--ink-3);font-size:.82rem}
.scratch-box{position:relative;width:100%;max-width:600px;aspect-ratio:600/220;border-radius:5px;overflow:hidden;border:1px solid var(--rule-2)}
.scratch-box canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;cursor:crosshair;touch-action:none}
.scratch-prize{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;background:linear-gradient(135deg,var(--brand-soft),var(--surface))}
.scratch-prize .pz{font-family:var(--mono);font-size:clamp(1.8rem,5vw,2.6rem);font-weight:600;color:var(--brand-text);letter-spacing:-.03em}
.scratch-prize .pzs{font-size:.85rem;color:var(--ink-2)}

.gal3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.gal3{grid-template-columns:1fr}}
.demo{border:1px solid var(--rule);background-color:var(--surface-2);border-radius:6px;padding:20px;display:flex;flex-direction:column;gap:14px}
.demo-label{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--brand-text)}
.feed{background:var(--ground);border:1px solid var(--rule);border-radius:4px;padding:12px;display:flex;flex-direction:column;gap:10px}
.fpost{padding:10px;border-radius:4px;background:var(--surface)}
.fpost .fav{width:26px;height:26px;border-radius:50%;background:var(--rule-2);margin-bottom:8px}
.fpost .fline{height:7px;border-radius:3px;background:var(--rule);margin-bottom:5px}
.fpost .fline.s{width:58%}
.fpost.sponsored{border:1px solid var(--brand);background:var(--brand-soft);text-align:center}
.fpost.sponsored .ftag{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--brand-text);margin-bottom:8px}
.fpost.sponsored .fimg{display:flex;justify-content:center;padding:10px 0}
.fpost.sponsored strong{display:block;font-size:.9rem}
.fpost.sponsored small{color:var(--ink-2);font-size:.78rem}
.player{position:relative;aspect-ratio:16/9;background:linear-gradient(150deg,var(--surface),var(--ground));
  border:1px solid var(--rule-2);border-radius:4px;display:flex;align-items:center;justify-content:center}
.player .pbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rule)}
.player .pbar i{display:block;height:100%;background:var(--brand);width:0;animation:play 6s linear infinite}
@keyframes play{to{width:100%}}
/* --brand is the 2.16:1 display green; on the light gallery card this glyph came out
   at 1.9:1. --brand-text is the theme-aware readable green (#007A26 light / #3FE072
   dark) - same colour role, legible in both. */
.player .pplay{position:absolute;left:12px;bottom:12px;color:var(--brand-text);font-size:12px}
.tv{display:flex;flex-direction:column;align-items:center}
.tvscreen{width:100%;aspect-ratio:16/9;background:linear-gradient(150deg,var(--surface),var(--ground));
  border:2px solid var(--rule-2);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.tvcopy{font-size:.85rem;color:var(--ink-2)}
.tvstand{width:64px;height:8px;background:var(--rule-2);border-radius:0 0 5px 5px}

/* ================= RICHNESS LAYER ================= */
/* fine grain — the single cheapest way to stop a flat dark ground looking flat */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.016;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) body::before{opacity:.022}}
:root[data-theme="light"] body::before{opacity:.022}
/* header.site and #flagbar deliberately EXCLUDED: both already establish their own
   stacking context (sticky / fixed), and listing them here silently overrode
   position:sticky with position:relative and z-index:100 with 2. */
main,footer.site{position:relative;z-index:2}

/* ambient glow behind the hero — depth without a hero image */
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120vmax 120vmax at 88% -18%, rgb(0 204 62/.055) 0%, rgb(0 204 62/.030) 22%,
      rgb(0 204 62/.018) 46%, rgb(0 204 62/.008) 70%, transparent 82%),
    radial-gradient(90vmax 90vmax at 6% 108%, rgb(0 0 0/.34), transparent 62%)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) body::after{
  background:
    radial-gradient(120vmax 120vmax at 88% -18%, rgb(255 251 235/.55) 0%, rgb(255 251 235/.22) 40%, transparent 72%),
    radial-gradient(95vmax 95vmax at 4% 106%, rgb(24 47 34/.055), transparent 60%)}}
:root[data-theme="light"] body::after{
  background:
    radial-gradient(120vmax 120vmax at 88% -18%, rgb(255 251 235/.55) 0%, rgb(255 251 235/.22) 40%, transparent 72%),
    radial-gradient(95vmax 95vmax at 4% 106%, rgb(24 47 34/.055), transparent 60%)}

/* scroll progress */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--brand);z-index:300;transition:width .08s linear}

/* elevated hover on cards */
.cell,.res,.office,.demo{transition:background .25s,transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s}
.res:hover,.office:hover{transform:translateY(-3px);border-color:var(--rule-2);box-shadow:0 10px 34px rgba(0,0,0,.16)}

/* word-by-word headline reveal */
.tw{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.14em;margin-bottom:-.14em}   /* room for descenders inside the clip */
.tw > i{display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .72s cubic-bezier(.19,1,.22,1)}
.tw.in > i{transform:none}

/* custom scrollbar */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:var(--ground)}
*::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:99px;border:3px solid var(--ground)}
*::-webkit-scrollbar-thumb:hover{background:var(--brand-text)}

/* ---- #8 directed route transitions: deeper slides one way, back the other.
   The chrome does not participate — header, footer and progress bar hold still. ---- */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out var(--dur-exit) var(--ease-exit) both}
  ::view-transition-new(root){animation:vt-in 420ms var(--ease-enter) 80ms both}
  @keyframes vt-out{to{opacity:0;transform:translateY(calc(var(--dir-out,-1) * 10px))}}
  @keyframes vt-in{from{opacity:0;transform:translateY(calc(var(--dir-in,1) * 18px))}}
}
:root[data-dir="in"]{--dir-out:-1;--dir-in:1}
:root[data-dir="out"]{--dir-out:1;--dir-in:-1}
header.site{view-transition-name:hdr}
footer.site{view-transition-name:foot}
#prog{view-transition-name:prog}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}}
/* fallback for browsers without the View Transition API */
#app{min-height:100vh}
#app.entering{animation:app-in 420ms var(--ease-enter) both}
@keyframes app-in{from{opacity:0;transform:translateY(calc(var(--dir-in,1) * 14px))}}

/* ---- #9b cap-height trim and a line-box rhythm. Both are progressive:
   unsupported browsers keep the current metrics exactly. ---- */
@supports (text-box:trim-both cap alphabetic){
  h1,h2{text-box:trim-both cap alphabetic}
}
@supports (margin-top:1rlh){
  h1{margin:0 0 1rlh}h2{margin:0 0 .85rlh}h3{margin:0 0 .5rlh}
  p{margin:0 0 1rlh}.eyebrow{margin:0 0 .85rlh}.lede{margin:0 0 2rlh}
  .sec-head{margin-bottom:2.75rlh}.metrics{margin-top:2rlh}
}

/* Scroll-scrubbed section headings: they keep moving the whole time they are on
   screen rather than animating once and stopping. This is the part that was
   missing - everything before performed once and then sat still. */
.sec-head h2{transform:translateY(calc(var(--scrub,0) * -18px));
  transition:transform .12s linear}
.res,.cell,.office{--tilt:0}

/* screen-reader-only text: distinguishes otherwise identical link labels */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- reveal ---- */
/* Bigger travel, a slight scale and a blur so the arrival actually registers.
   Three subtle effects read as one visible one. */
/* The reveal system hides elements at opacity 0 and shows them on scroll. If the
   script fails - as it did, silently, for days - every hidden element stays hidden
   and the page reads as empty. So hiding is conditional on the script having
   actually started: PHP writes class="no-js" on <html>, and the script removes it
   only once wire() has run without throwing. No script, or a broken one, means the
   content is simply visible. A site that does not animate beats a site that is blank. */
html.no-js .rv,html.no-js .tw{opacity:1!important;transform:none!important;filter:none!important}
.rv{opacity:0;transform:translateY(var(--rise)) scale(.985);filter:blur(6px);
  transition:opacity var(--dur-enter) var(--ease-enter),
             transform var(--dur-enter) var(--ease-enter),
             filter calc(var(--dur-enter) * .7) var(--ease-enter);
  transition-delay:calc(var(--b,0) * var(--beat));will-change:transform,opacity}
.rv.in{opacity:1;transform:none;filter:none;will-change:auto}
/* hero: four movements, three beats apart. Last lands at 1232ms. Hard ceiling 1.3s. */
.hero [data-m="1"]{--b:0}.hero [data-m="2"]{--b:3}.hero [data-m="3"]{--b:6}.hero [data-m="4"]{--b:9}
.tw > i{transition:transform .72s var(--ease-enter);transition-delay:calc(var(--b,0) * var(--beat))}
[id]{scroll-margin-top:calc(var(--hdr-h) + 12px)}
/* --brand is 2.0:1 on the light ground. A theme-aware focus token plus a dark
   inner edge keeps the ring visible on any surface. SC 1.4.11. */
:root{--focus:#007A26}
:root[data-theme="dark"]{--focus:#00CC3E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--focus:#00CC3E}}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--focus) 26%,transparent)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}

/* Declared last on purpose: .res/.office/.demo set their own 1px border further up,
   and at equal specificity the later rule wins. Without this the gradient ring draws
   just inside a still-visible flat border — a double line. */
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .res,.office,.demo,.adstage,.bench{border-color:transparent!important}
}
/* WCAG 2.4.1 Bypass Blocks (Level A). Without this a keyboard user tabs the whole
   header on every one of the 27 routes before reaching content. Hidden until focused,
   then pinned top-left. main#app already carries tabindex="-1" so it can receive focus. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--brand);color:#04120A;padding:12px 20px;border-radius:0 0 6px 0;
  font-family:var(--sans-text);font-weight:var(--w-disp);font-size:.9rem;text-decoration:none}
.skip:focus{left:0}