/* ==========================================================================
   SKYBOUND SCALING - main.css
   The complete design system + home page styles.

   TABLE OF CONTENTS
   ------------------------------------------------------------------
   01  Fonts (self-hosted Archivo variable)
   02  Tokens
   03  Base + reset
   04  Utilities
   05  Header + navigation
   06  Hamburger + mobile/tablet menu
   07  Buttons (.btn, .cta-book)
   08  Hero
   09  Hero stacking parallax (#loop-scene / #site-reveal)
   10  Clients marquee
   11  Manifesto
   12  Services (cinematic pinned glass panels)
   13  Track record
   14  Process (cinematic pinned phases)
   15  Case studies
   16  CTA (conversion anchor)
   17  Footer (stacking card)
   18  Reveals
   19  Responsive
   20  Reduced motion
   ------------------------------------------------------------------ */

/* ============ 01 FONTS (self-hosted) ============
   Archivo variable font: wght 100–900, wdth 62%–125%.
   Split by unicode-range exactly as Google Fonts serves it, so only
   the subsets a page actually uses are downloaded. */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============ TOKENS ============ */
:root{
  /* Off-white palette - never pure #FFF anywhere visible */
  --paper:#EEF2F7;          /* warm-cool off-white, slight blue cast */
  --paper-soft:#E4EAF2;     /* slightly deeper for layered surfaces */
  --paper-deep:#D7E0EC;     /* deepest light tone, for soft ambient pools */
  --paper-2:#E8ECF2;        /* legacy alias retained for compatibility */
  --sky-1:#DCE6F4;          /* soft sky-blue highlight */
  --sky-2:#C3D2E8;          /* mid sky-blue ambient */
  --sky-3:#A8BCD9;          /* deeper sky for accent washes */
  --ink:#0A0A0C;
  --ink-soft:#15171C;       /* slightly cooler ink for gradient ends */
  --blue:#2230FE;
  --orange:#FF4D00;
  --line:rgba(10,20,40,.10);
  --line-soft:rgba(10,20,40,.05);
  --line-strong:rgba(10,20,40,.32);
  --sans:'Archivo',system-ui,sans-serif;
  /* ---- Global alignment system ----
     Every section is full-bleed and gets its horizontal breathing room from
     --pad. Folding the centering gutter into --pad itself means one token
     aligns the entire site: below --maxw it behaves exactly like the old
     fluid gutter, and above it the extra space splits evenly, so every
     section shares identical left and right content edges on any display.
     Percentages resolve against the containing block's inline size, which
     for these full-width sections is the viewport, and unlike 100vw it
     never counts the scrollbar. */
  --maxw:1500px;
  --pad:max(clamp(20px,4vw,64px), calc((100% - var(--maxw)) * .5));
  --header-h:72px;
  --nav-logo-h:46px;  /* nav lockup height; steps down at the breakpoints below.
                         Named apart from .man-clients' own --logo-h, which sizes
                         the client marquee marks and means something different. */
}
*{margin:0;padding:0;box-sizing:border-box}
/* Keep every word intact on one line: never auto-hyphenate or break inside a word */
*,*::before,*::after{-webkit-hyphens:none;hyphens:none;overflow-wrap:normal;word-break:normal}
.nb{white-space:nowrap}
html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
html,body{background:var(--paper)}
body{
  color:var(--ink);
  font-family:var(--sans);
  font-variation-settings:'wdth' 100;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background:transparent;   /* the field lives on the fixed pseudo below */
}
/* Continuous ambient field - matches #site-reveal so edges never seam.
   A position:fixed pseudo paints the exact same viewport-anchored field the
   old background-attachment:fixed stack did, but as ONE composited layer:
   the browser rasterizes it once instead of repainting five gradients every
   scrolled frame (the single biggest scroll cost on Safari). */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(88% 56% at 82% 0%,  rgba(255,255,255,.58) 0%, transparent 56%),
    radial-gradient(72% 50% at 8% 14%,  rgba(196,213,238,.46) 0%, transparent 60%),
    radial-gradient(82% 56% at 95% 54%, rgba(203,210,223,.42) 0%, transparent 60%),
    radial-gradient(74% 50% at 5% 92%,  rgba(201,214,237,.40) 0%, transparent 62%),
    linear-gradient(172deg, #F5F7FB 0%, #EDF0F5 32%, #E6E9F1 60%, #F0F3F8 100%);
  background-repeat:no-repeat;
}
::selection{background:var(--blue);color:var(--paper)}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip-link{
  position:fixed;top:10px;left:10px;z-index:300;
  background:var(--ink);color:var(--paper);
  padding:10px 18px;border-radius:10px;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em;
  transform:translateY(-160%);transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.skip-link:focus{transform:none;outline:2px solid var(--paper);outline-offset:2px}
#main-content:focus{outline:none}
/* visually hidden, kept for the accessibility tree + document outline */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============ UTILITIES ============ */
.mono{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.mono-md{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.02em}
.tag-blue{color:var(--blue)}
.tag-orange{color:var(--orange)}
.section{position:relative;border-top:none}
.section::before{display:none}
.section-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:18px var(--pad);border-bottom:none;
}

/* ============ HEADER ============ */
#site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);
  border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s,transform .45s cubic-bezier(.65,0,.35,1);
}
#site-header.hidden{transform:translateY(-101%)}
#site-header.scrolled{
  background:linear-gradient(180deg,
    rgba(238,242,247,.88) 0%,
    rgba(228,234,242,.82) 100%);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--line-soft);
}
/* Dark-surface header: worn while the manifesto's dark chamber is the
   surface under the bar. Without it the light glass header reads as a pale
   band floating over deep space during the whole transition. Colour only -
   no layout, no geometry, so it can never shift anything. */
body.on-dark #site-header.scrolled{
  background:linear-gradient(180deg,
    rgba(9,11,18,.82) 0%,
    rgba(6,8,14,.72) 100%);
  border-bottom-color:rgba(238,242,247,.10);
}
body.on-dark #site-header,
body.on-dark #site-header .logo,
body.on-dark #site-header nav.desktop-nav a{color:var(--paper)}
body.on-dark #site-header nav.desktop-nav a::after{background:var(--paper)}
body.on-dark #site-header .cta-book{
  --cta-bg:var(--paper);
  --cta-fg:var(--ink);
  --cta-token:rgba(10,10,12,.12);
}
body.on-dark .nav-toggle-inner,
body.on-dark .nav-toggle-inner::before,
body.on-dark .nav-toggle-inner::after{background:var(--paper)}
#site-header,#site-header .logo,#site-header nav.desktop-nav a{
  transition:color .45s cubic-bezier(.2,.7,.2,1);
}

/* ---- Brand logo ----
   The horizontal lockup (monogram + stacked wordmark) is the nav-bar form of
   the official mark: the square stacked lockup would render its type at ~5px
   inside a 72px bar. Height is the only thing set - width follows the image's
   own ratio - and the intrinsic width/height on the <img> reserves the box
   before the file lands, so the header never reflows.
   Two files ship: the standard mark, and a variant whose near-black SKYBOUND
   line is lifted to off-white for the dark header state. Both are stacked in
   the same grid cell and cross-faded, so the swap has nothing to lay out. */
.logo{
  display:grid;align-items:center;
  grid-template-rows:var(--nav-logo-h,46px);
  flex:none;line-height:0;
}
.logo img{
  grid-area:1/1;
  /* Sized from the token, not height:100%. The grid row is auto-sized, so a
     percentage height would resolve against the image's own intrinsic 200px
     and the lockup would render at full size, overflowing the bar. */
  height:var(--nav-logo-h,46px);width:auto;display:block;
  transition:opacity .45s cubic-bezier(.2,.7,.2,1);
}
.logo .logo-light{opacity:0}
body.on-dark #site-header .logo .logo-dark{opacity:0}
body.on-dark #site-header .logo .logo-light{opacity:1}
nav.desktop-nav{display:flex;gap:36px}
nav.desktop-nav a{
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  position:relative;padding:4px 0;
}
nav.desktop-nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:right;
  transition:transform .35s cubic-bezier(.65,0,.35,1);
}
nav.desktop-nav a:hover::after{transform:scaleX(1);transform-origin:left}

