:root{
  --ink:#1A1A1C;
  --ink-deep:#131315;
  --surface:#242427;
  --surface-2:#2E2E32;
  --line:rgba(255,255,255,.10);
  --red:#EB3F22;
  --red-deep:#B72E17;
  --bone:#F2EFE6;
  --bone-line:rgba(26,26,28,.14);
  --star:#DDDEDE;
  --display:'Anton', Impact, sans-serif;
  --body:'Work Sans', system-ui, sans-serif;
  --grotesque:'Arimo', Arial, Helvetica, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
html.modal-open,body.modal-open{overflow:hidden;}
body{
  margin:0;background:var(--ink);color:#fff;
  font-family:var(--body);line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  text-transform:uppercase;
}
img{max-width:100%;display:block;}
a{color:inherit;}
p{margin:0 0 1em;}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:.94;letter-spacing:-.5px;}
.wrap{max-width:1240px;margin:0 auto;padding:0 30px;}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:700;font-size:15px;
  padding:16px 30px;border-radius:100px;border:1.5px solid var(--red);
  background:var(--red);color:#fff;text-decoration:none;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{background:#fff;border-color:#fff;color:var(--ink);}
.btn.line{background:transparent;border-color:rgba(255,255,255,.4);color:#fff;}
.btn.line:hover{background:#fff;border-color:#fff;color:var(--ink);}
.btn.ink{background:var(--ink);border-color:var(--ink);color:#fff;}
.btn.ink:hover{background:var(--red);border-color:var(--red);color:#fff;}
.btn.ink-line{background:transparent;border-color:var(--bone-line);color:var(--ink);}
.btn.ink-line:hover{background:var(--ink);border-color:var(--ink);color:#fff;}

/* ---------- LOADER ---------- */
#loader-overlay{position:fixed;inset:0;z-index:200;background:transparent;display:flex;align-items:center;justify-content:center;}
/* separate backdrop so it can dissolve while the logo keeps flying */
.loader-bg{position:absolute;inset:0;background:#222;z-index:0;}
/* About -> FAQ transition wipe (see js/about-wipe.js) — GSAP drives the
   actual clip-path/background/opacity animation via inline styles; this
   just sets the resting, invisible starting state */
.about-wipe{
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  opacity:0;clip-path:circle(0% at 50% 50%);
}
.logo-wrap{position:relative;z-index:1;width:min(58vw,380px);aspect-ratio:1529/817;}
.logo-wrap img{position:absolute;opacity:0;display:block;width:100%;}
#wordmarkImg{left:5.1667%;top:18.2375%;width:88.8162%;}
#agencyImg{left:74.0353%;top:75.5202%;width:20.7979%;}
#hero-star{position:fixed;top:0;left:0;width:110px;height:110px;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;z-index:201;}
#hero-star img{width:100%;height:100%;display:block;}
/* the loader owns the logo until it lands in the navbar */
body.loader-running .nav-logo img{visibility:hidden;}

/* ---------- NAV (floating, no solid bar) ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease,box-shadow .3s ease,transform .38s cubic-bezier(.22,1,.36,1);
}
/* once scrolled it can pass over light sections, so add just enough backing to stay readable */
header.scrolled{
  /* solid, not blurred — this sits on top of the feed wall, which animates
     the entire time you're on the hero, so a backdrop-filter here was
     recomputing continuously rather than only during scroll */
  background:rgba(19,19,21,.94);
  border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(0,0,0,.3);
}
header.nav-hidden{transform:translateY(-100%);}

.nav{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:14px 40px;max-width:1560px;margin:0 auto;
}
/* centered independently of the flex flow, so unequal left/right link
   widths can never pull it off-centre */
.nav-logo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;
}
.nav-logo img{
  height:clamp(58px,6.6vw,92px);width:auto;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.55));
}
.nav-links{display:flex;align-items:center;justify-content:space-between;flex:1;}
.nav-side{display:flex;align-items:center;gap:34px;}
.nav-side a{
  text-decoration:none;font-weight:700;font-size:14px;
  letter-spacing:1.2px;text-transform:uppercase;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
  padding-bottom:4px;border-bottom:1.5px solid transparent;
  transition:border-color .2s ease,opacity .2s ease;
}
.nav-side a:hover{border-bottom-color:var(--red);}
.nav-toggle{
  display:none;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;line-height:1;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
  padding:8px;margin:-8px;min-width:44px;min-height:44px;
  align-items:center;justify-content:center;
}

@media (max-width:900px){
  .nav{padding:12px 20px;}
  .nav-toggle{display:flex;}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;flex:none;
    flex-direction:column;align-items:stretch;
    background:rgba(19,19,21,.96);backdrop-filter:blur(16px);
    padding:14px 20px 20px;border-bottom:1px solid var(--line);
  }
  .nav-links.open{display:flex;}
  .nav-side{flex-direction:column;align-items:stretch;gap:0;}
  .nav-side a{padding:14px 0;border-bottom:1px solid var(--line);text-align:center;}
  .nav-right a:last-child{border-bottom:0;}
}

/* ---------- HERO: THE FEED WALL ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--ink-deep);padding:clamp(120px,15vh,180px) 0 80px;}
.feed-wall{
  position:absolute;inset:-10% -3%;display:flex;gap:18px;justify-content:center;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 84%,transparent 100%);
}
/* no column gap — each card carries its own bottom margin instead, so a
   translateY(-50%) lands exactly on the duplicate and the loop has no seam */
.feed-col{display:flex;flex-direction:column;flex:1 1 0;min-width:0;max-width:202px;}
.feed-col.wide{max-width:232px;}
.feed-col.up{animation:feedUp 46s linear infinite;}
.feed-col.down{animation:feedDown 54s linear infinite;}
.feed-col.slow{animation-duration:66s;}
@keyframes feedUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes feedDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media (max-width:1600px){.feed-col:nth-child(n+9){display:none;}}
@media (max-width:1250px){.feed-col:nth-child(n+7){display:none;}}
@media (max-width:1050px){.feed-col:nth-child(n+6){display:none;}}
@media (max-width:830px){.feed-col:nth-child(n+5){display:none;}}
@media (max-width:600px){.feed-col:nth-child(n+4){display:none;}}

/* scrim keeps the headline readable and fades the wall out at every edge.
   Tuned to match the Talents hero: the photos read more clearly now
   (lighter centre), but the radial "spotlight" that darkens toward the
   middle behind the headline is preserved — it's the first gradient
   layer, just eased from near-opaque to a softer pool so the imagery
   still shows through. */
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(78% 62% at 50% 46%, rgba(11,11,13,.82) 0%, rgba(11,11,13,.6) 38%, rgba(11,11,13,.18) 72%, transparent 100%),
    linear-gradient(to right, var(--ink-deep) 0%, rgba(19,19,21,.5) 6%, transparent 15%, transparent 85%, rgba(19,19,21,.5) 94%, var(--ink-deep) 100%),
    linear-gradient(to bottom, rgba(11,11,13,.62), rgba(11,11,13,.2) 42%, rgba(11,11,13,.78));
}

.reel{
  position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  background:var(--surface);border:1px solid rgba(255,255,255,.07);
  display:flex;align-items:flex-end;
  margin-bottom:18px;flex-shrink:0;
}
/* portrait formats only — 9:16 phone video and 4:5 portrait post */
.reel.r45{aspect-ratio:4/5;}
.reel::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(255,255,255,.09),transparent 55%);
}
.reel.t1{background:linear-gradient(165deg,#3A3A40,#1E1E21);}
.reel.t2{background:linear-gradient(165deg,#4A2A22,#1E1E21);}
.reel.t3{background:linear-gradient(165deg,#2A3540,#1E1E21);}
.reel.t4{background:linear-gradient(165deg,#413528,#1E1E21);}
.reel.t5{background:linear-gradient(165deg,var(--red-deep),#241713);}
.reel-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.15);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
}
.reel-play::after{content:'';border-left:9px solid rgba(255,255,255,.85);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px;}
.reel-name{
  position:relative;width:100%;padding:26px 12px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
  font-size:11.5px;font-weight:700;color:rgba(255,255,255,.92);letter-spacing:.1px;
}

.hero-inner{position:relative;z-index:3;width:100%;text-align:center;}
.hero h1{font-size:clamp(46px,8.6vw,124px);text-transform:uppercase;text-shadow:0 4px 40px rgba(0,0,0,.6);color:#fff;}
/* Real rendering cost that recomputes every frame — cheap at rest, expensive
   at 240x scale. Suppressed for the duration of the zoom via .zoom-active
   (toggled in hero-zoom.js). */
.hero.zoom-active h1{text-shadow:none;}
.hero-sub-link{
  display:inline-flex;align-items:center;gap:8px;margin:30px 0 22px;
  font-family:var(--grotesque);font-weight:700;font-size:clamp(14px,1.35vw,17px);
  text-transform:uppercase;letter-spacing:.3px;
  color:#fff;text-decoration:none;
  padding-bottom:4px;border-bottom:1.5px solid rgba(255,255,255,.5);
  transition:border-color .25s ease,color .25s ease,gap .25s ease;
}
.hero-sub-link::after{content:'→';transition:transform .25s ease;}
.hero-sub-link:hover{color:var(--red);border-color:var(--red);gap:12px;}
.hero-sub-link:hover::after{transform:translateX(2px);}
.hero-note{
  margin:0;font-family:var(--grotesque);font-weight:700;font-size:clamp(11px,1vw,12.5px);
  text-transform:uppercase;letter-spacing:-.2px;
  color:rgba(255,255,255,.6);
}

/* ---------- CLIENT TABS + SPOTLIGHT CAROUSEL ---------- */
.clients{
  background:#000;
  /* asymmetric on purpose: top needs a real floor so the heading (and
     the star lifting above it) always clears the fixed header, even at
     common short-viewport laptop resolutions like 1366×768 — bottom
     stays small so the section still fits in one screen overall */
  padding:clamp(72px,10vh,96px) 0 clamp(10px,1.5vh,18px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
}
.clients-inner{width:100%;}
.clients-head{margin-bottom:clamp(10px,1.6vw,18px);text-align:center;}
.clients-head h2{
  position:relative;font-size:clamp(36px,5vw,62px);
  text-transform:uppercase;color:#fff;
}
/* same star device used in "How it★works" — reused as-is */

/* -- brand picker: a row of pill tabs. Nothing auto-moves here; picking
   one drives the big carousel below. -- */
.client-tabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:9px 11px;
  margin-bottom:clamp(12px,1.8vw,20px);
}
.client-tab{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:14px;letter-spacing:.3px;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  background:none;border:1px solid var(--line);border-radius:100px;
  padding:10px 20px;cursor:pointer;
  transition:color .2s ease,background .2s ease,border-color .2s ease;
}
.client-tab:hover{color:#fff;border-color:rgba(255,255,255,.32);}
.client-tab.active,.client-tab:focus-visible{
  color:#fff;background:var(--red);border-color:var(--red);outline:none;
}
.client-tab-status{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.28);
  transition:background .3s ease,box-shadow .3s ease;
}
.client-tab-status.has-media{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.14);}
.client-tab:not(.active) .client-tab-status.has-media{
  background:var(--red);box-shadow:0 0 0 3px rgba(235,63,34,.16);
}

/* -- showcase: the brand name up top, a big auto-advancing carousel of
   real campaign media below it -- */
.showcase{text-align:center;}
.showcase-info{margin-bottom:clamp(8px,1.2vw,14px);}
.showcase-info h3{font-size:clamp(22px,3vw,34px);text-transform:uppercase;color:#fff;}
.showcase-info p{
  margin:8px 0 0;font-size:14px;color:rgba(255,255,255,.7);
  display:inline-flex;align-items:center;gap:7px;
}
.showcase-info p::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--red);flex-shrink:0;
}
.showcase-info p.empty{color:rgba(255,255,255,.42);font-style:italic;}
.showcase-info p.empty::before{background:rgba(255,255,255,.22);}

.showcase-carousel{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,1.8vw,22px);
}
.showcase-arrow{flex-shrink:0;}
.showcase-carousel.single .showcase-arrow{visibility:hidden;}
.showcase-track{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,1.3vw,16px);
  min-height:clamp(225px,22vw,380px);
}
.showcase-dots{
  display:flex;justify-content:center;gap:9px;
  margin-top:clamp(12px,2vw,18px);min-height:8px;
}
.showcase-dot{
  width:8px;height:8px;border-radius:50%;border:0;padding:0;
  background:rgba(255,255,255,.22);cursor:pointer;
  transition:background .25s ease,transform .25s ease;
}
.showcase-dot:hover{background:rgba(255,255,255,.5);}
.showcase-dot.active{background:var(--red);transform:scale(1.3);}

/* the phone frame itself — bezel, notch, screen — same real-device look
   as before; only how it's placed in the carousel changes below */
.phone{
  position:relative;aspect-ratio:9/19.5;
  background:#0A0A0C;border-radius:clamp(20px,2.6vw,32px);padding:6px;
  box-shadow:0 20px 44px rgba(0,0,0,.55),
    inset 0 0 0 1.5px rgba(255,255,255,.16),
    inset 0 0 0 3px rgba(120,122,128,.35); /* faint aluminum edge, not titanium-black */
}
.showcase-track .phone{opacity:0;transform:translateY(14px) scale(.94);}
.showcase-track .phone.is-center{
  flex:0 0 clamp(148px,12.3vw,206px);z-index:3;
  animation:phoneInCenter .5s cubic-bezier(.22,1,.36,1) forwards,
            phoneFloat 4.5s ease-in-out .5s infinite;
}
/* one step either side of centre — still fairly sharp, clearly clickable */
.showcase-track .phone.is-near{
  flex:0 0 clamp(110px,9.5vw,160px);cursor:pointer;z-index:2;
  animation:phoneInNear .5s cubic-bezier(.22,1,.36,1) forwards;
}
.showcase-track .phone.is-near .phone-screen{
  filter:saturate(.55) brightness(.62);transition:filter .25s ease;
}
.showcase-track .phone.is-near:hover .phone-screen,
.showcase-track .phone.is-near:focus-visible .phone-screen{
  filter:saturate(.85) brightness(.85);
}
/* two steps out — only appears once there's enough real content to fill
   five slots without repeating a clip; furthest back, most muted */
.showcase-track .phone.is-far{
  flex:0 0 clamp(70px,6vw,105px);cursor:pointer;z-index:1;
  animation:phoneInFar .5s cubic-bezier(.22,1,.36,1) forwards;
}
.showcase-track .phone.is-far .phone-screen{
  filter:saturate(.35) brightness(.42);transition:filter .25s ease;
}
.showcase-track .phone.is-far:hover .phone-screen,
.showcase-track .phone.is-far:focus-visible .phone-screen{
  filter:saturate(.7) brightness(.75);
}
@keyframes phoneInCenter{to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes phoneInNear{to{opacity:.55;transform:translateY(0) scale(.93);}}
@keyframes phoneInFar{to{opacity:.32;transform:translateY(0) scale(.86);}}
@keyframes phoneFloat{0%,100%{translate:0 0;}50%{translate:0 -6px;}}

/* left edge: Action button (upper, short) + volume up/down below it */
.phone::before{
  content:'';position:absolute;left:-2px;top:15%;width:2.5px;height:5%;
  background:#2E2E32;border-radius:2px;
  box-shadow:0 calc(9% + 4px) 0 0 #2E2E32, 0 calc(9% + 4px + 9%) 0 0 #2E2E32;
}
/* right edge: power button + Camera Control (lower, wider capacitive strip) */
.phone::after{
  content:'';position:absolute;right:-2px;top:16%;width:2.5px;height:7%;
  background:#2E2E32;border-radius:2px;
  box-shadow:0 calc(11% + 6px) 0 0 #2E2E32;
}
.phone-cam-control{
  position:absolute;right:-2.5px;bottom:14%;width:3px;height:9%;
  background:linear-gradient(180deg,#3A3A3E,#232326);border-radius:2.5px;
}

.phone-screen{
  position:relative;width:100%;height:100%;
  border-radius:clamp(19px,2.1vw,27px);overflow:hidden;
  display:flex;align-items:flex-end;
}

/* Dynamic Island: a floating pill, not a full-width notch */
.phone-notch{
  position:absolute;top:6.5%;left:50%;transform:translateX(-50%);
  width:34%;height:6.5%;min-height:9px;
  background:#000;border-radius:100px;z-index:3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.phone-screen.t1{background:linear-gradient(168deg,#3A3A40,#17171A);}
.phone-screen.t2{background:linear-gradient(168deg,#4A2A22,#17171A);}
.phone-screen.t3{background:linear-gradient(168deg,#2A3540,#17171A);}
.phone-screen.t4{background:linear-gradient(168deg,#413528,#17171A);}
.phone-screen.t5{background:linear-gradient(168deg,var(--red-deep),#1E1310);}
/* placeholder screens (no media yet) get a slow shimmer sweep so "coming
   soon" reads as alive rather than a flat dead gradient */
.phone-screen:not(.has-media){background-size:200% 200%;animation:phoneShimmer 5s ease-in-out infinite;}
@keyframes phoneShimmer{0%,100%{background-position:0% 0%;}50%{background-position:100% 100%;}}
.phone-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.16);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:2;
}
.phone-play::before{
  content:'';position:absolute;inset:-8px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5);opacity:0;
  animation:howPulse 2.6s ease-out infinite;
}
.phone-play::after{content:'';border-left:10px solid rgba(255,255,255,.88);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px;}
.phone-screen.has-media .phone-play{display:none;}
@media (prefers-reduced-motion: reduce){
  .showcase-track .phone{animation:none !important;opacity:1;transform:none;}
  .phone-play::before{animation:none;opacity:0;}
  .client-tab{transition:none;}
}

/* ---------- SECTIONS ---------- */
.sec{
  padding:110px 0;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
}
#process{padding:72px 0;}
.sec > .wrap{width:100%;}
.sec-dark{background:var(--ink);}

/* ambient background glow for #work — matches the same t1–t5 palette
   used on each case's cover placeholder, so when the active card
   changes, the whole section's backdrop shifts to match it: the same
   "background follows the active item" idea as the referenced pen,
   which ties `body`'s background-image to whichever radio/photo is
   checked via a custom property, with a transition on it.
   One real difference from a naive copy: plain custom properties are
   just text substitution — a browser can't smoothly interpolate between
   two different color literals swapped in through an untyped variable,
   only snap. @property registers --work-glow as an actual <color>, which
   is what makes the transition genuinely animate rather than cut. */
@property --work-glow{
  syntax:'<color>';inherits:true;initial-value:#2E2E33;
}
#work{
  --work-glow: #2E2E33;
  background: radial-gradient(120% 90% at 50% -10%, var(--work-glow) 0%, #101012 62%);
  transition: --work-glow 1.1s ease;
  /* asymmetric on purpose, same reasoning as .clients above: top needs a
     real floor so the heading and its star always clear the fixed
     header at common short-viewport resolutions; bottom stays small so
     the section still fits one screen overall */
  padding:clamp(90px,10vh,110px) 0 clamp(10px,1.5vh,20px) 0;
}
@media (prefers-reduced-motion: reduce){
  #work{transition:none;}
}
/* bigger, matching the same per-section override pattern already used
   for #services/#process — plus the same star device from "How
   it★works", reused as-is */
#work .sec-head{margin-bottom:clamp(28px,4vw,40px);}
#work .sec-head h2{font-size:clamp(40px,6.5vw,84px);}

/* ---------- THE WORK ("Brands" in the nav): text intro ----------
   Same idea as the Talents page's own scroll reveal (see talents.js) —
   main.js toggles #work's .in-view class on and off every time the
   section crosses into or out of view (workTextIntro), rather than once,
   so scrolling back up replays it just like scrolling down into it does.
   Slow and unhurried per the brief, and no two pieces move quite the same
   way: the heading pulls into focus out of a blur, the intro line just
   rises, and each case's text arrives from its own direction. */
#work .sec-head h2{
  opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity 1.05s cubic-bezier(.22,1,.36,1),
             transform 1.05s cubic-bezier(.22,1,.36,1),
             filter 1.05s cubic-bezier(.22,1,.36,1);
}
#work .sec-head p{
  opacity:0;transform:translateY(20px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
  transition-delay:.12s;
}
#work.in-view .sec-head h2{opacity:1;transform:none;filter:blur(0);}
#work.in-view .sec-head p{opacity:1;transform:none;}

.work-info{
  opacity:0;transform:translateY(22px);
  transition:opacity .95s cubic-bezier(.22,1,.36,1), transform .95s cubic-bezier(.22,1,.36,1);
}
#work.in-view .work-info{opacity:1;transform:none;}
.work-slide:nth-child(1) .work-info{transform:translateX(-26px);transition-delay:.3s;}
.work-slide:nth-child(2) .work-info{transform:translateY(24px);transition-delay:.42s;}
.work-slide:nth-child(3) .work-info{transform:translateX(26px);transition-delay:.54s;}
.work-slide:nth-child(n+4) .work-info{transition-delay:.66s;}
@media (prefers-reduced-motion: reduce){
  #work .sec-head h2,#work .sec-head p,.work-info{
    opacity:1;transform:none;filter:none;transition:none;
  }
}

/* low-opacity background video for How It Works — sits on top of the
   solid dark background, not replacing it. Applying z-index directly to
   #process's own children (not just its .wrap) so every piece of content
   is lifted above the video in one rule, rather than needing to track
   which specific wrapper each element happens to be nested inside. */
#process{position:relative;overflow:hidden;}
.process-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.22;filter:blur(14px);transform:scale(1.08);z-index:0;
}
#process > *:not(.process-video){position:relative;z-index:1;}
.sec-light{background:var(--bone);color:var(--ink);}
/* the rolling swap: the container clips to one row, the track holds both
   words stacked, and sliding the track up by one row reveals the other
   word while masking the transit cleanly */
.swap{
  display:inline-block;position:relative;overflow:hidden;
  height:1.1em;vertical-align:top;line-height:1.1;
}
.swap-track{display:block;position:relative;width:100%;height:100%;}
.swap-face{
  position:absolute;inset:0;opacity:0;
  display:flex;align-items:center;justify-content:center;
  white-space:nowrap;
}
.swap-face:nth-child(1){opacity:1;}
.swap.flipped .swap-face:nth-child(1){opacity:0;}
.swap.flipped .swap-face:nth-child(2){opacity:1;}

/* glitch reveal: the outgoing word just cuts (opacity above has no
   transition, so it snaps off), the incoming word punches in through a
   few stepped, clipped, colour-split frames instead of a smooth fade */
@keyframes swapGlitch{
  0%   {opacity:0;clip-path:inset(0 0 65% 0);transform:translate(-4%,0);
        text-shadow:-3px 0 var(--red),3px 0 #2ee6ff;}
  12%  {opacity:1;clip-path:inset(70% 0 0 0);transform:translate(3%,0);}
  24%  {clip-path:inset(15% 0 55% 0);transform:translate(-2%,0);
        text-shadow:3px 0 var(--red),-3px 0 #2ee6ff;}
  36%  {clip-path:inset(0 0 0 0);transform:translate(1%,0);text-shadow:none;}
  48%  {clip-path:inset(40% 0 20% 0);transform:translate(-3%,0);
        text-shadow:-2px 0 var(--red),2px 0 #2ee6ff;}
  60%  {clip-path:inset(0 0 0 0);transform:translate(0,0);text-shadow:none;}
  100% {opacity:1;clip-path:inset(0 0 0 0);transform:translate(0,0);text-shadow:none;}
}
.swap:not(.flipped) .swap-face:nth-child(1),
.swap.flipped .swap-face:nth-child(2){
  animation:swapGlitch .5s steps(1,end);
}
@media (prefers-reduced-motion: reduce){
  .swap:not(.flipped) .swap-face:nth-child(1),
  .swap.flipped .swap-face:nth-child(2){
    animation:none;
  }
}

.sec-head{max-width:720px;margin-bottom:60px;}
.sec-head h2{font-size:clamp(34px,5vw,64px);text-transform:uppercase;}
.sec-head p{margin-top:18px;font-size:17px;color:rgba(255,255,255,.66);}
.sec-light .sec-head p{color:rgba(26,26,28,.7);}

/* "What we do" — centred and noticeably larger than the default heading
   size, scoped to this section specifically */
#services .sec-head{text-align:center;margin-left:auto;margin-right:auto;max-width:none;}
#services .sec-head h2{font-size:clamp(48px,7.2vw,96px);}
.svc-footnote{
  margin:28px 0 0;text-align:center;font-size:17px;
  color:rgba(255,255,255,.66);
}

/* "How it works" — centred, matching About Us exactly: same size, same
   star device (vertical-align:middle, spinning), no chromatic fringe */
#process .sec-head{text-align:center;margin-left:auto;margin-right:auto;max-width:none;margin-bottom:34px;}
#process .sec-head h2{
  position:relative;font-size:clamp(64px,13vw,180px);
}
/* the real brand star asset (same file used by the loader's flying
   star), not a CSS approximation — swapped in for brand accuracy.
   Sized a bit larger than the old clip-path box since this PNG is a
   padded crop, not edge-to-edge art, so the visible glyph needs more
   room to read at the same size as before. */
/* One geometry for every heading so the star reads identically at all
   sizes. Two things matter:
   - horizontal: -.34em pulls the two words in tight around the star.
     Less negative than this and the gap reads as a double space; more
     and the words start closing over the star's side points.
   - vertical: the star art is close to edge-to-edge in its box, so the
     lift has to clear almost the full .82em height. -.66em sits the
     lower tip right at cap height, with the body of the star above the
     line rather than sitting on the letters. */
.how-star{
  display:inline-block;width:.94em;height:.82em;margin:0 -.34em;
  position:relative;top:-.66em;
  object-fit:contain;vertical-align:baseline;
}
/* The lift is in em, so it scales with each heading's own font-size and
   needs no per-heading override. The one exception is clearance: the
   header is a fixed ~55px tall no matter how big the heading is, and
   #process (up to 180px) also has overflow:hidden, which would clip a
   star this high. So the largest heading gets extra top room rather than
   a lower star, which would break the alignment. */
#process .sec-head h2{padding-top:.3em;}

/* ---------- SERVICES: 2x3 grid, fits one screen ---------- */
/* Six full-width rows ran past two screens. As a grid the whole offering
   reads at a glance, and the service names get to be the visual anchor
   rather than long descriptions. */
/* ---------- SERVICES: expand-on-select showcase ---------- */
.svc-showcase{
  display:flex;gap:12px;margin:48px 0 20px;
  height:clamp(320px,42vw,480px);
}
.svc-card{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:14px;
  background:var(--surface);border:0;padding:0;cursor:pointer;
  transition:flex-grow .65s cubic-bezier(.22,1,.36,1);
}
.svc-card.active{flex-grow:8;}
.svc-card:not(.active){flex-grow:1;}
.svc-poster,.svc-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.svc-video{opacity:0;transition:opacity .4s ease;}
.svc-card.active .svc-video{opacity:1;}
/* darken so the centred title/description stay legible over any photo */
.svc-card::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(0,0,0,.38);
}
/* the "text content in the middle" — only the active (expanded) card */
.svc-overlay{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 24px;
  opacity:0;transition:opacity .35s ease .1s;
}
.svc-card.active .svc-overlay{opacity:1;}
.svc-overlay h3{
  font-family:var(--display);font-size:clamp(24px,2.6vw,38px);
  text-transform:uppercase;color:#fff;margin-bottom:10px;line-height:1.05;
  text-shadow:0 2px 16px rgba(0,0,0,.7);
}
.svc-overlay p{
  margin:0;max-width:34ch;font-size:clamp(13px,1vw,15px);
  color:rgba(255,255,255,.85);line-height:1.5;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
/* the collapsed (thumbnail) label — replaces the overlay when not active */
.svc-label{
  position:absolute;left:0;right:0;bottom:16px;z-index:2;
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--display);font-size:14px;text-transform:uppercase;
  color:#fff;text-align:center;opacity:1;transition:opacity .25s ease;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.svc-card.active .svc-label{opacity:0;pointer-events:none;}
@media (max-width:900px){
  .svc-showcase{
    flex-direction:column;height:auto;gap:10px;
  }
  .svc-card{flex:none !important;height:64px;}
  .svc-card.active{height:clamp(280px,60vw,380px);}
  .svc-label{
    writing-mode:horizontal-tb;bottom:0;top:0;display:flex;
    align-items:center;justify-content:center;
  }
}
@media (prefers-reduced-motion: reduce){
  .svc-card{transition:none;}
  .svc-video,.svc-overlay,.svc-label{transition:none;}
}

/* ---------- ACTIVATION BAND ---------- */
.band{
  position:relative;overflow:hidden;
  background:var(--red);color:#fff;padding:96px 0;
  transition:min-height .7s cubic-bezier(.22,1,.36,1), padding .7s cubic-bezier(.22,1,.36,1);
}
/* the white fill — starts as a zero-radius circle centred on the button
   (position set live by JS via --btn-x/--btn-y, since the button isn't
   centred in the layout) and expands to cover the whole section on hover */
.band-reveal{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:#fff;
  clip-path:circle(0% at var(--btn-x,80%) var(--btn-y,70%));
  transition:clip-path .75s cubic-bezier(.65,0,.35,1);
}
.band.btn-hover .band-reveal{
  clip-path:circle(150% at var(--btn-x,80%) var(--btn-y,70%));
}
.band-inner{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between;align-items:center;width:100%;}
/* Heading on top, paragraph + button underneath, all left-aligned, with the
   photo on the right. This used to happen only by accident (the old heading
   was wide enough to force the paragraph onto its own row); with a shorter
   heading the paragraph slid up beside it and ran into the photo. Stacking is
   now explicit, so the layout no longer depends on how long the heading is. */
.band-inner{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:center;}
.band h2{
  font-size:clamp(34px,5.4vw,68px);text-transform:uppercase;max-width:15ch;
  transition:color .5s ease;
}
/* text flips to a readable colour once the white fill reaches it, rather
   than staying white-on-white */
.band.btn-hover h2{color:var(--ink);}
.band.btn-hover .band-side p{color:rgba(26,26,28,.78);}
.band-side{max-width:400px;}
.band-side p{color:rgba(255,255,255,.92);font-size:17px;transition:color .5s ease;}
.band .btn{
  background:#fff;border-color:#fff;color:var(--red);
  transition:background .5s ease,border-color .5s ease,color .5s ease;
}
.band.btn-hover .btn{background:var(--red);border-color:var(--red);color:#fff;}

/* The paragraph stays out of sight until the button is hovered (or focused).
   It appears just under the button, a beat after the white fill has finished
   spreading. It can't sit between the heading and the button: it would push the
   button out from under the pointer the moment it appeared. It's only hidden
   where it can be revealed (a real mouse, a wide screen, motion allowed -
   .has-reveal is set by main.js); phones, tablets and reduced-motion keep it
   showing as before. The box keeps its 400px width so the photo cut-outs, which
   are sized around it (band-people.js), end up exactly where they did. */
@media (min-width:901px) and (hover:hover){
  .band.has-reveal .band-side{position:relative;width:min(400px,100%);}
  .band.has-reveal .band-side p{
    position:absolute;top:100%;left:0;width:100%;margin:22px 0 0;
    opacity:0;transform:translateY(10px);pointer-events:none;
    transition:opacity .3s ease,transform .3s ease,color .5s ease;
  }
  .band.has-reveal.btn-hover .band-side p{
    opacity:1;transform:none;
    transition:opacity .5s ease .75s,transform .6s cubic-bezier(.22,1,.36,1) .75s,color .5s ease;
  }
}

/* Expands once, permanently, when the section reaches the centre of the
   screen — this is a real height change, not a visual trick, so it
   correctly pushes Work (and everything after it) down and reserves that
   space properly. It only ever fires once (see the JS), so this doesn't
   have the repeated-toggle reflow problem the earlier version had. */
.band.expand{min-height:100vh;min-height:100svh;padding:40px 0;display:flex;align-items:center;}
@media (prefers-reduced-motion: reduce){
  .band{transition:none;}
}

/* shared: the round prev/next arrow button used by both the Clients
   showcase and the Work spotlight below */
.carousel-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:transparent;color:#fff;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s ease,border-color .18s ease;}
.carousel-btn:hover{background:var(--red);border-color:var(--red);}
/* shared: the small pill status flag, reused for "In progress" etc. */
.case-flag{display:inline-block;font-size:11.5px;font-weight:700;color:var(--red);border:1px solid rgba(235,63,34,.45);border-radius:100px;padding:5px 12px;width:fit-content;}

/* ---------- THE WORK: native scroll-snap gallery ---------- */
/* Layout technique borrowed from the "Faux 3D Content Scroller" pattern
   (a real scrollable track, snap-aligned, scrollbar hidden, edges faded
   via a mask) — adapted two ways for content that has to stay legible:
   1. that pen's items were plain square photos with no text, so it could
      also mask a curved band straight through the middle of each item
      for a barrel/cylinder illusion; ours carry real titles and
      descriptions, and cutting a mask band through running text would
      make it unreadable at certain scroll positions. So depth here comes
      from scale/opacity driven by each slide's distance from centre
      (JS, further down) instead of a mid-card mask.
   2. Real write-ups aren't in yet, so the cover leans into that honestly
      — a shimmering placeholder with the case's own number as a big
      watermark, not a broken empty box. Swap the shimmer div for a real
      <img>/<video> per case once there's real cover art. */
.work-scroller-wrap{
  position:relative;display:flex;align-items:center;
  gap:clamp(10px,1.8vw,22px);
  margin-top:clamp(20px,3vw,36px);
  width:100%;
}
.work-arrow{flex-shrink:0;position:relative;z-index:2;}

.work-scroller{
  --slide: clamp(290px,30vw,520px);
  flex:1;min-width:0;
  display:flex;align-items:stretch;
  gap:clamp(18px,2.4vw,34px);
  list-style:none;margin:0;
  padding:14px calc(50% - (var(--slide) / 2));
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent) 50% 50% / 100% 100% no-repeat;
  mask:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent) 50% 50% / 100% 100% no-repeat;
}
.work-scroller::-webkit-scrollbar{display:none;}

.work-slide{
  flex:0 0 var(--slide);scroll-snap-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  overflow:hidden;cursor:pointer;
  opacity:.4;transform:scale(.86);
  transition:opacity .25s ease,transform .25s ease,filter .25s ease;
  filter:saturate(.6) brightness(.7);
}
.work-slide.is-active{
  opacity:1;transform:scale(1);filter:none;cursor:default;
}

.work-cover{
  position:relative;aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;
  background-size:200% 200%;animation:phoneShimmer 5s ease-in-out infinite;
}
.work-cover.t1{background-image:linear-gradient(155deg,#3A3A40,#17171A);}
.work-cover.t2{background-image:linear-gradient(155deg,#4A2A22,#17171A);}
.work-cover.t3{background-image:linear-gradient(155deg,#2A3540,#17171A);}
.work-cover.t4{background-image:linear-gradient(155deg,#413528,#17171A);}
.work-cover.t5{background-image:linear-gradient(155deg,var(--red-deep),#1E1310);}
.work-cover-num{
  font-family:var(--display);font-size:clamp(70px,8vw,120px);line-height:1;
  color:rgba(255,255,255,.07);letter-spacing:-2px;
  -webkit-text-stroke:1.5px rgba(255,255,255,.16);
}

.work-info{
  padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;
  align-items:flex-start;gap:11px;text-align:left;
}
.work-info h3{font-family:var(--body);font-weight:800;font-size:clamp(19px,2vw,24px);color:#fff;margin:0;}
.work-info p{font-size:14px;color:rgba(255,255,255,.62);margin:0;}

.work-dots{display:flex;justify-content:center;gap:9px;margin-top:clamp(16px,2.4vw,24px);}
.work-dot{
  width:8px;height:8px;border-radius:50%;border:0;padding:0;
  background:rgba(255,255,255,.22);cursor:pointer;
  transition:background .25s ease,transform .25s ease;
}
.work-dot:hover{background:rgba(255,255,255,.5);}
.work-dot.active{background:var(--red);transform:scale(1.3);}

@media (prefers-reduced-motion: reduce){
  .work-cover{animation:none;}
  .work-slide{transition:none;}
  .work-scroller{scroll-behavior:auto;}
}

@media (max-width:760px){
  .work-scroller{--slide: min(78vw,380px);}
  .work-arrow{display:none;}
}

/* ---------- ABOUT ---------- */
.about-pull .about-eyebrow{
  margin:0 0 18px;
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(64px,13vw,180px);color:var(--ink);line-height:1;
}
/* same star device as How It Works, reused identically — now spinning */
.about-eyebrow .about-star{
  display:inline-block;width:.95em;height:.95em;margin:0 0 0 .1em;
  position:relative;vertical-align:middle;background:var(--red);
  clip-path:polygon(50% 0%,58% 40%,100% 50%,58% 60%,50% 100%,42% 60%,0% 50%,42% 40%);
  animation:aboutStarSpin 3s linear infinite;
}
@keyframes aboutStarSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){
  .about-eyebrow .about-star{animation:none;}
}
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center;}
.about h2{font-size:clamp(38px,5.6vw,68px);text-transform:uppercase;}
.about p{font-size:clamp(16px,1.15vw,19px);color:rgba(26,26,28,.75);max-width:60ch;}
.about-pull{border-left:3px solid var(--red);padding-left:26px;}
.about-pull p{font-family:var(--display);font-size:clamp(23px,2.9vw,34px);line-height:1.16;color:var(--ink);text-transform:uppercase;}
@media (max-width:900px){.about{grid-template-columns:1fr;gap:40px;}}

/* ---------- CONTACT ---------- */
#contact{position:relative;overflow:hidden;}
.contact-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(22px);transform:scale(1.15);z-index:0;
}
/* scale(1.15) hides the soft edge the blur filter leaves around the
   video's own boundary, which would otherwise show a faint unblurred
   sliver at the section's edges */
.contact-overlay{
  position:absolute;inset:0;z-index:1;
  background:rgba(10,10,12,.62); /* dark overlay — the section is now
    sec-dark with white text, so this keeps the blurred video readable as
    a moody backdrop rather than washing out to a light background that
    white text would disappear against */
}
#contact > .wrap{position:relative;z-index:2;}
.contact-cta{
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:100vh;min-height:100svh;padding:110px 0 0;
}
.contact-cta-inner{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:36px;padding:60px 0 70px;
}
.contact-cta-link{
  display:inline-flex;align-items:center;gap:22px;text-decoration:none;
  font-family:var(--display);text-transform:uppercase;color:#fff;
  font-size:clamp(48px,8.5vw,150px);line-height:1;
  background:none;border:0;cursor:pointer;
}
.contact-cta-arrow{
  font-size:.5em;transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.contact-cta-link:hover .contact-cta-arrow{transform:translateX(.25em);}
.student-note{padding:20px 22px;background:rgba(255,255,255,.1);color:#fff;border-radius:14px;font-size:14.5px;max-width:52ch;}
.student-note a{color:var(--red);font-weight:700;}
input,textarea,select{transition:border-color .2s ease,box-shadow .2s ease;}
input:focus,textarea:focus,select:focus{
  box-shadow:0 0 0 4px rgba(235,63,34,.12);
}
input,textarea{font-family:var(--body);font-size:15px;padding:13px 15px;border:1.5px solid var(--bone-line);border-radius:10px;background:#fff;color:var(--ink);text-transform:uppercase;}
input::placeholder,textarea::placeholder{text-transform:uppercase;}
input:focus,textarea:focus{border-color:var(--red);outline:none;}
textarea{resize:vertical;min-height:120px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field.full{grid-column:1/-1;}
label{font-size:13px;font-weight:700;color:var(--ink);}
.form-msg{margin-top:16px;font-size:14px;font-weight:600;display:none;}
.form-msg.show{display:block;}
@media (max-width:900px){.form-row{grid-template-columns:1fr;}}

/* ---------- CONTACT FORM MODAL ---------- */
.contact-modal{
  position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.contact-modal.open{opacity:1;pointer-events:auto;}
.contact-modal-backdrop{position:absolute;inset:0;background:rgba(10,10,12,.72);}
.contact-modal-panel{
  position:relative;z-index:1;width:100%;max-width:760px;max-height:88vh;overflow-y:auto;
  background:#fff;border-radius:22px;padding:44px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.4);
  transform:translateY(16px) scale(.98);transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.contact-modal.open .contact-modal-panel{transform:translateY(0) scale(1);}
.contact-modal-panel h2{font-size:clamp(26px,3.2vw,38px);text-transform:uppercase;margin:0 0 12px;}
.contact-modal-panel > p{color:rgba(26,26,28,.7);margin:0 0 26px;max-width:60ch;}
.contact-modal-close{
  position:absolute;top:20px;right:20px;width:38px;height:38px;border-radius:50%;
  background:var(--bone);border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--ink);
}
@media (prefers-reduced-motion: reduce){
  .contact-modal,.contact-modal-panel{transition:none;}
}

/* ---------- FOOTER (nested inside #contact, shares its video bg) ---------- */
.site-footer{position:relative;z-index:2;padding:72px 0 0;border-top:1px solid var(--line);}
.footer-top{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:50px;
  padding-bottom:56px;border-bottom:1px solid var(--line);
}
.footer-logo{height:34px;width:auto;margin-bottom:18px;}
.footer-brand p{margin:0;max-width:38ch;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.55);}
.footer-col{display:flex;flex-direction:column;gap:14px;}
.footer-col-title{
  margin:0 0 4px;font-family:var(--grotesque);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.4px;color:rgba(255,255,255,.4);
}
.footer-col a{
  font-size:15px;color:rgba(255,255,255,.8);text-decoration:none;
  transition:color .2s ease;
}
.footer-col a:hover{color:var(--red);}
.footer-inner{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  padding:26px 0;
}
.footer-inner p{margin:0;font-size:14px;color:rgba(255,255,255,.5);}
.footer-top-link{
  font-size:14px;font-weight:700;color:rgba(255,255,255,.8);text-decoration:none;
  transition:color .2s ease;
}
.footer-top-link:hover{color:var(--red);}
.footer-legal{margin:0;font-size:14px;color:rgba(255,255,255,.5);}
.footer-legal a{color:rgba(255,255,255,.5);text-decoration:none;}
.footer-legal a:hover{color:var(--red);}
@media (max-width:820px){
  .footer-top{grid-template-columns:1fr;gap:34px;}
}

@media (prefers-reduced-motion: reduce){
  .feed-col{animation:none !important;}
  *{scroll-behavior:auto;}
}

/* ---------- PROCESS ---------- */
/* ---------- HOW IT WORKS: reel-style steps ---------- */
/* creative, staggered rhythm — alternating cards sit lower, rather than
   four uniform columns marching in a flat row */
.how-steps{
  list-style:none;margin:48px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
}
.how-step:nth-child(2),.how-step:nth-child(4){margin-top:30px;}
.how-step{display:flex;flex-direction:column;}

/* number badge with a live/recording-style pulse ring — now an overlay
   directly on each card's media, top-left, rather than floating in a
   separate row disconnected from the cards it labels */
.how-num{
  position:absolute;top:16px;left:16px;z-index:3;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(10,10,12,.65);
  backdrop-filter:blur(3px);
  border:1.5px solid var(--red);color:#fff;
  font-family:var(--display);font-size:18px;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.how-step:hover .how-num{
  transform:scale(1.15);
  box-shadow:0 0 0 8px rgba(235,63,34,.18);
}
.how-num::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1.5px solid var(--red);opacity:0;
  animation:howPulse 2.6s ease-out infinite;
}
.how-step:nth-child(2) .how-num::after{animation-delay:.4s;}
.how-step:nth-child(3) .how-num::after{animation-delay:.8s;}
.how-step:nth-child(4) .how-num::after{animation-delay:1.2s;}
@keyframes howPulse{
  0%{transform:scale(.85);opacity:.55;}
  100%{transform:scale(1.35);opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .how-num::after{animation:none;opacity:0;}
  .how-num,.how-media{transition:none;}
  .how-step:hover .how-num,.how-step:hover .how-media{transform:none;box-shadow:none;}
}

.how-card{display:flex;flex-direction:column;flex:1;}
.how-media{
  position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;
  background:var(--surface);margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.how-step:hover .how-media{
  transform:translateY(-8px);
  box-shadow:0 24px 48px -14px rgba(0,0,0,.55);
}
.how-poster,.how-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.how-video{opacity:0;transition:opacity .35s ease;}
.how-media.playing .how-video{opacity:1;}
.how-media.playing .how-poster{opacity:0;}
.how-poster{transition:opacity .35s ease;}
/* uniform overlay so the centred title stays legible regardless of how
   bright or dark the underlying photo/video happens to be */
.how-media::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(0,0,0,.32);
}
/* title overlaid centred on the media — Reels/Stories caption treatment,
   not a plain text block below the thumbnail */
.how-media h3{
  position:relative;z-index:2;margin:0;padding:0 16px;text-align:center;
  font-family:var(--display);font-size:clamp(19px,2vw,24px);
  text-transform:uppercase;color:#fff;line-height:1.15;
  text-shadow:0 2px 14px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6);
}
.how-media h3{transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .25s ease;}
/* each step's one-line description sits INSIDE its media card and only
   shows while the card is hovered (tapped on a touch screen, or focused from
   the keyboard). It stays in the page, so screen readers still read it. */
.how-media .how-desc{
  position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
  padding:44px 18px 18px;text-align:center;
  font-size:13px;line-height:1.5;letter-spacing:.3px;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
  background:linear-gradient(to top,rgba(8,8,10,.94) 0%,rgba(8,8,10,.82) 58%,rgba(8,8,10,0) 100%);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .28s ease,transform .38s cubic-bezier(.22,1,.36,1);
}
.how-media .how-desc::before{
  content:'';display:block;width:28px;height:2px;margin:0 auto 10px;border-radius:2px;background:var(--red);
}
@media (hover:hover){
  .how-step:hover .how-desc{opacity:1;transform:none;}
  .how-step:hover .how-media h3{transform:translateY(-14px);}
}
.how-card:focus-visible .how-desc,
.how-media.show-desc .how-desc{opacity:1;transform:none;}
.how-card:focus-visible .how-media h3,
.how-media.show-desc h3{transform:translateY(-14px);}
.how-card:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:14px;}
@media (prefers-reduced-motion: reduce){
  .how-media .how-desc,.how-media h3{transition:none;transform:none !important;}
}

@media (max-width:900px){
  .how-steps{
    display:flex;overflow-x:auto;gap:20px;padding-bottom:6px;
    scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .how-steps::-webkit-scrollbar{display:none;}
  .how-step{flex:0 0 min(240px,72vw);scroll-snap-align:start;}
  .how-step:nth-child(2),.how-step:nth-child(4){margin-top:0;}
}
.how-cta{text-align:center;margin-top:26px;}
.how-cta .btn{padding:13px 26px;font-size:14px;}

/* ---------- FAQ ---------- */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start;}
.faq-intro h2{font-size:clamp(32px,4.6vw,56px);text-transform:uppercase;}
.faq-intro p{margin:18px 0 26px;font-size:17px;color:rgba(26,26,28,.72);max-width:34ch;}
.faq-list{border-top:1px solid var(--bone-line);}
.faq-item{border-bottom:1px solid var(--bone-line);}
.faq-item summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-weight:700;font-size:clamp(16px,1.9vw,19px);color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-mark{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:16px;height:16px;}
.faq-mark::before,.faq-mark::after{
  content:'';position:absolute;background:var(--red);border-radius:2px;
  transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .28s ease;
}
.faq-mark::before{left:0;top:7px;width:16px;height:2px;}
.faq-mark::after{left:7px;top:0;width:2px;height:16px;}
.faq-item[open] .faq-mark::after{transform:rotate(90deg);opacity:0;}
.faq-body{padding:0 40px 26px 0;}
.faq-body p{margin:0;font-size:16px;color:rgba(26,26,28,.72);max-width:62ch;}
.faq-item[open] .faq-body{animation:faqOpen .32s ease both;}
@keyframes faqOpen{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}

/* ---------- SELECTS ---------- */
select{
  font-family:var(--body);font-size:15px;padding:13px 15px;
  border:1.5px solid var(--bone-line);border-radius:10px;background:#fff;color:var(--ink);
  appearance:none;cursor:pointer;text-transform:uppercase;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A1A1C' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;
}
select:focus{border-color:var(--red);outline:none;}

/* ---------- STICKY MOBILE CTA ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(19,19,21,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.sticky-cta.show{transform:translateY(0);}
.sticky-cta span{font-weight:700;font-size:14px;color:#fff;line-height:1.25;}
.sticky-cta .btn{padding:12px 20px;font-size:14px;white-space:nowrap;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .faq-wrap{grid-template-columns:1fr;gap:36px;}
}

@media (max-width:900px){
  .sec{padding:78px 0;}
  .wrap{padding:0 22px;}
  .hero{min-height:auto;padding:clamp(104px,14vh,150px) 0 70px;}
  .band{padding:70px 0;}
  .band-inner{gap:26px;}
  .clients{padding:72px 0 24px 0;}
}

/* five phones need real width — past this point drop the two furthest
   back and keep it to the sharp centre plus one on each side */
@media (max-width:980px){
  .showcase-track .phone.is-far{display:none;}
}

/* below this, even three side by side plus nav arrows stop fitting
   comfortably — drop the peek phones entirely and give the centre one a
   bit more room since it's no longer sharing the row with previews */
@media (max-width:680px){
  .showcase-track .phone.is-near,
  .showcase-track .phone.is-far{display:none;}
  .showcase-track{gap:0;min-height:clamp(200px,44vw,270px);}
  .showcase-track .phone.is-center{flex-basis:clamp(140px,38vw,185px);}
  .showcase-carousel{gap:16px;}
}

@media (max-width:700px){
  .sticky-cta{display:flex;}
  footer{padding-bottom:96px;}
  .sec{padding:64px 0;}
  .sec-head{margin-bottom:38px;}
  .hero h1{font-size:clamp(38px,10.4vw,62px);}
  .hero-sub-link{font-size:13px;margin:22px 0 18px;}
  .hero-note{font-size:11px;}
  .feed-wall{inset:-14% -8%;gap:12px;}
  .feed-col{gap:12px;}
  form{padding:24px 20px;}
  .band .btn,.about .btn,.faq-intro .btn,#process .btn{width:100%;}
  .band-side{max-width:none;}
}

@media (max-width:520px){
  .nav{padding:12px 20px;}
  .nav-logo img{height:46px;}
  .hero h1{font-size:clamp(34px,10.8vw,48px);}
  .sticky-cta span{font-size:13px;}
  .client-tab{padding:9px 16px;font-size:13px;}
}

/* ---------- REAL MEDIA (photos / videos) ---------- */
.reel-media,.phone-media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:0;
}
/* once a real image loads, hide the placeholder play glyph and lighten the sheen */
.reel.has-media .reel-play{display:none;}
.reel.has-media::before{background:linear-gradient(160deg,rgba(255,255,255,.05),transparent 60%);}
.reel.has-media .reel-name{z-index:2;}
.phone-screen.has-media .phone-play{display:none;}

/* video cards in the hero wall sit exactly like the photo cards */
video.reel-media{object-fit:cover;background:var(--surface);}

/* ---------- SPOTLIGHT (a card lifts out and expands, alternating sides) ---------- */
.spotlight{
  position:fixed;z-index:2;pointer-events:none;
  border-radius:18px;overflow:hidden;
  background:var(--surface);
  box-shadow:0 34px 80px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.14);
  will-change:transform,opacity;
  /* scale from the corner, not the centre, or the panel drifts off-screen */
  transform-origin:0 0;
}
.spotlight img,.spotlight video{width:100%;height:100%;object-fit:cover;display:block;}
.spotlight-name{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:34px 16px 14px;
  background:linear-gradient(to top,rgba(0,0,0,.82),transparent);
  font-size:13px;font-weight:700;color:#fff;letter-spacing:.2px;
}
/* brief ring on the card being picked, so the lift reads as a selection */
.reel.picking::after{
  content:'';position:absolute;inset:0;z-index:3;
  border-radius:14px;border:2px solid var(--red);
  box-shadow:0 0 20px rgba(235,63,34,.55);
  animation:pickFlash .5s ease-out forwards;
}
@keyframes pickFlash{
  0%{opacity:0;transform:scale(1.04);}
  40%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(1);}
}
/* not enough room beside the headline on smaller screens */
@media (max-width:1100px){.spotlight{display:none;}}
@media (prefers-reduced-motion: reduce){.spotlight{display:none;}}
/* ---------- SECTION ENTRANCE TRANSITION ---------- */
/* Settles into place as each section becomes active — fade, slight rise,
   and a gentle scale-up rather than a plain fade, so it reads as a deliberate
   crossfade between "scenes" instead of a generic scroll-fade. Skipped on
   FAQ and Contact deliberately — those need to stay fully visible and
   usable while you're reading or typing, not fading in around you. */
.enter-fade{
  opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.enter-fade.in-view{opacity:1;transform:translateY(0) scale(1);}
@media (prefers-reduced-motion: reduce){
  .enter-fade{opacity:1;transform:none;transition:none;}
}

/* belt-and-braces: hide any native video hover chrome (PiP icon, cast
   icon) some browsers still render even without a controls attribute */
video.phone-media::-webkit-media-controls,
.spotlight video::-webkit-media-controls{display:none !important;}

/* ---------- HERO SCROLL-SCRUBBED ZOOM INTO "SEE" ---------- */
/* A tall scroll track drives the zoom — the taller it is, the more
   scrolling the effect takes. The hero pins inside it. Two groups move
   independently, tied to scroll:
   1) the photo feed wall fades away quickly — photos just turn to blurry
      mush at extreme zoom, unlike solid-colour text, so it has to go.
   2) ALL the hero's real text — headline, sub-copy, note — scales up
      together as one block, centred on the word "SEE", using each
      element's own existing colour/styling (nothing recoloured). */
/* ScrollTrigger handles the pinning and the scroll distance itself (via
   pin:true and the end:'+=' value in js/hero-zoom.js), so this must NOT
   also be position:sticky with a tall track — the two would fight and
   double the effective scroll length. */
.hero-zoom-zone{position:relative;background:var(--ink-deep);}
.hero-zoom-sticky{height:100vh;overflow:hidden;}

.hero-zoom-sticky .feed-wall,
.hero-zoom-sticky .hero-scrim{
  will-change:opacity;
}
/* NOTE: deliberately NO will-change:transform here. This element scales to
   240x, and will-change forces the browser to allocate a composited layer
   sized for that final scale — far past GPU texture limits, which renders
   the text in broken fragments. Letting the browser rasterize adaptively
   instead is both correct and faster at these extremes. */

/* small screens / reduced motion: skip the effect, normal one-screen hero */
@media (max-width:900px){
  .hero-zoom-zone{height:auto;}
  .hero-zoom-sticky{position:static;height:auto;}
  .hero-zoom-sticky .hero-inner{transform:none !important;}
}
@media (prefers-reduced-motion: reduce){
  .hero-zoom-zone{height:auto;}
  .hero-zoom-sticky{position:static;height:auto;}
  .hero-zoom-sticky .hero-inner{transform:none !important;}
}

/* ---------- WHAT WE DO: entrance animation support ---------- */
/* The heading reveals via a clip wipe; needs to be a block for clip-path */
.sec-head h2{display:inline-block;}

/* ============================================================
   TALENTS PAGE  (all scoped under .tal-* / .tal-body)
   Reuses site tokens, nav, .btn, .wrap and footer styles.
   ============================================================ */
.tal-body{background:var(--ink);}

/* ---------- SCROLL REVEAL ----------
   Each section observes its own outer .tal-reveal element and toggles
   .in-view on it — not once, but every time the section crosses into or
   out of view (talents.js) — so scrolling back up replays the same
   entrance rather than only ever playing once. Durations are
   deliberately unhurried (.8–1.1s) with a bit of stagger between
   siblings, and no two sections use quite the same motion. */

/* HERO — heading then button, a beat apart */
.tal-hero-inner > *{
  opacity:0;transform:translateY(20px);
  transition:opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);
}
.tal-hero-inner.in-view > *{opacity:1;transform:none;}
.tal-hero-inner > *:nth-child(1){transition-delay:.05s;}
.tal-hero-inner > *:nth-child(2){transition-delay:.25s;}

/* WHY JOIN — heading rises, then the four cards cascade in behind it */
.tal-why .tal-sec-head h2,
.tal-why .tal-sec-head p{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.tal-why .tal-reveal.in-view .tal-sec-head h2{opacity:1;transform:none;}
.tal-why .tal-reveal.in-view .tal-sec-head p{opacity:1;transform:none;transition-delay:.1s;}
.tal-why-card{opacity:0;translate:0 24px;}
.tal-reveal.in-view .tal-why-card{opacity:1;translate:0 0;}
.tal-why-card:nth-child(1){transition-delay:.22s;}
.tal-why-card:nth-child(2){transition-delay:.34s;}
.tal-why-card:nth-child(3){transition-delay:.46s;}
.tal-why-card:nth-child(4){transition-delay:.58s;}

/* THE ROSTER — heading pulls into focus out of a blur, cards arrive one
   after another. Cards animate via translate/scale (not transform) so
   this never fights their own fast hover-lift, which uses transform. */
.tal-roster-sec .tal-sec-head h2,
.tal-roster-sec .tal-sec-head p{
  opacity:0;transform:translateY(16px);filter:blur(9px);
  transition:opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1), filter 1s cubic-bezier(.22,1,.36,1);
}
.tal-roster-sec .tal-reveal.in-view .tal-sec-head h2{opacity:1;transform:none;filter:blur(0);}
.tal-roster-sec .tal-reveal.in-view .tal-sec-head p{opacity:1;transform:none;filter:blur(0);transition-delay:.12s;}
.tal-card{opacity:0;translate:0 24px;scale:.96;}
.tal-reveal.in-view .tal-card{opacity:1;translate:0 0;scale:1;}
.tal-card:nth-child(1){transition-delay:.26s;}
.tal-card:nth-child(2){transition-delay:.34s;}
.tal-card:nth-child(3){transition-delay:.42s;}
.tal-card:nth-child(4){transition-delay:.5s;}
.tal-card:nth-child(5){transition-delay:.58s;}
.tal-card:nth-child(n+6){transition-delay:.66s;}
.tal-roster-cta{
  opacity:0;transform:translateY(16px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay:.5s;
}
.tal-reveal.in-view .tal-roster-cta{opacity:1;transform:none;}

/* FROM APPLY TO PAID — heading + subtitle pop in, steps pop in behind */
.tal-steps-sec .tal-sec-head h2,
.tal-steps-sec .tal-sec-head p{
  opacity:0;transform:translateY(20px) scale(.96);
  transition:opacity .95s cubic-bezier(.22,1,.36,1), transform .95s cubic-bezier(.22,1,.36,1);
}
.tal-steps-sec .tal-reveal.in-view .tal-sec-head h2{opacity:1;transform:none;}
.tal-steps-sec .tal-reveal.in-view .tal-sec-head p{opacity:1;transform:none;transition-delay:.1s;}
.tal-step{
  opacity:0;transform:translateY(24px) scale(.94);
  transition:opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1),
    translate .35s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .35s ease;
}
.tal-reveal.in-view .tal-step{opacity:1;transform:none;}
.tal-step:nth-child(1){transition-delay:.24s;}
.tal-step:nth-child(2){transition-delay:.36s;}
.tal-step:nth-child(3){transition-delay:.48s;}
.tal-step:nth-child(4){transition-delay:.6s;}

/* QUESTIONS — the intro slides in from the left, the answers cascade in
   from the right, meeting in the middle */
.tal-faq-intro h2,
.tal-faq-intro p{
  opacity:0;transform:translateX(-34px);
  transition:opacity .95s cubic-bezier(.22,1,.36,1), transform .95s cubic-bezier(.22,1,.36,1);
}
/* the intro's button is also a .btn, which already owns a hover
   transition on background/border-color/color — folded in here rather
   than left to collide, since whichever of the two rules is more
   specific would otherwise win outright and silently drop the other */
.tal-faq-intro .btn{
  opacity:0;transform:translateX(-34px);
  transition:opacity .95s cubic-bezier(.22,1,.36,1), transform .95s cubic-bezier(.22,1,.36,1),
    background .18s ease, border-color .18s ease, color .18s ease;
}
.tal-reveal.in-view .tal-faq-intro h2{opacity:1;transform:none;}
.tal-reveal.in-view .tal-faq-intro p{opacity:1;transform:none;transition-delay:.1s;}
.tal-reveal.in-view .tal-faq-intro .btn{opacity:1;transform:none;transition-delay:.2s;}
.tal-faq-item{opacity:0;transform:translateX(30px);}
.tal-reveal.in-view .tal-faq-item{opacity:1;transform:none;}
.tal-faq-item:nth-child(1){transition-delay:.18s;}
.tal-faq-item:nth-child(2){transition-delay:.3s;}
.tal-faq-item:nth-child(3){transition-delay:.42s;}
.tal-faq-item:nth-child(4){transition-delay:.54s;}
.tal-faq-item:nth-child(5){transition-delay:.66s;}

/* READY TO GET ON THE ROSTER — heading, subtitle, button arrive with a
   soft scale, one after another */
.tal-closer-main .wrap > *{
  opacity:0;transform:scale(.92);
  transition:opacity 1.05s cubic-bezier(.22,1,.36,1), transform 1.05s cubic-bezier(.22,1,.36,1);
}
/* the third child is the closer's .btn — same reasoning as the faq
   intro button above: merge its own hover transition in explicitly */
.tal-closer-main .wrap > .tal-closer-btn{
  transition:opacity 1.05s cubic-bezier(.22,1,.36,1), transform 1.05s cubic-bezier(.22,1,.36,1),
    background .18s ease, border-color .18s ease, color .18s ease;
}
.tal-closer-main .wrap.in-view > *{opacity:1;transform:none;}
.tal-closer-main .wrap > *:nth-child(1){transition-delay:.05s;}
.tal-closer-main .wrap > *:nth-child(2){transition-delay:.18s;}
.tal-closer-main .wrap > *:nth-child(3){transition-delay:.32s;}

/* ---------- HERO ---------- */
.tal-hero{
  position:relative;overflow:hidden;background:#000;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:flex-end;
  padding:clamp(90px,12vh,120px) 0 clamp(40px,6vh,64px);
}
/* full-screen hero video layer — the only thing behind the headline.
   Two stacked videos crossfade via .show so clip changes have no black
   flash. Before any clip loads the hero just shows its dark base. */
.tal-hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.tal-hero-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s ease;
}
.tal-hero-vid.show{opacity:1;}
/* minimal — just a bottom gradient for legibility, nothing over the rest
   of the frame. No centre "spotlight" anymore: the footage carries the
   hero now, closer to how the reference site leaves its video undimmed. */
.tal-hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.32) 24%, transparent 52%);
}
.tal-hero-inner{
  position:relative;z-index:2;width:100%;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.tal-hero h1{
  font-family:var(--body);font-weight:800;font-size:clamp(20px,2.3vw,28px);
  line-height:1.25;text-transform:uppercase;letter-spacing:.2px;color:#fff;
  margin:0;max-width:22ch;
}
.tal-hero-cta{
  display:inline-flex;align-items:center;gap:9px;flex-shrink:0;
  font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.3px;
  text-transform:uppercase;color:#fff;text-decoration:none;white-space:nowrap;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);
  padding:13px 22px;border-radius:100px;backdrop-filter:blur(6px);
  /* merged: reveal fade-in (slow) alongside the button's own hover
     feedback (fast) — a bare .tal-hero-cta{transition:…} rule like this
     one has equal specificity to .tal-hero-inner > * and comes later in
     the file, so on its own it would silently win and drop the reveal
     entirely rather than combine with it */
  transition:opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1),
    background .18s ease, border-color .18s ease, color .18s ease;
}
.tal-hero-cta:hover{background:#fff;border-color:#fff;color:var(--ink);}

/* ---------- shared section frame ---------- */
/* full-viewport, same as .sec on the brands page — each section is its
   own hard-jump stop, centred vertically within the screen it fills */
.tal-sec{
  padding:clamp(72px,11vh,120px) 0;position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
}
.tal-sec > .wrap{width:100%;}
.tal-sec-head{max-width:640px;margin:0 auto clamp(40px,5vw,60px);text-align:center;}
.tal-sec-head h2{
  position:relative;font-size:clamp(34px,5.5vw,72px);text-transform:uppercase;color:#fff;
}
.tal-sec-head p{margin:16px 0 0;font-size:clamp(15px,1.6vw,18px);color:rgba(255,255,255,.6);line-height:1.6;}

/* ---------- WHY JOIN ---------- */
.tal-why{background:var(--ink);}
.tal-why-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.tal-why-card{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:30px 26px;display:flex;flex-direction:column;gap:12px;
  /* merged: the reveal's opacity/translate (slow) alongside the card's
     own hover feedback on transform/border-color/background (fast) —
     kept in ONE declaration since a second .tal-why-card{transition:…}
     rule would silently replace this whole list, not merge with it */
  transition:opacity .85s cubic-bezier(.22,1,.36,1), translate .85s cubic-bezier(.22,1,.36,1),
    transform .28s cubic-bezier(.22,1,.36,1), border-color .28s ease, background .28s ease, box-shadow .35s ease;
  position:relative;overflow:hidden;isolation:isolate;counter-increment:why;
}
.tal-why-card:hover{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);
  border-color:rgba(235,63,34,.5);background:var(--surface-2);
  box-shadow:0 24px 60px -24px rgba(235,63,34,.45);
}
.tal-why-ico{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(235,63,34,.14);color:var(--red);font-family:var(--display);font-size:22px;
}
.tal-why-card h3{font-family:var(--body);font-weight:800;font-size:18px;color:#fff;margin:0;}
.tal-why-card p{margin:0;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.6);}

/* ---------- ROSTER ---------- */
.tal-roster-sec{background:#000;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
/* horizontal scroller, not a multi-row grid — 12 cards in a 4-column
   grid ran to 3 rows and blew well past one screen. A single row keeps
   every creator reachable (swipe/scroll) while the section itself still
   fits one viewport like the rest of the page. */
.tal-roster{
  display:flex;gap:clamp(14px,1.6vw,22px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 10px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.tal-roster::-webkit-scrollbar{display:none;}
.tal-card{
  position:relative;border-radius:16px;overflow:hidden;cursor:default;
  flex:0 0 clamp(170px,17vw,230px);scroll-snap-align:start;
  /* merged: the reveal's opacity/translate/scale (slow) alongside the
     card's own hover feedback on transform (fast) — kept in ONE
     declaration since a second .tal-card{transition:…} rule would
     silently replace this whole list, not merge with it */
  transition:opacity .85s cubic-bezier(.22,1,.36,1), translate .85s cubic-bezier(.22,1,.36,1),
    scale .85s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.tal-card:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 26px 60px -22px rgba(235,63,34,.55);}
.tal-card-media{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background-size:200% 200%;
}
.tal-card-media:not(.has-media){animation:talShimmer 6s ease-in-out infinite;}
@keyframes talShimmer{0%,100%{background-position:0% 0%;}50%{background-position:100% 100%;}}
.tal-card-media.t1{background-image:linear-gradient(155deg,#3A3A40,#17171A);}
.tal-card-media.t2{background-image:linear-gradient(155deg,#4A2A22,#17171A);}
.tal-card-media.t3{background-image:linear-gradient(155deg,#2A3540,#17171A);}
.tal-card-media.t4{background-image:linear-gradient(155deg,#413528,#17171A);}
.tal-card-media.t5{background-image:linear-gradient(155deg,var(--red-deep),#1E1310);}
.tal-card-img,.tal-card-vid{width:100%;height:100%;object-fit:cover;display:block;}
.tal-card-mono{
  font-family:var(--display);font-size:clamp(46px,6vw,76px);color:rgba(255,255,255,.12);
  -webkit-text-stroke:1.5px rgba(255,255,255,.18);
}
.tal-card-media.has-video::after{
  content:'\25B6';position:absolute;right:12px;bottom:12px;
  width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;
  opacity:.85;transition:opacity .2s ease;
}
.tal-card:hover .tal-card-media.has-video::after{opacity:0;}
.tal-card-meta{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:26px 14px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.82),transparent);
}
.tal-card-meta h3{font-family:var(--body);font-weight:800;font-size:15px;color:#fff;margin:0;}
.tal-card-meta span{
  display:block;margin-top:2px;font-family:var(--grotesque);font-weight:700;font-size:11px;
  letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.6);
}
.tal-roster-cta{text-align:center;margin-top:clamp(18px,3vw,34px);}

/* ---------- STEPS ---------- */
.tal-steps-sec{background:var(--ink);}
.tal-steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  counter-reset:talstep;
}
.tal-step{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:34px 24px 26px;display:flex;flex-direction:column;gap:10px;
}
.tal-step-num{
  position:absolute;top:-18px;left:24px;
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--red);color:#fff;font-family:var(--display);font-size:18px;
  box-shadow:0 6px 18px rgba(235,63,34,.35);
}
.tal-step h3{font-family:var(--body);font-weight:800;font-size:17px;color:#fff;margin:6px 0 0;}
.tal-step p{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.6);}

/* ---------- FAQ ---------- */
.tal-faq-sec{background:#000;border-top:1px solid var(--line);}
.tal-faq-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,72px);align-items:start;}
.tal-faq-intro h2{font-size:clamp(30px,4vw,52px);text-transform:uppercase;color:#fff;margin:0;}
.tal-faq-intro p{margin:16px 0 24px;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.6);}
.tal-faq-list{display:flex;flex-direction:column;gap:12px;}
.tal-faq-item{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:0 22px;overflow:hidden;
  /* merged: reveal fade-in (slow) alongside the accordion's own
     border-color transition on open/close (fast) — same reasoning as
     the merged card rules above */
  transition:opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1), border-color .2s ease;
}
.tal-faq-item[open]{border-color:rgba(235,63,34,.4);}
.tal-faq-item summary{
  list-style:none;cursor:pointer;padding:18px 0;
  font-family:var(--body);font-weight:700;font-size:16px;color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.tal-faq-item summary::-webkit-details-marker{display:none;}
.tal-faq-item summary::after{
  content:'+';font-family:var(--display);font-size:22px;color:var(--red);
  transition:transform .25s ease;line-height:1;
}
.tal-faq-item[open] summary::after{transform:rotate(45deg);}
.tal-faq-item p{margin:0 0 20px;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.65);}

/* ---------- CLOSER ---------- */
.tal-closer{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(80px,12vh,140px) 0;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  background:radial-gradient(120% 100% at 50% 0%, var(--red-deep) 0%, #1E1310 55%, var(--ink-deep) 100%);
}
.tal-closer > .wrap{width:100%;}
.tal-closer h2{font-size:clamp(34px,6vw,80px);text-transform:uppercase;color:#fff;margin:0 auto;max-width:16ch;}
.tal-closer-main p{margin:20px auto 32px;max-width:48ch;font-size:clamp(15px,1.7vw,18px);color:rgba(255,255,255,.78);line-height:1.6;}
.tal-closer-btn{font-size:16px;padding:16px 34px;}

/* ---------- FOOTER (talents) — reuses footer-* structure ---------- */
.tal-footer{background:var(--ink-deep);border-top:1px solid var(--line);padding:72px 0 0;}
.tal-footer .footer-top{display:grid;grid-template-columns:1.6fr 1fr;gap:50px;padding-bottom:44px;border-bottom:1px solid var(--line);}
.tal-footer .footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.tal-footer .footer-brand p{margin:0;max-width:40ch;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.55);}
.tal-footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:22px 0;}
.tal-footer .footer-bottom p{margin:0;font-size:14px;color:rgba(255,255,255,.5);}

/* ---------- APPLY MODAL ---------- */
.tal-modal{position:fixed;inset:0;z-index:9500;display:none;}
.tal-modal.open{display:block;}
.tal-modal-backdrop{position:absolute;inset:0;background:rgba(6,6,8,.72);backdrop-filter:blur(4px);}
.tal-modal-panel{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(920px,94vw);max-height:90vh;overflow-y:auto;
  background:var(--ink);border:1px solid var(--line);border-radius:22px;
  padding:clamp(26px,3.5vw,44px);
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}
.tal-modal-close{
  position:absolute;top:16px;right:18px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .18s ease,border-color .18s ease;
}
.tal-modal-close:hover{background:var(--red);border-color:var(--red);}
.tal-modal-head{margin-bottom:26px;max-width:52ch;}
.tal-modal-head h2{font-size:clamp(26px,3.4vw,40px);text-transform:uppercase;color:#fff;margin:0;}
.tal-modal-head p{margin:10px 0 0;font-size:14.5px;color:rgba(255,255,255,.6);line-height:1.6;}
.tal-req{color:var(--red);}

.tal-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;}
.tal-field{display:flex;flex-direction:column;gap:8px;border:0;padding:0;margin:0;min-width:0;}
.tal-field > span,.tal-field legend{
  font-family:var(--grotesque);font-weight:700;font-size:13px;letter-spacing:.3px;
  color:rgba(255,255,255,.82);padding:0;
}
.tal-field input,.tal-field select{
  font-family:var(--body);font-size:15px;padding:13px 15px;width:100%;
  border:1px solid var(--line);border-radius:100px;background:var(--surface);color:#fff;
  transition:border-color .18s ease;
}
.tal-field textarea{border-radius:16px;}
.tal-field input::placeholder{color:rgba(255,255,255,.38);}
.tal-field input:focus,.tal-field select:focus{outline:none;border-color:var(--red);}
.tal-field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px;
}
.tal-field select option{background:var(--surface);color:#fff;}

.tal-field-birthday,.tal-field-interests,.tal-field-referred{grid-column:1 / -1;}
.tal-birthday-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px;}
.tal-birthday-row input[type=number]::-webkit-outer-spin-button,
.tal-birthday-row input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.tal-birthday-row input[type=number]{-moz-appearance:textfield;}

.tal-field-interests{margin-top:6px;}
.tal-checks{
  display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:4px;
}
.tal-checks label{
  display:flex;align-items:center;gap:10px;font-family:var(--body);font-weight:500;
  font-size:14.5px;color:rgba(255,255,255,.8);cursor:pointer;
}
.tal-checks input[type=checkbox]{
  appearance:none;-webkit-appearance:none;width:19px;height:19px;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.32);border-radius:5px;background:var(--surface);cursor:pointer;
  position:relative;transition:background .15s ease,border-color .15s ease;
}
.tal-checks input[type=checkbox]:checked{background:var(--red);border-color:var(--red);}
.tal-checks input[type=checkbox]:checked::after{
  content:'';position:absolute;left:5.5px;top:2px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}

.tal-form-foot{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:26px;
}
.tal-form-msg{margin:0;font-size:14px;font-weight:600;color:rgba(255,255,255,.7);flex:1;min-width:200px;opacity:0;transition:opacity .2s ease;}
.tal-form-msg.show{opacity:1;}
.tal-form-msg.err{color:#ff8a75;}
.tal-submit{padding:15px 34px;font-size:15px;white-space:nowrap;}

/* nav current-page marker */
.nav-side a.is-current{color:var(--red);}

/* ---------- TALENTS RESPONSIVE ---------- */
@media (max-width:1000px){
  .tal-why-grid{grid-template-columns:1fr 1fr;}
  .tal-steps{grid-template-columns:1fr 1fr;gap:34px 20px;}
  .tal-faq-wrap{grid-template-columns:1fr;gap:34px;}
}
@media (max-width:640px){
  .tal-why-grid{grid-template-columns:1fr;}
  .tal-card{flex-basis:min(46vw,190px);}
  .tal-steps{grid-template-columns:1fr;}
  .tal-form-grid{grid-template-columns:1fr;}
  .tal-checks{grid-template-columns:1fr;}
  .tal-footer .footer-top{grid-template-columns:1fr;gap:30px;}
  .tal-hero-inner{flex-direction:column;align-items:flex-start;gap:20px;}
  .tal-modal-panel{padding:22px 18px;border-radius:16px;}
}

@media (prefers-reduced-motion: reduce){
  .tal-card-media:not(.has-media){animation:none;}
  /* all the reveal treatments end in the same place: fully visible, no
     motion, no transition, regardless of which selector matched */
  .tal-hero-inner > *,
  .tal-sec-head h2,.tal-sec-head p,
  .tal-why-card,.tal-card,.tal-step,.tal-faq-item,
  .tal-faq-intro h2,.tal-faq-intro p,.tal-faq-intro .btn,
  .tal-roster-cta,
  .tal-closer-main .wrap > *{
    opacity:1;transform:none;translate:0 0;scale:1;filter:none;transition:none;
  }
  .tal-why-card:hover,.tal-card:hover{transform:none;}
}

/* ============================================================
   TALENTS — liveliness pass (Why Join onward)
   ============================================================ */
/* ambient drifting glow behind each content section */
.tal-why,.tal-roster-sec,.tal-steps-sec,.tal-faq-sec{overflow:hidden;isolation:isolate;}
.tal-sec > .wrap{position:relative;z-index:1;}
.tal-sec::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  width:56vw;height:56vw;max-width:760px;max-height:760px;border-radius:50%;
  background:radial-gradient(circle,rgba(235,63,34,.17),transparent 65%);
  animation:talOrb 18s ease-in-out infinite alternate;
}
.tal-why::before{top:-22%;left:-16%;}
.tal-roster-sec::before{bottom:-32%;right:-16%;animation-duration:22s;}
.tal-steps-sec::before{top:-28%;right:-12%;animation-duration:20s;}
.tal-faq-sec::before{bottom:-30%;left:-16%;animation-duration:24s;}
@keyframes talOrb{0%{transform:translate(0,0) scale(1);}100%{transform:translate(9vw,7vh) scale(1.18);}}

/* heading sheen — a red light sweeps across each heading as it reveals
   (replays every time, since .in-view toggles on scroll) */
.tal-sec-head h2,.tal-faq-intro h2,.tal-closer h2{
  background:linear-gradient(100deg,#fff 0 42%,#ff8a6e 50%,#fff 58% 100%);
  background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tal-reveal.in-view .tal-sec-head h2,
.tal-reveal.in-view .tal-faq-intro h2,
.tal-closer-main .wrap.in-view h2{animation:talSheen 1.8s .35s cubic-bezier(.22,1,.36,1) both;}
@keyframes talSheen{from{background-position:100% 0;}to{background-position:0 0;}}

/* WHY JOIN — cursor spotlight, 3D tilt, numbered watermark, icon pop */
.tal-why-grid{counter-reset:why;}
.tal-why-card::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(235,63,34,.2),transparent 60%);
  opacity:0;transition:opacity .35s ease;
}
.tal-why-card:hover::before{opacity:1;}
.tal-why-card::after{
  content:'0' counter(why);position:absolute;right:18px;top:8px;z-index:-1;
  font-family:var(--display);font-size:68px;line-height:1;color:rgba(255,255,255,.045);
  transition:color .35s ease,transform .45s cubic-bezier(.22,1,.36,1);
}
.tal-why-card:hover::after{color:rgba(235,63,34,.2);transform:translateY(-4px) scale(1.06);}
.tal-why-ico{transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .3s ease,color .3s ease,box-shadow .35s ease;}
.tal-why-card:hover .tal-why-ico{
  transform:scale(1.14) rotate(-8deg);background:var(--red);color:#fff;
  box-shadow:0 0 0 6px rgba(235,63,34,.12),0 10px 26px rgba(235,63,34,.4);
}

/* ROSTER — edge fade, drag to scroll */
.tal-roster{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 3%,#000 94%,transparent);
  cursor:grab;
}
.tal-roster.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none;}
.tal-roster img,.tal-roster video{-webkit-user-drag:none;user-select:none;}

/* STEPS — connector line draws across the four numbers, cards glow */
.tal-steps{position:relative;}
.tal-steps::before{
  content:'';position:absolute;top:1px;height:2px;z-index:2;pointer-events:none;
  left:44px;right:calc((100% - 60px) / 4 - 44px);
  background:linear-gradient(90deg,var(--red),rgba(235,63,34,.35));
  box-shadow:0 0 12px rgba(235,63,34,.6);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.5s cubic-bezier(.22,1,.36,1) .35s;
}
.tal-reveal.in-view .tal-steps::before{transform:scaleX(1);}
.tal-step-num{z-index:3;transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease;}
.tal-step{overflow:visible;}
.tal-step::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(235,63,34,.16),transparent 60%);
  opacity:0;transition:opacity .35s ease;
}
.tal-step:hover{translate:0 -6px;z-index:4;border-color:rgba(235,63,34,.45);box-shadow:0 24px 56px -26px rgba(235,63,34,.5);}
.tal-step:hover::after{opacity:1;}
.tal-step:hover .tal-step-num{transform:scale(1.15) rotate(-6deg);box-shadow:0 0 0 6px rgba(235,63,34,.14),0 8px 22px rgba(235,63,34,.5);}

/* FAQ — spotlight, accent bar when open (height animated in JS) */
.tal-faq-item{position:relative;isolation:isolate;}
.tal-faq-item::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(235,63,34,.13),transparent 60%);
  opacity:0;transition:opacity .35s ease;
}
.tal-faq-item:hover::before{opacity:1;}
.tal-faq-item::after{
  content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;
  background:var(--red);transform:scaleY(0);transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.tal-faq-item[open]::after{transform:scaleY(1);}
.tal-faq-item summary{transition:color .25s ease;}
.tal-faq-item:hover summary{color:#ff8a6e;}

/* CLOSER — shifting gradient, floating stars, marquee, shine button */
.tal-closer{background-size:160% 160%;animation:talCloserShift 14s ease-in-out infinite alternate;}
@keyframes talCloserShift{0%{background-position:50% 0%;}100%{background-position:30% 60%;}}
.tal-closer > .wrap{position:relative;z-index:1;}
.tal-closer-stars{position:absolute;inset:0;z-index:0;pointer-events:none;}
.tal-closer-stars img{position:absolute;opacity:.5;animation:talFloat 9s ease-in-out infinite;}
.tal-closer-stars img:nth-child(1){width:34px;top:18%;left:12%;}
.tal-closer-stars img:nth-child(2){width:18px;top:30%;right:16%;animation-delay:-2s;animation-duration:7s;}
.tal-closer-stars img:nth-child(3){width:26px;bottom:26%;left:22%;animation-delay:-4s;animation-duration:11s;}
.tal-closer-stars img:nth-child(4){width:44px;bottom:30%;right:10%;animation-delay:-1s;opacity:.35;}
.tal-closer-stars img:nth-child(5){width:14px;top:14%;right:34%;animation-delay:-5s;animation-duration:6s;}
.tal-closer-stars img:nth-child(6){width:20px;top:52%;left:6%;animation-delay:-3s;animation-duration:8s;}
@keyframes talFloat{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1);opacity:.25;}
  50%{transform:translateY(-22px) rotate(45deg) scale(1.15);opacity:.7;}
}
.tal-closer-btn{position:relative;overflow:hidden;}
.tal-closer-btn::after{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);animation:talShine 3.2s ease-in-out infinite;
}
@keyframes talShine{0%,55%{left:-60%;}100%{left:130%;}}
.tal-marquee{
  position:absolute;left:0;right:0;bottom:clamp(20px,4vh,40px);z-index:1;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.tal-marquee-track{display:flex;width:max-content;animation:talMarquee 36s linear infinite;}
.tal-marquee-track span{
  font-family:var(--display);font-size:clamp(18px,2.2vw,28px);text-transform:uppercase;
  color:rgba(255,255,255,.14);padding:0 22px;white-space:nowrap;
}
.tal-marquee-track span:nth-child(odd){color:rgba(255,255,255,.3);}
@keyframes talMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

@media (max-width:1000px){ .tal-steps::before{display:none;} }
@media (prefers-reduced-motion: reduce){
  .tal-sec::before,.tal-closer,.tal-closer-stars img,.tal-closer-btn::after,.tal-marquee-track{animation:none !important;}
  .tal-sec-head h2,.tal-faq-intro h2,.tal-closer h2{animation:none !important;background-position:0 0;}
  .tal-steps::before{transform:scaleX(1);transition:none;}
  .tal-why-card:hover{transform:none;}
  .tal-step:hover{translate:0 0;}
}


/* ---------- CLOSER + FOOTER merged into one screen, video backdrop ---------- */
.tal-closer{
  flex-direction:column;align-items:stretch;
  padding:clamp(76px,10vh,104px) 0 0;
  background:#0b0b0d;animation:none;
}
.tal-closer-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(18px);transform:scale(1.12);z-index:0;
}
.tal-closer-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,12,.74) 0%,rgba(10,10,12,.8) 45%,rgba(10,10,12,.92) 100%);
}
.tal-closer-stars{z-index:1;}
.tal-closer-main{flex:1;display:flex;align-items:center;position:relative;z-index:2;}
.tal-closer-main > .wrap{width:100%;}
.tal-closer-main h2{font-size:clamp(32px,4.8vw,66px);}
.tal-closer-main p{margin:16px auto 26px;}
.tal-marquee{position:relative;bottom:auto;z-index:2;margin-top:clamp(14px,2.5vh,28px);}
.tal-closer .tal-footer{
  position:relative;z-index:2;text-align:left;background:transparent;
  border-top:1px solid rgba(255,255,255,.1);
  padding:clamp(24px,3.6vh,44px) 0 0;margin-top:clamp(10px,2vh,20px);
}
.tal-closer .tal-footer .footer-top{padding-bottom:clamp(18px,2.8vh,32px);gap:40px;}
.tal-closer .tal-footer .footer-bottom{padding:clamp(14px,2vh,22px) 0;}

/* The Work: admin-uploaded cover media */
.work-cover{position:relative;overflow:hidden;}
.work-cover-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.work-cover.has-media{animation:none;}
.work-cover.has-media .work-cover-num{display:none;}

/* spam honeypot: invisible to people, filled only by bots */
.hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0;}

/* ============================================================
   PHONE LAYOUT — every jump section fills exactly one screen and
   everything in it fits inside that screen. Top padding clears the
   nav; bottom padding on the Brands page clears the sticky CTA bar.
   ============================================================ */
@media (max-width:760px){
  #sections > section,
  #sections > .band{
    min-height:100vh;min-height:100svh;box-sizing:border-box;
    display:flex;flex-direction:column;justify-content:center;
    padding-top:68px !important;padding-bottom:78px !important;
  }
  .tal-body #sections > section{padding-bottom:22px !important;}
  #sections > section > .wrap,
  #sections > .band > .wrap{width:100%;}
  .wrap{padding:0 20px;}
  .sec-head{margin-bottom:18px;}
  .sec-head h2{font-size:clamp(32px,10vw,42px);}
  .sec-head p{margin-top:8px;font-size:13.5px;line-height:1.5;}

  /* HERO */
  .hero{justify-content:center;}

  /* WHAT WE DO */
  #services .sec-head{margin-bottom:14px;}
  .svc-showcase{margin:0;gap:6px;}
  .svc-card{height:38px;border-radius:10px;}
  .svc-card.active{height:clamp(170px,calc(100svh - 430px),380px);}
  .svc-label{font-size:13px;}
  .svc-footnote{display:none;}

  /* CREATORS IN ACTION */
  .clients-head{margin-bottom:10px;}
  .clients-head h2{font-size:clamp(30px,9.4vw,40px);}
  .client-tabs{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    margin:0 -20px 10px;padding:2px 20px 4px;gap:8px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .client-tabs::-webkit-scrollbar{display:none;}
  .client-tab{flex:0 0 auto;padding:8px 14px;font-size:12.5px;}
  .showcase-info{margin-bottom:8px;}
  .showcase-info h3{font-size:22px;}
  .showcase-info p{font-size:12px;}
  .showcase-track{min-height:0;}
  .showcase-track .phone.is-center{flex-basis:clamp(120px,calc((100svh - 350px) * .46),185px);}
  .showcase-dots{margin-top:8px;}

  /* HOW IT WORKS */
  #process .sec-head{margin-bottom:16px;}
  #process .sec-head h2{font-size:clamp(34px,11vw,46px);}
  .how-step{flex:0 0 min(210px,58vw);}
  .how-media{margin-bottom:0;max-height:calc(100svh - 360px);aspect-ratio:auto;height:min(262px,calc(100svh - 360px));}
  .how-media h3{font-size:18px;}
  .how-media .how-desc{font-size:11.5px;line-height:1.45;}
  .how-cta{display:none;}

  /* ACTIVATION BAND */
  .band-inner{gap:18px;}
  .band h2{font-size:clamp(36px,11vw,48px);}
  .band-side p{font-size:15px;}

  /* THE WORK */
  #work .sec-head{margin-bottom:16px;}
  .work-scroller{--slide:min(80vw,340px);}
  .work-info{padding:14px 16px 16px;}
  .work-info h3{font-size:17px;}
  .work-info p{font-size:12.5px;}
  .work-dots{margin-top:12px;}

  /* ABOUT */
  .about{gap:20px;}
  .about h2{font-size:clamp(26px,8vw,34px);line-height:1.05;}
  .about p{font-size:13.5px;line-height:1.55;margin:12px 0 16px;}
  .about .btn{padding:12px 20px;}
  .about-pull{padding-left:16px;}
  .about-pull .about-eyebrow{font-size:clamp(44px,14vw,60px);margin:0 0 8px;}
  .about-pull p{font-size:19px;margin:0;}

  /* FAQ */
  .faq-wrap{gap:14px;}
  .faq-intro h2{font-size:clamp(28px,9vw,38px);}
  .faq-intro p{font-size:13.5px;margin:8px 0 14px;}
  .faq-intro .btn{padding:11px 20px;}
  .faq-item summary{padding:13px 0;font-size:14px;}
  .faq-body p{font-size:13.5px;}

  /* CONTACT + FOOTER */
  .contact-cta-inner{padding-top:0;padding-bottom:0;}
  .contact-cta-link{font-size:clamp(40px,13vw,56px);gap:14px;}
  .student-note{margin-top:16px;font-size:12.5px;padding:12px 16px;}
  .site-footer{padding-top:22px;margin-top:24px;}
  .footer-top{grid-template-columns:1fr 1fr;gap:16px 18px;padding-bottom:16px;}
  .footer-brand{grid-column:1 / -1;}
  .footer-brand p{font-size:12.5px;margin:8px 0 0;}
  .footer-logo{height:30px;width:auto;}
  .footer-col a{font-size:13px;padding:3px 0;}
  .footer-col-title{margin-bottom:6px;}
  .footer-inner{padding-top:12px;padding-bottom:0;gap:6px 14px;flex-wrap:wrap;font-size:12px;}
  footer{padding-bottom:0;}

  /* ---------- TALENTS ---------- */
  .tal-sec-head{margin-bottom:16px;}
  .tal-sec-head h2{font-size:clamp(30px,9.4vw,40px);}
  .tal-sec-head p{margin-top:8px;font-size:13px;line-height:1.5;}

  .tal-why-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .tal-why-card{padding:14px 13px;gap:6px;border-radius:14px;}
  .tal-why-ico{width:32px;height:32px;border-radius:9px;font-size:16px;}
  .tal-why-card h3{font-size:14px;line-height:1.2;}
  .tal-why-card p{font-size:11.5px;line-height:1.45;}
  .tal-why-card::after{font-size:40px;right:10px;top:6px;}

  .tal-roster-cta{margin-top:16px;}
  .tal-card{flex-basis:min(44vw,180px);}

  .tal-steps{grid-template-columns:1fr 1fr;gap:24px 10px;}
  .tal-step{padding:24px 13px 14px;gap:5px;border-radius:14px;}
  .tal-step-num{width:30px;height:30px;font-size:14px;top:-14px;left:13px;}
  .tal-step h3{font-size:14px;margin-top:4px;}
  .tal-step p{font-size:11.5px;line-height:1.45;}

  .tal-faq-wrap{gap:14px;}
  .tal-faq-intro h2{font-size:clamp(28px,9vw,38px);}
  .tal-faq-intro p{font-size:13px;margin:8px 0 12px;}
  .tal-faq-intro .btn{padding:11px 20px;font-size:14px;}
  .tal-faq-list{gap:8px;}
  .tal-faq-item{padding:0 16px;}
  .tal-faq-item summary{padding:12px 0;font-size:13.5px;}
  .tal-faq-item p{font-size:13px;margin-bottom:14px;}

  .tal-closer{padding-top:68px !important;}
  .tal-closer-main h2{font-size:clamp(28px,8.6vw,36px);}
  .tal-closer-main p{font-size:13.5px;margin:10px auto 16px;}
  .tal-closer .tal-footer{padding-top:16px;margin-top:10px;}
  .tal-closer .tal-footer .footer-top{grid-template-columns:1fr 1fr;gap:14px 18px;padding-bottom:12px;}
  .tal-closer .tal-footer .footer-brand{grid-column:1 / -1;}
  .tal-closer .tal-footer .footer-brand p{font-size:12px;margin-top:6px;}
  .tal-closer .tal-footer .footer-cols{display:contents;}
  .tal-closer .tal-footer .footer-bottom{padding:10px 0 0;gap:4px 14px;}
  .tal-closer .tal-footer .footer-bottom p,.tal-closer .tal-footer .footer-bottom a{font-size:12px;}
}
/* shorter phones (SE / small Androids): tighten the text-heavy sections */
@media (max-width:760px) and (max-height:780px){
  .about{gap:14px;}
  .about h2{font-size:clamp(24px,7.4vw,30px);}
  .about p{font-size:12.5px;line-height:1.5;margin:10px 0 12px;}
  .about .btn{padding:10px 18px;font-size:13px;}
  .about-pull .about-eyebrow{font-size:clamp(38px,12vw,48px);margin-bottom:4px;}
  .about-pull p{font-size:16px;}

  .contact-cta-link{font-size:clamp(36px,11vw,46px);}
  .student-note{margin-top:10px;}
  .site-footer{padding-top:14px;margin-top:14px;}
  .footer-brand p{display:none;}
  .footer-col a{padding:2px 0;font-size:12.5px;}

  .tal-closer-main p{margin:8px auto 12px;}
  .tal-closer .tal-footer .footer-brand p{display:none;}
  .tal-closer .tal-footer{padding-top:12px;}
}

/* ============================================================
   PHONE — no sideways sliding: every multi-item section shows all of
   its items at once in a grid, like Why Join.
   ============================================================ */
@media (max-width:760px){
  /* Creators in Action: brand tabs wrap into compact rows */
  .client-tabs{flex-wrap:wrap;justify-content:center;overflow:visible;margin:0 0 10px;padding:0;gap:6px;}
  .client-tab{padding:6px 11px;font-size:11px;gap:6px;}
  .showcase-track .phone.is-center{flex-basis:clamp(100px,calc((100svh - 480px) * .46),175px);}

  /* How It Works: 2 x 2 grid */
  .how-steps{
    display:grid !important;grid-template-columns:1fr 1fr;gap:12px 10px;
    overflow:visible;padding:0;scroll-snap-type:none;
  }
  .how-step{flex:none;margin-top:0 !important;min-width:0;}
  .how-media{
    height:calc((100svh - 360px) / 2);min-height:86px;max-height:240px;
    aspect-ratio:auto;margin-bottom:0;border-radius:10px;
  }
  .how-media h3{font-size:13px;line-height:1.15;padding:0 8px;}
  .how-num{transform:scale(.8);transform-origin:top left;}
  .how-media .how-desc{font-size:10.5px;line-height:1.4;padding:30px 9px 10px;}
  .how-media .how-desc::before{width:22px;margin-bottom:6px;}

  /* The Work: all cases as a stacked list (cover left, text right) */
  .work-scroller-wrap{display:block;margin-top:0;}
  .work-scroller{
    display:grid;grid-template-columns:1fr;gap:10px;
    padding:0;overflow:visible;scroll-snap-type:none;
    -webkit-mask:none;mask:none;
  }
  .work-slide,.work-slide.is-active{
    display:grid;grid-template-columns:38% 1fr;align-items:stretch;
    opacity:1;transform:none;filter:none;border-radius:14px;cursor:default;
  }
  .work-cover{aspect-ratio:auto;height:100%;min-height:96px;}
  .work-cover-num{font-size:40px;}
  .work-info{padding:12px 14px;gap:4px;justify-content:center;}
  .work-info h3{font-size:15px;}
  .work-info p{font-size:12px;}
  .work-info .case-flag{font-size:9.5px;padding:3px 8px;}
  .work-dots{display:none;}

  /* Campus Ambassadors: all 12 cards in a 3 x 4 grid */
  .tal-roster{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
    overflow:visible;padding:0;scroll-snap-type:none;cursor:default;
    -webkit-mask-image:none;mask-image:none;
  }
  .tal-card{flex:none;min-width:0;border-radius:10px;}
  .tal-card-media{aspect-ratio:auto;height:calc((100svh - 360px) / var(--rows,4));min-height:66px;max-height:150px;}
  .tal-card-mono{font-size:30px;}
  .tal-card-meta{padding:14px 7px 6px;}
  .tal-card-meta h3{font-size:11px;}
  .tal-card-meta span{font-size:8.5px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tal-card-media.has-video::after{width:20px;height:20px;font-size:8px;right:6px;bottom:6px;}
}
@media (max-width:760px) and (max-height:780px){
  .how-steps{gap:10px 10px;}
}
@media (max-width:760px) and (max-height:700px){
  .showcase-track .phone.is-center{flex-basis:clamp(84px,calc((100svh - 480px) * .46),175px);}
  .showcase-info h3{font-size:19px;}
  .clients-head h2{font-size:28px;}
}

/* Talents hero on phone: headline + button sit together at the bottom */
@media (max-width:760px){
  .tal-body #sections > .tal-hero{justify-content:flex-end;padding-bottom:calc(28px + env(safe-area-inset-bottom)) !important;}
  .tal-hero-inner{flex-direction:row !important;align-items:flex-end !important;justify-content:space-between;flex-wrap:nowrap;gap:14px !important;}
  .tal-hero h1{font-size:clamp(17px,5.2vw,22px);line-height:1.2;max-width:none;}
  .tal-hero-cta{padding:11px 16px;font-size:12px;gap:7px;}
}

/* ============================================================
   WHAT WE DO — editorial index + cinematic stage
   ============================================================ */
#services.svc-sec{position:relative;overflow:hidden;isolation:isolate;padding:clamp(70px,10vh,110px) 0;}
#services.svc-sec::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  width:70vw;height:70vw;max-width:980px;max-height:980px;right:-18vw;top:50%;transform:translateY(-50%);
  background:radial-gradient(circle,rgba(235,63,34,.22),transparent 62%);
  animation:svcGlow 9s ease-in-out infinite alternate;
}
@keyframes svcGlow{from{transform:translateY(-50%) scale(.9);opacity:.7;}to{transform:translateY(-46%) scale(1.08);opacity:1;}}
#services.svc-sec > .wrap{position:relative;z-index:1;}

/* huge outlined word of the active service, drifting behind everything */
.svc-bgword{
  position:absolute;left:0;right:0;bottom:-.14em;z-index:0;pointer-events:none;
  text-align:center;white-space:nowrap;overflow:hidden;
  font-family:var(--display);font-size:clamp(120px,21vw,360px);line-height:.85;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.055);
}
.svc-bgword span{display:inline-block;}
.svc-bgword span.swap{animation:svcWord 1s cubic-bezier(.22,1,.36,1);}
@keyframes svcWord{from{transform:translateY(35%);opacity:0;}to{transform:none;opacity:1;}}

.svc-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(34px,5.5vw,96px);align-items:center;}
.svc-title{font-size:clamp(40px,5vw,76px);line-height:.95;text-transform:uppercase;margin:0 0 clamp(14px,2.6vh,30px);}
.svc-title .how-star{top:-.82em;}

/* the index */
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.1);counter-reset:none;}
.svc-item{
  position:relative;width:100%;display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:"num name" ". desc";
  column-gap:14px;align-items:baseline;align-content:start;text-align:left;height:auto;
  background:none;border:0;border-bottom:1px solid rgba(255,255,255,.1);
  padding:clamp(7px,1.25vh,13px) 34px clamp(7px,1.25vh,13px) 0;color:#fff;cursor:pointer;font:inherit;
}
.svc-num{grid-area:num;font-family:var(--grotesque);font-weight:700;font-size:12px;letter-spacing:1px;color:rgba(255,255,255,.35);transition:color .35s;}
.svc-name{
  grid-area:name;justify-self:start;display:inline-block;
  font-family:var(--display);font-size:clamp(28px,3.3vw,54px);line-height:1;text-transform:uppercase;letter-spacing:.3px;
  color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.38);
  transition:color .45s ease,-webkit-text-stroke-color .45s ease,transform .6s cubic-bezier(.22,1,.36,1);
}
.svc-item:hover .svc-name,.svc-item:focus-visible .svc-name{-webkit-text-stroke-color:rgba(255,255,255,.9);}
.svc-item.active .svc-name{color:#fff;-webkit-text-stroke-color:#fff;transform:translateX(12px);}
.svc-item.active .svc-num{color:var(--red);}
.svc-item::after{
  content:'\2192';position:absolute;right:4px;top:50%;transform:translate(-10px,-50%);opacity:0;
  font-size:22px;color:var(--red);transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1);
}
.svc-item.active::after{opacity:1;transform:translate(0,-50%);}
/* The line under the open service opens and closes on a plain pixel height
   (services-showcase.js measures the text into --svc-h). No nested grid and no
   fr tracks, so the row can never be stretched taller than its own content. */
.svc-desc{grid-area:desc;align-self:start;display:block;height:0;overflow:hidden;margin-top:0;transition:height .55s cubic-bezier(.22,1,.36,1),margin-top .55s cubic-bezier(.22,1,.36,1);}
.svc-desc > span{display:block;font-size:15px;line-height:1.5;color:rgba(255,255,255,.66);padding-left:12px;}
.svc-item.active .svc-desc{height:var(--svc-h,auto);margin-top:8px;}
.svc-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none;}
.svc-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),#ff8a6e);transform:scaleX(0);transform-origin:left center;}
.svc-running .svc-item.active .svc-bar i{animation:svcBar var(--svc-dur,5.5s) linear forwards;}
.svc-paused .svc-item.active .svc-bar i{animation-play-state:paused;}
@keyframes svcBar{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.svc-sec .svc-footnote{margin:clamp(14px,2.4vh,24px) 0 0;font-size:13px;letter-spacing:.3px;color:rgba(255,255,255,.45);text-align:left;}

/* the stage */
.svc-stage{position:relative;height:min(calc(100vh - 190px),640px);min-height:380px;}
.svc-deck{position:absolute;inset:0;z-index:0;}
.svc-deck-card{
  position:absolute;inset:4% 0 4% 0;border-radius:24px;background:#222 center/cover no-repeat;
  filter:brightness(.45) saturate(.8);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
  transition:transform .9s cubic-bezier(.22,1,.36,1),background-image .3s;
}
.svc-deck-card.d1{transform:translateX(7%) rotate(5deg) scale(.94);opacity:.7;}
.svc-deck-card.d2{transform:translateX(13%) rotate(10deg) scale(.88);opacity:.4;}
.svc-stage:hover .svc-deck-card.d1{transform:translateX(10%) rotate(7deg) scale(.94);}
.svc-stage:hover .svc-deck-card.d2{transform:translateX(18%) rotate(13deg) scale(.88);}
.svc-frame{
  position:absolute;inset:0;z-index:1;border-radius:24px;overflow:hidden;background:#0d0d0f;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08),0 0 80px -20px rgba(235,63,34,.35);
  transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.svc-slide{position:absolute;inset:0;margin:0;z-index:1;clip-path:inset(100% 0 0 0);transition:clip-path 1s cubic-bezier(.77,0,.18,1);}
.svc-slide.is-prev{z-index:2;clip-path:inset(0 0 0 0);transition:none;}
.svc-slide.is-active{z-index:3;clip-path:inset(0 0 0 0);}
.svc-slide img,.svc-slide video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.2);transition:transform 1.7s cubic-bezier(.22,1,.36,1);
}
.svc-slide.is-active img,.svc-slide.is-active video{transform:scale(1);}
.svc-slide img:not([src]){display:none;}
.svc-slide.t1{background:linear-gradient(160deg,#3a1b14,#111);}
.svc-slide.t2{background:linear-gradient(160deg,#1c2733,#111);}
.svc-slide.t3{background:linear-gradient(160deg,#35291a,#111);}
.svc-slide.t4{background:linear-gradient(160deg,#2b1b33,#111);}
.svc-slide.t5{background:linear-gradient(160deg,#4a1d14,#111);}
.svc-slide.t6{background:linear-gradient(160deg,#1c3029,#111);}
.svc-frame::after{
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 22%,transparent 58%,rgba(0,0,0,.78) 100%);
}
.svc-shine{
  position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 60%);
  mix-blend-mode:overlay;
}
.svc-stage:hover .svc-shine{opacity:1;}
.svc-live{
  position:absolute;top:18px;left:18px;z-index:6;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--grotesque);font-weight:700;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);padding:7px 12px;border-radius:100px;
  border:1px solid rgba(255,255,255,.14);
}
.svc-live i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(235,63,34,.7);animation:svcPulse 1.6s ease-out infinite;}
@keyframes svcPulse{0%{box-shadow:0 0 0 0 rgba(235,63,34,.7);}100%{box-shadow:0 0 0 10px rgba(235,63,34,0);}}
.svc-frame-ui{
  position:absolute;left:0;right:0;bottom:0;z-index:6;padding:20px 22px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
}
.svc-count{font-family:var(--display);line-height:.9;color:#fff;}
.svc-count b{font-weight:400;font-size:clamp(44px,4.6vw,72px);}
.svc-count small{font-size:18px;color:rgba(255,255,255,.5);margin-left:4px;}
.svc-chip{
  font-family:var(--display);font-size:clamp(18px,1.7vw,26px);text-transform:uppercase;letter-spacing:.4px;
  color:#fff;background:var(--red);padding:8px 16px;border-radius:100px;white-space:nowrap;
  box-shadow:0 10px 30px -8px rgba(235,63,34,.6);
}

@media (max-width:1000px) and (min-width:761px){
  .svc-layout{gap:30px;}
  .svc-stage{height:min(calc(100vh - 220px),520px);}
}

/* phone: title, stage, then the index — all in one screen */
@media (max-width:760px){
  .svc-layout{display:flex;flex-direction:column;align-items:stretch;gap:12px;}
  .svc-left{display:contents;}
  .svc-title{order:1;margin:0;font-size:clamp(32px,10vw,42px);text-align:center;}
  .svc-stage{order:2;height:clamp(160px,calc(100svh - 490px),380px);min-height:0;}
  .svc-list{order:3;}
  .svc-sec .svc-footnote{display:none;}
  .svc-deck{display:none;}
  .svc-frame,.svc-deck-card{border-radius:16px;}
  .svc-item{padding:7px 26px 7px 0;grid-template-columns:24px minmax(0,1fr);column-gap:8px;}
  .svc-num{font-size:10px;}
  .svc-name{font-size:clamp(19px,6vw,24px);-webkit-text-stroke-width:1px;}
  .svc-item.active .svc-name{transform:translateX(6px);}
  .svc-item::after{font-size:16px;}
  .svc-desc > span{font-size:12.5px;padding-left:6px;}
  .svc-item.active .svc-desc{margin-top:4px;}
  .svc-live{top:10px;left:10px;font-size:9px;padding:5px 9px;}
  .svc-frame-ui{padding:12px 14px;}
  .svc-count b{font-size:34px;}
  .svc-count small{font-size:13px;}
  .svc-chip{font-size:14px;padding:6px 12px;}
  .svc-bgword{font-size:34vw;bottom:auto;top:40%;}
}
@media (prefers-reduced-motion: reduce){
  #services.svc-sec::before,.svc-live i{animation:none;}
  .svc-slide,.svc-slide img,.svc-slide video,.svc-frame,.svc-name,.svc-desc,.svc-deck-card{transition:none !important;}
  .svc-bgword span.swap{animation:none;}
  .svc-bar{display:none;}
}
/* What We Do: photo first, video fades in over it once it's playing */
.svc-slide .svc-video{opacity:0;transition:opacity .8s ease,transform 1.7s cubic-bezier(.22,1,.36,1);}
.svc-slide.show-video .svc-video{opacity:1;}
.svc-item .svc-bar i{transition:none;}
.svc-loading .svc-item.active .svc-bar i{animation:svcWait .9s ease-in-out infinite alternate;}
@keyframes svcWait{from{opacity:1;}to{opacity:.35;}}

/* ============================================================
   THE WORK — featured case screen + case tabs
   ============================================================ */
#work.wk-sec{padding:clamp(76px,10vh,104px) 0 clamp(24px,4vh,48px);overflow:hidden;}
.wk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(14px,2.4vh,26px);}
.wk-head h2{font-size:clamp(40px,5vw,76px);line-height:.95;text-transform:uppercase;margin:0;}
.wk-head h2 .how-star{top:-.82em;}
.wk-head p{margin:10px 0 0;font-size:15px;color:rgba(255,255,255,.6);max-width:52ch;}
.wk-nav{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.wk-counter{display:flex;align-items:center;gap:10px;margin-right:10px;font-family:var(--display);color:rgba(255,255,255,.45);font-size:18px;}
.wk-counter b{font-weight:400;font-size:40px;color:#fff;line-height:1;}
.wk-counter i{width:36px;height:1px;background:rgba(255,255,255,.3);}
.wk-arrow{
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);
  color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .25s,border-color .25s,transform .25s;
}
.wk-arrow:hover{background:var(--red);border-color:var(--red);transform:scale(1.06);}

/* the screen */
.wk-screen{
  position:relative;height:min(calc(100vh - 380px),600px);min-height:280px;border-radius:26px;overflow:hidden;
  background:#0c0c0e;isolation:isolate;
  box-shadow:0 50px 110px -50px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.07);
}
.wk-slides{position:absolute;inset:0;}
.wk-slide{position:absolute;inset:0;opacity:0;z-index:1;transition:opacity 1s ease;}
.wk-slide.is-prev{opacity:1;z-index:2;transition:none;}
.wk-slide.is-active{opacity:1;z-index:3;}
.wk-slide.t1{background:radial-gradient(120% 90% at 20% 10%,#3a3a42,#101012 70%);}
.wk-slide.t3{background:radial-gradient(120% 90% at 20% 10%,#23374a,#0e1014 70%);}
.wk-slide.t5{background:radial-gradient(120% 90% at 20% 10%,#6a2414,#120c0b 70%);}
.wk-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.14);}
.wk-slide.is-active .wk-media{animation:wkKen 9s ease-out forwards;}
@keyframes wkKen{from{transform:scale(1.14) translate(1.5%,1%);}to{transform:scale(1.02) translate(0,0);}}
.wk-video{opacity:0;transition:opacity .9s ease;}
.wk-slide.video-ready .wk-video{opacity:1;}
.wk-bignum{
  position:absolute;right:-.04em;top:-.12em;z-index:0;pointer-events:none;
  font-family:var(--display);font-size:clamp(200px,30vw,460px);line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.09);
}
.wk-slide.has-media .wk-bignum{z-index:2;-webkit-text-stroke-color:rgba(255,255,255,.18);mix-blend-mode:overlay;}
.wk-shade{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,8,10,.86) 0%,rgba(8,8,10,.45) 42%,transparent 70%),
    linear-gradient(0deg,rgba(8,8,10,.7) 0%,transparent 45%),
    radial-gradient(500px circle at var(--mx,70%) var(--my,30%),rgba(255,255,255,.08),transparent 60%);
}
.wk-case-tag{
  position:absolute;top:20px;left:22px;z-index:6;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--grotesque);font-weight:700;font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,.4);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);padding:7px 12px;border-radius:100px;
}
.wk-case-tag i{width:7px;height:7px;border-radius:50%;background:var(--red);}
.wk-copy{position:absolute;left:clamp(22px,3.2vw,48px);bottom:clamp(22px,3.6vh,44px);right:40%;z-index:6;}
.wk-flag{
  display:inline-block;font-family:var(--grotesque);font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:#ff8a6e;border:1px solid rgba(235,63,34,.6);background:rgba(235,63,34,.12);padding:6px 12px;border-radius:100px;
}
.wk-title{margin:14px 0 8px;overflow:hidden;font-family:var(--display);font-weight:400;font-size:clamp(40px,5.4vw,92px);line-height:.92;text-transform:uppercase;color:#fff;}
.wk-title span{display:inline-block;}
.wk-desc{margin:0;font-size:16px;color:rgba(255,255,255,.72);}
.wk-copy.enter .wk-flag{animation:wkUp .7s cubic-bezier(.22,1,.36,1) both;}
.wk-copy.enter .wk-title span{animation:wkRise .9s cubic-bezier(.22,1,.36,1) .08s both;}
.wk-copy.enter .wk-desc{animation:wkUp .8s cubic-bezier(.22,1,.36,1) .22s both;}
@keyframes wkRise{from{transform:translateY(105%);}to{transform:none;}}
@keyframes wkUp{from{transform:translateY(16px);opacity:0;}to{transform:none;opacity:1;}}

/* the tabs */
.wk-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px;}
.wk-tab{
  position:relative;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;overflow:hidden;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:10px;color:#fff;font:inherit;
  transition:background .3s,border-color .3s,transform .3s cubic-bezier(.22,1,.36,1);
}
.wk-tab:hover{background:rgba(255,255,255,.07);transform:translateY(-3px);}
.wk-tab.active{background:rgba(255,255,255,.08);border-color:rgba(235,63,34,.5);}
.wk-thumb{flex:0 0 auto;width:74px;height:56px;border-radius:10px;background-size:cover;background-position:center;opacity:.55;filter:grayscale(.6);transition:opacity .3s,filter .3s;}
.wk-thumb.t1{background-color:#34343b;}
.wk-thumb.t3{background-color:#23374a;}
.wk-thumb.t5{background-color:#6a2414;}
.wk-tab.active .wk-thumb,.wk-tab:hover .wk-thumb{opacity:1;filter:none;}
.wk-tab-text{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"num title" "num flag";column-gap:10px;min-width:0;}
.wk-tab-num{grid-area:num;font-family:var(--display);font-size:28px;line-height:1;color:rgba(255,255,255,.3);transition:color .3s;}
.wk-tab.active .wk-tab-num{color:var(--red);}
.wk-tab-title{grid-area:title;font-weight:800;font-size:15px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wk-tab-flag{grid-area:flag;font-size:11.5px;color:rgba(255,255,255,.45);}
.wk-tab-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.05);}
.wk-tab-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),#ff8a6e);transform:scaleX(0);transform-origin:left center;}
.wk-tab:not(.active) .wk-tab-bar i{transform:scaleX(0) !important;}

/* phone */
@media (max-width:760px){
  .wk-head{margin-bottom:12px;}
  .wk-head h2{font-size:clamp(32px,10vw,42px);}
  .wk-head p{font-size:12.5px;margin-top:6px;}
  .wk-counter,.wk-arrow{display:none;}
  .wk-screen{height:clamp(190px,calc(100svh - 400px),460px);min-height:0;border-radius:18px;}
  .wk-copy{right:18px;left:16px;bottom:16px;}
  .wk-title{font-size:clamp(30px,9vw,40px);margin:10px 0 4px;}
  .wk-desc{font-size:12.5px;}
  .wk-flag{font-size:9.5px;padding:4px 9px;}
  .wk-case-tag{top:12px;left:12px;font-size:9px;padding:5px 9px;}
  .wk-bignum{font-size:56vw;}
  .wk-shade{background:linear-gradient(0deg,rgba(8,8,10,.88) 0%,rgba(8,8,10,.35) 55%,transparent 80%);}
  .wk-tabs{gap:8px;margin-top:10px;}
  .wk-tab{flex-direction:column;align-items:stretch;gap:6px;padding:6px;border-radius:12px;}
  .wk-thumb{width:100%;height:44px;border-radius:8px;}
  .wk-tab-text{grid-template-columns:auto 1fr;grid-template-areas:"num title";column-gap:6px;align-items:center;}
  .wk-tab-num{display:none;}
  .wk-tab-title{font-size:10.5px;white-space:normal;line-height:1.15;overflow:visible;}
  .wk-tab-flag{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .wk-slide,.wk-video{transition:none;}
  .wk-slide.is-active .wk-media{animation:none;transform:none;}
  .wk-copy.enter *{animation:none !important;}
  .wk-tab-bar{display:none;}
}


/* ============================================================
   PHONE MOCKUP v2 — titanium frame, thin black bezel, proportional
   Dynamic Island, status bar, home indicator and glass glare.
   Everything inside scales with the phone's own width (cqw), so the
   near/far phones are true miniatures rather than squashed copies.
   ============================================================ */
.phone{
  container-type:inline-size;
  padding:2.5px;
  border-radius:14% / 6.46%;
  background:
    linear-gradient(145deg,#8a8c92 0%,#3a3b40 14%,#1b1c1f 32%,#4c4e54 52%,#1a1b1e 74%,#6e7076 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 -1px 0 rgba(0,0,0,.6) inset,
    0 34px 60px -22px rgba(0,0,0,.85),
    0 12px 24px -12px rgba(0,0,0,.7);
}
.showcase-track .phone.is-center{
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 -1px 0 rgba(0,0,0,.6) inset,
    0 40px 70px -24px rgba(0,0,0,.9),
    0 0 70px -14px rgba(235,63,34,.38);
}
.phone-screen{
  box-sizing:border-box;
  border:3.4cqw solid #030304;
  border-radius:12.6% / 5.85%;
  background-clip:padding-box;
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}
/* soft darkening under the status bar so it reads over any footage */
.phone-screen::before{
  content:'';position:absolute;left:0;right:0;top:0;height:14%;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5),transparent);
}
/* glass glare */
.phone-screen::after{
  content:'';position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 20%,transparent 38%,transparent 78%,rgba(255,255,255,.05) 100%);
}
/* Dynamic Island — real proportions, with the front camera lens */
.phone-notch{
  top:2.6cqw;width:31cqw;height:9cqw;min-height:0;z-index:7;
  border-radius:100px;background:#000;
  box-shadow:inset 0 0 0 .4cqw rgba(255,255,255,.04);
}
.phone-notch::after{
  content:'';position:absolute;right:3.2cqw;top:50%;width:4cqw;height:4cqw;transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#2b3a55 0%,#0b0f18 55%,#000 100%);
  box-shadow:0 0 0 .5cqw #0d0d0f;
}
/* status bar: time left, signal / wifi / battery right */
.phone-status{
  position:absolute;left:0;right:0;top:3.2cqw;z-index:7;height:9cqw;
  display:flex;align-items:center;justify-content:space-between;padding:0 7cqw 0 9cqw;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Work Sans',sans-serif;
  font-weight:600;font-size:5.2cqw;letter-spacing:-.02em;color:#fff;pointer-events:none;
  text-transform:none;
}
.phone-status .ps-icons{display:flex;align-items:center;gap:1.4cqw;}
.phone-status svg{display:block;height:3.6cqw;width:auto;fill:#fff;}
.phone-status svg.ps-batt{height:3.9cqw;}
/* home indicator */
.phone-home{
  position:absolute;left:50%;bottom:2.4cqw;z-index:7;transform:translateX(-50%);
  width:35cqw;height:1.4cqw;min-height:2px;border-radius:100px;background:rgba(255,255,255,.82);
  pointer-events:none;
}
/* side buttons: machined titanium, slightly proud of the frame */
.phone::before,.phone::after,.phone-cam-control{
  background:linear-gradient(90deg,#1f2023,#6b6d73 45%,#2a2b2f);
}
.phone::before{
  left:-1.6px;top:17%;width:2.6px;height:4.2%;border-radius:2px;
  box-shadow:0 calc(7.2% + 6px) 0 0 #4a4c51, 0 calc(14.6% + 12px) 0 0 #4a4c51;
}
.phone::after{right:-1.6px;top:21%;width:2.6px;height:8%;border-radius:2px;box-shadow:none;}
.phone-cam-control{right:-1.8px;bottom:26%;width:2.8px;height:7%;border-radius:2px;}
/* far phones are tiny: drop the fine detail that would just be noise */
.showcase-track .phone.is-far .phone-status,
.showcase-track .phone.is-far .phone-home{display:none;}

/* ============================================================
   BRANDS PAGE PALETTE — section backgrounds are only black, orange
   (the activation band) and white. No grey sections.
   ============================================================ */
body.brands-body{background:#000;}
.brands-body .sec-dark,
.brands-body .hero,
.brands-body .clients{background:#000;}
.brands-body .sec-light{background:#fff;}
.brands-body .hero-scrim{
  background:
    radial-gradient(78% 62% at 50% 46%, rgba(0,0,0,.82) 0%, rgba(0,0,0,.6) 38%, rgba(0,0,0,.18) 72%, transparent 100%),
    linear-gradient(to right, #000 0%, rgba(0,0,0,.5) 6%, transparent 15%, transparent 85%, rgba(0,0,0,.5) 94%, #000 100%),
    linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.2) 42%, rgba(0,0,0,.78));
}
.brands-body #work.wk-sec{
  background:radial-gradient(90% 70% at 50% -10%, rgba(235,63,34,.16), transparent 62%), #000;
  transition:none;
}
.brands-body .contact-overlay{background:rgba(0,0,0,.7);}
.brands-body header.scrolled{background:rgba(0,0,0,.94);}
.brands-body .sticky-cta{background:rgba(0,0,0,.96);}

/* footer social links (both pages) */
.footer-social{display:flex;gap:10px;margin-top:18px;}
.footer-social a{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.18);color:#fff;background:rgba(255,255,255,.04);
  transition:background .25s,border-color .25s,transform .25s cubic-bezier(.22,1,.36,1);
}
.footer-social a:hover,.footer-social a:focus-visible{background:var(--red);border-color:var(--red);transform:translateY(-3px);}
.footer-social svg{width:18px;height:18px;fill:currentColor;}
@media (max-width:760px){
  .footer-social{margin-top:10px;gap:8px;}
  .footer-social a{width:32px;height:32px;}
  .footer-social svg{width:15px;height:15px;}
}
/* social icons sit on the logo's row, so the footer doesn't grow */
.footer-brand{display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;}
.footer-brand .footer-logo{order:0;}
.footer-brand .footer-social{order:1;margin-top:0;}
.footer-brand p{order:2;flex:0 0 100%;max-width:44ch !important;margin-right:calc(100% - 44ch);}


/* ============================================================
   HERO refresh — fitted word swap, orange CTA, big stat, calmer
   wall, and a "trusted by" brand strip
   ============================================================ */
.hero .swap{transition:width .5s cubic-bezier(.22,1,.36,1);}
.hero .swap-face{justify-content:center;}

.hero-actions{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;margin:clamp(26px,4vh,40px) 0 clamp(22px,3.4vh,34px);}
.hero-btn{gap:10px;padding:17px 32px;font-size:16px;box-shadow:0 18px 40px -14px rgba(235,63,34,.7);}
.hero-btn span{transition:transform .25s ease;}
.hero-btn:hover span{transform:translateX(4px);}
.hero-actions .hero-sub-link{margin:0;}

.hero-stat{margin:0;display:flex;align-items:baseline;justify-content:center;gap:12px;flex-wrap:wrap;}
.hero-stat strong{font-family:var(--display);font-weight:400;font-size:clamp(34px,3.6vw,52px);line-height:1;color:var(--red);letter-spacing:.3px;}
.hero-stat span{font-family:var(--grotesque);font-weight:700;font-size:clamp(12px,1.1vw,14px);text-transform:uppercase;letter-spacing:.4px;color:rgba(255,255,255,.8);}

/* calmer wall: no repeated brand captions, slightly dimmer, so the
   footage reads as proof and the headline leads */
.hero .reel-name{display:none;}
.hero .feed-wall{filter:none;}

/* trusted-by strip along the bottom of the hero */
.hero{padding-bottom:clamp(110px,15vh,150px);}
.hero-brands{
  position:absolute;left:0;right:0;bottom:clamp(20px,3.5vh,36px);z-index:3;
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap;
  padding:0 24px;
}
.hero-brands-label{
  font-family:var(--grotesque);font-weight:700;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--red);
}
.hero-brands ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px clamp(16px,2.2vw,34px);}
.hero-brands li{
  font-family:var(--display);font-size:clamp(15px,1.3vw,20px);text-transform:uppercase;letter-spacing:.4px;
  color:rgba(255,255,255,.55);white-space:nowrap;transition:color .25s;
}
.hero-brands li:hover{color:#fff;}

@media (max-width:760px){
  .hero{padding-bottom:0;}
  .hero-actions{flex-direction:column;gap:14px;margin:22px 0 18px;}
  .hero-btn{padding:14px 26px;font-size:15px;}
  .hero-stat{gap:6px;flex-direction:column;align-items:center;}
  .hero-stat strong{font-size:34px;}
  .hero-stat span{font-size:11px;}
  .hero-brands{position:relative;bottom:auto;margin-top:26px;gap:8px;flex-direction:column;}
  .hero-brands ul{gap:4px 14px;}
  .hero-brands li{font-size:13px;}
}
@media (max-width:760px) and (max-height:700px){
  .hero-actions{margin:16px 0 12px;}
  .hero-brands{margin-top:14px;}
  .hero-brands li:nth-child(n+7){display:none;}
}
@media (min-width:761px) and (max-height:900px){
  .hero{padding-top:clamp(90px,12vh,120px);padding-bottom:clamp(96px,13vh,120px);}
  .hero h1{font-size:clamp(46px,min(8.6vw,13.5vh),124px);}
  .hero-actions{margin:20px 0 16px;}
  .hero-btn{padding:14px 28px;}
}

/* HERO — minimal: headline + one button, nothing else */
.hero{padding-bottom:clamp(80px,10vh,110px);}
.hero-actions{margin:clamp(28px,4.5vh,44px) 0 0;}
@media (min-width:761px) and (max-height:900px){ .hero{padding-bottom:clamp(70px,9vh,100px);} .hero-actions{margin-top:26px;} }
@media (max-width:760px){ .hero{padding-bottom:0;} .hero-actions{margin:24px 0 0;} }

/* Talents closer: footer uses the exact Brands footer markup + styles */
.tal-closer .site-footer{text-align:left;align-self:center;}
.tal-closer-stars{z-index:0;}
.tal-closer-main > .wrap{position:relative;z-index:1;}


/* ============================================================
   PERFORMANCE PASS
   ============================================================ */
/* anything in an off-screen section stops animating (resumes in place) */
.is-offscreen,.is-offscreen *,.is-offscreen *::before,.is-offscreen *::after{animation-play-state:paused !important;}
/* keep the drifting feed-wall columns on their own GPU layers */
.feed-col{will-change:transform;}
/* backdrop blurs re-render every frame over moving content: swap them for
   flat translucent fills that look the same at this size */
.reel-play,.phone-play{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.35);}
.svc-live,.wk-case-tag{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.6);}
.brands-body .sticky-cta{backdrop-filter:none;-webkit-backdrop-filter:none;}
/* What We Do + How It Works entrances (replaces the GSAP versions) */
#services.svc-ready .svc-layout{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);}
#services.svc-ready.svc-in .svc-layout{opacity:1;transform:none;}
#process.how-ready .how-step{opacity:0;translate:0 22px;transition:opacity .5s ease,translate .5s cubic-bezier(.22,1,.36,1);}
#process.how-ready.how-in .how-step{opacity:1;translate:0 0;}
#process.how-ready .how-step:nth-child(2){transition-delay:.12s;}
#process.how-ready .how-step:nth-child(3){transition-delay:.24s;}
#process.how-ready .how-step:nth-child(4){transition-delay:.36s;}
@media (prefers-reduced-motion: reduce){
  #services.svc-ready .svc-layout,#process.how-ready .how-step{opacity:1;transform:none;translate:0 0;transition:none;}
}


/* ============================================================
   PERFORMANCE PASS (Brands page)
   ============================================================ */
/* 1. motion in off-screen sections is paused (class set in main.js) */
.is-offscreen *,.is-offscreen *::before,.is-offscreen *::after,
.is-offscreen::before,.is-offscreen::after{animation-play-state:paused !important;}

/* 2. hero: darken the wall with a static overlay instead of a filter on the
   moving wall (a filter there re-rasterises the whole wall every frame) */
.brands-body .hero-scrim::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.16);}
.feed-col{will-change:transform;backface-visibility:hidden;}
.reel{contain:paint;}

/* 3. contact backdrop: blur a quarter-size copy of the video and scale it
   up. Looks the same (it's heavily blurred anyway) but the GPU blurs
   ~16x fewer pixels per frame. */
.contact-video{
  /* the clip itself stays invisible — it only feeds the tiny canvas below */
  inset:auto;left:0;top:0;width:2px;height:2px;opacity:0;filter:none;transform:none;pointer-events:none;
}
.contact-canvas{
  position:absolute;left:-6%;top:-6%;width:112%;height:112%;z-index:0;
  object-fit:cover;opacity:0;transition:opacity .8s ease;image-rendering:auto;
}
.contact-canvas.ready{opacity:1;}

/* 4. keep big decorative layers on their own compositor layer */
#services.svc-sec::before,.svc-bgword{will-change:transform;}
.svc-frame{will-change:transform;}


/* ============================================================
   SCROLL CHOREOGRAPHY support (brands-motion.js)
   html.cc-choreo is only set when motion is allowed and GSAP loaded.
   ============================================================ */
/* Lenis owns smooth scrolling — native smooth scroll would fight it */
html.lenis,html.lenis body{height:auto;}
html.lenis{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}

/* the old per-section fade-in would double up with the choreography */
.cc-choreo .enter-fade{opacity:1;transform:none;transition:none;}

/* What We Do rides up over the pinned hero */
.cc-choreo-desktop #hero{z-index:0;}
.cc-choreo-desktop #services{position:relative;z-index:2;}
.cc-choreo-desktop #sections > section,.cc-choreo-desktop #sections > .band{position:relative;}
.cc-choreo #hero .feed-wall,.cc-choreo #hero .hero-inner,.cc-choreo .wk-slides,.cc-choreo .svc-stage{will-change:transform;}

/* word masks used for rising headline words */
.cc-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em;}
.cc-word > span{display:inline-block;will-change:transform;}

/* giant outlined line of type drifting behind Creators in Action */
.cc-ghost{
  position:absolute;left:0;top:50%;z-index:0;pointer-events:none;white-space:nowrap;
  transform:translateY(-50%);font-family:var(--display);font-size:clamp(140px,19vw,320px);line-height:.85;
  text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.07);
}
.cc-choreo #clientsSection{position:relative;}
.cc-choreo #clientsSection .clients-inner{position:relative;z-index:1;}

/* in scroll-driven mode the services progress bar follows scroll, so no
   transition lag on it */
.svc-scroll-driven .svc-item .svc-bar i{transition:none;}

/* The Work: leave room for the tabs on shorter laptop screens */
@media (min-width:761px){ .wk-screen{height:min(calc(100vh - 410px),600px);min-height:240px;} }

/* ============================================================
   HOW IT WORKS — always one screen (desktop, laptop, tablet, phone)
   Heading and card images size from the viewport HEIGHT as well as
   width, so short laptop screens shrink them instead of overflowing.
   ============================================================ */
@media (min-width:761px){
  #process{padding:clamp(64px,9vh,96px) 0 clamp(20px,3vh,36px) !important;}
  #process .sec-head{margin-bottom:clamp(14px,2.4vh,30px);}
  #process .sec-head h2{font-size:clamp(52px,min(11vw,14.5vh),170px);padding-top:.25em;}
  #process .sec-head p{margin-top:6px;font-size:clamp(13px,1.6vh,16px);}
  .how-step:nth-child(2),.how-step:nth-child(4){margin-top:0;}
  .how-media{aspect-ratio:auto;height:clamp(150px,calc(100vh - 436px),400px);margin-bottom:0;}
  .how-media h3{font-size:clamp(16px,min(1.7vw,2.6vh),26px);}
  .how-media .how-desc{font-size:12.5px;line-height:1.45;}
  .how-cta{margin-top:clamp(12px,2vh,24px);}
  .how-cta .btn{padding:12px 24px;}
}
/* Small cards (phones, and short laptop windows) have no spare room to stack
   a title above a caption, so the caption takes over the whole card for as long
   as it is showing and the title steps aside. */
@media (min-width:761px) and (max-height:700px){
  .how-media .how-desc{font-size:11.5px;line-height:1.4;}
}
@media (max-width:760px), (min-width:761px) and (max-height:700px){
  .how-media .how-desc{
    top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:38px 12px 12px;background:rgba(8,8,10,.82);
  }
  .how-step:hover .how-media h3,
  .how-card:focus-visible .how-media h3,
  .how-media.show-desc h3{opacity:0;transform:none;}
}

/* choreography: the activation band is full height from the start, so it
   never grows mid-scroll and shifts everything below it */
.cc-choreo .band{min-height:100vh;min-height:100svh;padding:40px 0;display:flex;align-items:center;}

/* Talents choreography (talents-motion.js) */
.cc-choreo-desktop #talHero{z-index:0;}
.cc-choreo-desktop #tal-why{position:relative;z-index:2;}
.cc-choreo-desktop .tal-roster{scroll-snap-type:none;}
.cc-choreo .tal-hero-video,.cc-choreo .tal-hero-inner,.cc-choreo .tal-why-grid,.cc-choreo .tal-steps{will-change:transform;}

/* ============================================================
   TALENTS — editorial, box-free sections (Why join, steps, FAQ)
   Big numerals, hairlines and type instead of cards.
   ============================================================ */
/* ---- Why join: heading left, numbered index right ---- */
.tw-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(34px,6vw,110px);align-items:center;}
.tw-head h2{font-size:clamp(52px,min(8vw,13vh),128px);line-height:.9;text-transform:uppercase;color:#fff;margin:0;}
.tw-head h2 .how-star{top:-.82em;}
.tw-head p{margin:clamp(14px,2.4vh,24px) 0 0;max-width:34ch;font-size:clamp(14px,1.2vw,17px);line-height:1.6;color:rgba(255,255,255,.62);}
.tw-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.14);}
.tw-row{
  position:relative;display:grid;grid-template-columns:clamp(58px,6vw,92px) 1fr 30px;align-items:center;gap:clamp(14px,2vw,28px);
  padding:clamp(14px,2.6vh,26px) 0;border-bottom:1px solid rgba(255,255,255,.14);cursor:default;
}
.tw-row::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.tw-num{
  font-family:var(--display);font-size:clamp(40px,4.4vw,70px);line-height:.9;
  color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.35);transition:color .4s,-webkit-text-stroke-color .4s;
}
.tw-text h3{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(22px,2.2vw,34px);line-height:1;text-transform:uppercase;color:#fff;transition:transform .5s cubic-bezier(.22,1,.36,1);}
.tw-text p{margin:8px 0 0;font-size:clamp(13px,1vw,15px);line-height:1.55;color:rgba(255,255,255,.55);max-width:52ch;text-transform:none;}
.tw-arrow{font-size:22px;color:var(--red);opacity:0;transform:translateX(-12px);transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1);}
.tw-row:hover::after{transform:scaleX(1);}
.tw-row:hover .tw-num{color:var(--red);-webkit-text-stroke-color:var(--red);}
.tw-row:hover .tw-text h3{transform:translateX(8px);}
.tw-row:hover .tw-arrow{opacity:1;transform:none;}

