/* brainylab v3 site: shared tokens, type, components and responsive rules.
   Structure and motion modelled on blue2purple.com, surface on brainylab tokens. */
:root{
  --bg:#0b0e1a; --bg-2:#0f1525; --card:#111827; --elev:#161e30;
  --cyan:#00d4c8; --lime:#aadc32; --pink:#f687d4; --violet:#a99cff;
  --fg:#fff; --muted:#9aa5be; --subtle:#5a6580;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --ease:cubic-bezier(.23,1,.32,1);
  --gutter:clamp(16px,3.4vw,48px);
  /* right inset for absolutely placed hero graphics: pulls them toward the centre of the right half on wide screens */
  --vis-right:clamp(var(--gutter),12vw,260px);
  /* side inset that centres content at 1600px; % resolves against the element's full-width parent, so use it on children of full-bleed boxes */
  --px:max(var(--gutter),calc((100% - 1600px) / 2));
  /* reading column width shared by long-form pages (legal, articles at tablet/mobile) */
  --read-w:720px;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --sans:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;font-family:var(--sans);font-size:16px;line-height:1.55}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--cyan);color:var(--bg)}
.data{font-variant-numeric:tabular-nums lining-nums}

/* ---------- type ---------- */
.disp{font-family:var(--display);font-weight:800;font-stretch:75%;font-variation-settings:"wdth" 75,"opsz" 96;text-transform:uppercase;line-height:.88;letter-spacing:-.01em;margin:0}
.d-xl{font-size:clamp(56px,18.6vw,300px)}
.d-l{font-size:clamp(44px,7.6vw,118px)}
.d-m{font-size:clamp(36px,5vw,76px)}
.d-s{font-size:clamp(24px,2.4vw,34px);line-height:.95}
/* section H2s: ~92px on a 2048 canvas (4.5vw), same size for d-l and d-m */
h2.disp.d-l,h2.disp.d-m{font-size:clamp(44px,4.5vw,92px)}
.eyebrow{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lead{font-size:clamp(16px,1.25vw,18px);color:var(--muted);max-width:520px;margin:0}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.w>.wi{display:inline-block;will-change:transform}

/* highlighted word: a solid box that wipes in behind the text */
.hl{position:relative;display:inline-block;padding:0 .08em;margin:0 -.02em;color:var(--bg);isolation:isolate}
.hl>.hl-bg{position:absolute;inset:.04em 0 0;z-index:-1;transform-origin:left center;background:var(--cyan)}
.hl.lime>.hl-bg{background:var(--lime)}
.hl.pink>.hl-bg{background:var(--pink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:50px;font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.02em;border:0;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease),scale .16s ease-out;white-space:nowrap}
.btn:active{scale:.97}
.btn .arr{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-cyan{background:var(--cyan);color:var(--bg)}
.btn-cyan:hover{box-shadow:0 0 24px rgba(0,212,200,.35)}
.btn-dark{background:var(--bg);color:#fff}
.btn-dark:hover{background:#000}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--cyan);color:var(--cyan)}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#fff;border-bottom:1px solid var(--line-2);padding-bottom:4px;transition:color .2s ease,border-color .2s ease}
.link:hover{color:var(--cyan);border-color:var(--cyan)}

/* ---------- keyboard: visible focus and a skip link ---------- */
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.skip{position:fixed;left:16px;top:12px;z-index:200;padding:12px 18px;border-radius:50px;background:var(--cyan);color:var(--bg);font-weight:600;transform:translateY(-160%);transition:transform .3s var(--ease)}
.skip:focus-visible{transform:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ar-prose .ar-formula{font-size:max(12px,.67em);font-weight:700}
#main{scroll-margin-top:96px}
#main:focus{outline:none}

/* ---------- progress + header ---------- */
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:100;background:var(--cyan);transform-origin:left;transform:scaleX(0)}
.hdr{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:32px;height:72px;padding:0 var(--gutter);transition:transform .45s var(--ease),background .3s ease,box-shadow .3s ease}
.hdr.solid{background:var(--bg);box-shadow:0 1px 0 var(--line)}
.hdr.hide{transform:translateY(-100%)}
.hdr .logo img{height:26px;width:auto}
.hdr nav{display:flex;gap:28px;font-size:14px;color:var(--muted)}
.hdr nav a{transition:color .2s ease}
.hdr nav a:hover{color:#fff}
.hdr .btn{margin-left:auto;height:44px;padding:0 20px;font-size:14px}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(24px,3.5vw,52px) var(--gutter) 0;min-height:calc(100svh - 72px);display:flex;flex-direction:column;overflow:hidden}
.hero h1{position:relative;z-index:2}
.hero h1 .ln{display:block;white-space:nowrap}
.hero h1 .ln2{padding-left:0}
.hero h1 .conn{display:inline-block;font-size:.3em;line-height:1;color:var(--cyan);vertical-align:top;margin-top:.12em}
.hero h1 .ln0{font-size:.3em;line-height:1;margin-bottom:.12em}
.hero h1 .ln0 .conn{font-size:1em;margin-top:0}
.strip{position:absolute;z-index:1;top:-12%;bottom:0;right:clamp(16px,11vw,190px);width:clamp(100px,13vw,200px);}
.strip-tilt{height:100%;transform:rotate(9deg);transform-origin:center;padding:0 24px;margin:0 -24px;
  -webkit-mask-image:linear-gradient(transparent 6%,#000 22%,#000 78%,transparent 94%);mask-image:linear-gradient(transparent 6%,#000 22%,#000 78%,transparent 94%)}
.strip-track{display:flex;flex-direction:column;gap:16px;animation:strip 56s linear infinite;will-change:transform}
/* every screen gets the same frame box, so mixed sources read as one set */
.strip-track img{width:100%;height:auto;aspect-ratio:444/900;object-fit:contain;filter:drop-shadow(0 10px 30px rgba(0,0,0,.5))}
@keyframes strip{to{transform:translateY(-50%)}}
.hero-foot{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:end;margin-top:auto;padding:clamp(48px,6vw,96px) 0 clamp(64px,7vw,112px)}
.hero-foot .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3vw,44px)}
.logos{overflow:hidden;padding:clamp(32px,4vw,56px) 0 clamp(56px,6vw,96px)}
.logos-track{display:flex;gap:clamp(64px,7vw,112px);padding-right:clamp(64px,7vw,112px);width:max-content;animation:marquee 40s linear infinite;align-items:center}
.logos-track img{height:28px;width:auto;filter:brightness(0) invert(1);opacity:.55}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- hero desk: tilted table of project devices (desktop) ---------- */
.desk{position:absolute;z-index:1;top:0;bottom:0;right:0;width:70%;perspective:1500px;perspective-origin:55% 35%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42%),linear-gradient(transparent,#000 4%,#000 90%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 42%),linear-gradient(transparent,#000 4%,#000 90%,transparent);mask-composite:intersect}
.desk-plane{position:absolute;left:-12%;top:50%;width:max-content;transform-style:preserve-3d;transform:translateY(-52%) rotateX(50deg) rotateZ(15deg);transform-origin:30% 50%}
.desk-track{display:flex;gap:34px;width:max-content;transform-style:preserve-3d;animation:desk 140s linear infinite;will-change:transform}
.desk-col{display:flex;flex-direction:column;gap:64px;transform-style:preserve-3d}
.desk-col:nth-child(even){margin-top:190px}
.dcell{position:relative;cursor:pointer;width:200px;height:340px;transform-style:preserve-3d}
.lift{position:absolute;inset:0;display:flex;justify-content:center;transform-style:preserve-3d}
.desk-track.hot-on{animation-play-state:paused}
/* coded phone. Percent radii/padding keep it identical at any size (9:19 box); screenshots are frameless and fill the screen (cover) */
.dev{position:relative;flex:none;height:100%;aspect-ratio:9/19;padding:3.6%;border-radius:19%/9%;background:linear-gradient(150deg,#3b4258,#12151f 55%,#232a3c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transform-style:preserve-3d}
.dev::before,.dev::after{content:"";position:absolute;inset:0;border-radius:inherit;transform:translateZ(-5px);background:#2b3246}
.dev::after{transform:translateZ(-10px);background:#0a0c14}
.dev .sh{position:absolute;inset:6% 4% 2%;border-radius:20%/9%;background:rgba(0,0,0,.7);filter:blur(16px);transform:translateZ(-14px)}
.scr{position:relative;width:100%;height:100%;overflow:hidden;border-radius:15.5%/7.3%;background:var(--bg);container-type:inline-size;transform:translateZ(.5px)}
.scr::before{content:"";position:absolute;z-index:3;top:1.8%;left:50%;width:27%;height:3%;transform:translateX(-50%);border-radius:99px;background:#05070d}
.scr::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 38%)}
.scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transition:opacity .5s}
.scr .on{opacity:1}
.scr .dim{position:absolute;inset:0;z-index:4;background:var(--bg);opacity:.2;transition:opacity .45s;pointer-events:none}
.dcell.hot .dim{opacity:0}
.dcell.away .dev{opacity:0}
.desk-track.hot-on .dcell:not(.hot) .dim{opacity:.65}
.spot{position:absolute;z-index:3;top:0;bottom:0;left:50%;right:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;visibility:hidden}
/* no fade on .spot: the fly-back is the exit, and a fade would flash the full-size card */
.spot.show{opacity:1;visibility:visible}
.spot-card{position:relative;height:68%;display:flex;justify-content:center}
.spot-card .dev{filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
/* the card is flat (filter), so the stacked edge layers would paint over the screen; they only matter on the tilted table */
.spot-card .dim,.spot-card .sh,.spot-card .dev::before,.spot-card .dev::after{display:none}
/* full preview shows the whole screenshot: no island, no glare */
.spot-card .scr::before,.spot-card .scr::after{display:none}
.hero h1{pointer-events:none}
.hero-foot{pointer-events:none}.hero-foot .lead,.hero-foot .cta{pointer-events:auto}
@keyframes desk{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (min-width:821px){.strip{display:none}}
@media (max-width:820px){.desk,.spot{display:none}}
@media (prefers-reduced-motion:reduce){.desk-track{animation:none}}

/* ---------- statement (cyan halftone block) ---------- */
.statement{padding:clamp(40px,6vw,96px) 0}
.stage{position:relative;background:var(--cyan);color:var(--bg);padding:clamp(80px,12vw,180px) var(--gutter);text-align:center;overflow:hidden;will-change:clip-path}
.stage::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 5v6M5 8h6' stroke='%230b0e1a' stroke-opacity='.28' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");background-size:16px 16px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%);pointer-events:none}
.stage>*{position:relative}
.stage h2{max-width:1180px;margin:0 auto}
.stage p{max-width:560px;margin:32px auto 36px;font-size:18px;color:rgba(11,14,26,.78)}

/* ---------- systems list ---------- */
.sys{padding:clamp(48px,6vw,96px) var(--gutter) clamp(64px,8vw,120px)}
.row{--acc:var(--cyan);position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,300px);gap:24px;align-items:center;padding:clamp(18px,2.2vw,30px) 20px;border-top:1px solid var(--line);isolation:isolate;transition:color .35s var(--ease)}
.row:last-child{border-bottom:1px solid var(--line)}
.row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--acc);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.row .num{align-self:start;padding-top:.6em;font-size:14px;font-weight:600;color:var(--subtle);transition:color .35s ease}
.row .t{font-size:clamp(40px,6vw,96px)}
.row .desc{font-size:15px;color:var(--muted);text-align:right;transition:color .35s ease}
.row .desc b{display:block;margin-top:8px;font-size:12px;letter-spacing:.14em;color:var(--acc);transition:color .35s ease}
.row .thumb{position:absolute;z-index:1;left:65%;top:50%;width:clamp(150px,13vw,200px);aspect-ratio:4/3;border-radius:12px;overflow:hidden;pointer-events:none;opacity:0;transform:translate(-50%,-50%) rotate(-4deg) scale(.7);transition:opacity .35s ease,transform .5s var(--ease);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.row .thumb img{width:100%;height:100%;object-fit:cover}
/* Home "Start with the problem": 64px sentence-case titles, image on the right, tilt alternates per row */
.sys .row{--rot:-4deg;grid-template-columns:72px minmax(0,1fr);padding-block:40px}
.sys .row:nth-child(even){--rot:4deg}
.sys .row .t{font-size:64px;line-height:1;letter-spacing:-.015em;text-transform:none;color:var(--acc);transition:color .35s var(--ease)}
.sys .row .thumb{--tw:clamp(220px,17vw,324px);left:calc(100% - 116px - var(--tw)/2);width:var(--tw);transform:translate(-50%,-50%) rotate(var(--rot)) scale(.7)}
@media (hover:hover){
  .row:hover{color:var(--bg)}
  .row:hover::before{transform:scaleY(1)}
  .row:hover .num,.row:hover .desc,.row:hover .desc b{color:var(--bg)}
  .row:hover .thumb{opacity:1;transform:translate(-50%,-50%) rotate(-4deg) scale(1)}
  .sys .row:hover .t{color:var(--bg)}
  .sys .row:hover .thumb{transform:translate(-50%,-50%) rotate(var(--rot)) scale(1)}
}

/* ---------- formats band ---------- */
.formats{padding:clamp(40px,3.9vw,80px) 0;overflow:hidden;}
/* sizes follow the 2048px Figma frame: 72px type, 1.8 line box, .58em gaps, .44em dots */
.band{display:flex;align-items:center;gap:.576em;width:max-content;white-space:nowrap;font-size:clamp(40px,3.5vw,72px);line-height:1.8;letter-spacing:-.0206em}
/* outline drawn under a background-coloured fill: only the outer half of the stroke shows, so overlapping contours inside glyphs (e.g. "A") stay hidden */
.band .o{color:var(--bg);-webkit-text-stroke:6px rgba(255,255,255,.5);paint-order:stroke fill}
/* separators are the brainylab circles, cycling through the four brand colours */
.band .dot{flex:none;width:.444em;aspect-ratio:1;border-radius:50%;background:var(--c,var(--cyan))}
.band .dot.c1{--c:var(--cyan)}.band .dot.c2{--c:var(--lime)}.band .dot.c3{--c:var(--pink)}.band .dot.c4{--c:var(--violet)}
.formats-foot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;padding:clamp(32px,2.8vw,57px) var(--gutter) 0}
.formats-foot .lead{font-size: clamp(16px,1.15vw,20px);line-height:1.4}

/* ---------- cases ---------- */
.cases{background:var(--bg-2);padding:clamp(64px,8vw,128px) var(--gutter)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.3vw,64px);align-items:start}
.col{display:flex;flex-direction:column;gap:clamp(56px,6vw,96px)}
.case{display:block}
.case .img{aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--card)}
:is(.cases,.cols) .case.wide .img{aspect-ratio:16/9}
.case .img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.case:hover .img img{transform:scale(1.05)}
.case .tags{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 12px}
.tag{font-size:12px;font-weight:600;letter-spacing:.12em;padding:4px 9px;border-radius:50px;background:rgba(170,220,50,.12);color:var(--lime);box-shadow:inset 0 0 0 1px rgba(170,220,50,.2)}
.tag.c{background:rgba(0,212,200,.1);color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(0,212,200,.2)}
.tag.p{background:rgba(246,135,212,.1);color:var(--pink);box-shadow:inset 0 0 0 1px rgba(246,135,212,.2)}
.case h3{transition:color .25s ease}
.case:hover h3{color:var(--cyan)}
.case .metric{margin-top:10px;font-size:14px;color:var(--muted)}
.case .metric strong{color:#fff;font-weight:600}
/* homepage cards: stats sit inside the image and appear on hover */
.case h3{text-transform:none}
:is(.cases,.cols) .case .img{position:relative}
:is(.cases,.cols) .case .img::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(11,14,26,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .35s ease}
:is(.cases,.cols) .case .img::after{content:"";position:absolute;z-index:2;right:16px;bottom:16px;width:clamp(40px,2.6vw,50px);aspect-ratio:1;border:1px solid rgba(255,255,255,.1);border-radius:99px;background:rgba(255,255,255,.1) url(arrow-right-short.svg) center/80% no-repeat;opacity:0;transition:opacity .35s ease}
:is(.cases,.cols) .case .ov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 20px;text-align:center;pointer-events:none;opacity:0;transition:opacity .35s ease}
:is(.cases,.cols) .case .ov .metric{margin:0;font-size:clamp(16px,1.3vw,20px);line-height:1.085;color:#c7c7c7}
:is(.cases,.cols) .case .ov .metric+.metric::before{content:"";display:block;width:clamp(80px,6vw,117px);height:1px;margin:0 auto 16px;background:var(--line-2)}
:is(.cases,.cols) .case:hover .img::before,:is(.cases,.cols) .case:hover .img::after,:is(.cases,.cols) .case:hover .ov,
:is(.cases,.cols) .case:focus-visible .img::before,:is(.cases,.cols) .case:focus-visible .img::after,:is(.cases,.cols) .case:focus-visible .ov{opacity:1}
/* no hover on touch: keep the stats visible as a caption over the image foot */
@media (hover:none){
  :is(.cases,.cols) .case .img::before,:is(.cases,.cols) .case .img::after{display:none}
  :is(.cases,.cols) .case .ov{inset:auto 0 0;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px 16px;padding:28px 16px 12px;text-align:left;background:linear-gradient(to top,rgba(11,14,26,.85),rgba(11,14,26,0));opacity:1}
  :is(.cases,.cols) .case .ov .metric{font-size:14px}
  :is(.cases,.cols) .case .ov .metric+.metric::before{display:none}
}
.stats-title{font-size:clamp(32px,2.3vw,46px);margin:calc(clamp(56px,6vw,96px) + 40px) 0 0;text-align:center}
.stats{display:flex;max-width:1200px;margin:clamp(24px,2.5vw,40px) auto 36px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px 0;text-align:center}
.stat .v{font-family:var(--display);font-weight:700;font-stretch:75%;font-variation-settings:"wdth" 75;font-size:clamp(34px,3.4vw,52px);line-height:1;color:var(--cyan)}
.stat:nth-child(2) .v{color:var(--lime)}
.stat:nth-child(3) .v{color:var(--pink)}
.stat .k{font-size:16px;color:var(--muted)}

/* ---------- testimonials ---------- */
.quotes{padding:clamp(80px,10vw,150px) var(--gutter)}
.quote{position:relative;margin:0;display:grid;grid-template-columns:clamp(64px,8vw,120px) minmax(0,1fr);gap:clamp(16px,2.4vw,40px);padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--line)}
.quote:last-child{border-bottom:1px solid var(--line)}
/* lists of any length zig-zag: every second quote steps in, and the mark colour
   cycles through the four brand colours. Set --acc on a quote only to override. */
.quote-list>.quote:nth-child(even){padding-left:clamp(0px,12vw,200px)}
.quote-list>.quote:nth-child(4n+2){--acc:var(--lime)}
.quote-list>.quote:nth-child(4n+3){--acc:var(--violet)}
.quote-list>.quote:nth-child(4n){--acc:var(--pink)}
.quote .mark{font-family:var(--display);font-weight:800;font-size:clamp(96px,12vw,180px);line-height:.7;color:var(--acc,var(--cyan));user-select:none}
.quote blockquote{margin:0;font-family:var(--sans);font-weight:400;font-size:clamp(18px,1.25vw,24px);line-height:1.32;letter-spacing:-.01em;color:#fff;max-width:980px;text-wrap:pretty}
.quote blockquote .qw{display:inline}
.quote figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin-top:clamp(24px,3vw,36px)}
.quote figcaption strong{font-family:var(--display);font-weight:700;font-stretch:75%;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:20px;letter-spacing:.01em}
.quote figcaption span{font-size:14px;color:var(--muted)}
.quote figcaption strong+span{padding-left:16px;border-left:1px solid var(--muted)}

/* ---------- newsletter (pink block) ---------- */
.news{position:relative;background:var(--pink);color:var(--bg);padding:clamp(36px,4.5vw,70px) var(--gutter);overflow:hidden}
.news::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(11,14,26,.2) 1.3px,transparent 1.7px);background-size:11px 11px;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000);mask-image:linear-gradient(90deg,transparent 30%,#000);pointer-events:none}
.news>*{position:relative}
.news{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(48px,6vw,120px);align-items:center}
.news .lc{text-transform:none;letter-spacing:-.02em}
.news-lead{max-width:520px;margin:28px 0 0;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:rgba(11,14,26,.8)}
.news-gets{list-style:none;margin:24px 0 32px;padding:0;display:grid;gap:12px}
.news-gets li{display:flex;align-items:center;gap:14px;font-weight:600;font-size:16px}
.news-gets li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--bg)}
.news form{display:flex;gap:10px;flex-wrap:wrap;max-width:560px}
.news input{flex:1 1 260px;height:52px;border-radius:50px;border:0;padding:0 22px;font:inherit;font-size:15px;background:rgba(11,14,26,.12);color:var(--bg);outline:none;box-shadow:inset 0 0 0 1px rgba(11,14,26,.2);transition:box-shadow .2s ease}
.news input::placeholder{color:rgba(11,14,26,.55)}
.news input:focus{box-shadow:inset 0 0 0 2px var(--bg)}
.news-note{margin:16px 0 0;font-size:14px;color:rgba(11,14,26,.7)}
.news-note a{color:var(--bg);font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* past chapters: three dark cards, zig-zagged like a stack of issues */
.news-issues{position:relative;min-height:clamp(600px,50vw,740px)}
.issue{position:absolute;display:grid;gap:8px;align-content:start;width:min(50%,330px);padding:12px 12px clamp(18px,1.6vw,24px);border-radius:24px;background:var(--bg);color:#fff;box-shadow:0 30px 60px rgba(11,14,26,.35);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.issue:nth-child(1){top:0;left:0;rotate:-3deg;z-index:1}
.issue:nth-child(2){top:50%;right:0;translate:0 -50%;rotate:3deg;z-index:2}
.issue:nth-child(3){bottom:0;left:0;rotate:-2deg;z-index:3}
.issue:hover{transform:translateY(-8px);z-index:4;box-shadow:0 40px 80px rgba(11,14,26,.45)}
.issue-img{aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#161a2e}
.issue-img img{width:100%;height:100%;object-fit:cover;display:block}
.issue-meta,.issue-t,.issue-go{margin-inline:clamp(6px,.7vw,10px)}
.issue-meta{margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.issue-t{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.4vw,22px);line-height:1.1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.issue-go{margin-top:4px;font-size:14px;font-weight:600;color:var(--c)}
@media (max-width:1100px){
  .news{grid-template-columns:1fr}
  .news-issues{min-height:0;display:flex;gap:14px;overflow-x:auto;padding:12px 4px 20px;margin:0 -4px;scroll-snap-type:x mandatory}
  .news-issues{scrollbar-width:none}
  .news-issues::-webkit-scrollbar{display:none}
  .issue,.issue:nth-child(n){position:relative;inset:auto;translate:none;rotate:none;width:auto;flex:0 0 min(78%,340px);scroll-snap-align:start;box-shadow:0 16px 32px rgba(11,14,26,.25)}
}
.news .ok{font-weight:600}
.news .form-err{flex:1 1 100%;color:var(--bg);font-weight:600}
.news .fld-err{margin:10px 0 0;font-size:14px;font-weight:600;color:var(--bg)}
.news input[aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--bg)}

/* ---------- reasons ---------- */
.why{padding:clamp(80px,10vw,150px) var(--gutter) clamp(48px,6vw,80px)}
.why-cta{display:flex;flex-direction:column;align-items:center;gap:24px;margin-top:clamp(48px,6vw,96px);text-align:center}
.why-cta h3{font-size:clamp(22px,1.8vw,28px)}
.grid6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cell{padding:32px 28px 40px;border-right:1px solid var(--line);text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.cell:nth-child(-n+3){border-bottom:1px solid var(--line)}
.cell:nth-child(3n){border-right:0}
.cell svg{width:44px;height:44px;margin-bottom:24px}
.cell h3{margin-bottom:12px}
.cell p{margin:0;font-size:15px;color:var(--muted);max-width:320px}

/* ---------- awards ---------- */
.awards{padding:clamp(48px,6vw,96px) 0 clamp(64px,8vw,120px)}
.awards-head{padding:0 var(--gutter)}
.awards-head h2{max-width:9.5em}
.awards .lwall{margin:0 max(var(--gutter),calc((100% - var(--cw,1600px)) / 2))}

/* ---------- thinking ---------- */
.think{background:var(--bg-2);padding:clamp(80px,10vw,150px) var(--gutter)}
.arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 20px}
.art .cover{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:flex-end;padding:20px;transition:box-shadow .3s ease}
.art .cover::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--dot) 1.2px,transparent 1.6px);background-size:12px 12px;-webkit-mask-image:linear-gradient(200deg,#000,transparent 65%);mask-image:linear-gradient(200deg,#000,transparent 65%)}
/* article cards with a real cover image: photo fills the frame, the topic sits on it as a pill */
.art .cover .kn-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.art:hover .cover .kn-img{transform:scale(1.04)}
.art .cover:has(.kn-img)::before{display:none}
.art .cover .kn-cat{position:absolute;z-index:1;top:14px;left:14px;padding:6px 11px;border-radius:50px;background:rgba(11,14,26,.82);color:var(--acc);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
/* article page cover: the whole image over a blurred fill of itself, so no cover text is cropped */
.ar-cover.has-img{background:var(--card)}
.ar-cover.has-img::before{display:none}
.ar-cover .ar-bg{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(36px) saturate(1.2);opacity:.55}
.ar-cover .ar-fg{position:relative;display:block;width:100%;height:100%;object-fit:contain}
.art .cover span{position:relative;font-size:clamp(48px,5vw,84px);color:var(--acc);transition:transform .6s var(--ease)}
.art:hover .cover{box-shadow:inset 0 0 0 1px var(--acc)}
.art:hover .cover span{transform:translateY(-6px)}
.art h3{margin:18px 0 10px;transition:color .25s ease}
.art:hover h3{color:var(--cyan)}
.art p{margin:0;font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- final cta ---------- */
.final{padding:clamp(96px,13vw,200px) var(--gutter);text-align:center;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;left:50%;bottom:-40%;width:900px;height:900px;transform:translateX(-50%);background:radial-gradient(circle,rgba(0,212,200,.12),transparent 65%);pointer-events:none}
.final.alt{background:var(--bg-2)}
.final>*{position:relative}
.final .cta{margin-top:40px}
.final ul{list-style:none;padding:0;margin:40px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:left}
.final li{font-size:14px;color:var(--muted)}
.final li b{display:block;color:#fff;font-size:12px;letter-spacing:.14em;margin-bottom:6px}
/* the "·" in the markup is hidden; the separator is a drawn circle sitting on the baseline,
   which centres it on the capital height of the label */
.final li b .sep{display:inline-block;width:.4em;height:.4em;margin:0 .3em;border-radius:50%;background:var(--lime);overflow:hidden;text-indent:100%;white-space:nowrap;vertical-align:.15em}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);padding:clamp(56px,6vw,88px) var(--gutter) 0;overflow:hidden}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:40px}
.ftr-top img{height:30px;width:auto}
.ftr-top p{color:var(--muted);font-size:14px;max-width:300px;margin:20px 0 0}
/* social links: the ring fills with the link's accent, the icon tips over, a name tag pops up; idle, they hop in turn */
.soc{display:flex;gap:10px}
.soc a{--c:var(--soc,var(--cyan));position:relative;isolation:isolate;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:color .3s ease,box-shadow .3s ease,transform .5s var(--ease);animation:soc-hop 7s var(--ease) infinite;animation-delay:calc(2s + var(--i) * .14s)}
.soc a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--c);transform:scale(0);transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.soc a::after{content:attr(data-name);position:absolute;bottom:calc(100% + 10px);left:50%;padding:5px 11px;border-radius:50px;background:var(--c);color:var(--bg);font-size:12px;font-weight:700;letter-spacing:.04em;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,8px) scale(.85);transition:opacity .25s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.soc svg{width:22px;height:22px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.soc a:hover,.soc a:focus-visible{color:var(--bg);box-shadow:inset 0 0 0 1.5px var(--c);transform:translateY(-4px)}
.soc a:hover::before,.soc a:focus-visible::before{transform:scale(1)}
.soc a:hover::after,.soc a:focus-visible::after{opacity:1;transform:translate(-50%,0) scale(1)}
.soc a:hover svg,.soc a:focus-visible svg{transform:rotate(-12deg) scale(1.15)}
.soc a:active{transform:scale(.92)}
@keyframes soc-hop{0%,86%,100%{translate:0 0}90%{translate:0 -7px}94%{translate:0 0}97%{translate:0 -2px}}
.ftr-social{margin-top:24px}
/* in the cyan mobile menu: dark rings that fill dark, and pop in after the links */
.menu .soc a{--c:var(--bg);color:var(--bg);box-shadow:inset 0 0 0 1.5px rgba(11,14,26,.35);opacity:0;scale:.3;transition:color .3s ease,box-shadow .3s ease,transform .5s var(--ease),opacity .3s ease,scale .6s cubic-bezier(.34,1.56,.64,1)}
.menu .soc a:hover,.menu .soc a:focus-visible{color:var(--cyan);box-shadow:inset 0 0 0 1.5px var(--bg)}
.menu .soc a::after{color:var(--cyan)}
.menu-open .menu .soc a{opacity:1;scale:1;transition-delay:0s,0s,0s,calc(.32s + var(--i) * .08s),calc(.32s + var(--i) * .08s)}
@media (prefers-reduced-motion:reduce){
  .soc a{animation:none}
  .soc a,.soc a::before,.soc a::after,.soc svg{transition-duration:.01s}
}
.ftr-col{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.ftr-col a{font-family:var(--display);font-weight:700;font-stretch:75%;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:20px;transition:color .2s ease}
.ftr-col a:hover{color:var(--cyan)}
.ftr-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:72px;font-size:12px;color:var(--subtle)}
.ftr-legal a:hover{color:#fff}
.wordmark{margin:56px 0 0;padding:clamp(40px,5vw,80px) 0 clamp(24px,3vw,48px);overflow:hidden;line-height:0}
.wordmark svg{width:100%;height:auto;display:block;overflow:visible;cursor:default}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hdr nav{display:none}
}
@media (max-width:820px){
  .row,.sys .row{grid-template-columns:40px minmax(0,1fr);padding:22px 0;gap:8px 12px}
  .sys .row .t{font-size:clamp(36px,9vw,64px)}
  .row .desc{grid-column:2;text-align:left}
  .row .thumb{display:none}
  .row .num{padding-top:.3em}
  .cols{grid-template-columns:1fr 1fr}
  .col:nth-child(3){display:contents}
  .grid6{grid-template-columns:1fr}
  .cell{border-right:0;border-bottom:1px solid var(--line);text-align:left;align-items:flex-start;padding:28px 0}
  .cell:last-child{border-bottom:0}  .arts{grid-template-columns:1fr 1fr}
  .final ul{grid-template-columns:1fr}
  .ftr-top{grid-template-columns:1fr 1fr}
  .ftr-col{align-items:flex-start}
  .hero-foot{grid-template-columns:1fr}
  /* Mobile hero: headline sized to fill the width, phones run as a tilted horizontal reel under it */
  .hero{min-height:0;padding-top:28px}
  .d-xl{font-size:calc((100vw - 2 * var(--gutter)) / 4.25)}
  .hero h1 .ln0{margin-bottom:.18em}
  .hero h1 .ln2>.conn{display:block;line-height:1;margin:.3em 0 .18em}
  .strip{position:relative;inset:auto;width:auto;height:auto;margin:40px calc(-1 * var(--gutter)) 0;z-index:1}
  .strip-tilt{height:auto;transform:rotate(-5deg);padding:24px 0;margin:0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .strip-track{flex-direction:row;gap:14px;width:max-content;animation:marquee 51s linear infinite}
  /* drop-shadow on 22 moving images is the costliest paint on phones; the device frames carry enough edge */
  .strip-track img{width:clamp(112px,32vw,170px);filter:none}
  .hero-foot{margin-top:0;padding:40px 0 48px}
}
@media (max-width:560px){
  /* section headlines carry more weight on phones */
  .d-l{font-size:clamp(42px,13.2vw,58px)}
  .d-m{font-size:clamp(38px,12.4vw,54px)}
  h2.disp.d-l{font-size:clamp(42px,13.2vw,58px)}
  h2.disp.d-m{font-size:clamp(38px,12.4vw,54px)}
  .hdr .btn{height:40px;padding:0 16px;font-size:13px}
  .hero h1 .ln2{padding-left:0}
  .cols{grid-template-columns:1fr}
  .col{gap:56px}
  /* stats read as a compact ledger: label left, number right */
  .stats-title{margin-top:56px;text-align:left}
  .stats{flex-direction:column;margin:24px 0 28px}
  .stat{flex-direction:row;justify-content:space-between;align-items:baseline;padding:14px 0;text-align:left}
  .stat+.stat{border-top:1px solid var(--line)}
  .stat .k{font-size:13px}
  .stat .v{font-size:34px}
  /* reasons: icon beside the text instead of stacked, so six items stay short */
  .cell{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;padding:24px 0}
  .cell svg{grid-row:span 2;width:40px;height:40px;margin:2px 0 0}
  .cell h3{margin-bottom:6px}
  /* articles: swipeable row instead of six full-height cards */
  .arts{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 8px;scrollbar-width:none;overscroll-behavior-x:contain}
  .arts::-webkit-scrollbar{display:none}
  .art{flex:0 0 78%;scroll-snap-align:start}
  .art .cover{aspect-ratio:16/10}
  .final h2 br{display:none}
  .quote{grid-template-columns:1fr;gap:0}
  .quote-list>.quote:nth-child(even){padding-left:0}
  .quote .mark{font-size:96px;height:.5em;margin-bottom:8px}
  .ftr-top{grid-template-columns:minmax(0,1fr);gap:32px;text-align:center}
  .ftr-top img{margin:0 auto}
  .ftr-top p{margin:20px auto 0}
  .ftr-social{justify-content:center}
  .ftr-col,.ftr-col:last-child{align-items:center}
  .ftr-col a{font-size:17px}
  .ftr-legal{margin-top:48px;flex-direction:column;align-items:center;text-align:center;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .strip-track,.logos-track{animation:none}
}

/* =====================================================================
   SITE LAYER: components the inner pages add on top of the homepage set
   ===================================================================== */

/* ---------- header: active link, burger, full-screen menu ---------- */
.hdr nav a.on{position:relative;color:#fff}
.hdr nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--cyan)}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:0;background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:#fff;cursor:pointer;position:relative;flex:none}
.burger i{position:absolute;left:13px;right:13px;height:2px;background:currentColor;border-radius:2px;transition:transform .45s var(--ease),top .45s var(--ease)}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:25px}
.menu-open .burger{z-index:70;color:var(--bg);box-shadow:inset 0 0 0 1px rgba(11,14,26,.3)}
.menu-open .burger i:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-open .burger i:nth-child(2){top:21px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:65;background:var(--cyan);color:var(--bg);display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:104px var(--gutter) 32px;overflow-y:auto;
  clip-path:circle(0px at calc(100% - var(--gutter) - 22px) 36px);visibility:hidden;transition:clip-path .7s var(--ease),visibility 0s .7s}
.menu-open .menu{clip-path:circle(160vmax at calc(100% - var(--gutter) - 22px) 36px);visibility:visible;transition:clip-path .8s var(--ease)}
.menu-open{overflow:hidden}
.menu nav{display:flex;flex-direction:column;gap:clamp(10px,2.2vh,22px)}
.menu nav a{font-family:var(--display);font-weight:800;font-stretch:75%;font-variation-settings:"wdth" 75,"opsz" 96;text-transform:uppercase;font-size:clamp(46px,12.5vw,96px);line-height:.92;display:flex;align-items:baseline;gap:14px;
  opacity:0;transform:translateY(40px);transition:opacity .5s ease,transform .7s var(--ease)}
.menu nav a small{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;opacity:.55}
.menu nav a.on{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.08em}
.menu-open .menu nav a{opacity:1;transform:none}
.menu-open .menu nav a:nth-child(2){transition-delay:.04s}.menu-open .menu nav a:nth-child(3){transition-delay:.08s}
.menu-open .menu nav a:nth-child(4){transition-delay:.12s}.menu-open .menu nav a:nth-child(5){transition-delay:.16s}
.menu-open .menu nav a:nth-child(6){transition-delay:.2s}.menu-open .menu nav a:nth-child(7){transition-delay:.24s}
.menu-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center;font-size:14px;font-weight:600}

/* ---------- layout primitives ---------- */
.sec{padding:clamp(80px,10vw,150px) var(--gutter)}
.sec.alt{background:var(--bg-2)}
.sec.tight{padding-top:clamp(40px,5vw,72px)}
/* Section heading: title left, description right (right-aligned). One pattern for every section;
   `.stack` puts the description under the title, left-aligned. */
.shead{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:clamp(40px,5vw,80px)}
.shead:not(.stack)>:last-child:not(:first-child){justify-self:end;text-align:right}
.shead .side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.shead.stack{grid-template-columns:1fr}
.kick{display:flex;align-items:center;gap:12px;margin-bottom:clamp(18px,2vw,28px)}
.muted{color:var(--muted)}
.tbc{color:var(--pink);font-style:normal}

/* ---------- page hero ---------- */
.phero{position:relative;padding:clamp(32px,4.5vw,72px) var(--gutter) clamp(56px,7vw,112px);overflow:hidden}
.crumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:clamp(28px,3.4vw,52px)}
.crumb a{transition:color .2s ease}.crumb a:hover{color:#fff}
.crumb .sep{color:var(--subtle)}
.d-hero{font-size:clamp(52px,10.4vw,176px)}
.phero h1{position:relative;z-index:2;max-width:15ch}
.phero h1.wide{max-width:none}
.phero-foot{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 48px;align-items:end;margin-top:clamp(40px,5vw,80px)}
.phero .lead{max-width:560px}
.cta{display:flex;flex-wrap:wrap;gap:14px}
.phero .cta{margin-top:clamp(24px,2.6vw,36px)}
.meta{display:flex;flex-wrap:wrap;gap:12px 40px;border-top:1px solid var(--line);padding-top:20px;margin-top:clamp(40px,5vw,72px)}
.meta div{display:flex;flex-direction:column;gap:6px;font-size:15px}
.meta div span:first-child{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle)}
.fl{display:inline-flex;align-items:center;gap:8px;font-style:normal;white-space:nowrap}
.fl img{width:20px;height:15px;flex:none;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.meta .flags{display:flex;flex-wrap:wrap;gap:8px 16px}

/* ---------- case study header: text left, graphic right, details + KPIs below ---------- */
.cs-top{padding-bottom:clamp(80px,10vw,150px)}
.cs-top:not(:has(.kpis)){padding-bottom:0}
.cs-head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,72px);align-items:stretch}
.cs-txt{min-width:0;align-content:center;}
.cs-top .crumb{margin-bottom:clamp(24px,3vw,44px)}
.cs-top h1{max-width:none;font-size:clamp(44px,5.4vw,92px)}
.cs-vis{min-width:0}
.reveal-img.cs-vis{align-self:start;aspect-ratio:4/3;border-radius:28px}
.cs-top .meta{flex-wrap:wrap;gap:20px clamp(20px,2.2vw,36px);margin-top:clamp(32px,3.6vw,56px)}
.cs-top .meta div{flex:1 1 0;min-width:112px}
.cs-top .kpis{margin-top:clamp(40px,5vw,80px)}
@media (max-width:820px){
  .cs-head{grid-template-columns:1fr}
  .cs-top h1{font-size:clamp(48px,13vw,72px)}
  .reveal-img.cs-vis{min-height:0;aspect-ratio:4/3;border-radius:20px}
}

/* ---------- KPI row ---------- */
.kpis{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));/* border-top:1px solid var(--line); */}
.kpi{padding:28px 24px 0;text-align:center}
.kpi+.kpi{border-left:1px solid var(--line)}
.kpi .v{display:block;font-family:var(--display);font-weight:800;font-stretch:75%;font-variation-settings:"wdth" 75,"opsz" 96;font-size:clamp(48px,6.2vw,104px);line-height:.9;letter-spacing:-.01em}
.kpi .v em{font-style:normal;color:inherit}
.kpi .k{display:block;margin:14px auto 0;font-size:14px;color:var(--muted);max-width:260px}
.note{font-size:12px;color:var(--subtle);margin:24px 0 0}
.kpis+.note{text-align:center}