/* ============ HAMBURGER + MOBILE/TABLET MENU ============ */
.nav-toggle{
  display:none;                 /* shown at <=1024px */
  width:46px;height:46px;margin-right:-10px;
  align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;
  position:relative;z-index:210;            /* stays above the menu overlay */
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle-box{position:relative;width:26px;height:14px}
.nav-toggle-inner,
.nav-toggle-inner::before,
.nav-toggle-inner::after{
  position:absolute;left:0;width:26px;height:2px;border-radius:2px;
  background:var(--ink);
  transition:transform .42s cubic-bezier(.76,0,.24,1),background-color .3s ease;
}
.nav-toggle-inner{top:50%;margin-top:-1px}
.nav-toggle-inner::before{content:"";top:-7px}
.nav-toggle-inner::after{content:"";top:7px}
body.menu-open .nav-toggle-inner{background:transparent}
body.menu-open .nav-toggle-inner::before{transform:translateY(7px) rotate(45deg);background:#fff}
body.menu-open .nav-toggle-inner::after{transform:translateY(-7px) rotate(-45deg);background:#fff}

.mobile-menu{
  position:fixed;inset:0;z-index:200;
  background:#070708;color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--header-h) + clamp(24px,5vh,48px)) var(--pad) clamp(26px,5vh,52px);
  transform:translateY(-100%);visibility:hidden;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;overflow-y:auto;
  transition:transform .6s cubic-bezier(.76,0,.24,1),visibility 0s linear .6s;
}
body.menu-open .mobile-menu{transform:translateY(0);visibility:visible;transition:transform .62s cubic-bezier(.76,0,.24,1),visibility 0s}
/* faint brand glow + grain-free atmosphere */
.mobile-menu::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%, rgba(34,48,254,.20) 0%, transparent 55%),
             radial-gradient(90% 70% at 0% 100%, rgba(255,77,0,.10) 0%, transparent 55%);
}
.mm-nav{position:relative;display:flex;flex-direction:column;gap:clamp(4px,1.2vh,12px);margin-top:auto}
.mm-link{
  display:flex;align-items:baseline;gap:18px;
  color:#fff;text-decoration:none;
  font-weight:900;font-variation-settings:'wdth' 120;letter-spacing:-.02em;line-height:1;
  font-size:clamp(40px,11vw,68px);text-transform:uppercase;
  padding:clamp(6px,1.1vh,12px) 0;
  border-bottom:1px solid rgba(255,255,255,.10);
  opacity:0;transform:translateY(22px);
  transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1),color .3s ease;
}
.mm-link .mm-idx{
  font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--blue);
  font-variation-settings:'wdth' 100;transform:translateY(-.55em);flex:none;
}
.mm-link .mm-word{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){ .mm-link:hover{color:#fff} .mm-link:hover .mm-word{transform:translateX(10px)} .mm-link:hover .mm-idx{color:#fff} }
.mm-link:active .mm-word{transform:translateX(10px)}
body.menu-open .mm-link{opacity:1;transform:translateY(0)}
body.menu-open .mm-link:nth-child(1){transition-delay:.16s}
body.menu-open .mm-link:nth-child(2){transition-delay:.22s}
body.menu-open .mm-link:nth-child(3){transition-delay:.28s}
body.menu-open .mm-link:nth-child(4){transition-delay:.34s}

.mm-foot{
  position:relative;display:flex;flex-direction:column;gap:clamp(20px,3vh,30px);
  margin-top:clamp(28px,5vh,48px);
  opacity:0;transform:translateY(18px);
  transition:opacity .55s ease .4s,transform .6s cubic-bezier(.2,.7,.2,1) .4s;
}
body.menu-open .mm-foot{opacity:1;transform:translateY(0)}
.mm-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  align-self:flex-start;
  background:var(--blue);color:#fff;text-decoration:none;
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:18px 30px;border-radius:999px;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,background-color .3s;
  box-shadow:0 18px 40px -18px rgba(34,48,254,.8);
}
.mm-cta .mm-cta-arr{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){ .mm-cta:hover{transform:translateY(-2px);box-shadow:0 24px 50px -18px rgba(34,48,254,.95)} .mm-cta:hover .mm-cta-arr{transform:translateX(6px)} }
.mm-cta:active{transform:translateY(0)}
.mm-meta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.mm-email{color:rgba(255,255,255,.66);text-decoration:none;font-size:14px;letter-spacing:.01em;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:2px}
@media (hover:hover){ .mm-email:hover{color:#fff} }
.mm-social{display:flex;gap:8px}
.mm-social a{
  width:42px;height:42px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8);
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .3s ease;
}
.mm-social a svg{width:18px;height:18px}
@media (hover:hover){ .mm-social a:hover{background:#fff;color:#0A0A0C;border-color:#fff;transform:translateY(-2px)} }

/* Header state while the menu is open: float above the overlay, go light-on-dark */
body.menu-open #site-header{z-index:210;background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body.menu-open #site-header.hidden{transform:none}
body.menu-open .logo{color:#fff}

@media (prefers-reduced-motion:reduce){
  .mobile-menu,.mm-link,.mm-foot{transition:none}
  .mm-link{opacity:1;transform:none}
}

.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:14px 26px;border:1px solid var(--ink);border-radius:999px;
  overflow:hidden;isolation:isolate;
  transition:color .4s cubic-bezier(.65,0,.35,1),border-color .4s;
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--blue);
  transform:translateY(101%);transition:transform .45s cubic-bezier(.65,0,.35,1);
}
.btn:hover{color:var(--paper);border-color:var(--blue)}
.btn:hover::before{transform:translateY(0)}
.btn.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.solid:hover{border-color:var(--blue)}
#site-header .btn{padding:11px 22px}

/* ============ UNIFIED CTA COMPONENT (.cta-book) ============
   Primary conversion button reused across every decision point. Minimal and
   tactile: a clean ink pill with a label and an arrow inside a circular token.
   On hover a blue fill wipes up from the bottom with soft easing, the arrow
   advances within its token, and the whole control lifts 1px. No glow. */
.cta-book{
  --cta-bg:var(--ink);
  --cta-fg:var(--paper);
  --cta-fill:var(--blue);
  --cta-token:rgba(255,255,255,.14);
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:14px;
  padding:15px 16px 15px 28px;
  border-radius:999px;
  background:var(--cta-bg);color:var(--cta-fg);
  font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  border:1px solid var(--cta-bg);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),
             border-color .45s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
/* fill wipe (sits behind content) */
.cta-book::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--cta-fill);
  transform:translateY(101%);
  transition:transform .55s cubic-bezier(.65,0,.35,1);
}
.cta-book > *{position:relative;z-index:1}
.cta-book .cta-label{display:inline-block;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
/* circular arrow token */
.cta-book .cta-token{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--cta-token);
  overflow:hidden;position:relative;flex:none;
  transition:background .45s cubic-bezier(.2,.7,.2,1);
}
.cta-book .cta-token .cta-arr{
  font-size:13px;font-weight:600;line-height:1;
  transition:transform .5s cubic-bezier(.65,0,.35,1);
}
/* hover: fill rises, lift, arrow slides through token, label nudges */
.cta-book:hover{transform:translateY(-2px);border-color:var(--cta-fill)}
.cta-book:hover::before{transform:translateY(0)}
.cta-book:hover .cta-token{background:rgba(255,255,255,.22)}
.cta-book:hover .cta-token .cta-arr{transform:translateX(34px)}
.cta-book:hover .cta-token .cta-arr.cta-arr-2{transform:translateX(0)}
.cta-book:active{transform:translateY(0);transition-duration:.12s}
.cta-book:focus-visible{outline:2px solid var(--cta-fill);outline-offset:3px}
.cta-book .cta-arr-2{position:absolute;transform:translateX(-34px)}

/* Light-surface variant: orange pill that fills blue (used on paper sections) */
.cta-book.is-accent{
  --cta-bg:var(--orange);
  --cta-fg:var(--paper);
  --cta-fill:var(--blue);
  --cta-token:rgba(255,255,255,.22);
}
/* Outline variant for dark CTA section: transparent with paper border */
.cta-book.is-outline{
  --cta-bg:transparent;
  --cta-fg:var(--paper);
  --cta-fill:var(--paper);
  --cta-token:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.4);
}
.cta-book.is-outline:hover{--cta-fg:var(--ink);color:var(--ink);border-color:var(--paper)}
.cta-book.is-outline:hover .cta-token{background:rgba(10,10,12,.10)}
/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .cta-book,.cta-book *{transition:none !important}
}
/* CTA inside the services glass panels keeps the panel's left alignment + spacing */
.cta-in-glass{align-self:flex-start;margin-top:clamp(6px,1.4vh,14px)}
/* Compact variant for the header */
.cta-compact{padding:8px 9px 8px 18px;font-size:11px;gap:10px;letter-spacing:.1em}
.cta-compact .cta-token{width:26px;height:26px}
.cta-compact:hover .cta-token .cta-arr{transform:translateX(30px)}
.cta-compact .cta-arr-2{transform:translateX(-30px)}