/* ---- From apply to paid: a timeline, not boxes ---- */
.ts-head{text-align:center;margin:0 auto clamp(30px,6vh,70px);max-width:760px;}
.ts-head h2{font-size:clamp(46px,min(7vw,12vh),112px);line-height:.92;text-transform:uppercase;color:#fff;margin:0;}
.ts-head h2 .how-star{top:-.82em;}
.ts-head p{margin:14px 0 0;font-size:clamp(14px,1.2vw,17px);color:rgba(255,255,255,.6);}
.ts-track{position:relative;}
.ts-line{position:absolute;left:0;right:0;top:7px;height:2px;background:rgba(255,255,255,.12);}
.ts-line i{position:absolute;inset:0;background:linear-gradient(90deg,var(--red),#ff8a6e);transform-origin:left;box-shadow:0 0 14px rgba(235,63,34,.55);}
.ts-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,48px);}
.ts-step{position:relative;padding-top:clamp(34px,5vh,52px);}
.ts-dot{position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;background:#0b0b0d;border:2px solid var(--red);box-shadow:0 0 0 6px rgba(235,63,34,.12);}
.ts-num{display:block;font-family:var(--display);font-size:clamp(54px,6vw,104px);line-height:.85;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.3);}
.ts-step h3{margin:clamp(10px,1.8vh,18px) 0 8px;font-family:var(--display);font-weight:400;font-size:clamp(22px,2vw,32px);line-height:1;text-transform:uppercase;color:#fff;}
.ts-step p{margin:0;font-size:clamp(13px,1vw,15px);line-height:1.55;color:rgba(255,255,255,.58);max-width:30ch;text-transform:none;}
.ts-step:hover .ts-num{color:var(--red);-webkit-text-stroke-color:var(--red);}
.ts-num{transition:color .4s,-webkit-text-stroke-color .4s;}

/* ---- Questions: clean rows with hairlines ---- */
.tq-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:clamp(34px,6vw,110px);align-items:center;}
.tq-intro h2{font-size:clamp(48px,min(6.4vw,12vh),110px);line-height:.9;text-transform:uppercase;color:#fff;margin:0;}
.tq-intro p{margin:clamp(14px,2.4vh,22px) 0 clamp(18px,3vh,28px);max-width:34ch;font-size:clamp(14px,1.2vw,16px);line-height:1.6;color:rgba(255,255,255,.62);}
.tq-list{border-top:1px solid rgba(255,255,255,.14);}
.tq-item{border-bottom:1px solid rgba(255,255,255,.14);}
.tq-item summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:48px 1fr 24px;align-items:center;gap:14px;
  padding:clamp(14px,2.4vh,22px) 0;
}
.tq-item summary::-webkit-details-marker{display:none;}
.tq-num{font-family:var(--display);font-size:20px;color:rgba(255,255,255,.3);transition:color .3s;}
.tq-q{font-family:var(--display);font-size:clamp(20px,1.9vw,30px);line-height:1.05;text-transform:uppercase;color:#fff;transition:transform .45s cubic-bezier(.22,1,.36,1),color .3s;}
.tq-plus{position:relative;width:20px;height:20px;}
.tq-plus::before,.tq-plus::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--red);transition:transform .35s cubic-bezier(.22,1,.36,1);}
.tq-plus::after{transform:rotate(90deg);}
.tq-item[open] .tq-plus::after{transform:rotate(0deg);}
.tq-item summary:hover .tq-q,.tq-item[open] .tq-q{transform:translateX(6px);}
.tq-item summary:hover .tq-num,.tq-item[open] .tq-num{color:var(--red);}
.tq-item p{margin:0 0 20px 62px;max-width:56ch;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.65);text-transform:none;}