/* ---------- coloured stage variants (homepage .stage is cyan) ---------- */
.stage.lime{background:var(--lime)}
.stage.pink{background:var(--pink)}
.stage.violet{background:var(--violet)}
.stage.left{text-align:left}
.stage.left h2,.stage.left p{margin-left:0}
.on-acc{color:var(--bg)}
.on-acc .lead,.on-acc p{color:rgba(11,14,26,.75)}
.on-acc .eyebrow{color:rgba(11,14,26,.6)}

/* ---------- sticky stacking cards ---------- */
.stack-cards{display:grid;gap:clamp(20px,3vw,40px)}
.scard{--acc:var(--cyan);position:sticky;top:calc(88px + var(--i,0) * 18px);border-radius:28px;background:var(--acc);color:var(--bg);padding:clamp(24px,3vw,48px);display:grid;align-content:start;gap:clamp(20px,2.4vw,32px);overflow:hidden;transform-origin:50% 0;will-change:transform}
.scard::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 5v6M5 8h6' stroke='%230b0e1a' stroke-opacity='.22' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");background-size:16px 16px;-webkit-mask-image:linear-gradient(200deg,#000,transparent 55%);mask-image:linear-gradient(200deg,#000,transparent 55%);pointer-events:none}
.scard>*{position:relative}
.scard-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 32px;align-items:start}
.scard-top .n{font-family:var(--display);font-weight:800;font-stretch:75%;font-size:clamp(40px,4vw,64px);line-height:.85;opacity:.35}
/* "best for" sits under the title, flush with its first letter */
.scard-top .best{grid-column:2;max-width:560px;margin:0;font-size:16px;line-height:1.5;color:rgba(11,14,26,.78)}
.scard-top .best b{display:block;font-size:12px;letter-spacing:.14em;margin-bottom:6px;color:var(--bg)}
.scard-mid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
/* a card must fit under the sticky offset, so the title and the visual scale with the viewport height */
@media (min-width:821px){.scard-top h3.d-l{font-size:clamp(34px,min(4.6vw,8vh),76px)}.scard .shot{max-height:max(200px,calc(100vh - 540px))}}
.psp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(11,14,26,.2)}
.psp div{padding:18px 18px 18px 0;border-bottom:1px solid rgba(11,14,26,.2);font-size:15px;line-height:1.45}
.psp div:nth-child(odd){border-right:1px solid rgba(11,14,26,.2)}
.psp div:nth-child(even){padding-left:18px}
.psp b{display:block;font-size:12px;letter-spacing:.14em;margin-bottom:6px}
.scard .shot{border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:rgba(11,14,26,.12);box-shadow:0 30px 60px rgba(11,14,26,.25)}
.scard .shot img{width:100%;height:100%;object-fit:cover}
.scard-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.scard .link{color:var(--bg);border-color:rgba(11,14,26,.3)}
.scard .link:hover{color:var(--bg);border-color:var(--bg)}