/* ============ HERO ============ */
#hero{
  /* Sky atmosphere palette - sampled from the brand sky reference,
     tuned to extend the site's existing cool off-white system. */
  --sky-deep:#6fc2f4;     /* richest cerulean, used for upper-right depth + corners */
  --sky-core:#8ed3fb;     /* main field */
  --sky-mid:#a9e0fc;      /* lightening field */
  --sky-light:#cdeefd;    /* airy pale blue */
  --wisp:#e7f7ff;         /* soft cloud diffusion */
  --wisp-bright:#f7fdff;  /* brightest highlight */
  --sky-floor:#e8f1fa;    /* resolves into --paper (#EEF2F7) at the wordmark */

  min-height:100vh;min-height:100svh;position:relative;
  display:flex;flex-direction:column;
  padding-top:var(--header-h);
  overflow:hidden;
  isolation:isolate;
  background:
    /* signature diagonal cloud streaks - luminous bands across the field */
    linear-gradient(118deg,
      rgba(255,255,255,0) 9%,
      rgba(243,251,255,.50) 19%,
      rgba(255,255,255,0) 31%,
      rgba(255,255,255,0) 50%,
      rgba(231,247,255,.42) 59%,
      rgba(255,255,255,0) 71%,
      rgba(255,255,255,0) 84%,
      rgba(238,248,255,.30) 90%,
      rgba(255,255,255,0) 97%),
    /* bright diffusion pools - echo the reference's white blooms (left + lower-left) */
    radial-gradient(64% 50% at 13% 9%,  var(--wisp-bright) 0%, rgba(247,253,255,0) 56%),
    radial-gradient(82% 58% at 31% 41%, rgba(231,247,255,.82) 0%, rgba(231,247,255,0) 56%),
    radial-gradient(78% 64% at 5% 73%,  rgba(231,247,255,.88) 0%, rgba(231,247,255,0) 60%),
    /* upper-right depth pool - keeps the planet's backdrop rich + controlled */
    radial-gradient(118% 92% at 84% 4%, var(--sky-deep) 0%, rgba(111,194,244,0) 54%),
    /* soft sky-toned vignette for cinematic edge depth (never muddy/black) */
    radial-gradient(140% 120% at 50% 32%, rgba(255,255,255,0) 62%, rgba(120,194,240,.18) 100%),
    /* base field - rich sky up top resolving down into the paper tone */
    linear-gradient(176deg,
      var(--sky-core)  0%,
      var(--sky-core)  24%,
      var(--sky-mid)   46%,
      var(--sky-light) 68%,
      #dcecfb 84%,
      var(--sky-floor) 100%);
  background-repeat:no-repeat;
}
/* soft optical glow - a genuinely blurred bloom sitting in the atmosphere
   behind the planet, for diffusion the gradients alone can't give */
#hero::before{
  content:"";position:absolute;inset:-12% -12% 0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 36% at 24% 2%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(40% 34% at 4% 70%, rgba(231,247,255,.70) 0%, rgba(231,247,255,0) 72%);
  filter:blur(46px);
  opacity:.9;
}
/* fine grain - dithers the gradients (no banding) + premium texture,
   sits under the planet so the globe stays crisp */
#hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
  background-size:180px 180px;
  opacity:.05;mix-blend-mode:soft-light;
}
.hero-bottom{position:relative;z-index:3;padding-bottom:0;margin-top:auto}
#orb-canvas{
  position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;
}
/* ---- hero lead: headline (typewriter) + primary CTA, middle-left ---- */
.hero-lead{
  position:relative;z-index:4;
  margin-top:auto;              /* sits in the space above the wordmark */
  padding:0 var(--pad);
  max-width:min(640px,54vw);
  display:flex;flex-direction:column;align-items:flex-start;
}
.hero-headline{
  margin:0;color:var(--ink);
  font-family:var(--sans);font-weight:600;font-variation-settings:'wdth' 100;
  font-size:clamp(26px,3.15vw,43px);line-height:1.17;letter-spacing:-.018em;
  text-wrap:balance;
}
.hh-text{color:inherit}
/* Per-character typewriter: every character is laid out from the start, so the
   line breaks are computed once and never reflow. Characters are revealed one at
   a time via opacity (no content change -> no re-wrap, no jumping). */
.hh-c{position:relative}
.hh-text.typing .hh-c{opacity:0}
.hh-text.typing .hh-c.on{opacity:1}
/* caret = absolutely-positioned bar on the current character (zero layout impact) */
.hh-text.typing .hh-c.cur::after{
  content:'';position:absolute;left:100%;bottom:.08em;
  width:.07em;height:.9em;margin-left:.05em;
  background:var(--blue);border-radius:2px;
  animation:hh-blink 1.05s steps(1,end) infinite;
}
@keyframes hh-blink{0%,55%{opacity:1}55.01%,100%{opacity:0}}
.hero-cta{
  margin-top:clamp(22px,3.2vh,38px);
  padding:16px 30px;font-size:12px;
}
/* narrow + portrait: orb moves to the top, so anchor the lead just above the
   wordmark (clean vertical stack, no orb/text overlap). Wide landscape keeps the
   lead vertically centered on the left with the orb upper-right. */
@media (max-width:720px), (orientation:portrait){
  #hero .hero-bottom{margin-top:0}
  #hero .hero-lead{margin-bottom:clamp(10px,2.6vh,26px)}
}
.wordmark{
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:0 calc(var(--pad) - .5vw) 24px;
  user-select:none;
}
.wordmark span{
  display:inline-block;
  font-weight:900;font-variation-settings:'wdth' 122;
  font-size:clamp(38px,12.4vw,12.8rem);
  line-height:.82;letter-spacing:-.03em;
  will-change:transform;
}

/* ============ HERO STACKING PARALLAX ============
   #loop-scene sticks to the top of the viewport for the height of the hero
   while #site-reveal (the rest of the site) scrolls up and stacks over it.
   Pure CSS sticky positioning - no JS pin - so scrolling down and back up is
   perfectly smooth with no layout shift, stutter, or pin recalculation. */
#loop-scene{
  position:sticky;
  top:0;
  z-index:2;   /* above the manifesto scene it conceals */
  height:100vh;height:100svh;
  /* Own compositing layer, established once at load. Both scenes are
     promoted up front so the crossfade never has to create or tear down a
     layer mid-scroll - that hand-off is where seams and flicker come from. */
  transform:translateZ(0);
  backface-visibility:hidden;
}
#loop-scene #hero{
  height:100vh;height:100svh;
  min-height:0;
}

/* ---- Manifesto scene: pinned beneath the hero ---- */
/* Sticks to the viewport the moment its flow position arrives (scroll = one
   viewport) and stays pinned under the hero (z1 < z2) for the whole portal
   runway. The zoom's crossfade then uncovers it: the statement is never
   scrolled into view, it is already there. */