/* ---- phones ---- */
@media (max-width:760px){
  .tw-layout,.tq-layout{grid-template-columns:1fr;gap:16px;}
  .tw-head,.tq-intro{text-align:center;}
  .tw-head h2,.tq-intro h2{font-size:clamp(34px,11vw,46px);}
  .tw-head p,.tq-intro p{margin:8px auto 0;font-size:13px;}
  .tq-intro p{margin-bottom:12px;}
  .tq-intro .btn{padding:10px 20px;font-size:13px;}
  .tw-row{grid-template-columns:40px 1fr;gap:10px;padding:11px 0;}
  .tw-arrow{display:none;}
  .tw-num{font-size:30px;}
  .tw-text h3{font-size:17px;}
  .tw-text p{font-size:12px;margin-top:4px;line-height:1.45;}
  .ts-head{margin-bottom:18px;}
  .ts-head h2{font-size:clamp(32px,10vw,42px);}
  .ts-head p{font-size:12.5px;margin-top:8px;}
  .ts-line{left:7px;right:auto;top:6px;bottom:6px;width:2px;height:auto;}
  .ts-line i{transform-origin:top;}
  .ts-steps{grid-template-columns:1fr;gap:14px;}
  .ts-step{padding:0 0 0 34px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline;}
  .ts-num{font-size:30px;grid-row:span 2;}
  .ts-step h3{margin:0;font-size:18px;}
  .ts-step p{font-size:12px;line-height:1.45;grid-column:2;}
  .tq-item summary{grid-template-columns:30px 1fr 18px;gap:8px;padding:11px 0;}
  .tq-num{font-size:15px;}
  .tq-q{font-size:15px;}
  .tq-item p{margin:0 0 12px 38px;font-size:12.5px;}
}