/* ---------- pick-your-problem rows ---------- */
.picks{border-top:1px solid var(--line)}
.pick{--acc:var(--cyan);position:relative;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:clamp(16px,2vw,26px) 20px;border-bottom:1px solid var(--line);isolation:isolate;transition:color .35s var(--ease)}
.pick::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--acc);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.pick .t{font-size:clamp(30px,4.4vw,72px)}
.pick .t em{font-style:normal;color:var(--acc);transition:color .35s ease}
.pick .go{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color .35s ease}
.pick .go i{font-style:normal;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);font-size:18px;transition:transform .5s var(--ease),box-shadow .3s ease}
@media (hover:hover){
  .pick:hover{color:var(--bg)}
  .pick:hover::before{transform:scaleY(1)}
  .pick:hover .t em,.pick:hover .go{color:var(--bg)}
  .pick:hover .go i{transform:rotate(-45deg);box-shadow:inset 0 0 0 1px var(--bg)}
}

/* picks that name products: same sentence-case title and plain description as the .sys rows */
.picks.prods .pick .t{font-size:clamp(36px,5vw,64px);line-height:1;letter-spacing:-.015em;text-transform:none}
.picks.prods .pick .go{font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;white-space:normal}
.picks.prods .pick .go span{max-width:360px;text-align:right}