#man-scene{
  position:sticky;
  top:0;
  z-index:1;
  height:100vh;height:100svh;
  transform:translateZ(0);
  backface-visibility:hidden;
}
#man-scene #manifesto{height:100%}

#site-reveal{
  position:relative;
  z-index:3;
  /* Solid base only: the sheet must stay opaque while it slides over the
     dark manifesto chamber. The atmospheric field itself is painted by the
     sticky .reveal-field below - viewport-anchored like the old
     background-attachment:fixed stack, but composited (sticky elements
     scroll on the GPU; fixed-attachment gradients repaint every frame). */
  background:#ECEFF4;
}
/* ONE continuous atmospheric field - a far-lighter echo of the hero sky.
   Sticky for the whole reveal traversal, so every section floats over the
   same uninterrupted viewport-anchored gradient. The negative margin
   returns its 100svh of layout space, so nothing below shifts. */
.reveal-field{
  position:sticky;top:0;height:100vh;height:100svh;
  margin-bottom:-100vh;margin-bottom:-100svh;
  pointer-events:none;
  background:
    radial-gradient(88% 56% at 82% 0%,  rgba(255,255,255,.58) 0%, transparent 56%),
    radial-gradient(72% 50% at 8% 14%,  rgba(196,213,238,.46) 0%, transparent 60%),
    radial-gradient(82% 56% at 95% 54%, rgba(203,210,223,.42) 0%, transparent 60%),
    radial-gradient(74% 50% at 5% 92%,  rgba(201,214,237,.40) 0%, transparent 62%),
    linear-gradient(172deg, #F5F7FB 0%, #EDF0F5 32%, #E6E9F1 60%, #F0F3F8 100%);
  background-repeat:no-repeat;
}
.reveal-inner{position:relative;z-index:1}

/* ============ SKY PORTAL (hero -> manifesto zoom-through) ============
   A scroll-scrubbed eclipse ring in the brand palette. Lives inside the
   sticky #loop-scene so it rides the existing hero pin - no JS pinning,
   no pin spacers, no layout shift. Every animated property is a GPU
   transform or opacity; the bloom is pre-blurred gradient falloff, so no
   filters run during scroll. Invisible at scroll 0: the hero is untouched. */
#portal-track{height:130vh}
@media (max-width:820px), (orientation:portrait){
  #portal-track{height:100vh}
}
/* Without the runtime (or with reduced motion) everything reverts to plain
   document flow: no runway, no pinned scenes, manifesto as a normal section. */
.no-js #portal-track,.reduced #portal-track{height:0}
.no-js #portal-layer,.reduced #portal-layer{display:none}
.no-js #man-scene,.reduced #man-scene{position:static;height:auto}
.no-js #man-scene #manifesto,.reduced #man-scene #manifesto{
  height:auto;
  padding:clamp(90px,13vh,170px) var(--pad);
}

#loop-scene{overflow:clip}   /* the zooming sky never bleeds past the scene */

#portal-layer{
  position:absolute;inset:0;z-index:6;
  pointer-events:none;
}
.portal-ring{
  position:absolute;left:50%;top:50%;
  width:min(52vmin,560px);aspect-ratio:1/1;
  margin:calc(min(52vmin,560px) / -2) 0 0 calc(min(52vmin,560px) / -2);
  opacity:0;
  transform:scale(.4) translateZ(0);
  backface-visibility:hidden;
}
.portal-ring > span{position:absolute;inset:0;border-radius:50%;display:block}
/* interior: the deep space the zoom lands in - ramps in via opacity and
   matches the dark manifesto that then slides over it, seam-free */
.pr-fill{
  background:
    radial-gradient(58% 46% at 70% 10%, rgba(34,48,254,.24) 0%, rgba(34,48,254,0) 62%),
    radial-gradient(48% 40% at 16% 82%, rgba(111,194,244,.16) 0%, rgba(111,194,244,0) 60%),
    radial-gradient(72% 72% at 50% 40%, #12151F 0%, #0B0C11 58%, #07080C 100%);
  opacity:0;
}
/* rim: the brand eclipse in blue - a deep ultramarine arc rolling into
   luminous sky-blue, mirrored softly on the lower sweep */
.pr-rim{
  inset:-1.5%;
  background:conic-gradient(from 205deg,
    rgba(34,48,254,0)     0deg,
    rgba(34,48,254,.92)  44deg,
    rgba(111,194,244,.95) 98deg,
    rgba(142,211,251,.55) 132deg,
    rgba(142,211,251,0)  158deg,
    rgba(142,211,251,0)  184deg,
    rgba(142,211,251,.75) 226deg,
    rgba(79,108,255,.85) 282deg,
    rgba(34,48,254,0)    342deg,
    rgba(34,48,254,0)    360deg);
  -webkit-mask:radial-gradient(closest-side, transparent 88.5%, #000 92.5%, #000 96.5%, transparent 100%);
  mask:radial-gradient(closest-side, transparent 88.5%, #000 92.5%, #000 96.5%, transparent 100%);
}
/* bloom: pre-blurred glow baked as alpha falloff - zero filter cost */
.pr-bloom{
  inset:-16%;
  background:
    radial-gradient(closest-side, rgba(34,48,254,0) 58%, rgba(34,48,254,.18) 72%, rgba(34,48,254,0) 88%),
    radial-gradient(60% 60% at 50% 8%,  rgba(111,194,244,.32) 0%, rgba(111,194,244,0) 60%),
    radial-gradient(60% 60% at 52% 96%, rgba(142,211,251,.24) 0%, rgba(142,211,251,0) 62%);
}
/* the hero scene zooms from its optical center; text layers fade on scrub */
#loop-scene #hero{
  will-change:transform;
  transform-origin:50% 42%;
}

/* ============ CLIENTS (the roster wall inside the dark chamber) ============ */
/* Big, luminous marks riding the bottom of the manifesto: the ink-tone
   client PNGs are inverted to paper-white and set at a commanding size.
   The marquee plumbing (.clients-heading/.clients-marquee/.clients-track/
   .logo-item) is shared with this wrapper via the same custom properties. */
.man-clients{
  position:relative;z-index:1;
  --logo-h:clamp(64px,7vw,104px);
  --logo-h-wide:clamp(29px,3.2vw,47px);
  --logo-row-h:clamp(150px,20vh,220px);
  margin-top:clamp(64px,9vh,120px);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(20px,3vh,34px);
}
.man-clients .clients-heading{
  font-size:clamp(12px,.95vw,15px);
  color:rgba(238,242,247,.5);
}
.man-clients .clients-heading strong{color:rgba(238,242,247,.8)}
.man-clients .clients-marquee{width:100%}
/* ink marks -> paper-white marks; the sources are monochrome so a plain
   invert lands them exactly on the site's paper tone */
.man-clients .logo-item{opacity:.82}
.man-clients .logo-item img{filter:invert(1) brightness(1.04)}
@media (hover:hover){
  .man-clients .logo-item:hover{opacity:1}
}
/* tight viewports (small laptops, landscape phones): everything in the
   pinned scene scales down so statement + CTA + roster always fit */
@media (max-height:760px){
  #man-scene #manifesto .statement{font-size:clamp(24px,3.9vw,42px)}
  #man-scene .man-cta{margin-top:clamp(20px,3.5vh,34px)}
  #man-scene .man-clients{
    --logo-h:clamp(40px,4.6vw,58px);
    --logo-h-wide:clamp(18px,2.1vw,26px);
    --logo-row-h:clamp(84px,12vh,116px);
    margin-top:clamp(28px,5vh,52px);
  }
}
.clients-heading{
  font-family:var(--sans);
  font-size:clamp(13px,1.05vw,17px);
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(10,10,12,.6);
  white-space:nowrap;
  flex:none;
}
.clients-heading strong{
  color:rgba(10,10,12,.80);
  font-weight:700;
}
.clients-marquee{
  overflow:hidden;white-space:nowrap;padding:0;
  flex:1 1 auto;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  height:var(--logo-row-h);display:flex;align-items:center;
}
.clients-track{
  display:inline-flex;align-items:center;
  animation:tick 30s linear infinite;
}
/* Real client marks, pre-baked to one ink tone on transparency. Every
   source canvas is 512px tall, so a single height rule sets one clean
   optical baseline across the row. */
.logo-item{
  padding:0 clamp(30px,3.5vw,58px);
  display:inline-flex;align-items:center;
  height:var(--logo-h);
  opacity:.62;
  transition:opacity .35s cubic-bezier(.65,0,.35,1);
}
.logo-item img{
  height:var(--logo-h);
  width:auto;max-width:none;display:block;
  object-fit:contain;
  -webkit-user-drag:none;user-select:none;
}
/* The one exception: DJ Drish is 4.34:1, more than four times wider than
   it is tall. Held to the shared height it would swamp every mark beside
   it, so it is scaled to sit in the same width family instead. */
.logo-item img[src*="dj-drish"]{
  height:var(--logo-h-wide);
}
@media (hover:hover){
  .logo-item:hover{opacity:.92}
}
@keyframes tick{to{transform:translateX(-25%)}}

/* ============ MANIFESTO (dark chamber) ============
   The statement lives in the deep space the portal zoom lands in: near-black
   field, blue and sky glows, a faint instrument dial, light centered type.
   Every layer is baked gradient falloff - no filters, no canvases. */
#manifesto{
  position:relative;
  /* fills the pinned scene: statement + CTA centered, roster wall below */
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--header-h) + clamp(16px,3vh,32px)) var(--pad) clamp(24px,4vh,48px);
  /* premium blue-black field: also the fallback + paint-behind for the
     WebGL flow, so a lost context never leaves the room flat or empty */
  background:
    radial-gradient(92% 72% at 80% 6%,  rgba(34,48,254,.20) 0%, rgba(34,48,254,0) 58%),
    radial-gradient(74% 60% at 10% 92%, rgba(27,47,216,.15) 0%, rgba(27,47,216,0) 60%),
    linear-gradient(180deg,#05070D 0%,#070A14 38%,#0A0F1F 74%,#060810 100%);
  color:var(--paper);
  overflow:hidden;
  isolation:isolate;
}
.man-atmo{position:absolute;inset:0;z-index:0;pointer-events:none}
.man-atmo > span{position:absolute;display:block}
/* the stripe-flow shader canvas - fills the chamber, sits under the dial */
#man-flow{
  position:absolute;inset:0;
  width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.2s ease;
}
#man-flow.is-live{opacity:1}
.man-grid{
  position:relative;z-index:1;
  display:block;
  /* Full site measure. The statement is the widest line on the page, so it
     takes the same 1500px rail every other section aligns to rather than the
     narrower reading column it used to sit in. */
  max-width:var(--maxw);margin-inline:auto;
}
.man-text{
  min-width:0;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
#manifesto .statement{
  font-size:clamp(30px,4.6vw,62px);font-weight:700;line-height:1.14;
  letter-spacing:-.025em;font-variation-settings:'wdth' 108;
  text-align:center;text-wrap:balance;
  /* No reading-column cap: the line runs the full width of the rail so the
     sentence resolves in as few lines as the type size allows. */
  max-width:none;width:100%;
  color:var(--paper);
}
/* Each word is its own transformable box. The runtime rises them in with a
   stagger; this .13 is only the pre-runtime / no-JS resting state. */