/* ============================================================
   EDITORIAL TYPE SCALE (desktop) — headlines fill the frame.
   Sizes use min(width, height) so big type still fits one screen on
   short laptops; the content column is wider so type can breathe.
   ============================================================ */
@media (min-width:901px){
  .wrap{max-width:1680px;padding:0 clamp(28px,3.4vw,64px);}

  /* Brands */
  .brands-body .svc-title{font-size:clamp(56px,min(6.4vw,10vh),140px);}
  .brands-body .svc-name{font-size:clamp(26px,min(3.2vw,4.9vh),66px);}
  .brands-body .svc-desc > span{font-size:clamp(15px,1.15vw,19px);}
  .brands-body .clients-head h2{font-size:clamp(46px,min(8vw,9vh),160px);}
  .brands-body .band h2{font-size:clamp(72px,min(9.5vw,17vh),200px);line-height:.88;}
  .brands-body .band-side p{font-size:clamp(17px,1.35vw,22px);}
  .brands-body .wk-head h2{font-size:clamp(60px,min(7.5vw,11vh),150px);}
  .brands-body .wk-title{font-size:clamp(52px,min(7vw,11vh),140px);}
  .brands-body .about{grid-template-columns:1.25fr .75fr;gap:clamp(40px,5vw,100px);}
  .brands-body .about h2{font-size:clamp(46px,min(5.4vw,8.4vh),120px);line-height:.9;}
  .brands-body .about p{font-size:clamp(16px,1.25vw,21px);max-width:62ch;}
  .brands-body .about-pull .about-eyebrow{font-size:clamp(84px,min(12vw,20vh),260px);line-height:.85;}
  .brands-body .about-pull p{font-size:clamp(22px,min(2.5vw,3.9vh),52px);}
  .brands-body .faq-wrap{grid-template-columns:1fr 1.1fr;gap:clamp(40px,5vw,100px);}
  .brands-body .faq-intro h2{font-size:clamp(72px,min(9vw,16vh),190px);line-height:.88;}
  .brands-body .faq-intro p{font-size:clamp(17px,1.35vw,22px);max-width:36ch;}
  .brands-body .faq-item summary{font-size:clamp(18px,min(1.8vw,3.1vh),34px);padding:clamp(16px,2.6vh,28px) 0;}
  .brands-body .faq-body p{font-size:clamp(15px,1.15vw,19px);}
  .brands-body .contact-cta-link{font-size:clamp(80px,min(13vw,19vh),280px);}

  /* Talents */
  .tal-body .tw-layout,.tal-body .tq-layout{gap:clamp(40px,5vw,100px);}
  .tal-body .tw-head h2{font-size:clamp(76px,min(10vw,17vh),210px);line-height:.86;}
  .tal-body .tw-head p,.tal-body .tq-intro p,.tal-body .ts-head p{font-size:clamp(16px,1.3vw,21px);}
  .tal-body .tw-num{font-size:clamp(48px,min(5.4vw,9vh),110px);}
  .tal-body .tw-text h3{font-size:clamp(26px,min(2.8vw,4.8vh),54px);}
  .tal-body .tw-text p{font-size:clamp(14px,1.1vw,18px);}
  .tal-body .tal-roster-sec .tal-sec-head h2{font-size:clamp(46px,min(8vw,8.5vh),160px);}
  .tal-body .tal-card{flex-basis:clamp(150px,min(17vw,27vh),260px);}
  .tal-body .ts-head{max-width:none;}
  .tal-body .ts-head h2{font-size:clamp(60px,min(8vw,13vh),170px);}
  .tal-body .ts-num{font-size:clamp(64px,min(7.5vw,13vh),150px);}
  .tal-body .ts-step h3{font-size:clamp(24px,min(2.5vw,4.4vh),48px);}
  .tal-body .ts-step p{font-size:clamp(14px,1.1vw,18px);max-width:34ch;}
  .tal-body .tq-intro h2{font-size:clamp(52px,min(6.6vw,12vh),130px);line-height:.88;}
  /* size the word to its own column, so it can never run into the question
     numbers next to it, whatever the screen: "QUESTIONS" is ~3.9em wide, so
     19.5cqw keeps it to roughly three quarters of the column */
  .tal-body .tq-intro{container-type:inline-size;}
  @supports (width:1cqw){
    .tal-body .tq-intro h2{font-size:clamp(46px,min(19.5cqw,12vh),130px);}
  }
  .tal-body .tq-q{font-size:clamp(22px,min(2.3vw,4vh),44px);}
  .tal-body .tq-item p{font-size:clamp(14px,1.1vw,18px);}
  .tal-body .tal-closer-main h2{font-size:clamp(60px,min(7.4vw,13vh),160px);}
}
@media (min-width:901px){
  .tal-body #tal-roster{padding-top:clamp(60px,9vh,110px);padding-bottom:clamp(24px,4vh,60px);}
  .tal-body #tal-roster .tal-sec-head{margin-bottom:clamp(16px,3vh,40px);}
  .tal-body .tal-roster-cta{margin-top:clamp(14px,2.4vh,34px);}
}
@media (min-width:901px) and (max-height:720px){
  .brands-body .clients{padding-top:72px;}
  .brands-body .showcase-track .phone.is-center{flex-basis:clamp(120px,19vh,206px);}
}