/* title-first stacking cards: tagline, number and name over a ruled list, image on the right */
/* flat stack: cards sit one below the other, no pinning or overlap */
.stack-cards.flat .scard{position:relative;top:auto}
.sc2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.3vw,64px);align-items:center}
.sc2-copy{display:grid;gap:clamp(20px,3.7vh,40px);align-content:center}
.sc2-head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(16px,1.7vw,32px);row-gap:8px;align-items:center}
/* "I need…" cards: framework name as a tag above the outcome headline */
.sc2-head.ask{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,.9vw,14px)}
.sc2-head.ask em{font-style:normal;text-transform:uppercase}
@media (max-width:820px){.scard.sc2 .sc2-head.ask h3.disp{font-size:clamp(44px,12.5vw,60px)}}
.scard .tag{padding:6px 14px;font-size:14px;background:transparent;color:var(--bg);box-shadow:inset 0 0 0 1px rgba(11,14,26,.4)}
.sc2-head .n{grid-row:2;font-family:var(--display);font-weight:800;font-stretch:75%;font-variation-settings:"wdth" 75,"opsz" 96;font-size:clamp(34px,min(3.75vw,6.8vh),72px);line-height:1;color:rgba(11,14,26,.35)}
.scard.sc2 h3.disp{grid-row:2;font-size:clamp(34px,min(3.75vw,6.8vh),72px);line-height:1;letter-spacing:-.0105em}
.sc2-rows>div{max-width:600px;padding:clamp(10px,2.2vh,24px) 0;border-top:1px solid rgba(11,14,26,.25)}
.sc2-rows>div:first-child{border-top:0;padding-top:0}
.sc2-rows>div:last-child{padding-bottom:0}
.sc2-rows b{display:block;margin-bottom:6px;font-size:clamp(12px,.73vw,14px);letter-spacing:.11em;color:var(--bg)}
.sc2-rows p{margin:0;font-size:clamp(15px,.94vw,18px);line-height:1.33;color:rgba(11,14,26,.78)}
.sc2-stats,.sc2-split{display:flex;gap:clamp(16px,1.7vw,24px)}
.sc2-stats>div,.sc2-split>div{flex:1 1 0;min-width:0}
.sc2-rows .sc2-stat{display:block;font-family:var(--sans);font-weight:700;font-size:clamp(36px,min(2.9vw,5.2vh),56px);line-height:1.15;color:rgba(11,14,26,.78)}
.scard.sc2 .shot{max-height:none;align-self:center}
@media (max-width:820px){
  .sc2-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .sc2-split{flex-direction:column}
  /* proof stats: one per line, number beside its label, so long figures never collide */
  .sc2-stats{flex-direction:column;gap:12px}
  .sc2-stats>div{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:baseline;column-gap:16px}
  .sc2-rows .sc2-stats .sc2-stat{font-size:32px;white-space:nowrap}
  .sc2-stats p{margin:0}
}
.scard.sc2 .sc2-head.plain .n,.scard.sc2 .sc2-head.plain h3.disp{grid-row:1}
/* secondary button on a coloured card */
.scard .btn-ghost{color:var(--bg);box-shadow:inset 0 0 0 1.5px rgba(11,14,26,.4)}
.scard .btn-ghost:hover{background:var(--bg);color:#fff;box-shadow:inset 0 0 0 1.5px var(--bg)}

/* ---------- horizontal pinned track (desktop), swipe row (mobile) ---------- */
.hs{overflow:hidden}
.hs[data-pin]{cursor:grab}
.hs.is-drag{cursor:grabbing;user-select:none;-webkit-user-select:none}
.hs.is-drag *{pointer-events:none}
.hs-track{display:flex;gap:clamp(16px,2vw,28px);width:max-content;padding:0 var(--px);will-change:transform}
.step{--acc:var(--cyan);flex:none;width:clamp(320px,36vw,560px);min-height:clamp(380px,56vh,560px);border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:32px;position:relative;overflow:hidden}
.step .n{font-family:var(--display);font-weight:800;font-stretch:75%;font-size:clamp(120px,13vw,220px);line-height:.75;color:transparent;-webkit-text-stroke:1.5px var(--acc);margin-left:-.04em}
.step h3{margin-bottom:12px}
.step p{margin:0;font-size:15px;color:var(--muted)}
.step .bar{position:absolute;left:0;right:0;top:0;height:4px;background:var(--acc);transform-origin:left;transform:scaleX(var(--p,0))}
.hs-intro{flex:none;width:clamp(280px,28vw,420px);display:flex;flex-direction:column;justify-content:space-between;padding-right:clamp(16px,3vw,48px)}

/* ---------- FAQ ---------- */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(32px,5vw,96px)}
.faq-wrap .side{position:sticky;top:120px;align-self:start}
.faq-wrap .side .lead{margin-top:24px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:24px;align-items:center;padding:clamp(20px,2.2vw,30px) 0;cursor:pointer;transition:color .25s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:clamp(22px,2.2vw,32px);line-height:1}
.faq summary:hover{color:var(--cyan)}
.faq .pm{position:relative;width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);color:#fff;transition:background .3s ease,color .3s ease,box-shadow .3s ease}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;background:currentColor;border-radius:2px;transition:transform .45s var(--ease)}
.faq .pm::after{transform:rotate(90deg)}
.faq details[open] .pm{background:var(--cyan);color:var(--bg);box-shadow:none}
.faq details[open] .pm::after{transform:rotate(0)}
.faq .ans{padding:0 72px clamp(24px,2.4vw,34px) 0;color:var(--muted);font-size:17px;max-width:780px}
.faq .ans p{margin:0}
.faq .ans p+p{margin-top:12px}
:root{interpolate-size:allow-keywords}
.faq details::details-content{height:0;opacity:0;overflow:hidden;transition:height .45s var(--ease),opacity .3s ease,content-visibility .45s allow-discrete}
.faq details[open]::details-content{height:auto;opacity:1}