#manifesto .statement .w{opacity:.13;display:inline-block;backface-visibility:hidden}
/* The altitude line: solid luminous sky blue, NOT a clipped gradient.
   A gradient here has to be painted with background-clip:text + a
   transparent fill, and this clause's words are individually wrapped and
   individually animated by the scroll timeline. Those per-word spans each
   establish their own paint context, so the parent's text-clipped gradient
   has nothing to clip against and the entire clause renders INVISIBLE while
   still occupying its layout space. Solid colour cannot fail that way, and
   at 12.1:1 on this near-black field it is far more legible than the
   ultramarine tail of the old ramp (2.75:1, under the 3:1 large-text floor).
   text-fill-color is pinned too so nothing can re-transparent the glyphs. */
#manifesto .statement .hl{
  color:#8ED3FB;
  -webkit-text-fill-color:#8ED3FB;
}
.man-cta{margin-top:clamp(36px,5.5vh,60px)}

/* ============ STAT + WIN ROWS ============
   The home page's track-record panel is gone, but these rows live on across
   the services, industries, location, and case pages (services.css layers its
   own container on top of them - see .svc-wins). Shared styles, so they stay
   here in main.css rather than moving into any one page's sheet. */
.case-grid{max-width:var(--maxw);margin-inline:auto}
.fact{padding:20px 0;border-bottom:1px solid var(--line)}
.fact:nth-child(odd){padding-right:24px}
.fact .k{color:rgba(10,10,12,.6);margin-bottom:6px}
.fact .v{font-size:18px;font-weight:600;letter-spacing:-.01em}
.wins{margin-top:42px;margin-bottom:32px}
.win{
  padding:22px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px);
  align-items:center;
}
.win:last-child{border-bottom:none}
.win-num{
  font-weight:900;font-variation-settings:'wdth' 120;
  font-size:clamp(34px,4.6vw,62px);line-height:.9;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  min-width:clamp(120px,14vw,200px);
}
.win:nth-child(1) .win-num b{color:var(--blue)}
.win:nth-child(2) .win-num b{color:var(--orange)}
.win:nth-child(3) .win-num b{color:var(--blue)}
.win:nth-child(4) .win-num b{color:var(--orange)}
.win-num b{font-weight:900}
.win-meta{display:flex;flex-direction:column;gap:6px}
.win-meta .mono-md{font-weight:600}
.win-tag{color:rgba(10,10,12,.6)}