/* ---------- The Work: hidden until a case study is published ---------- */
#work[hidden]{display:none !important;}
html:not(.has-work) .about a[href="#work"],
html:not(.has-work) .site-footer a[href="#work"]{display:none;}

/* ---------- nav call-to-action pill (Book a call / Apply now) ---------- */
.nav-side a.nav-cta{
  position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:10px;
  padding:11px 20px;border-radius:100px;border:1px solid var(--red);border-bottom-width:1px;
  background:var(--red);color:#fff;text-shadow:none;letter-spacing:1.2px;
  box-shadow:0 8px 26px -8px rgba(235,63,34,.75);
  animation:navCtaGlow 3.2s ease-in-out infinite;
  transition:transform .35s cubic-bezier(.22,1,.36,1),background .25s,color .25s,box-shadow .35s;
}
.nav-side a.nav-cta::before{
  content:'';position:absolute;top:0;bottom:0;left:-70%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:navCtaShine 3.6s ease-in-out infinite;
}
.nav-cta-arrow{display:inline-block;transition:transform .35s cubic-bezier(.22,1,.36,1);}
.nav-side a.nav-cta:hover{background:#fff;border-color:#fff;color:var(--ink);transform:translateY(-2px) scale(1.04);box-shadow:0 14px 34px -10px rgba(255,255,255,.45);}
.nav-side a.nav-cta:hover .nav-cta-arrow{transform:translateX(5px);}
@keyframes navCtaShine{0%,60%{left:-70%;}100%{left:140%;}}
@keyframes navCtaGlow{0%,100%{box-shadow:0 8px 26px -8px rgba(235,63,34,.75);}50%{box-shadow:0 8px 34px -4px rgba(235,63,34,.95);}}
@media (max-width:900px){
  .nav-side a.nav-cta{justify-content:center;margin:10px 0 4px;border-bottom:1px solid var(--red);padding:14px 20px;}
}
@media (prefers-reduced-motion: reduce){
  .nav-side a.nav-cta,.nav-side a.nav-cta::before{animation:none;}
}

/* HERO — headline smaller, sitting in the lower middle; no button */
.brands-body .hero{align-items:flex-end;padding-bottom:clamp(40px,7vh,80px) !important;}
.brands-body .hero h1{font-size:clamp(34px,min(4.6vw,8vh),92px);line-height:.92;}
@media (max-width:760px){
  .brands-body #sections > .hero{justify-content:flex-end;padding-bottom:clamp(40px,7vh,70px) !important;}
  .brands-body .hero h1{font-size:clamp(28px,8.2vw,38px);}
}

/* ============================================================
   Custom cursor (js/cursor.js) — mouse devices only
   ============================================================ */
/* normal arrow everywhere; the native cursor only hides while the custom
   one is showing (over clickables and photo->video cards) */
html.ccc-active, html.ccc-active *{cursor:none !important;}

/* wrapper must NOT form a stacking context, or the blend can't see the page */
.ccc{position:static;}
.ccc-dot,.ccc-ring,.ccc-ripple{
  position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:2147483000;
  will-change:transform;mix-blend-mode:difference;opacity:0;transition:opacity .25s ease;
}
.ccc.ccc-show[data-state="link"] .ccc-ring,.ccc.ccc-show[data-state="video"] .ccc-ring,.ccc-ripple{opacity:1;}
/* idle: ring shrunk to nothing, so it grows out of the arrow when it activates */
.ccc:not([data-state="link"]):not([data-state="video"]):not([data-state="cta"]) .ccc-ring::before{transform:translate(-50%,-50%) scale(0);}

.ccc-dot::before{
  content:"";position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:#fff;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s ease;
}
.ccc-ring::before{
  content:"";position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;
  transform:translate(-50%,-50%) scale(1);
  border:1.5px solid rgba(255,255,255,.85);background:transparent;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),background-color .3s ease,border-color .3s ease,width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1);
}

