/* Dribline: design tokens pulled from the Figma file (1512px desktop frame) */
:root{
  --bg:#050505;
  --text:#ffffff;
  --muted:#555555;
  --sec:#9b9b9b;
  --line:#191919;
  --card:#0f0f0f;
  --light:#f5f5f5;
  --l-muted:#828282;
  --l-sec:#656565;
  --l-line:#d8d8d8;
  --red:#e20a1f;
  --red-deep:#c8081b;
  --red-hi:#ff5a64;
  --ease:cubic-bezier(.22,.8,.2,1);
  --soft:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --gut:clamp(20px,7.67vw,116px);
  --font:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--bg);color:var(--text);font-family:var(--font);font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ol{margin:0;padding:0}
ol{list-style:none}
:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:6px}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--red);color:#fff;padding:10px 16px;border-radius:24px;transition:top .3s var(--ease)}
.skip:focus{top:16px}
main{display:block;outline:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

.wrap{width:min(1280px,100% - var(--gut)*2);margin-inline:auto;position:relative}

/* ---------- page environment (fixed, whisper level) ---------- */
.env{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.env__glow{position:absolute;width:70vmax;height:70vmax;left:50%;top:50%;margin:-35vmax 0 0 -35vmax;border-radius:50%;background:radial-gradient(circle,rgba(255,0,0,.02),rgba(255,0,0,0) 60%);animation:drift 70s linear infinite;animation-delay:-20s}
.env__grain{display:none;position:absolute;inset:-50%;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift{0%{transform:translate(-18vw,-12vh)}50%{transform:translate(18vw,14vh)}100%{transform:translate(-18vw,-12vh)}}


/* ---------- type ---------- */
.eyebrow{font-size:14px;line-height:18px;font-weight:400;letter-spacing:0;text-transform:uppercase;color:var(--muted)}
.eyebrow--dark{color:var(--l-sec)}
.h1{font-size:58px;line-height:71px;font-weight:500;letter-spacing:-.6px;margin-top:16px}
.h2{font-size:44px;line-height:53px;font-weight:600;letter-spacing:-.44px;margin-top:14px}
.h2--dark{color:var(--bg);margin-top:0;letter-spacing:-.7px}
.h2--c{text-align:center}
.muted{color:var(--muted)}
.muted-l{color:var(--l-muted)}
.line{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.line__in{display:block;transform:translateY(0);transition:transform 1.15s var(--soft)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;border-radius:24px;font-size:16px;line-height:1;font-weight:500;white-space:nowrap;isolation:isolate;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease),background-color .4s var(--ease)}
/* ---------- buttons (Figma "Button" component: default / hover / pressed) ---------- */
/* Red fill = soft blurred lights from the Figma "Gradient Animation" palette that glide to new random spots
   (main.js picks a spot, CSS glides there over ~3 s, so the motion is slow and never repeats).
   Hover (like iconsax.io): a dark core grows out of the middle, leaving a thin living red rim. */
.grad-red{background:#f50303;isolation:isolate}
.gfx{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:0;pointer-events:none}
/* the blurred lights must never bleed past the rounded shape (overflow alone leaks a square corner) */
.btn .gfx{clip-path:inset(0 round 24px)}
.card--red .gfx{clip-path:inset(0 round 12px)}
.gfx__blobs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .6s var(--ease)}
.gfx__blobs i{position:absolute;width:var(--bs,100px);height:var(--bs,100px);border-radius:50%;filter:blur(var(--bb,12px));
  transition:transform 3.2s cubic-bezier(.45,.05,.55,.95);will-change:transform}
.gfx__blobs i:nth-child(1){background:#f86262}
.gfx__blobs i:nth-child(2){background:#780808}
.gfx__blobs i:nth-child(3){background:#ff0000}
.gfx__blobs i:nth-child(4){background:#bf0b0b}
.gfx__blobs i:nth-child(5){background:#f25b5b}
.gfx__blobs i:nth-child(6){background:#870707}
.gfx__core{position:absolute;inset:2px;border-radius:inherit;background:#050505;
  opacity:0;filter:blur(10px);transform:scale(.95);transition:opacity .5s var(--ease),filter .5s var(--ease),transform .5s var(--ease)}
.btn>span:not(.gfx){position:relative;z-index:1}

/* primary: red -> hover: black core grows from the middle with a moving red rim */
.btn--red{color:#fff;border:0}
.btn--red:hover .gfx__core{opacity:1;filter:blur(0);transform:scale(1)}
.btn--red:hover .gfx__blobs{transform:scale(1.1)}
.btn--red:active{transform:scale(.98)}

/* outline (Get Started): black core with a moving red rim -> hover: the core melts away into red */
.btn--outline{color:#fff;padding:0 24px}
.btn--outline .gfx__core{opacity:1;filter:blur(0);transform:scale(1)}
.btn--outline .gfx__blobs{transform:scale(1.1)}
.btn--outline:hover .gfx__core{opacity:0;filter:blur(10px);transform:scale(.95)}
.btn--outline:hover .gfx__blobs{transform:scale(.8)}
.btn--outline:active{transform:scale(.98)}

/* the red card uses the same living fill, with larger, softer lights */
.card--red .gfx{--bs:72%;--bb:30px}
.card--red .gfx__blobs i{width:auto;aspect-ratio:1;height:auto;min-width:var(--bs)}
.card--red>*:not(.gfx){position:relative;z-index:1}
.card--red::after{z-index:2}

/* ghost: grey rim -> hover: lighter rim -> pressed: grey fill */
.btn--ghost{border:1px solid #3b3b3b;padding:0 25px;color:#fff;transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease)}
.btn--ghost:hover{border-color:#7a7a7a;background:rgba(255,255,255,.04)}
.btn--ghost:active{background:#3d3d3d;border-color:#5a5a5a;transform:scale(.98)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:72px;transition:transform .5s var(--ease),background-color .4s var(--ease)}
.nav::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.48) 0%,rgba(5,5,5,0) 100%);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:opacity .4s var(--ease)}
.nav__inner{position:relative;height:100%;width:min(1280px,100% - var(--gut)*2);margin:0 auto;display:flex;align-items:center}
.logo{display:inline-flex;align-items:center;color:#fff;line-height:0}
.logo svg{display:block;width:103px;height:auto;overflow:visible}
.logo-sq{fill:var(--sq,#ff0000)}
.nav .logo{margin-left:2px}
.nav__links{display:flex;align-items:center;gap:0;margin-left:49px}
.nav__link{position:relative;font-size:16px;line-height:20px;color:var(--sec);padding:6px 0;margin-right:28px;display:inline-flex;align-items:center;gap:5px;transition:color .3s var(--ease)}
.nav__link:hover,.nav__link[aria-expanded="true"]{color:#fff}
.nav__link svg{position:relative;top:1.5px;transition:transform .3s var(--ease)}   /* centred on the lowercase letters, as in Figma */
.nav__link[aria-expanded="true"] svg{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 12px);left:-14px;min-width:170px;padding:8px;border-radius:14px;background:rgba(15,15,15,.96);border:1px solid var(--line);display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.drop a{padding:10px 12px;border-radius:9px;color:var(--sec);text-align:left;transition:background-color .25s,color .25s}
.drop a:hover{background:#1a1a1a;color:#fff}
.nav__link[aria-expanded="true"] .drop{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.nav__cta{margin-left:auto}
.burger{display:none}
.menu{display:none}

/* ---------- 1. hero ---------- */
.hero{position:relative;height:auto}
.hero__stage{position:relative;height:calc(100vh / var(--z,1));min-height:640px;overflow:hidden}
.hero__media{position:absolute;inset:0}
.gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero__media.gl-ready .hero__poster{opacity:0}
.hero__poster{transition:opacity .6s}
.hero__poster{position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;background:center/cover no-repeat}
.hero__fade{position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(to bottom,rgba(5,5,5,0),var(--bg));pointer-events:none}
.hero__content{position:relative;z-index:2;padding-top:214px}
.hero__lede{width:486px;max-width:100%;margin-top:26px;font-size:16px;line-height:22px;color:#fff}
.hero__ctas{display:flex;gap:13px;margin-top:48px}
.marquee{position:absolute;z-index:2;left:max(var(--gut),(100% - 1280px)/2);right:max(var(--gut),(100% - 1280px)/2);top:min(848px,calc(100% - 92px));height:46px;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marq var(--dur,40s) linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__set{display:flex;align-items:center;gap:53px;padding-right:53px}
.marquee__set img{height:45px;width:auto;opacity:.95}
.betc{font-size:20px;letter-spacing:.2px;color:#6a6a6a;font-weight:300}
.betc b{font-weight:600}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- 2. services (pinned) ---------- */
.services{position:relative;padding:129px 0 95px}
.services__grid{display:grid;grid-template-columns:1fr 624px;align-items:start}
.services__pin{align-self:stretch;margin-bottom:-95px}   /* reach the section's bottom edge, so the pinned column never gets pushed up before the panel pins */
.services__sticky{position:sticky;top:max(96px,calc(50vh / var(--z,1) - 318px));padding-top:4px}
.dmark{display:block;margin:56px 0 0 0;height:clamp(400px,calc(100vh / var(--z,1) - 370px),520px);width:auto;aspect-ratio:440/400;position:relative;perspective:1000px;cursor:pointer;border-radius:24px;mix-blend-mode:lighten}
.dmark__tilt{display:block;position:relative;width:100%;height:100%;transition:filter .5s var(--ease)}
.dmark__tilt.gl-ready img{opacity:0}
.dmark__gl{pointer-events:none;inset:-22% -26%;width:152%;height:144%}
.dmark img{width:100%;height:100%;pointer-events:none;user-select:none}
.dmark:hover .dmark__tilt{filter:drop-shadow(0 0 28px rgba(255,0,0,.22))}
.dmark__hint{position:absolute;left:50%;bottom:-52px;transform:translate(-50%,8px);font-size:13px;letter-spacing:.4px;text-transform:uppercase;color:#fff;padding:8px 14px;border-radius:20px;background:rgba(217,7,28,.9);opacity:0;transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none}
.dmark:hover .dmark__hint{opacity:1;transform:translate(-50%,0)}
.services__count{display:none}
.vlist{margin-right:-24px}
.vitem a{position:relative;display:block;padding:29px 72px 22px 24px;border-radius:16px;border-bottom:1px solid var(--line);transition:background-color .45s var(--ease)}
.vitem a:hover{background:#0b0b0b}
.vitem__n{display:block;font-size:17px;line-height:20px;color:var(--muted);transition:color .4s}
.vitem__t{display:block;margin-top:16px;font-size:20px;line-height:26px;font-weight:500;color:#fff}
.vitem__d{display:block;margin-top:14px;font-size:14px;line-height:20px;color:var(--sec);max-width:520px}
.vitem__a{position:absolute;right:33px;top:77px;width:19px;height:19px;color:var(--sec);transition:transform .45s var(--ease),color .45s}
.vitem a:hover .vitem__a{transform:rotate(45deg);color:var(--ink,#fff)}
.vitem a:hover .vitem__n{color:var(--ink,#fff)}
.vitem.is-on .vitem__n{color:#fff}

/* ---------- section transitions: panels open up as they arrive ---------- */

/* ---------- 3. full cycle ---------- */
.cycle{position:relative;background:var(--light);color:var(--bg);padding:121px 0 260px;overflow:hidden}
.cycle__grad{position:absolute;inset:-20%;pointer-events:none;-webkit-mask:linear-gradient(to bottom,transparent 14%,#000 32%,#000 55%,transparent 80%);mask:linear-gradient(to bottom,transparent 14%,#000 32%,#000 55%,transparent 80%);background:
  radial-gradient(40% 50% at 15% 20%,rgba(255,0,0,.05),rgba(255,0,0,0) 70%),
  radial-gradient(45% 55% at 85% 90%,rgba(0,0,0,.035),rgba(0,0,0,0) 70%);animation:cyc 26s ease-in-out infinite alternate;animation-delay:-6s}
@keyframes cyc{to{transform:translate(4%,-3%) rotate(4deg)}}
.cycle .wrap{position:relative}
.cycle__top{display:grid;grid-template-columns:640px 1fr}
.cycle__top .eyebrow{margin-top:-11.5px}
.cycle__top .eyebrow{align-self:start;transform:translateY(10px)}
.cycle__copy{margin-top:-12px}
.cycle__p{margin-top:19.5px;font-size:16px;line-height:22px;color:var(--l-sec);max-width:640px}
.rule{height:1px;margin-top:80px;transform-origin:left;transform:scaleX(1);transition:transform .8s var(--ease)}
.rule--light{background:var(--l-line)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);column-gap:32px;margin-top:70px;text-align:center}
.stat__v{font-size:64px;line-height:64px;font-weight:600;letter-spacing:-1.3px;color:var(--bg);font-variant-numeric:tabular-nums;white-space:nowrap}
.sfx{color:var(--l-muted);font-weight:400}
.sfx--slash{margin:0 2px}
.sfx--pct{font-size:70px}
.sfx--lt{font-size:66px;margin-right:4px}
.sfx--s{font-size:60px;margin-left:3px}
.stat__l{margin-top:8px;font-size:16px;line-height:20px;color:var(--l-sec)}

/* ---------- 4. why ---------- */
.why{position:relative;padding:120px 0 75px;background:var(--bg)}
.why .h2{margin-top:13.5px}
.cols{display:grid;grid-template-columns:repeat(4,265px);justify-content:space-between;margin-top:40px}
.col{position:relative;padding-bottom:0;transition:transform .6s var(--ease)}
.col::after{content:"";position:absolute;top:10px;bottom:19px;right:-37px;width:1px;background:var(--line)}
.col:last-child::after{display:none}
.col__art{width:280px;height:235px;margin-left:0}
.col__art img{width:280px;height:235px;mix-blend-mode:lighten;transition:filter .6s var(--ease),transform .8s var(--ease)}
.col__t{margin-top:36px;font-size:16.3px;line-height:24px;font-weight:500;color:#fff}
.col__d{margin-top:11px;font-size:15px;line-height:20px;color:var(--sec)}


/* ---------- 5. numbers ---------- */
.numbers{padding:101px 0 0}
.numbers .h2{margin-top:13.5px}
.numbers__sub{margin-top:12.5px;font-size:16px;line-height:22px;color:#fff}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}
.card{position:relative;height:232px;padding:25px 24px 0;border-radius:12px;background:var(--card);border:1px solid var(--line);overflow:hidden}
.card::after{content:"";position:absolute;top:0;right:0;width:18px;height:18px;background:#ff0000;transform:scale(0);transform-origin:100% 0;transition:transform .45s var(--ease)}
.card:hover::after{transform:scale(1)}
.card--red::after{display:none}   /* no black corner square on the red card */
.card__n{display:block;height:16px;font-size:13px;line-height:16px;color:#5b5b5b;transition:color .35s var(--ease)}
.card:hover .card__n{color:#fff}
.card__v{margin-top:40px;height:52px;display:flex;align-items:baseline;font-size:53px;line-height:52px;font-weight:500;letter-spacing:-1px;font-variant-numeric:tabular-nums;white-space:nowrap;transform-origin:0 100%;transition:transform .5s var(--ease)}
.card:hover .card__v{transform:scale(1.13)}
.card__v .lt{font-size:28px;color:#5b5b5b;font-weight:400;margin-right:6px;align-self:center;transform:translateY(-8px)}
.card__v .u{font-size:30px;color:#5b5b5b;font-weight:400;margin-left:3px;letter-spacing:0}
.card__hr{height:1px;background:#222;margin-top:17px}
.card__t{margin-top:15px;font-size:16px;line-height:22px;font-weight:500}
.card__s{margin-top:5px;font-size:14px;line-height:20px;color:#9f9f9f}
.card--red{border-color:transparent}
.card--red .card__n,.card--red .card__v .u{color:rgba(255,255,255,.8)}
.card--red .card__n{color:rgba(255,255,255,.33)}   /* Figma: the infinity mark is white at ~33% over the red */
.card--red .card__hr{background:rgba(255,255,255,.3)}
.card--red .card__s{color:#fff}
@keyframes redflow{0%{background-position:0% 0%}100%{background-position:100% 100%}}

/* ---------- 6. cta ---------- */
.cta{position:relative;padding:206px 0 0;height:682px;overflow:hidden;text-align:center}
.cta__in{position:relative;z-index:2}
.cta .h2{margin-top:14.5px}
.cta__p{margin-top:20.5px;font-size:16px;line-height:22px;color:#fff}
.cta .btn{margin-top:48px;padding:0 27px}
.watermark{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(1328px,88vw);color:#0f0f0f;--sq:#0f0f0f;stroke:#141414;stroke-width:1px;line-height:0;pointer-events:none;user-select:none;z-index:1}
.watermark svg{display:block;width:100%;height:auto}
.js-motion .watermark{transform:translate(-50%,104%);opacity:.2;transition:transform 1.4s cubic-bezier(.16,1,.3,1),opacity .9s var(--ease);will-change:transform}
.js-motion .watermark.up{transform:translate(-50%,0);opacity:1}

/* ---------- footer ---------- */
.footer{position:relative;border-top:1px solid var(--line);padding:39px 0 22px;background:var(--bg)}
.footer__top{display:flex;justify-content:space-between;align-items:flex-start}
.footer .logo svg{width:103px}
.footer__tag{margin-top:12px;font-size:14px;line-height:20px;color:var(--sec)}
.footer__links{display:flex;gap:43px;margin-top:20px}
.footer__links a{font-size:14px;line-height:20px;color:#fff;transition:color .3s}
.footer__links a{transition:opacity .3s var(--ease)}
.footer__links a:hover{opacity:.6}
.footer__bot{display:flex;justify-content:space-between;align-items:center;margin-top:41px;padding-top:25px;border-top:1px solid var(--line)}
.footer__bot p{font-size:14px;line-height:20px;color:var(--sec)}
.li{display:inline-flex;margin-right:3px;color:#fff;transition:color .3s,transform .3s var(--ease)}
.li:hover{transform:translateY(-4px)}
.footer.is-flash .li{animation:liflash .9s var(--ease) 2}
@keyframes liflash{0%,100%{transform:none}40%{transform:translateY(-8px)}}

/* ---------- reveals (added by JS only when motion is allowed) ---------- */
.js-motion [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--soft),transform 1.25s var(--soft)}
.js-motion [data-reveal].in{opacity:1;transform:none}
.js-motion .line__in{transform:translateY(110%)}
.js-motion .in .line__in,.js-motion .line.in .line__in{transform:none}
.js-motion .line:nth-child(2) .line__in{transition-delay:.05s}
.js-motion .line:nth-child(3) .line__in{transition-delay:.1s}
.js-motion .rule[data-draw]{transform:scaleX(0)}
.js-motion .rule[data-draw].in{transform:scaleX(1)}
.js-motion .stats .stat:nth-child(2){transition-delay:0.05s}
.js-motion .stats .stat:nth-child(3){transition-delay:0.10s}
.js-motion .stats .stat:nth-child(4){transition-delay:0.15s}
.js-motion .cols .col:nth-child(2){transition-delay:0.05s}
.js-motion .cols .col:nth-child(3){transition-delay:0.10s}
.js-motion .cols .col:nth-child(4){transition-delay:0.15s}
.js-motion .cards .card:nth-child(2){transition-delay:0.05s}
.js-motion .cards .card:nth-child(3){transition-delay:0.10s}
.js-motion .cards .card:nth-child(4){transition-delay:0.15s}
/* retire stagger after entrance so hovers are instant */
.js-motion .cols .col.done:nth-child(n),.js-motion .cards .card.done:nth-child(n),.js-motion .stats .stat.done:nth-child(n){transition-delay:0s}
.js-motion .cols .col.done{transition:transform .6s var(--ease)}
.js-motion .cards .card.done{transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* static mode for pixel checks: ?static */
.static .hero{height:auto}
.static .hero__stage{position:relative;height:940px}

/* ---------- static hero gates (must match JS exactly) ---------- */
@media (max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse),(orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
  .hero{height:auto}
  .hero__stage{position:relative;height:auto;min-height:0;overflow:visible}
}

/* ---------- tablet ---------- */
@media (max-width:1360px){
  .services__grid{grid-template-columns:1fr minmax(0,560px)}
  .vlist{margin-right:0}
  .dmark{margin-left:0;width:min(440px,100%);height:auto;aspect-ratio:440/400}
  .dmark img{width:100%;height:auto}
  .cycle__top{grid-template-columns:1fr 1.1fr;gap:40px}
  .cols{grid-template-columns:repeat(4,1fr);column-gap:48px}
  .col::after{right:-24px}
  .col__art,.col__art img{width:100%;height:auto}
}
@media (max-width:1100px){
  .h1{font-size:52px;line-height:62px}
  .hero__content{padding-top:180px}
  .cols{grid-template-columns:repeat(2,1fr);row-gap:60px}
  .col:nth-child(2)::after{display:none}
  .cards{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);row-gap:40px}
}

/* ---------- small tablets (721-900) and portrait tablets up to 1100: stack the two-column sections ---------- */
@media (min-width:721px) and (max-width:900px),(min-width:721px) and (max-width:1100px) and (orientation:portrait){
  .hero{height:auto}
  .hero__stage{position:relative;height:auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .hero__media{position:relative;inset:auto;height:460px;margin-top:72px}
  .hero__poster{inset:0;width:auto;aspect-ratio:auto;background-size:1100px auto;background-position:-560px -90px}
  .hero__content{padding-top:0;margin-top:-10px}
  .marquee{position:relative;top:auto;left:auto;right:auto;margin:72px var(--gut) 40px}
  .services__grid{display:block}
  .services__sticky{position:relative;top:auto}
  .dmark{margin:40px auto 10px}
  .vlist{margin:30px 0 0}
  .cycle__top{display:block}
  .cycle__top .eyebrow{transform:none;margin:0 0 16px}
  .cycle__copy{margin:0}
  .footer__top{flex-direction:column;gap:28px}
  .footer__links{flex-wrap:wrap;gap:18px 32px;margin-top:0}
}
/* ---------- mobile (Figma 375 frame) ---------- */
@media (max-width:720px){
  :root{--gut:12px}
  .nav{height:70px}
  .nav__links{display:none}
  .nav .logo svg{width:96px}
  .nav__cta{height:46px;padding:0 20px;font-size:16px;margin-right:8px}
  .burger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:48px;height:48px;border-radius:50%;border:1px solid #3b3b3b;position:relative;z-index:60}
  .burger span{display:block;width:16px;height:1.5px;background:#fff;transition:transform .4s var(--ease)}
  .burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
  .menu{display:flex;position:fixed;inset:0;z-index:45;background:rgba(5,5,5,.97);align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
  .menu.open{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
  .menu__links{display:flex;flex-direction:column;align-items:center;gap:22px}
  .menu__links a{font-size:30px;font-weight:500;transform:translateY(16px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease)}
  .menu.open .menu__links a{transform:none;opacity:1}
  .menu.open .menu__links a:nth-child(2){transition-delay:.05s}
  .menu.open .menu__links a:nth-child(3){transition-delay:.1s}
  .menu.open .menu__links a:nth-child(4){transition-delay:.15s}
  .menu.open .menu__links a:nth-child(5){transition-delay:.2s}

  .hero__stage{display:flex;flex-direction:column}
  .hero__media{position:relative;width:auto;height:400px;aspect-ratio:auto;margin:52px 0 0;perspective:none}
  .hero__poster{inset:0;width:auto;aspect-ratio:auto;height:auto;background-size:900px auto;background-position:-452px -74px}
  .hero__content{padding-top:0;margin-top:-18px}
  .eyebrow{font-size:11px;line-height:14px}
  .h1{font-size:27.5px;line-height:36px;margin-top:20px;letter-spacing:-.3px}
  .hero__lede{width:auto;margin-top:16px;font-size:14px;line-height:20px}
  .hero__ctas{margin-top:51px;gap:14px}
  .hero__ctas .btn{flex:1;height:47px;padding:0 10px;font-size:15px}
  .marquee{position:relative;top:auto;left:auto;right:auto;margin:100px var(--gut) 0;height:36px;-webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
  .marquee__set{gap:40px;padding-right:40px}
  .marquee__set img{height:36px}
  .betc{font-size:15px}

  .services{padding:62px 0 86px}
  .services__grid{display:block}
  .services__sticky{position:relative;top:auto;padding:0}
  .h2{font-size:27.5px;line-height:36px;margin-top:10px;letter-spacing:-.3px}
  .dmark{width:236px;height:auto;aspect-ratio:440/400;margin:58px 0 0;mix-blend-mode:lighten}
  .dmark img{width:100%;height:auto}
  .vlist{margin:6px 0 0}
  .vitem a{padding:22px 0 22px 0;border-radius:0}
  .vitem__n{font-size:13px;line-height:16px}
  .vitem__t{margin-top:16px;font-size:16.5px;line-height:21px}
  .vitem__d{margin-top:8px;font-size:13.5px;line-height:20px}
  .vitem__a{position:relative;right:auto;top:-1px;width:13px;height:13px;display:inline-block;vertical-align:middle;margin-left:6px}

  .cycle{padding:88px 0 150px}
  .cycle__top{display:block}
  .cycle__top .eyebrow{transform:none;margin:0 0 14px}
  .cycle__copy{margin:0}
  .cycle__p{font-size:13.5px;line-height:20px}
  .rule{margin-top:40px}
  .stats{grid-template-columns:1fr 1fr;row-gap:40px;column-gap:12px;margin-top:40px}
  .stat__v{font-size:50px;line-height:54px}
  .h2--one .muted{display:block}
  .numbers .h2--one .muted{display:inline}
  .sfx--lt{font-size:44px}.sfx--s{font-size:40px}.sfx--pct{font-size:48px}
  .stat__l{font-size:13px;line-height:17px}

  .why{padding:90px 0 40px}
  .cols{display:block;margin-top:30px}
  .col{padding:28px 0;border-bottom:1px solid var(--line)}
  .col::after{display:none}
  .col__art{width:170px;height:auto}   /* Figma 375 frame size */
  .col__art img{width:100%;height:auto}
  .col__t{margin-top:16px;font-size:16px}
  .col__d{font-size:13.5px;line-height:20px}

  .numbers{padding-top:70px}
  .numbers__sub{font-size:13.5px;line-height:20px}
  .cards{grid-template-columns:1fr;gap:12px;margin-top:28px}
  .card{height:auto;padding:22px 22px 22px;display:grid;grid-template-columns:auto 1fr;column-gap:16px}
  .card__n{grid-column:1;grid-row:1;align-self:center;font-size:13px}
  .card__t{grid-column:2;grid-row:1;margin:0}
  .card__s{grid-column:2;grid-row:2;margin-top:4px}
  .card__hr{grid-column:1/-1;grid-row:3;margin-top:16px}
  .card__v{grid-column:1/-1;grid-row:4;margin-top:14px;font-size:40px;line-height:42px;height:auto}
  .card__v .lt{font-size:22px;transform:translateY(-6px)}.card__v .u{font-size:24px}

  .cta{padding-top:96px;height:auto;padding-bottom:112px}
  .cta__p{font-size:13.5px;line-height:20px;max-width:300px;margin-inline:auto}
  .cta .btn{margin-top:32px;height:47px}
  .watermark{width:94vw}

  .footer{text-align:center;padding-top:40px}
  .footer__top{flex-direction:column;align-items:center}
  .footer__links{flex-direction:column;gap:20px;margin-top:30px}
  .footer__links a{font-size:14px}
  .footer__tag{font-size:13.5px}
  .footer__bot{margin-top:40px}
  .footer__bot p{font-size:13px}
}
@media (pointer:coarse){.btn{min-height:44px}}

/* ---------- reduced motion: everything in its final state ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .js-motion [data-reveal],.js-motion .line__in,.js-motion .rule[data-draw]{opacity:1!important;transform:none!important}
}
@media (min-width:721px){.static .vitem:nth-child(n+5){display:none}}

.nav__link--drop{margin-right:27px}
.static .marquee__track{animation:none}
.static .services__sticky{position:relative;top:auto}
.static .env{display:none}

/* ---------- why: vector illustrations that split apart with a red neon glow ---------- */
.col__art{position:relative}
.col__art.svg-ready img{display:none}
.why-svg{display:block;width:100%;height:auto;overflow:visible}
.why-svg .fc{stroke:rgba(215,215,215,.58);stroke-width:.9;stroke-linejoin:round;fill:#0b0b0b}
.why-svg .fc--t{fill:#101010}
.why-svg .fc--r{fill:#080808}
.why-svg .ln--red{stroke:rgba(205,38,38,.6)}
.why-svg .ln--redsoft{stroke:rgba(255,40,40,.55);fill:rgba(20,6,6,.55)}
.why-svg .ln--redsoft.fc--t{fill:rgba(12,4,4,.35)}
.why-svg .track{fill:none;stroke:rgba(225,225,225,.28);stroke-width:7;stroke-linejoin:round;opacity:.35}
.why-svg .sh{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1}
.why-svg .gd{stroke:rgba(255,255,255,.22);stroke-width:.8;stroke-dasharray:2 3}
.why-svg .dot{fill:rgba(255,255,255,.45)}
.why-svg .rd{fill:#e81a1a;filter:drop-shadow(0 0 3px rgba(255,0,0,.6))}
.why-svg .pc .body{transform:translate(0,0);transition:transform .7s var(--ease);transition-delay:calc(var(--i) * 45ms)}
.why-svg .glow{opacity:0;transition:opacity .5s var(--ease);transition-delay:calc(var(--i) * 45ms)}
.why-svg .glow__blur{fill:rgba(220,0,0,.45);filter:blur(8px)}
.why-svg .glow__line{fill:none;stroke:rgba(255,70,70,.85);stroke-width:1;filter:drop-shadow(0 0 3px rgba(255,0,0,.7))}
.why-svg .shield .fc{transition:stroke .5s,filter .5s}
@media (hover:hover) and (pointer:fine){
  .col:hover .why-svg .pc .body{transform:translate(var(--dx),calc(var(--dy) - 7px))}
  .col:hover .why-svg .glow{opacity:1}
  .col:hover .why-svg .pc .body > *{animation:wave 2.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.18s)}
  .col:hover .why-svg .shield .fc{stroke:rgba(255,60,60,.8);filter:drop-shadow(0 0 4px rgba(255,0,0,.5))}
  /* the red request cube lights up in the same neon red as the glowing steps under it */
  .col:hover .why-svg .ln--red{stroke:rgba(255,70,70,.85);filter:drop-shadow(0 0 3px rgba(255,0,0,.7))}
  .col:hover .col__t{color:#fff}
}
@keyframes wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}


/* ---------- makepill-style theme: one page colour, flipped by whichever section sits under the centre line ---------- */
:root{--page:#050505;--ink:#ffffff;--ink2:#9b9b9b;--ink3:#555555;--rule:#191919}
/* each panel keeps its own colours; theme-light only restyles the header (the white panel sets its own vars) */
body{background-color:#050505}
.themed{color:var(--ink)}
.themed .eyebrow{color:var(--ink3)}
.themed .muted,.themed .muted-l{color:var(--ink3)}
.themed .h2,.themed .h2--dark{color:var(--ink)}
.services .vitem__t,.why .col__t{color:var(--ink)}
.services .vitem__d,.why .col__d,.cycle .cycle__p,.cycle .stat__l{color:var(--ink2)}
.services .vitem__n{color:var(--ink3)}
.services .vitem a{border-bottom-color:var(--rule);transition:border-color .5s linear,background-color .45s var(--ease)}
.services .vitem a:hover{background:rgba(128,128,128,.07)}
.services .vitem__a{color:rgba(255,255,255,.6)}   /* the Figma arrow icon: white at 60% */
.cycle .rule--light{background:var(--rule)}
.cycle .stat__v{color:var(--ink)}
.cycle .sfx{color:var(--ink3)}
.why .col::after{background:var(--rule)}
.static .cycle{background:var(--light);min-height:0;display:block}
/* one shared 3D layer: the hero cube that flies down and becomes the "d" */
.cube-layer{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block}
.hero__content,.marquee{z-index:6}

/* the cube letter steps aside while the page is white */


/* light theme: header and line art follow the page colour too */
.nav .logo,.nav .nav__link{transition:color .35s linear}
html.theme-light .nav::before{background:linear-gradient(180deg,rgba(245,245,245,.48) 0%,rgba(245,245,245,0) 100%)}
html.theme-light .nav .logo{color:#050505}
html.theme-light .nav .nav__link{color:#555}
html.theme-light .nav .nav__link:hover{color:#050505}
html.theme-light .burger{border-color:#c9c9c9}
html.theme-light .burger span{background:#050505}
.why-svg .fc{transition:fill .5s linear,stroke .5s linear}


/* the white section plays its entrance once its top passes ~2/3 of the screen (quick, ~1 s) */
.js-motion .cycle [data-reveal],.js-motion .cycle .stat{opacity:0;transform:translateY(28px);transition:opacity .55s var(--ease),transform .7s var(--ease)}
.js-motion .cycle .line__in{transform:translateY(110%);transition:transform .7s var(--ease)}
.js-motion .cycle .rule{transform:scaleX(0);transition:transform .8s var(--ease)}
.js-motion .cycle .cycle__p .wd{display:inline-block;opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .45s var(--ease)}
.js-motion .cycle.lit [data-reveal],.js-motion .cycle.lit .stat{opacity:1;transform:none}
.js-motion .cycle.lit .line__in{transform:none}
.js-motion .cycle.lit .line:nth-child(2) .line__in{transition-delay:.07s}
.js-motion .cycle.lit .cycle__p .wd{opacity:1;transform:none;transition-delay:calc(.12s + var(--wi) * 5ms)}
.js-motion .cycle.lit .rule{transform:scaleX(1);transition-delay:.12s}
.js-motion .cycle.lit .stat{transition-delay:.15s}
.js-motion .cycle.lit .stat:nth-child(2){transition-delay:.21s}
.js-motion .cycle.lit .stat:nth-child(3){transition-delay:.27s}
.js-motion .cycle.lit .stat:nth-child(4){transition-delay:.33s}
/* leaving: everything eases out quickly, no delays */
.js-motion .cycle:not(.lit) *{transition-delay:0s!important}

/* services: each vertical rises into place under the one before it */
.services .vitem{will-change:transform,opacity}


/* ---------- performance ---------- */
/* the 3D canvas replaces the rendered d and the hero poster; the vector art replaces the why PNGs */
html.js-gl .dmark img,html.js-gl .hero__poster{display:none}
.cube-layer{contain:strict}
.offscreen,.offscreen *,.offscreen *::before,.offscreen *::after{animation-play-state:paused!important}

/* ---------- cursor follower: round when slow, stretches into an oval with speed ---------- */
.cur-f{position:fixed;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:120;opacity:0;transition:opacity .3s var(--ease),width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease);will-change:transform}
.cur-f.on{opacity:1}
.cur-f.on.off{opacity:0}
.cur-f.big{width:56px;height:56px;margin:-28px 0 0 -28px}
@media (hover:none),(pointer:coarse){.cur-f{display:none}}
.static .cur-f{display:none}
.hero__fade{display:none}

/* ---------- stacked panels: services pins, white panel slides over, dark panel slides over it ---------- */
.stack{position:sticky;top:var(--st,0px)}
.services.stack{z-index:1}
.cycle.stack{z-index:2;background:#f5f5f5;
  --ink:#050505;--ink2:#656565;--ink3:#828282;--rule:#d8d8d8}
.panel-over{position:relative;z-index:3;background:#050505}
.numbers,.cta,.footer{position:relative;z-index:3;background:#050505}
.static .stack{position:relative;top:auto}
@media (prefers-reduced-motion:reduce){.stack{position:relative;top:auto}}

/* ---------- hero entrance: eyebrow, then the headline word by word, then the lede and the buttons ---------- */
.js-motion .hero .line__in{transform:none}
.js-motion .hero .hw{display:inline-block;opacity:0;transform:translateY(70%) rotate(3deg);filter:blur(10px);transform-origin:0 100%;
  transition:opacity .7s var(--soft),transform .9s var(--soft),filter .7s var(--soft)}
.js-motion .hero .h1.in .hw{opacity:1;transform:none;filter:blur(0);transition-delay:calc(.05s + var(--hi) * 35ms)}
.js-motion .hero .eyebrow[data-reveal]{transform:translateY(14px);letter-spacing:.18em;filter:blur(4px);
  transition:opacity .7s var(--soft),transform .8s var(--soft),letter-spacing 1s var(--soft),filter .7s var(--soft)}
.js-motion .hero .eyebrow[data-reveal].in{letter-spacing:0;filter:blur(0)}
.js-motion .hero .hero__lede[data-reveal]{filter:blur(8px);transition:opacity .8s var(--soft) .3s,transform .9s var(--soft) .3s,filter .8s var(--soft) .3s}
.js-motion .hero .hero__lede[data-reveal].in{filter:blur(0)}
.js-motion .hero .hero__ctas[data-reveal]{opacity:1;transform:none}
.js-motion .hero .hero__ctas:not(.in) .btn{opacity:0}
.js-motion .hero .hero__ctas.in .btn{animation:btnIn .85s var(--soft) .42s backwards}
.js-motion .hero .hero__ctas.in .btn+.btn{animation-delay:.5s}
@keyframes btnIn{from{opacity:0;transform:translateY(26px) scale(.9);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
/* a soft light sweeps once across the red button when it lands */
.hero__ctas .btn--red::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%) no-repeat;background-size:250% 100%;background-position:120% 0;opacity:0}
.js-motion .hero .hero__ctas.in .btn--red::after{animation:btnShine 1.3s var(--ease) 1.05s both}
@keyframes btnShine{0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.js-motion .hero .hw{opacity:1;transform:none;filter:none}.hero__ctas .btn{animation:none!important}}

/* ---------- why: the whole panel plays its entrance once its top passes ~60% of the screen ---------- */
.js-motion .why [data-reveal]{transition:opacity .7s var(--soft),transform .85s var(--soft)}
.js-motion .why .line__in{transition:transform .85s var(--soft)}
.js-motion .why.lit [data-reveal]{opacity:1;transform:none}
.js-motion .why.lit .line__in{transform:none;transition-delay:.06s}
.js-motion .why.lit .cols .col{transition-delay:calc(.14s + var(--ci, 0) * 90ms)}
.js-motion .why .cols .col:nth-child(2){--ci:1}
.js-motion .why .cols .col:nth-child(3){--ci:2}
.js-motion .why .cols .col:nth-child(4){--ci:3}
.js-motion .why.lit .cols .col.done{transition-delay:0s}

/* partner strip: slides in softly after the buttons */
.js-motion .hero .marquee{opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity .8s var(--soft) .55s,transform .9s var(--soft) .55s,filter .8s var(--soft) .55s}
.js-motion .hero .marquee.in{opacity:1;transform:none;filter:blur(0)}

/* ---------- big screens (1680px+): the page is zoomed by --z (set in <head>), the 3D layer stays at screen pixels ---------- */
.nav,main,.footer{zoom:var(--z,1)}

/* ---------- landscape phones / very short screens: keep the cube and the letter inside the screen height ---------- */
@media (orientation:landscape) and (max-height:560px){
  .hero__media{height:min(460px,82vh)}
  .dmark{width:auto;height:min(400px,72vh);aspect-ratio:440/400}
}
/* ---------- the narrowest phones (≤360px): a touch smaller headline so lines don't strand a single word ---------- */
@media (max-width:360px){
  .h1{font-size:25px;line-height:33px}
  .hero__ctas .btn{font-size:14px}
}

/* ---------- desktop hero: the text block is vertically centred between the header and the partner strip ---------- */
@media (min-width:901px) and (orientation:landscape) and (min-height:561px) and (prefers-reduced-motion:no-preference){
  html:not(.static) .hero__stage{display:flex;flex-direction:column;justify-content:center}
  html:not(.static) .hero__content{padding-top:24px;padding-bottom:70px}
}
@media (max-width:900px),(max-width:1100px) and (orientation:portrait){.services__pin{margin-bottom:0}}

/* ---------- mobile header: keep the soft black fade and add a light blur behind it, fading out with no hard edge ---------- */
@media (max-width:720px){
  .nav::before{bottom:-26px;background:linear-gradient(180deg,rgba(5,5,5,.82) 0%,rgba(5,5,5,.6) 55%,rgba(5,5,5,0) 100%);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
  html.theme-light .nav::before{background:linear-gradient(180deg,rgba(245,245,245,.85) 0%,rgba(245,245,245,.6) 55%,rgba(245,245,245,0) 100%)}
  /* burger -> a clean, centred X: two bars that cross exactly in the middle */
  .burger span{position:absolute;left:50%;top:50%;width:18px;height:1.6px;margin:-.8px 0 0 -9px;border-radius:1px;transition:transform .4s var(--ease)}
  .burger span:first-child{transform:translateY(-3.5px)}
  .burger span:last-child{transform:translateY(3.5px)}
  .burger[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
  .burger[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}
}

/* ---------- phones only: crisp 1px line art in the why drawings ---------- */
@media (max-width:720px){
  .why-svg{shape-rendering:geometricPrecision}
  .why-svg .fc,.why-svg .sh,.why-svg .gd,.why-svg .glow__line{vector-effect:non-scaling-stroke}
  .why-svg .fc{stroke-width:1}
}
/* mobile menu: the page behind is blurred instead of just darkened */
@media (max-width:720px){
  .menu{background:rgba(5,5,5,.62);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2)}
}

/* ---------- copy that differs on phones (Figma mobile frame): .only-d = desktop/tablet, .only-m = phones ---------- */
.only-m{display:none!important}
@media (max-width:720px){
  .only-d{display:none!important}
  .only-m{display:revert!important}
  ol.only-m{display:block!important}
}

/* ---------- phones: no grey tap/hover box and no turning arrow in the services list; dark page behind Safari's bars ---------- */
@media (max-width:720px){
  /* the dark colour sits on <html>; <body> stays transparent so it never paints over the 3D layer (z-index -1) */
  html{background:#050505}
  body{background:transparent!important}
  .vitem a:hover,.services .vitem a:hover{background:transparent}
  .vitem a:hover .vitem__a{transform:none}
}

/* touch screens: the 3D canvas sits in the page (scrolls with it) inside a full-page clipping layer */
.cube-wrap{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;z-index:-1;pointer-events:none}
.cube-layer.cube-layer--doc{position:absolute;inset:auto;left:0;top:0;will-change:transform}

/* the white panel stays pinned behind the dark sections that follow; on high-density phones a sub-pixel seam between
   two dark sections let it shine through as a thin light line. Each dark section reaches 2px under the next one. */
.panel-over,.numbers,.cta{box-shadow:0 2px 0 0 #050505}
/* the hidden footer logo is fully transparent until it rises (no letter tops peeking) */
.js-motion .watermark:not(.up){opacity:0}
@media (max-width:720px){
  .dmark{margin-top:30px}
}

/* text only for screen readers and search engines */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- weak devices (set by scene3d.js when the GPU struggles): drop the costly live blur effects ---------- */
html.lowfx .nav::before,html.lowfx .nav::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.lowfx .menu{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(5,5,5,.96)!important}
html.lowfx .gfx__blobs i{transition:none!important}
html.lowfx .hero .hw,html.lowfx .hero .hero__lede[data-reveal],html.lowfx .hero .eyebrow[data-reveal],html.lowfx .hero .marquee{filter:none!important}

/* ---------- no 3D (old phones without WebGL 2, driver errors, reduced motion): the still renders of the cube and the d ---------- */
html.no-gl .hero__poster{background-image:url('../img/hero-end.jpg');opacity:1!important;display:block!important}
html.no-gl .dmark img{display:block!important;opacity:1!important}

/* ---------- Android: no live blur behind the header and the menu, no blend modes over the 3D layer ---------- */
html.android .nav::before,html.android .nav::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.android .menu{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(5,5,5,.95)!important}
/* the still d image is hidden while 3D runs, so its blend mode only cost a compositing pass over the canvas */
html.js-gl .dmark{mix-blend-mode:normal}