/* ============ PROCESS (cinematic) ============ */
.rm-cinematic{padding:0;border-top:none;position:relative}
.rm-cinematic::before{display:none}
.rm-stage{
  position:relative;
  z-index:1;
  height:100vh;height:100svh;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:calc(var(--header-h) + clamp(18px,3vh,32px)) var(--pad) clamp(28px,4vh,52px);
  /* Opaque ambient field, identical to #site-reveal (fixed attachment = seamless).
     The solid background-color is the opacity guarantee: when this stage is pinned
     it becomes position:fixed / composited, and a fixed-attachment gradient can fail
     to paint on that layer on real GPUs. The solid base never fails, so the section
     behind can never bleed through (and it stays invisible whenever the gradient
     does paint, since the gradient's base layer is itself opaque). */
  /* No own paint: the sticky .reveal-field behind this stage carries the
     viewport-anchored ambient field for the whole reveal, so the pinned
     stage stays pixel-seamless with its surroundings for free. The pin uses
     pinSpacing, so nothing can scroll between the stage and that field. */
  background:transparent;
}
.rm-header,.rm-footer{
  position:relative;z-index:3;
  display:flex;justify-content:space-between;align-items:center;
  pointer-events:none;
}
.rm-footer{justify-content:flex-end}
.rm-header .mono,.rm-footer .mono{
  font-size:12px;
  color:rgba(10,10,12,.6);pointer-events:auto;
  text-shadow:0 0 10px rgba(238,242,247,.95),0 0 3px rgba(238,242,247,.95);
}
.rm-counter{
  display:flex;align-items:baseline;gap:6px;margin-left:auto;
  font-family:var(--sans);
  pointer-events:auto;
  text-shadow:0 0 10px rgba(238,242,247,.95),0 0 3px rgba(238,242,247,.95);
}
.rm-counter b{
  font-size:clamp(24px,2vw,32px);
  font-weight:900;letter-spacing:-.02em;
  font-variation-settings:'wdth' 122;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.rm-counter span{
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;color:rgba(10,10,12,.6);
}

/* two-column body: phase cards (left) + particle canvas (right) */
.rm-main{
  position:relative;z-index:2;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  align-items:center;
  gap:clamp(28px,4vw,80px);
}
.rm-phase-stack{
  position:relative;
  align-self:stretch;
  min-height:0;
}
.rm-phase{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:flex-start;
  opacity:0;
  will-change:opacity,transform;
  pointer-events:none;
}
.rm-phase:first-child{opacity:1}
.rm-card{
  width:100%;
  max-width:640px;
  padding:clamp(30px,4.4vh,52px) clamp(26px,2.6vw,46px);
  background:linear-gradient(180deg,
    rgba(244,247,252,.94) 0%,
    rgba(232,238,246,.92) 100%);
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  border:1px solid rgba(255,255,255,.9);
  border-radius:26px;
  box-shadow:
    0 40px 90px -28px rgba(20,30,55,.32),
    0 14px 32px -10px rgba(20,30,55,.14),
    inset 0 1px 0 rgba(255,255,255,.85);
  display:flex;flex-direction:column;
  align-items:flex-start;text-align:left;
  gap:clamp(16px,2vh,24px);
  pointer-events:auto;
}
.rm-tag{
  font-size:14px;
  letter-spacing:.14em;
  font-weight:600;
  color:var(--orange);
}
.rm-tag.tag-orange{color:var(--orange)}
.rm-title{
  font-size:clamp(38px,4.6vw,82px);
  font-weight:900;
  font-variation-settings:'wdth' 122;
  letter-spacing:-.035em;
  line-height:.9;
  text-transform:uppercase;
  color:var(--ink);
}
.rm-body{
  font-size:clamp(16px,1.15vw,20px);
  color:var(--ink);
  max-width:46ch;line-height:1.58;
  font-weight:400;
}

/* right column: particle stage, soft radial edge fade so the field melts in */
.rm-visual{
  position:relative;
  align-self:stretch;
  min-height:0;
  height:100%;
}
#rm-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  z-index:0;
  -webkit-mask-image:radial-gradient(125% 125% at 50% 50%,#000 62%,transparent 97%);
  mask-image:radial-gradient(125% 125% at 50% 50%,#000 62%,transparent 97%);
}
.rm-progress{display:none}

/* reduced-motion / no-ScrollTrigger fallback: clean vertical stack */
.rm-cinematic.no-pin .rm-stage{height:auto;display:block}
.rm-cinematic.no-pin .rm-main{display:block}
.rm-cinematic.no-pin .rm-visual{display:none}
.rm-cinematic.no-pin .rm-phase-stack{display:block}
.rm-cinematic.no-pin .rm-phase{position:relative;opacity:1 !important;transform:none !important;padding:clamp(40px,8vh,90px) 0}
.rm-cinematic.no-pin .rm-card{max-width:760px}
.rm-cinematic.no-pin #rm-canvas{display:none}

/* ============ CASE STUDIES ============ */
/* four cases in a balanced 2x2 grid on desktop */
.case-grid{display:grid;grid-template-columns:repeat(2,1fr)}
.case-card{
  position:relative;display:flex;flex-direction:column;
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:transparent;
  isolation:isolate;
}
.case-card:nth-child(2n){border-right:none}
.case-card:nth-child(n+3){border-bottom:none}
.case-metric{
  padding:32px clamp(22px,2.6vw,40px);min-height:300px;
  display:flex;flex-direction:column;justify-content:space-between;
  color:var(--paper);position:relative;overflow:hidden;
  transition:filter .45s cubic-bezier(.65,0,.35,1);
}
.case-metric.ink{
  background:
    radial-gradient(70% 80% at 50% 30%, rgba(34,48,254,.12) 0%, transparent 65%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);
}
.case-metric.blue{
  background:linear-gradient(180deg, #2A38FF 0%, var(--blue) 60%, #1A26E0 100%);
}
.case-metric.orange{
  background:linear-gradient(180deg, #FF5C12 0%, var(--orange) 60%, #E84200 100%);
  color:var(--ink);
}
.cm-top{
  display:flex;justify-content:space-between;align-items:center;
  opacity:.72;letter-spacing:.08em;
}
.case-metric.orange .cm-top{opacity:.62}
.cm-num{
  font-weight:900;font-variation-settings:'wdth' 122;
  font-size:clamp(44px,6.2vw,92px);line-height:.86;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}
.cm-num b{font-weight:900;opacity:.5}
.case-metric.orange .cm-num b{color:var(--ink);opacity:.65}
.cm-label{margin-top:14px;opacity:.78}
.case-metric.orange .cm-label{opacity:.7}
.case-body{
  padding:30px clamp(22px,2.6vw,40px) 44px;flex:1;
  display:flex;flex-direction:column;
}
.case-title{
  font-size:clamp(22px,2vw,30px);font-weight:800;
  font-variation-settings:'wdth' 116;letter-spacing:-.02em;line-height:1.05;
  text-transform:uppercase;margin-bottom:14px;
}
.case-blurb{font-size:14px;line-height:1.6;color:rgba(10,10,12,.7);max-width:38ch}
.case-tags{
  list-style:none;margin-top:22px;display:flex;flex-wrap:wrap;gap:6px;
}
.case-tags li{
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--line);border-radius:999px;
  color:rgba(10,10,12,.6);
}
.case-foot{
  margin-top:auto;padding-top:24px;display:flex;align-items:center;gap:10px;
  font-weight:700;
}
.case-foot .arr{transition:transform .4s cubic-bezier(.65,0,.35,1)}
.case-card:hover .arr{transform:translateX(6px)}
.case-card:hover .case-metric{filter:brightness(1.08) saturate(1.05)}

/* ============ CTA (conversion anchor) ============ */
#cta{
  position:relative;
  padding:clamp(72px,13vh,160px) var(--pad);
  display:flex;justify-content:center;
  background:transparent;        /* let the site's paper gradient flow through */
}
/* The blue conversion card - same palette + glass language as the rest of the site */
.cta-panel{
  position:relative;z-index:2;
  width:min(900px,100%);
  padding:clamp(48px,7vh,92px) clamp(32px,5vw,80px);
  border-radius:30px;
  text-align:center;
  color:var(--paper);
  isolation:isolate;
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(255,255,255,.18) 0%, transparent 58%),
    radial-gradient(70% 80% at 18% 100%, rgba(10,10,12,.24) 0%, transparent 60%),
    linear-gradient(180deg, rgba(42,56,255,.88) 0%, rgba(34,48,254,.85) 52%, rgba(26,38,224,.9) 100%);
  /* frosted glass: blur + saturate what sits behind the card. Blue stays deep
     (~0.85 alpha) so white copy keeps a 5:1+ contrast ratio. */
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(176,192,255,.5);
  box-shadow:
    0 50px 110px -40px rgba(34,48,254,.5),
    0 24px 56px -24px rgba(20,30,80,.4),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(10,16,40,.3);
  overflow:hidden;
  /* the hover movement the user likes - tilt is driven by JS; these props ease it */
  transition:transform .55s cubic-bezier(.2,.7,.2,1),
             box-shadow .55s cubic-bezier(.2,.7,.2,1);
  transform:perspective(1100px) rotateX(0deg) rotateY(0deg) translateY(0) scale(1);
  transform-style:preserve-3d;
  will-change:transform;
}
/* stronger, more dynamic hover: deeper lift, slight scale, richer shadow.
   (the rotateX/rotateY tilt is layered on top via the JS-set --rx/--ry vars) */
.cta-panel.is-hover{
  box-shadow:
    0 70px 150px -40px rgba(34,48,254,.62),
    0 34px 80px -28px rgba(20,30,80,.5),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(10,16,40,.34);
}
/* subtle grain over the card (kept - adds texture, not a spotlight) */
.cta-panel::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  opacity:.35;mix-blend-mode:overlay;
  background-image:
    radial-gradient(1px 1px at 17px 23px, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 63px 71px, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 109px 41px, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 139px 97px, rgba(255,255,255,.45) 50%, transparent 51%);
  background-size:150px 130px;
}
.cta-panel > *{position:relative;z-index:2}
/* fine top edge highlight */
.cta-edge{
  position:absolute;left:14%;right:14%;top:0;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
}