/* 1) clickable text / buttons: swell + invert what's beneath */
.ccc[data-state="link"] .ccc-ring::before{
  width:64px;height:64px;background:#fff;border-color:#fff;
  animation:ccc-breathe 1.6s ease-in-out infinite;
}
.ccc[data-state="link"] .ccc-dot::before{transform:scale(0);opacity:0;}
@keyframes ccc-breathe{
  0%,100%{transform:translate(-50%,-50%) scale(1);}
  50%{transform:translate(-50%,-50%) scale(1.08);}
}

/* 2) photo -> video: red disc, spinning PLAY text, play icon -> equaliser */
.ccc[data-state="video"] .ccc-ring{mix-blend-mode:normal;}
.ccc[data-state="video"] .ccc-ring::before{
  width:104px;height:104px;background:var(--red,#EB3F22);border-color:transparent;
  box-shadow:0 10px 40px rgba(235,63,34,.45);
}
.ccc[data-state="video"] .ccc-dot::before{transform:scale(0);opacity:0;}
.ccc-spin,.ccc-play,.ccc-eq{position:absolute;left:0;top:0;opacity:0;transition:opacity .25s ease,transform .45s cubic-bezier(.2,.8,.2,1);}
.ccc-spin{
  width:104px;height:104px;margin:-52px 0 0 -52px;transform:scale(.6) rotate(0deg);
  fill:#fff;font:700 9.5px/1 "Work Sans",system-ui,sans-serif;letter-spacing:1px;
}
.ccc[data-state="video"] .ccc-spin{opacity:1;transform:scale(1);animation:ccc-spin 7s linear infinite;}
@keyframes ccc-spin{to{transform:scale(1) rotate(360deg);}}
.ccc-play{
  width:0;height:0;margin:-9px 0 0 -6px;
  border-left:17px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;
  transform:scale(.4);
}
.ccc[data-state="video"]:not(.ccc-playing) .ccc-play{opacity:1;transform:scale(1);}
.ccc-eq{display:flex;align-items:flex-end;gap:3px;height:18px;margin:-9px 0 0 -10.5px;transform:scale(.4);}
.ccc-eq i{display:block;width:3px;height:100%;background:#fff;border-radius:2px;transform-origin:bottom;animation:ccc-eq .9s ease-in-out infinite;}
.ccc-eq i:nth-child(2){animation-delay:-.3s;}
.ccc-eq i:nth-child(3){animation-delay:-.6s;}
.ccc-eq i:nth-child(4){animation-delay:-.15s;}
@keyframes ccc-eq{0%,100%{transform:scaleY(.25);}50%{transform:scaleY(1);}}
.ccc[data-state="video"].ccc-playing .ccc-eq{opacity:1;transform:scale(1);}

/* text fields: hide the custom cursor, native I-beam shows instead */


/* click: squeeze + ripple */
.ccc.ccc-down .ccc-ring::before{transform:translate(-50%,-50%) scale(.82);animation:none;}
.ccc-ripple::before{
  content:"";position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  border:1.5px solid #fff;animation:ccc-ripple .6s cubic-bezier(.2,.8,.2,1) forwards;
}
.ccc[data-state="video"] .ccc-ripple{mix-blend-mode:normal;}
.ccc[data-state="video"] .ccc-ripple::before{border-color:var(--red,#EB3F22);}
@keyframes ccc-ripple{from{transform:scale(.5);opacity:.9;}to{transform:scale(2.6);opacity:0;}}

/* ============================================================
   Campus Activations band — student cut-outs, v3
   A framed crowd shot: the three girls stand at the back, the group
   crouches in front of them, all set against a soft disc + ring with
   two twinkling brand stars. Sized by js/band-people.js so it never
   touches the headline, paragraph or button. Enters from the right.
   Geometry (H = composition height, width = 0.97H):
     trio  : height .92H, left .34H   (back layer)
     group : height .60H, left .14H   (front layer)
   ============================================================ */
.band-people{
  --h:min(70vh, 40vw / .97, 900px);
  position:absolute;z-index:2;bottom:0;
  right:max(clamp(28px,3.4vw,64px), calc((100vw - 1680px) / 2 + clamp(28px,3.4vw,64px)));
  height:var(--h);aspect-ratio:.97 / 1;pointer-events:none;
}
/* on very wide screens let it use the space outside the text column */
@media (min-width:1800px){ .band-people{right:clamp(40px,3.4vw,90px);} }
.bp-img{position:absolute;bottom:0;height:auto;display:block;user-select:none;will-change:transform,opacity,filter;}
.bp-trio{left:35%;width:64.3%;bottom:4%;z-index:2;
  filter:brightness(.9) saturate(.92) drop-shadow(0 20px 34px rgba(60,10,0,.28));}
.bp-group{left:14.4%;width:85%;z-index:3;
  filter:drop-shadow(0 -6px 30px rgba(60,10,0,.35)) drop-shadow(0 22px 34px rgba(60,10,0,.3));
  /* soften the photo's straight cut edges (left, right, bottom) */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(to top,transparent 0,#000 12%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(to top,transparent 0,#000 12%);
  mask-composite:intersect;}
/* backdrop: soft disc + offset outline ring */
.bp-disc{position:absolute;z-index:0;left:18%;bottom:14%;width:82%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.22),rgba(255,255,255,.06) 62%,rgba(255,255,255,0) 72%);}
.bp-ring{position:absolute;z-index:1;left:26%;bottom:22%;width:72%;aspect-ratio:1;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4);}
.bp-floor{position:absolute;z-index:1;left:4%;right:-2%;bottom:-5%;height:18%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(60,10,0,.35),rgba(60,10,0,0));}
.bp-spark{position:absolute;z-index:4;width:6.5%;height:auto;filter:drop-shadow(0 0 10px rgba(255,255,255,.7));}
.bp-spark-a{left:24%;top:30%;}
.bp-spark-b{right:-3%;top:6%;width:4.5%;}
.band .band-inner{z-index:3;}

/* ---- intro (enters from the right): disc & ring bloom, back row slides
   in, front row overtakes it, stars pop last ---- */
.band-people.bp-ready .bp-img,.band-people.bp-ready .bp-disc,.band-people.bp-ready .bp-ring,
.band-people.bp-ready .bp-spark,.band-people.bp-ready .bp-floor{
  transition:opacity .8s ease, transform 1.3s cubic-bezier(.16,1,.3,1), filter .9s ease;
}
.band-people.bp-ready .bp-disc{opacity:0;transform:translate3d(30%,0,0) scale(.6);}
.band-people.bp-ready .bp-ring{opacity:0;transform:translate3d(40%,0,0) scale(.5) rotate(-40deg);}
.band-people.bp-ready .bp-floor{opacity:0;transform:scaleX(.3);}
.band-people.bp-ready .bp-trio{opacity:0;transform:translate3d(90%,0,0) skewX(-6deg);}
.band-people.bp-ready .bp-group{opacity:0;transform:translate3d(120%,0,0) skewX(-8deg);}
.band-people.bp-ready .bp-spark{opacity:0;transform:scale(0) rotate(-90deg);}

.band-people.bp-in .bp-disc{opacity:1;transform:none;transition-delay:0s;}
.band-people.bp-in .bp-ring{opacity:1;transform:none;transition-delay:.08s;}
.band-people.bp-in .bp-floor{opacity:1;transform:none;transition-delay:.35s;}
.band-people.bp-in .bp-trio{opacity:1;transform:translate3d(var(--px2,0),0,0);transition-delay:.12s;}
.band-people.bp-in .bp-group{opacity:1;transform:translate3d(var(--px1,0),0,0);transition-delay:.34s;}
.band-people.bp-in .bp-spark{opacity:1;transform:none;transition-delay:.95s;}
.band-people.bp-live .bp-img{transition:transform .7s cubic-bezier(.16,1,.3,1);transition-delay:0s;}
.band-people.bp-live .bp-ring{animation:bp-ring 18s linear infinite;}
.band-people.bp-live .bp-spark{animation:bp-twinkle 2.8s ease-in-out infinite;}
.band-people.bp-live .bp-spark-b{animation-delay:-1.4s;}
@keyframes bp-twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1;}50%{transform:scale(.55) rotate(45deg);opacity:.6;}}
@keyframes bp-ring{from{transform:rotate(0) translateX(0);}50%{transform:rotate(180deg) translateX(1.5%);}to{transform:rotate(360deg) translateX(0);}}