/* ---------- card grid (cases, related) ---------- */
.proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px);align-items:start}
.ledger{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.ledger li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.ledger li strong{font-family:var(--display);font-weight:700;font-stretch:75%;font-size:24px;color:#fff;line-height:1;white-space:nowrap}
@media (max-width:1100px){.proof-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.proof-grid{grid-template-columns:1fr;gap:56px}}
.case .desc{margin:8px 0 0;font-size:15px;color:var(--muted)}
.case.is-hidden{display:none}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(40px,5vw,72px)}
.fbtn{height:42px;padding:0 18px;border-radius:50px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line-2);transition:background .25s ease,color .25s ease,box-shadow .25s ease}
.fbtn:hover{color:#fff;box-shadow:inset 0 0 0 1px #fff}
.fbtn.on{background:var(--cyan);color:var(--bg);box-shadow:none}
.fbtn sup{font-size:12px;margin-left:4px;opacity:.7}

/* ---------- editorial label/body rows ---------- */
.ed{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px clamp(32px,5vw,96px);padding:clamp(28px,3vw,44px) 0;border-top:1px solid var(--line)}
.ed:last-child{border-bottom:1px solid var(--line)}
.ed h3{color:var(--acc,#fff)}
.ed p{margin:0;font-size:clamp(18px,1.6vw,24px);line-height:1.45;color:#dfe5f2;max-width:820px;text-wrap:pretty}
.ed p+p{margin-top:16px}

/* ---------- numbered list rows (services, fits) ---------- */
.nlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);counter-reset:n}
.nlist li{counter-increment:n;display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:clamp(16px,1.8vw,24px) 0;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:700;font-stretch:75%;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:clamp(22px,2.4vw,36px);line-height:1}
.nlist li::before{content:counter(n,decimal-leading-zero);font-family:var(--sans);font-size:13px;font-weight:600;color:var(--acc,var(--cyan));letter-spacing:.06em}
.nlist li small{font-family:var(--sans);font-weight:500;font-size:14px;text-transform:none;color:var(--muted);letter-spacing:0;text-align:right}
/* "What we did" lists: full-bleed lines, accent fill rising on hover (type and colours unchanged) */
.nlist li{position:relative;isolation:isolate;text-transform:none;padding-left:var(--px);padding-right:var(--px);transition:color .35s var(--ease)}
.nlist li::before{transition:color .35s ease}
.nlist li::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--acc,var(--cyan));transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.nlist li small{transition:color .35s ease}
@media (hover:hover){
  .nlist li:hover,.nlist li:hover::before,.nlist li:hover small{color:var(--bg)}
  .nlist li:hover::after{transform:scaleY(1)}
}
.sec:has(>.nlist){padding-left:0;padding-right:0}
.sec:has(>.nlist)>:not(.nlist){margin-left:var(--px);margin-right:var(--px)}

/* ---------- feature grid (engine features, benefits) ---------- */
.fgrid{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.fcell{padding:28px 24px 36px 0}
.fcell+.fcell{padding-left:24px;border-left:1px solid var(--line)}
.fcell .ico{display:block;width:40px;height:40px;margin-bottom:28px}
.fcell h3{margin-bottom:10px}
.fcell p{margin:0;font-size:15px;color:var(--muted)}
.on-acc .fgrid,.on-acc .fcell{border-color:rgba(11,14,26,.2)}
.on-acc .fcell p{color:rgba(11,14,26,.78);font-size:16px;line-height:1.5}

/* ---------- image reveal ---------- */
.reveal-img{overflow:hidden;border-radius:24px;background:var(--card)}
.reveal-img img{width:100%;height:100%;object-fit:cover;will-change:transform}
/* parallax images drift down up to 60px: give them that much extra height above the frame so no empty band shows */
@media (min-width:821px){.reveal-img img[data-speed]{height:calc(100% + 60px);margin-top:-60px}}

/* ---------- phone mockups ---------- */
.phones{position:relative}
.phn{position:absolute;width:var(--w,200px);filter:drop-shadow(0 30px 50px rgba(0,0,0,.5))}
.phn img{width:100%;height:auto}

/* ---------- USP card: sits beside a hero device, one icon row per point ---------- */
.uspc{position:absolute;z-index:3;width:var(--uw,250px);padding:16px;border-radius:20px;background:var(--elev);box-shadow:inset 0 0 0 1px var(--line-2),0 24px 60px rgba(0,0,0,.5)}
.uspc-h{display:block;margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle)}
.uspc ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.uspc li{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.uspc li:first-child{border-top:0}
.uspc li>i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;font-size:18px;color:var(--c,var(--cyan));background:color-mix(in srgb,var(--c,var(--cyan)) 15%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,var(--cyan)) 28%,transparent)}
.uspc li span{display:grid;line-height:1.25;font-size:14px;font-weight:600;color:#fff}
.uspc li small{font-size:12.5px;font-weight:500;color:var(--muted)}
@media (max-width:820px){
  .uspc{position:relative;inset:auto;width:min(100%,340px);margin:24px auto 0}
}

/* ---------- article body: text migrated from the old CMS ---------- */
.ar-prose{font-size:clamp(17px,1.25vw,19px);line-height:1.7;color:#dfe5f2}
.ar-prose>*{margin:0}
.ar-prose>*+*{margin-top:1.1em}
.ar-prose h2{margin-top:2.2em;font-family:var(--display);font-weight:700;font-size:clamp(28px,2.6vw,40px);line-height:1.05;letter-spacing:-.01em;color:#fff}
.ar-prose h3,.ar-prose h2.as-h3{margin-top:1.8em;font-family:var(--display);font-weight:700;font-size:clamp(22px,1.9vw,28px);line-height:1.15;color:#fff}
.ar-prose h4{margin-top:1.6em;font-size:1em;font-weight:700;color:#fff}
.ar-prose h2+*,.ar-prose h3+*,.ar-prose h4+*,.ar-prose h2.as-h3+*{margin-top:.6em}
.ar-prose strong{color:#fff;font-weight:600}
.ar-prose a{overflow-wrap:anywhere;color:var(--topic,var(--cyan));text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ar-prose a:hover{text-decoration-thickness:2px}
.ar-prose ul,.ar-prose ol{padding-left:1.3em}
.ar-prose li+li{margin-top:.45em}
.ar-prose li::marker{color:var(--topic,var(--cyan))}
.ar-prose blockquote{padding:clamp(20px,2vw,28px);border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:1.12em;color:#fff}
.ar-prose figure{margin-top:2em;margin-bottom:2em}
.ar-prose figure img,.ar-prose figure video{display:block;width:100%;height:auto;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line)}
.ar-prose code{font-size:.9em;padding:2px 6px;border-radius:6px;background:var(--card)}

/* ---------- playable modal: [data-play] opens a live campaign in a device frame ---------- */
.bg-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:rgba(5,7,13,.86);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s ease}
.bg-modal.on{opacity:1}
.bg-modal[hidden]{display:none}
.bg-modal-in{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;transform:translateY(24px) scale(.97);transition:transform .5s var(--ease)}
.bg-modal.on .bg-modal-in{transform:none}
.bg-modal-bar{display:flex;align-items:center;gap:18px;width:100%;font-size:14px;color:var(--muted)}
.bg-modal-cap{flex:1;font-weight:600;color:#fff}
.bg-modal-open{color:#fff;border-bottom:1px solid var(--line-2)}
.bg-modal-open:hover{color:var(--cyan);border-color:var(--cyan)}
.bg-modal-x{width:44px;height:44px;border-radius:50%;border:0;background:var(--card);color:#fff;font-size:16px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line-2)}
.bg-modal-x:hover{background:var(--lime);color:var(--bg)}
.bg-dev{position:relative;background:#08090b;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.14)}
.bg-dev[data-frame="phone"]{height:min(82vh,760px);aspect-ratio:390/800;padding:12px;border-radius:44px}
.bg-dev[data-frame="desktop"]{width:min(92vw,1180px,calc((82vh - 40px) * 1.6));aspect-ratio:16/10;padding:14px 14px 22px;border-radius:22px}
.bg-dev-scr{width:100%;height:100%;overflow:hidden;border-radius:34px;background:#fff}
.bg-dev[data-frame="desktop"] .bg-dev-scr{border-radius:10px}
.bg-vp{position:relative;width:100%;height:100%;overflow:hidden}
.bg-vp iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;opacity:0;transition:opacity .5s ease;background:#fff}
.bg-vp.ready iframe{opacity:1}
.bg-vp.ready .lq-loader{opacity:0}
.bg-vp .lq-loader{background:var(--bg)}
.menu-open .bg-modal{display:none}
@media (max-width:820px){
  .bg-modal{padding:0;place-items:stretch}
  .bg-modal-in{width:100%;height:100%;gap:0}
  .bg-modal-bar{padding:10px 12px;background:var(--bg)}
  .bg-modal-open{display:none}
  .bg-dev,.bg-dev[data-frame]{flex:1;width:100%;height:auto;aspect-ratio:auto;padding:0;border-radius:0;box-shadow:none}
  .bg-dev-scr,.bg-dev[data-frame="desktop"] .bg-dev-scr{border-radius:0}
}

/* ---------- framework hero graphics: code-built tiles in one accent (--a), like the loyalty calendar ---------- */
.fwv{--a:var(--cyan);position:absolute;z-index:1;right:var(--vis-right);top:clamp(130px,13vw,210px);width:min(34vw,470px);rotate:4deg;display:grid;gap:clamp(8px,.8vw,12px)}
.fwv .tl{position:relative;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line-2);display:grid;place-items:center;text-align:center;font-family:var(--display);font-weight:800;font-stretch:75%;font-size:clamp(14px,1.4vw,22px);line-height:1;text-transform:uppercase;color:var(--subtle)}
.fwv .tl.o{background:color-mix(in srgb,var(--a) 14%,transparent);color:var(--a);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 30%,transparent)}
.fwv .tl.t{background:var(--a);color:var(--bg);box-shadow:0 0 40px color-mix(in srgb,var(--a) 45%,transparent);scale:1.08;z-index:2}
.fwv .tl small{display:block;margin-top:4px;font-family:var(--sans);font-size:clamp(7px,.6vw,9px);font-weight:700;letter-spacing:.1em}
.fwv .fw-row{display:flex;gap:8px;flex-wrap:wrap}
.fwv .fw-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:50px;font-size:12px;font-weight:600;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2)}
.fwv .fw-chip b{color:#fff;font-weight:600}
.fwv .fw-chip.on{background:color-mix(in srgb,var(--a) 14%,transparent);color:var(--a);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 30%,transparent)}
.fwv .fw-chip.on b{color:var(--a)}
.fwv .fw-bar{display:grid;grid-auto-flow:column;gap:6px}
.fwv .fw-bar i{height:6px;border-radius:6px;background:var(--line-2)}
.fwv .fw-bar i.on{background:var(--a)}
@media (max-width:1100px){.fwv{width:min(34vw,380px)}}
@media (max-width:820px){.fwv{position:relative;right:auto;top:auto;width:100%;max-width:420px;margin:56px 0 0;rotate:0deg}}
@media (max-width:560px){.fwv .tl{border-radius:10px}}

/* ---------- forms ---------- */
.form{display:grid;gap:28px}
.fld{display:grid;gap:6px}
.fld>label,.fld>legend{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0}
.fld input:not([type=checkbox]):not([type=radio]){width:100%;min-width:0;height:56px;background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:12px;color:#fff;font:inherit;font-size:clamp(18px,1.6vw,22px);padding:0 16px;outline:none;transition:border-color .25s ease,box-shadow .25s ease}
.fld input::placeholder{color:var(--subtle)}
.fld input:not([type=checkbox]):not([type=radio]):hover{border-color:rgba(255,255,255,.4)}
.fld input:not([type=checkbox]):not([type=radio]):focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,212,200,.16)}
/* number inputs: stepper arrows always visible, drawn as a small rounded chevron pair (Chromium/Safari; Firefox keeps its native, hover-only spinner) */
.fld input[type=number]{--spin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='24' fill='none' stroke='%239aa5be' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l4-4 4 4M3 15l4 4 4-4'/%3E%3C/svg%3E");--spin-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='24' fill='none' stroke='%2300d4c8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l4-4 4 4M3 15l4 4 4-4'/%3E%3C/svg%3E");padding-right:10px}
.fld input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;opacity:1;width:30px;height:38px;margin:0 0 0 10px;border-radius:8px;cursor:pointer;background:var(--spin) center/14px 24px no-repeat,rgba(255,255,255,.06);transition:background-color .2s ease}
.fld input[type=number]::-webkit-inner-spin-button:hover{background:var(--spin-on) center/14px 24px no-repeat,rgba(255,255,255,.12)}
fieldset.fld{border:0;margin:0;padding:0}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pill{position:relative}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill span{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border-radius:50px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:14px;cursor:pointer;transition:background .25s ease,color .25s ease,box-shadow .25s ease}
.pill span:hover{box-shadow:inset 0 0 0 1px #fff}
.pill input:checked+span{background:var(--cyan);color:var(--bg);box-shadow:none}
.pill input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:3px}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--muted);cursor:pointer}
.chk input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line-2);display:grid;place-items:center;cursor:pointer;transition:background .2s ease,box-shadow .2s ease}
.chk input:checked{background:var(--cyan);box-shadow:none}
.chk input:checked::after{content:"";width:10px;height:6px;border:2px solid var(--bg);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.chk a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.done{display:none}
.form.sent>*:not(.done){display:none}
.form.sent .done{display:block}
.form-err{margin:0;font-size:15px;color:var(--pink)}
.form-err a{color:inherit;text-decoration:underline}
.fld-err{margin:-18px 0 0;font-size:14px;color:var(--pink)}
.fld input:not([type=checkbox]):not([type=radio])[aria-invalid=true]{border-color:var(--pink)}
.chk input[aria-invalid=true]{box-shadow:inset 0 0 0 1px var(--pink)}
.done .note{margin-top:12px;font-size:14px;color:var(--muted)}
/* honeypot: off-screen, not display:none, so bots still fill it */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- logo wall ---------- */
.lwall{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr))}
.lwall>*{aspect-ratio:3/2;display:grid;place-items:center;transition:background .3s ease}
.lwall>*:hover,.lwall>a:focus-visible{background:var(--card)}
.lwall img{max-width:52%;max-height:34%;width:auto;height:auto;filter:brightness(0) invert(1);opacity:.6;transition:opacity .3s ease}
.lwall>*:hover img,.lwall>a:focus-visible img{opacity:1}
/* on the lighter alt band --card barely shows, so lift the hover fill */
.sec.alt .lwall>*:hover,.sec.alt .lwall>a:focus-visible{background:var(--elev)}
.lwall.awards{padding:0}
.lwall.awards img{filter:none;opacity:1;max-height:46%}

/* ---------- site layer responsive ---------- */
@media (max-width:1100px){
  .burger{display:block}
  .hdr .btn{margin-left:auto}
  .faq-wrap{grid-template-columns:1fr}
  .faq-wrap .side{position:static}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcell:nth-child(odd){padding-left:0;border-left:0}
  .fcell:nth-child(n+3){border-top:1px solid var(--line)}
  .lwall{--n:4!important}
}
@media (max-width:820px){
  .shead{grid-template-columns:1fr;gap:20px}
  .shead:not(.stack)>:last-child:not(:first-child){justify-self:start;text-align:left}
  .shead .side{align-items:flex-start}
  .phero-foot{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .kpi{padding:22px 0;text-align:left;display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-bottom:1px solid var(--line)}
  .kpi+.kpi{padding-left:0;border-left:0}
  .kpis+.note{text-align:left}
  .kpi .k{margin:0;text-align:right;max-width:180px}
  .scard{position:relative;top:auto;min-height:0}
  .scard-top{grid-template-columns:auto minmax(0,1fr)}
  .scard-top .best{grid-column:1/-1;max-width:none}
  .scard-mid{grid-template-columns:1fr}
  .psp{grid-template-columns:1fr}
  .psp div:nth-child(odd){border-right:0}
  .psp div:nth-child(even){padding-left:0}
  .pick .go span{display:none}
  .pick{padding:18px 0}
  .hs{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain;padding-bottom:8px}
  .hs::-webkit-scrollbar{display:none}
  .hs-track .step{scroll-snap-align:start;width:min(82vw,380px);min-height:380px}
  .hs-intro{display:none}
  .ed{grid-template-columns:1fr;gap:14px}
  .nlist li{grid-template-columns:44px minmax(0,1fr)}
  .nlist li small{grid-column:2;text-align:left}
  .faq .ans{padding-right:0}
  .lwall{--n:3!important}
}
@media (max-width:560px){
  .d-hero{font-size:clamp(48px,16vw,72px)}
  .fgrid{grid-template-columns:1fr}
  .fcell,.fcell+.fcell{padding:24px 0;border-left:0}
  .fcell+.fcell{border-top:1px solid var(--line)}
  .fcell .ico{margin-bottom:18px}
  .scard{border-radius:20px;padding:24px 20px}
  .faq summary{grid-template-columns:minmax(0,1fr) 40px;gap:16px}
  .faq .pm{width:40px;height:40px}
  .meta{gap:16px 28px}
  .lwall{--n:2!important}
  .hdr .btn{display:none}
}
.final .cta{justify-content:center}
@media (max-width:560px){.burger{margin-left:auto}}
/* open menu: header floats above it so the close button and logo stay reachable */
.menu-open .hdr{z-index:70;background:transparent;box-shadow:none;transform:none}
.menu-open .hdr .logo img{filter:brightness(0)}
.menu-open .hdr .btn,.menu-open .hdr nav{visibility:hidden}
/* long button labels wrap on narrow phones instead of pushing the page sideways */
@media (max-width:560px){.btn{white-space:normal;height:auto;min-height:52px;padding:12px 22px;line-height:1.25}}
/* phones: standalone CTA buttons span the full width of their container */
@media (max-width:560px){
  .cta,.nf-links,.why-cta,.calc-cta,.scard-foot{flex-direction:column;align-items:stretch}
  .cta .btn,.nf-links .btn,.why-cta .btn,.calc-cta .btn,.scard-foot .btn,.stage>.btn,.news form .btn,.fcard2 .btn,.done .btn{display:flex;width:100%;justify-content:center;text-align:center}
  .news form .btn{flex:1 1 100%}
}
.lc{text-transform:none;letter-spacing:-.02em}
.hl.violet>.hl-bg{background:var(--violet)}
.tag.v{background:rgba(169,156,255,.12);color:var(--violet);box-shadow:inset 0 0 0 1px rgba(169,156,255,.25)}
.scard .eyebrow,.stage .eyebrow{color:rgba(11,14,26,.6)}
/* stacking cards: keep each card on its own stable layer; the dim is a cheap opacity overlay */
.scard{backface-visibility:hidden;transform:translateZ(0)}
.scard>.scard-dim{position:absolute;inset:0;z-index:5;background:var(--bg);opacity:0;pointer-events:none;border-radius:inherit}

/* ---------- live products: tabs pick a product, a phone frame runs the real thing ---------- */
.lq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,96px);align-items:center}
.lq-tabs{display:grid;gap:10px}
.lq-tab{--acc:var(--cyan);display:grid;grid-template-columns:44px minmax(0,1fr) 40px;gap:16px;align-items:start;width:100%;text-align:left;padding:20px 22px;border:0;border-radius:20px;background:transparent;color:#fff;font:inherit;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);transition:background .3s ease,box-shadow .3s ease}
.lq-tab:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.lq-tab[aria-selected="true"]{background:var(--card);box-shadow:inset 0 0 0 1px var(--acc)}
.lq-n{font-size:13px;font-weight:600;color:var(--acc);padding-top:.35em}
.lq-tx{display:grid;gap:0}
.lq-h{font-size:clamp(22px,2.1vw,30px);line-height:1}
.lq-d,.lq-c{display:block;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .3s ease,margin .45s var(--ease)}
.lq-d{font-size:15px;color:var(--muted)}
.lq-c{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.lq-tab[aria-selected="true"] .lq-d{max-height:160px;opacity:1;margin-top:10px}
.lq-tab[aria-selected="true"] .lq-c{max-height:40px;opacity:1;margin-top:10px}
.lq-go{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);font-size:12px;color:var(--muted);transition:background .3s ease,color .3s ease,box-shadow .3s ease}
.lq-tab[aria-selected="true"] .lq-go{background:var(--acc);color:var(--bg);box-shadow:none}
.lq-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.lq-phone{height:clamp(520px,74vh,720px);aspect-ratio:590/1197;padding:.8%;border-radius:15%/7.4%;background:linear-gradient(145deg,#e4e6ea,#8d929b 30%,#c8ccd2 55%,#6f747d);box-shadow:0 28px 60px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.35)}
.lq-bezel{width:100%;height:100%;padding:1.8%;border-radius:14%/6.9%;background:#08090b}
.lq-screen{position:relative;width:100%;height:100%;border-radius:12.5%/5.9%;overflow:hidden;background:var(--bg);display:flex;flex-direction:column;isolation:isolate}
.lq-status{position:relative;flex:none;height:6.2%;display:flex;align-items:center;justify-content:space-between;padding:0 9%;background:#000;color:#fff;font-size:11px;font-weight:600}
.lq-notch{position:absolute;top:0;left:50%;width:36%;height:78%;transform:translateX(-50%);background:#08090b;border-radius:0 0 14px 14px}
.lq-sig{display:flex;gap:5px;align-items:center;font-size:10px}
.lq-sig b{width:20px;height:10px;border-radius:3px;border:1px solid rgba(255,255,255,.5);padding:1px;display:block}
.lq-sig b i{display:block;width:80%;height:100%;border-radius:1.5px;background:#fff}
.lq-vp{position:relative;flex:1;min-height:0;overflow:hidden}
.lq-vp .lq-frame{position:absolute;left:0;top:0;width:390px;border:0;display:block;background:transparent;transform-origin:0 0;opacity:0;transition:opacity .5s ease}
.lq-vp.ready .lq-frame{opacity:1}
.lq-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .4s ease}
.lq-vp.ready .lq-loader{opacity:0}
.lq-loader i{width:14px;height:14px;border-radius:50%;background:#00d4c8;animation:lqPulse 1.1s ease-in-out infinite}
.lq-loader i+i{background:#aadc32;animation-delay:.15s}
@keyframes lqPulse{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1);opacity:1}}
.lq-cap{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:14px;color:var(--muted)}
.lq-cap a{color:#fff;border-bottom:1px solid var(--line-2);transition:color .2s ease,border-color .2s ease}
.lq-cap a:hover{color:var(--cyan);border-color:var(--cyan)}
@media (max-width:820px){
  .lq{grid-template-columns:minmax(0,1fr)}
  .lq-stage{order:-1}
  .lq-phone{height:min(78vh,620px)}
  .lq-tab{grid-template-columns:32px minmax(0,1fr) 36px;padding:16px;gap:12px}
  .lq-go{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){.lq-loader i{animation:none}}
.lq-tabs:only-child{grid-column:1/-1}

/* ---------- content width ----------
   Section backgrounds stay full-bleed; side padding centres the content at --cw
   (1600px, or 960px for the closing CTA). Scrollers stay full width. */
:is(.stage,.sec,.cases,.quotes,.news,.why,.think,.final,.awards-head){
  padding-left:max(var(--gutter),calc((100% - var(--cw,1600px)) / 2));
  padding-right:max(var(--gutter),calc((100% - var(--cw,1600px)) / 2))}
.final{--cw:960px}

/* ---------- full-bleed hover rows ----------
   The row, its dividers and its hover fill span the viewport; the content inside stays on the container. */
.sys{padding-left:0;padding-right:0}
.sys>.shead,.sys .row,.picks .pick{padding-left:var(--px);padding-right:var(--px)}
.sys .row .thumb{left:calc(100% - var(--px) - 116px - var(--tw) / 2)}
.sec:has(>.picks){padding-left:0;padding-right:0}
.sec:has(>.picks)>:not(.picks){margin-left:var(--px);margin-right:var(--px)}

/* .sys rows that carry a description: number | title | description, hover image sits between title and description */
@media (min-width:821px){
  .sys .row:has(.desc){grid-template-columns:72px minmax(0,1fr) minmax(0,360px)}
  .sys .row:has(.desc) .thumb{left:58%}
}

/* ---------- swipe rows (phones): progress rail + hint, built by v3.js ---------- */
.swipe-rail{display:flex;align-items:center;gap:14px;margin-top:14px;color:var(--muted)}
.swipe-rail[hidden]{display:none}
.swipe-track{position:relative;flex:1;height:3px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,currentColor 24%,transparent)}
.swipe-track i{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--rail-thumb,var(--cyan));will-change:transform}
.swipe-hint{display:inline-flex;gap:6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;transition:opacity .3s ease}
.swipe-hint b{font-weight:600;animation:swipe-nudge 1.6s ease-in-out infinite}
.swipe-rail.touched .swipe-hint{opacity:0}
.news .swipe-rail{color:var(--bg);--rail-thumb:var(--bg)}
/* the news grid gap would push the rail away from its row */
.news-issues+.swipe-rail{margin-top:calc(-1 * clamp(48px,6vw,120px) + 4px)}
@keyframes swipe-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.swipe-hint b{animation:none}}

/* ---------- cookie banner (assets/v3/tracking.js) ---------- */
.cc{position:fixed;z-index:1000;left:max(var(--gutter),env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));width:min(440px,calc(100vw - 2 * var(--gutter)));padding:22px 22px 20px;background:var(--elev);border-radius:20px;box-shadow:inset 0 0 0 1px var(--line-2),0 24px 60px rgba(0,0,0,.5);animation:cc-in .4s var(--ease)}
.cc-t{margin:0 0 6px;font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em}
.cc-p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.cc-p a{color:var(--fg);text-decoration:underline;text-underline-offset:2px}
.cc-opts{display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.cc-opts[hidden]{display:none}
.cc-o{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--muted);cursor:pointer}
.cc-o b{display:block;color:var(--fg);font-weight:600}
.cc-o input{margin-top:3px;width:16px;height:16px;accent-color:var(--cyan);flex:none}
.cc-b{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cc-b .btn{height:42px;padding:0 18px;font-size:14px}
@keyframes cc-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cc{animation:none}}