#cta .cta-eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.8);
  margin:0 0 clamp(16px,2.4vh,26px);
}
#cta h2{
  font-weight:900;font-variation-settings:'wdth' 122;text-transform:uppercase;
  font-size:clamp(40px,6.2vw,92px);line-height:.9;letter-spacing:-.035em;
  margin:0;
  color:var(--paper);
}
#cta h2 .accent{color:var(--orange)}
#cta .cta-sub{
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  margin:clamp(18px,2.6vh,28px) 0 clamp(28px,3.6vh,40px);
  color:rgba(255,255,255,.8);
}
/* CTA button: white pill with black label + arrow; black fill rises on hover,
   flipping label + arrow to white. */
#cta .cta-book{
  --cta-bg:#fff;
  --cta-fg:var(--ink);
  --cta-fill:var(--ink);
  --cta-token:rgba(10,10,12,.10);
  padding:17px 18px 17px 34px;font-size:13px;
  border-color:#fff;
}
/* hover: black label/arrow flip to white so they stay legible on the black fill */
#cta .cta-book:hover{--cta-fg:#fff;color:#fff;border-color:var(--ink)}
#cta .cta-book .cta-token{width:34px;height:34px}
#cta .cta-book:hover .cta-token{background:rgba(255,255,255,.20)}
#cta .cta-book:hover .cta-token .cta-arr{transform:translateX(38px)}
#cta .cta-book .cta-arr-2{transform:translateX(-38px)}
/* The incoming arrow must be re-stated inside the #cta scope. The generic
   `.cta-book:hover .cta-token .cta-arr.cta-arr-2` rule is (0,5,0), which the
   id-scoped exit rule above (1,4,0) outranks, so without this the second
   arrow flew out with the first and the token hovered empty. */
#cta .cta-book:hover .cta-token .cta-arr.cta-arr-2{transform:translateX(0)}