/* phones / narrow: the band stays exactly one screen tall (so the
   one-swipe glide works) and the pictures shrink to fit whatever space
   is left under the button */
@media (max-width:900px){
  #sections > .band{height:100vh;height:100svh;min-height:0 !important;
    display:flex;flex-direction:column;justify-content:flex-start;}
  #sections > .band > .band-inner{order:1;flex:0 0 auto;}
  /* exact size set by js/band-people.js from the space that's left */
  .band-people{order:2;position:relative;right:auto;bottom:auto;flex:none;
    height:var(--mh,40vh);width:calc(var(--mh,40vh) * .97);max-width:100%;
    aspect-ratio:auto;align-self:center;margin:18px auto 0;}
  /* PHONE PERFORMANCE: the cut-outs carry two big blurred drop-shadows each
     (30px+ radius) and the stars a glow. The browser re-renders those blurs
     while the pictures slide in, which made every swipe into this section
     stutter. Same look, smaller shadows: swipes into/out of the band went from
     ~40 dropped frames per 4 swipes to none in testing. (Desktop is unchanged.) */
  .bp-trio{filter:brightness(.9) saturate(.92) drop-shadow(0 8px 10px rgba(60,10,0,.28));}
  .bp-group{filter:drop-shadow(0 8px 10px rgba(60,10,0,.3));}
  .bp-spark{filter:drop-shadow(0 0 4px rgba(255,255,255,.7));}
}
@media (prefers-reduced-motion: reduce){
  .band-people .bp-img,.band-people .bp-disc,.band-people .bp-ring,.band-people .bp-spark,.band-people .bp-floor{
    opacity:1 !important;transform:none !important;transition:none !important;animation:none !important;}
}

/* ============================================================
   Forms v2 (js/forms.js): inline errors, done screen, talent steps
   ============================================================ */
/* typed text shows as typed (emails and handles were being shown in caps) */
input,textarea{text-transform:none;}
.contact-modal-panel select{font-family:var(--body);font-size:15px;padding:13px 15px;border:1.5px solid var(--bone-line);border-radius:10px;background:#fff;color:var(--ink);}
.contact-modal-panel select:focus{border-color:var(--red);outline:none;}
/* modal panels scroll smoothly on trackpads/phones and never leak scroll to the page */
.contact-modal-panel,.tal-modal-panel{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}

.hp-wrap{position:absolute !important;left:-10000px !important;top:auto;width:1px;height:1px;overflow:hidden;}
.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;}

/* errors */
.field-err{display:block;font-size:12.5px;font-weight:600;line-height:1.35;color:#C0321A;margin-top:2px;}
.tal-modal .field-err{color:#ff8a75;}
.field.is-invalid input,.field.is-invalid textarea,.field.is-invalid select{border-color:#C0321A;box-shadow:0 0 0 4px rgba(192,50,26,.12);}
.tal-field.is-invalid input,.tal-field.is-invalid select{border-color:#ff8a75;}
.is-invalid .tal-chip span{border-color:rgba(255,138,117,.7);}
.tal-consent.is-invalid input{border-color:#ff8a75;}

/* loading state on submit buttons */
.btn.is-loading{pointer-events:none;opacity:.7;position:relative;}
.btn.is-loading::after{content:"";display:inline-block;width:14px;height:14px;margin-left:10px;vertical-align:-2px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:cc-spin .7s linear infinite;}
@keyframes cc-spin{to{transform:rotate(360deg);}}

/* done screen */
.form-done{text-align:center;padding:40px 10px 20px;}
.form-done-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;
  background:var(--red);color:#fff;font-size:30px;margin-bottom:18px;animation:cc-pop .5s cubic-bezier(.2,1.4,.4,1);}
.form-done h3{font-size:clamp(26px,3vw,36px);text-transform:uppercase;margin:0 0 10px;}
.form-done p{margin:0 auto 24px;max-width:42ch;opacity:.75;}
@keyframes cc-pop{from{transform:scale(.3);opacity:0;}to{transform:scale(1);opacity:1;}}

/* talent form steps */
.tf-step{padding:22px 0;border-top:1px solid var(--line);}
.tf-step:first-child{border-top:0;padding-top:4px;}
.tf-step-title{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:18px;text-transform:uppercase;letter-spacing:.5px;}
.tf-step-title > span:first-child{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:26px;padding:0 8px;
  border-radius:100px;background:var(--red);color:#fff;font-size:12px;letter-spacing:1px;}
.tal-other[hidden]{display:none !important;}
.tal-birthday-row{grid-template-columns:1.5fr 1fr 1.1fr;}

/* @ handle inputs */
.tal-handle{position:relative;display:block;}
.tal-handle i{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-style:normal;font-weight:700;color:rgba(255,255,255,.5);pointer-events:none;}
.tal-field .tal-handle input{padding-left:34px;}

/* interest chips */
.tal-chips{display:flex;flex-wrap:wrap;gap:10px;}
.tal-chip{position:relative;cursor:pointer;}
.tal-chip input{position:absolute;opacity:0;width:1px;height:1px;}
.tal-chip span{display:inline-block;padding:10px 16px;border:1px solid var(--line);border-radius:100px;
  font-family:var(--body);font-weight:600;font-size:14px;color:rgba(255,255,255,.82);background:var(--surface);
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;}
.tal-chip:hover span{border-color:rgba(255,255,255,.4);}
.tal-chip input:checked + span{background:var(--red);border-color:var(--red);color:#fff;}
.tal-chip input:focus-visible + span{outline:2px solid #fff;outline-offset:2px;}

/* consent */
.tal-consent{display:flex;align-items:flex-start;gap:12px;margin:18px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:14px;
  font-family:var(--body);font-weight:500;font-size:14.5px;color:rgba(255,255,255,.85);cursor:pointer;flex-wrap:wrap;}
.tal-consent input{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex-shrink:0;margin-top:1px;
  border:1.5px solid rgba(255,255,255,.4);border-radius:5px;background:var(--surface);position:relative;cursor:pointer;}
.tal-consent input:checked{background:var(--red);border-color:var(--red);}
.tal-consent input:checked::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.tal-consent > span{flex:1;}
.tal-consent .field-err{flex-basis:100%;}
.tal-modal .form-done{color:#fff;}
@media (max-width:640px){
  .tal-birthday-row{grid-template-columns:1.3fr 1fr 1.1fr;gap:8px;}
  .tal-chip span{padding:9px 14px;font-size:13.5px;}
}

/* ---------- form modal fixes ---------- */
/* titles were inheriting the site's white heading colour on the white panel */
.contact-modal-panel h2,.contact-modal-panel h3,.contact-modal .form-done h3{color:var(--ink);}
.contact-modal .form-done p{color:rgba(26,26,28,.72);opacity:1;}
.tal-modal .form-done h3{color:#fff;}
/* once sent, only the confirmation shows */
.contact-modal-panel.is-done > h2,.contact-modal-panel.is-done > p,.tal-modal-panel.is-done .tal-modal-head{display:none;}
.is-done .form-done{padding:48px 10px 36px;}

/* ============================================================
   CONTACT section — minimal
   One headline, one line, two quiet text links.
   ============================================================ */
@media (min-width:761px){
  .brands-body .contact-cta-inner{padding-top:clamp(96px,13vh,140px);padding-bottom:clamp(30px,5vh,60px);}
  .brands-body .contact-cta-link{font-size:clamp(64px,min(10.5vw,15vh),220px);}
}
.cc-min{gap:clamp(16px,2.2vh,26px);}
.contact-cta-link{position:relative;}
/* thin line draws under the headline on hover; arrow nudges right */
.cc-cta-text{position:relative;display:inline-block;}
.cc-cta-text::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:3px;background:currentColor;
  transform:scaleX(0);transform-origin:right center;transition:transform .6s cubic-bezier(.65,0,.35,1);}
.contact-cta-link:hover .cc-cta-text::after,.contact-cta-link:focus-visible .cc-cta-text::after{transform:scaleX(1);transform-origin:left center;}
.contact-cta-arrow{font-size:.5em;transition:transform .45s cubic-bezier(.22,1,.36,1);}
.contact-cta-link:hover .contact-cta-arrow{transform:translateX(.25em);}

.cc-sub{margin:0;max-width:46ch;font-size:clamp(14px,1.1vw,17px);line-height:1.6;color:rgba(255,255,255,.62);}
.cc-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;}
.cc-link{position:relative;color:#fff;text-decoration:none;font-size:14px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;padding:4px 0;}
.cc-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.5;
  transition:opacity .25s ease,transform .45s cubic-bezier(.65,0,.35,1);}
.cc-link:hover::after{opacity:1;}
.cc-link:hover{color:var(--red);}
.cc-link-muted{color:rgba(255,255,255,.55);font-weight:600;}
.cc-sep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.35);}
@media (max-width:760px){
  .cc-sub{font-size:13px;}
  .cc-link{font-size:12px;letter-spacing:1.1px;}
  .cc-actions{gap:12px;}
}

/* cursor: big "Get in touch" link gets its own badge instead of the inverting disc */
.ccc-label{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.4);opacity:0;white-space:nowrap;
  font:800 11px/1 "Work Sans",system-ui,sans-serif;letter-spacing:1.6px;color:#fff;transition:opacity .25s ease,transform .45s cubic-bezier(.2,.8,.2,1);}
.ccc.ccc-show[data-state="cta"] .ccc-ring{opacity:1;mix-blend-mode:normal;}
.ccc[data-state="cta"] .ccc-ring::before{width:22px;height:22px;background:var(--red,#EB3F22);border-color:var(--red,#EB3F22);box-shadow:0 0 0 8px rgba(235,63,34,.18);}
.ccc[data-state="cta"] .ccc-label{opacity:0;}
.ccc[data-state="cta"] .ccc-ripple{mix-blend-mode:normal;}

/* ---------- responsible drinking notes ---------- */
.rg-note{
  margin:clamp(8px,1.4vh,14px) auto 0;max-width:64ch;text-align:center;
  font-size:12px;line-height:1.5;color:rgba(255,255,255,.62);
}
/* desktop: the "Creators in Action" screen is sized to fit one viewport
   exactly, so the note sits in its bottom margin instead of adding height */
@media (min-width:901px){
  .clients-inner{position:relative;}
  .rg-note{position:absolute;left:0;right:0;top:100%;margin:0 auto;max-width:none;white-space:nowrap;font-size:11.5px;line-height:1.3;}
}
.footer-rg{padding-bottom:18px;}
.footer-rg p{margin:0;max-width:78ch;font-size:12px;line-height:1.5;color:rgba(255,255,255,.55);}
.tal-closer .footer-rg{padding-bottom:clamp(8px,1.6vh,18px);}
@media (max-width:900px){
  .rg-note{font-size:10.5px;margin-top:6px;padding:0 8px;}
  .footer-rg{padding-bottom:12px;}
  .footer-rg p{font-size:10.5px;}
}

/* =========================================================
   ABOUT US brand swap: a row of dim brand names along the bottom of the
   section, no card and no backdrop. Every few seconds the names roll up and
   out one after another from left to right, each one cut off by the edge of
   the row as it goes, while the next brand rises in from below. Names come
   from the admin's brand list (main.js). Only transform is animated.
   ========================================================= */
#about{
  position:relative;
  --bm-h:clamp(64px,11vh,96px);
  --bm-gap:clamp(12px,3vh,32px);
  --bm-side:clamp(28px,3.4vw,64px);
}
/* make room under the content for the row (the section is centred, so this
   lifts the content by half of it) */
.brands-body #about{padding-bottom:calc(var(--bm-h) + var(--bm-gap) * 2);}
.brand-marquee{
  position:absolute;left:0;right:0;bottom:var(--bm-gap);z-index:3;
  width:min(calc(100% - var(--bm-side) * 2),calc(1680px - var(--bm-side) * 2));margin:0 auto;height:var(--bm-h);
}
.bm-row{display:flex;height:100%;margin:0;padding:0;list-style:none;}
/* one slot per visible name; its edges are the cut-off lines */
.bm-slot{position:relative;flex:1 1 0;min-width:0;height:100%;overflow:hidden;}
.bm-name{
  position:absolute;left:0;right:0;top:0;height:100%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;padding:0 clamp(8px,1.4vw,24px);text-align:center;
  font-family:var(--display);font-size:clamp(18px,1.7vw,27px);line-height:1.1;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(26,26,28,.5);text-wrap:balance;will-change:transform;
}
/* the next name waits one row-height below its slot */
.bm-name.is-nxt{transform:translateY(100%);}
/* the swap: ~0.78 s per name, each slot starting 0.3 s after the one to its
   left (main.js sets --bm-dur and --bm-stagger and decides when to run it) */
.brand-marquee.is-swapping .bm-name{
  animation-duration:var(--bm-dur,.78s);animation-timing-function:cubic-bezier(.455,.03,.515,.955);
  animation-delay:calc(var(--i,0) * var(--bm-stagger,.3s));animation-fill-mode:both;
}
.brand-marquee.is-swapping .bm-name.is-cur{animation-name:bmRollOut;}
.brand-marquee.is-swapping .bm-name.is-nxt{animation-name:bmRollIn;}
@keyframes bmRollOut{from{transform:translateY(0);}to{transform:translateY(-100%);}}
@keyframes bmRollIn{from{transform:translateY(100%);}to{transform:translateY(0);}}

/* reduced motion (and the fallback list): nothing rolls, every name sits in
   one row, swipe sideways if they don't all fit */
.bm-row.is-static{align-items:center;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.bm-row.is-static::-webkit-scrollbar{display:none;}
.bm-row.is-static .bm-name{position:static;flex:none;width:auto;height:auto;padding:0 clamp(18px,3vw,40px);white-space:nowrap;text-wrap:nowrap;will-change:auto;}
.bm-row.is-static .bm-name:first-child{margin-left:auto;}
.bm-row.is-static .bm-name:last-child{margin-right:auto;}

/* short windows (small laptops): the About copy and the row have to share one
   screen, so the copy gets a little tighter */
@media (min-width:901px) and (max-height:760px){
  .brands-body #about{padding-top:72px;}
}
@media (min-width:901px) and (max-height:640px){
  .about-pull .about-eyebrow{font-size:clamp(64px,min(13vw,22vh),180px);margin-bottom:12px;}
  .brands-body .about h2{font-size:clamp(40px,min(5.4vw,8.4vh),120px);}
}
@media (min-width:901px) and (max-height:560px){
  .about-pull .about-eyebrow{font-size:clamp(56px,min(13vw,20vh),180px);}
}
/* phones: the sticky "Book a call" bar owns the bottom 78px, so the row sits above it */
@media (max-width:760px){
  #about{--bm-h:72px;--bm-gap:12px;--bm-side:16px;}
  .brands-body #about{padding-bottom:calc(78px + var(--bm-h) + var(--bm-gap) * 2) !important;}
  .brand-marquee{bottom:calc(78px + var(--bm-gap));}
  .bm-name{font-size:17px;padding:0 8px;}
}