/* ============ FOOTER ============ */
/* ============ FOOTER - stacking-card, brand-blue field ============ */
.sf{
  position:relative;z-index:4;
  margin-top:clamp(-58px,-4.5vw,-30px);   /* card overlaps the section above → reads as a stacked card */
  padding:0 clamp(14px,2vw,30px) clamp(14px,2vw,30px);
  background:transparent;                  /* the light atmospheric field shows around the card */
}
.sf-card{
  position:relative;overflow:hidden;isolation:isolate;
  /* track the same content column as every section above, so the footer
     never sprawls wider than the page on large displays */
  max-width:var(--maxw);margin-inline:auto;
  border-radius:clamp(20px,2.4vw,34px);
  padding:clamp(36px,5vh,72px) clamp(26px,4vw,72px) clamp(22px,3vh,40px);
  color:#EAF0FF;transform-origin:50% 100%;will-change:transform;
  /* layered light + dark blue: brighter brand blue lifting at the top, deepening to navy */
  background:
    radial-gradient(132% 104% at 86% 4%, rgba(120,142,255,.50) 0%, rgba(120,142,255,0) 50%),
    radial-gradient(104% 92% at 6% 100%, rgba(6,10,58,.62) 0%, rgba(6,10,58,0) 58%),
    linear-gradient(160deg, #2E40FF 0%, #1D2AD0 30%, #131C8E 62%, #0A1152 100%);
  box-shadow:0 44px 96px -46px rgba(8,12,44,.62);
}
/* subtle background design - concentric arcs + light sweep + fine grain, all glow-free */
.sf-bg{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden;
  background:
    radial-gradient(78% 70% at 92% -6%, rgba(150,170,255,.20) 0%, rgba(150,170,255,0) 56%),
    radial-gradient(74% 70% at -4% 106%, rgba(8,12,70,.40) 0%, rgba(8,12,70,0) 60%);
}
.sf-bg::before{  /* faint concentric rings rising from the lower-left, like layered strata */
  content:"";position:absolute;width:142%;aspect-ratio:1;left:-46%;bottom:-82%;border-radius:50%;
  background:repeating-radial-gradient(circle, transparent 0 86px, rgba(255,255,255,.055) 86px 88px);
  -webkit-mask-image:radial-gradient(closest-side,#000 56%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 56%,transparent 100%);
}
.sf-bg::after{  /* fine grain - premium depth, no banding */
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
  background-size:200px 200px;opacity:.05;mix-blend-mode:overlay;
}
.sf-inner{position:relative;z-index:1}

/* top row - tagline + back-to-top */
.sf-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  margin-bottom:clamp(48px,9vh,112px);}
.sf-tag{margin:0;color:#fff;font-family:var(--sans);font-weight:800;
  font-variation-settings:'wdth' 110;text-transform:uppercase;letter-spacing:-.012em;
  line-height:1.0;font-size:clamp(21px,2.7vw,40px);}
.sf-totop{flex:none;width:clamp(50px,3.8vw,62px);height:clamp(62px,5.2vw,80px);
  border-radius:999px;background:var(--ink);color:var(--paper);cursor:pointer;border:0;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .4s cubic-bezier(.65,0,.35,1),transform .5s cubic-bezier(.16,1,.3,1);}
.sf-totop svg{width:20px;height:20px;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sf-totop:hover{background:#17171c;transform:translateY(-3px)}
.sf-totop:hover svg{transform:translateY(-5px)}
.sf-totop:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* columns */
.sf-cols{display:grid;grid-template-columns:1.05fr 1.5fr 1fr;
  gap:clamp(28px,3.4vw,60px);align-items:start;margin-bottom:clamp(40px,7vh,80px);}
.sf-head{margin:0 0 clamp(15px,2vh,22px);color:#fff;font-family:var(--sans);
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:'wdth' 112;}
.sf-addr{font-style:normal;font-size:clamp(14px,1vw,15px);line-height:1.66;color:rgba(234,240,255,.6)}
.sf-addr a{color:rgba(234,240,255,.6);transition:color .32s ease}
.sf-addr a:hover{color:#fff}
.sf-subs{display:flex;gap:clamp(20px,2.6vw,46px)}
.sf-sub{display:flex;flex-direction:column}
.foot-nav a{display:block;width:fit-content;padding:6px 0;
  font-size:clamp(14px,1vw,15px);line-height:1.2;color:rgba(234,240,255,.6);}
/* masked text-roll on hover (JS wraps links in .foot-roll) - no glow */
.foot-roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
.foot-roll .r{display:block;will-change:transform;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.foot-roll .r2{position:absolute;top:0;left:0;transform:translateY(106%)}
.foot-nav a .r2{color:#fff}
.foot-nav a:hover .r1,.foot-nav a:focus-visible .r1{transform:translateY(-106%)}
.foot-nav a:hover .r2,.foot-nav a:focus-visible .r2{transform:translateY(0)}

/* giant SKYBOUND wordmark - the signature; JS fits it to the card width */
.foot-wordmark{padding:0;margin:clamp(6px,1.4vh,22px) 0 0;
  display:flex;flex-direction:column;align-items:flex-start;line-height:.8;}
.fw-line{display:block;width:max-content;white-space:nowrap;color:#fff;
  font-family:var(--sans);font-weight:900;font-variation-settings:'wdth' 125;
  text-transform:uppercase;letter-spacing:-.026em;line-height:.8;font-size:80px;}
.fw-ch{display:inline-block;white-space:pre;will-change:transform}
/* The wordmark is sized by measuring it synchronously (JS fit-to-width). The global
   reduced-motion rule puts a tiny transition on every property, which would make
   font-size changes lag the measurement and the wordmark overflow - so opt the
   wordmark out of transitions entirely (its hover is a GSAP transform, not a CSS one). */
.fw-line,.fw-ch{transition:none!important}

/* legal pill */
.sf-legal{display:flex;justify-content:space-between;align-items:center;gap:12px 28px;flex-wrap:wrap;
  margin-top:clamp(20px,3vh,34px);padding:clamp(13px,1.8vh,19px) clamp(20px,2.4vw,32px);
  border:1px solid rgba(234,240,255,.2);border-radius:999px;
  font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:rgba(234,240,255,.58);}
.sf-copy{color:rgba(234,240,255,.58)}
.foot-legal-links{display:flex;gap:clamp(16px,2vw,30px);flex-wrap:wrap}
.foot-legal-links a{color:rgba(234,240,255,.58)}
.foot-legal-links a .r2{color:#fff}
.foot-legal-links a:hover .r1,.foot-legal-links a:focus-visible .r1{transform:translateY(-106%)}
.foot-legal-links a:hover .r2,.foot-legal-links a:focus-visible .r2{transform:translateY(0)}

/* footer responsive */
@media (max-width:1024px){
  .sf-cols{grid-template-columns:1fr 1.4fr 1fr;gap:clamp(26px,3.4vw,44px)}
}
@media (max-width:760px){
  .sf-cols{grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,40px) clamp(24px,5vw,36px)}
  .sf-col-brand{grid-column:1/-1}
  .sf-top{margin-bottom:clamp(40px,7vh,64px)}
}
@media (max-width:460px){
  .sf-cols{grid-template-columns:1fr;gap:clamp(28px,8vw,34px)}
  .sf-subs{gap:clamp(28px,9vw,44px)}
  .sf-legal{flex-direction:column;align-items:flex-start;border-radius:18px;gap:10px}
}

/* ============ REVEALS ============ */
.rv{opacity:0;transform:translateY(34px)}
.rv-card{opacity:0;transform:translateY(44px) scale(.98)}
/* masked line-rise for headline reveals */
.rv-title{opacity:0}
.rv-title .rv-l{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.rv-title .rv-w{display:inline-block;will-change:transform}
.no-js .rv,.no-js .rv-card,.reduced .rv,.reduced .rv-card{opacity:1;transform:none}
.no-js .rv-title,.reduced .rv-title{opacity:1}
.no-js .rv-title .rv-w,.reduced .rv-title .rv-w{transform:none}
/* per-letter title reveal unit (split in JS) */
.tl{display:inline-block;will-change:transform}
/* word wrapper: keeps a word's letter spans on one line - inline-block letter
   spans are otherwise legal break points and the browser would wrap mid-word */
.tw{display:inline-block;white-space:nowrap}

/* ============ RESPONSIVE ============ */
@media (max-width:1020px){
  .case-grid{grid-template-columns:1fr}
  /* :nth-child(n) matches the desktop rules' specificity so the stacked
     layout reliably restores its separators on every card */
  .case-card:nth-child(n){border-right:none;border-bottom:1px solid var(--line)}
  .case-card:last-child{border-bottom:none}
  .case-metric{min-height:240px}
  #manifesto .statement{font-size:clamp(28px,5.2vw,52px)}
  .rm-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3vw,48px)}
  .rm-title{font-size:clamp(34px,5.2vw,62px)}
  .rm-card{
    max-width:560px;
    padding:clamp(26px,3.6vh,44px) clamp(24px,3vw,40px);
    border-radius:24px;
    gap:clamp(14px,1.8vh,22px);
  }
  .rm-tag{font-size:13px}
  .rm-body{max-width:42ch;font-size:clamp(15px,1.7vw,18px)}
}
@media (max-width:720px){
  nav.desktop-nav{display:none}
  .hero-lead{max-width:none;margin-top:auto;margin-bottom:clamp(8px,2vh,20px)}
  .hero-headline{font-size:clamp(25px,7.4vw,38px);line-height:1.18;max-width:18ch}
  /* Big marks still, scaled for the phone column */
  .man-clients{
    --logo-h:clamp(44px,12vw,64px);
    --logo-h-wide:clamp(20px,5.5vw,29px);
    --logo-row-h:clamp(104px,26vw,140px);
  }
  .logo-item{padding:0 clamp(24px,6vw,38px)}
  .fact:nth-child(odd){padding-right:0}
  #manifesto{padding:clamp(84px,12vh,130px) var(--pad)}
  #manifesto .statement{font-size:clamp(26px,6.6vw,40px)}
  .cta-in-glass{padding:13px 14px 13px 22px;font-size:11px}
  #cta{padding:clamp(56px,9vh,88px) var(--pad)}
  .cta-panel{padding:clamp(38px,6vh,56px) clamp(24px,6vw,40px);border-radius:24px}
  #cta h2{font-size:clamp(32px,9.5vw,60px);white-space:nowrap}
  .rm-stage{padding:calc(var(--header-h) + 18px) var(--pad) clamp(20px,3vh,32px)}
  .rm-phase{padding:8px 14px}
  .rm-title{font-size:clamp(32px,8.6vw,58px);letter-spacing:-.03em;white-space:nowrap}
  .rm-body{font-size:17px;max-width:36ch;line-height:1.55}
  .rm-card{
    width:min(560px,94vw);
    padding:clamp(32px,4.6vh,44px) clamp(24px,5.5vw,34px);
    border-radius:24px;
    gap:18px;
    background:linear-gradient(180deg,
      rgba(244,247,252,.95) 0%,
      rgba(232,238,246,.93) 100%);
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    box-shadow:
      0 28px 60px -24px rgba(20,30,55,.32),
      0 8px 20px -8px rgba(20,30,55,.12),
      inset 0 1px 0 rgba(255,255,255,.85);
  }
  .rm-tag{font-size:13px}
  .rm-footer .mono{font-size:11px}
  .rm-counter b{font-size:24px}
}
@media (max-width:420px){
  .rm-title{font-size:clamp(30px,8vw,48px);white-space:nowrap}
  .rm-body{font-size:16px;max-width:32ch}
  .rm-card{
    padding:28px 22px;
    border-radius:22px;
    gap:16px;
  }
  .rm-tag{font-size:12px;letter-spacing:.12em}
}
/* Short viewport guard (landscape phones, short windows) */
@media (max-height:640px) and (min-width:721px){
  .rm-card{padding:clamp(26px,3.6vh,44px) clamp(30px,4vw,60px);gap:clamp(14px,1.8vh,22px)}
  .rm-title{font-size:clamp(32px,4.2vw,58px)}
  .rm-body{font-size:clamp(16px,1.5vw,20px)}
}

/* Process: stack icon-over-card on small screens (no clipping) */
@media (max-width:900px){
  .rm-main{display:flex;flex-direction:column;gap:clamp(14px,2.2vh,24px);justify-content:center}
  .rm-visual{order:1;flex:0 0 auto;height:clamp(200px,34svh,320px);width:100%}
  #rm-canvas{-webkit-mask-image:radial-gradient(130% 120% at 50% 50%,#000 66%,transparent 99%);mask-image:radial-gradient(130% 120% at 50% 50%,#000 66%,transparent 99%)}
  .rm-phase-stack{order:2;flex:1 1 auto;min-height:200px}
  .rm-phase{justify-content:center}
  .rm-card{width:min(560px,94vw);max-width:560px;margin:0 auto;align-items:center;text-align:center;padding:clamp(24px,3.2vh,38px) clamp(24px,5vw,40px);gap:clamp(12px,1.8vh,20px)}
  .rm-title{font-size:clamp(32px,8vw,58px);white-space:nowrap;line-height:.92}
  .rm-body{max-width:38ch;font-size:clamp(15px,3.6vw,18px);line-height:1.5}
  .rm-tag{font-size:13px}
}

/* Mobile + tablet: hide desktop nav and header CTA, show hamburger */
@media (max-width:1024px){
  nav.desktop-nav{display:none}
  header .cta-book.cta-compact{display:none}
  .nav-toggle{display:flex}
  /* the bar loses its nav and CTA here, so the lockup can breathe a little */
  :root{--nav-logo-h:44px}
}
/* Phones: the wordmark's two lines need to stay legible, and the lockup has
   to clear the hamburger with real space between them, so it steps down
   rather than shrinking to fit. */
@media (max-width:600px){
  :root{--nav-logo-h:38px}
}
@media (max-width:380px){
  :root{--nav-logo-h:34px}
}

/* Performance: drop expensive backdrop blur on phones/tablets - the glass
   panels are already ~94% opaque, so this is invisible but much lighter. */
@media (max-width:900px){
  .rm-card{backdrop-filter:none;-webkit-backdrop-filter:none}
  header.scrolled{backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  .clients-track{animation:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
}