/* ==========================================================================
   StarVave — Home
   Design system: see /DESIGN.md
   ========================================================================== */

/* ---------- Tokens ---------- */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

:root{
  --ink-900:#111213; --ink-800:#161617; --ink-700:#1B1B1A; --ink-600:#222123; --ink-500:#2A292C;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.28);
  --text:#fff; --text-2:#B2B2B5; --text-3:#7A797D;
  --glow-maroon:#3A1E24; --glow-plum:#2B1B30; --glow-olive:#28261B;
  --iri-blue:#81B8F6; --iri-peri:#6586CD; --iri-violet:#9A7BE0; --iri-rose:#D98BA6;
  --iri:linear-gradient(100deg,#81B8F6 0%,#9A7BE0 45%,#D98BA6 100%);

  --f-display:"Inter Tight",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-alt:"Poppins",var(--f-display);

  --wrap:1200px; --gutter:24px;
  --r-card:20px; --r-media:16px; --r-chip:8px;
  --ease:cubic-bezier(.22,1,.36,1);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--ink-700);color:var(--text);font:400 17px/1.55 var(--f-display);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--iri-blue);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
@media (max-width:480px){:root{--gutter:16px}}

/* ---------- Type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--f-alt);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--iri);box-shadow:0 0 12px var(--iri-violet)}
.h-display{font-weight:400;font-size:clamp(44px,7.2vw,92px);line-height:.98;letter-spacing:-.04em}
.h-display b,.h2 b{font-weight:700;display:block}
.h2{font-weight:400;font-size:clamp(34px,4.6vw,58px);line-height:1.04;letter-spacing:-.035em}
.lede{color:var(--text-2);font-size:clamp(16px,1.3vw,18px);max-width:52ch}
.iri-text{background:var(--iri);-webkit-background-clip:text;background-clip:text;color:transparent}
.caps{font-family:var(--f-alt);font-weight:700;text-transform:uppercase;letter-spacing:-.01em}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;letter-spacing:-.01em;transition:transform .3s var(--ease),background .3s,box-shadow .3s;white-space:nowrap}
.btn svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:#fff;color:#0c0c0d;box-shadow:0 8px 30px -10px rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.08)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -12px rgba(255,255,255,.5)}
.btn--ghost{padding:0 20px}
.btn--sm{height:38px;padding:0 16px;font-size:14px}

/* ==========================================================================
   GLASS SYSTEM (7 layers) — DESIGN.md §4b
   ========================================================================== */
.glass{
  --g-blur:20px; --g-t1:.12; --g-t2:.035; --g-rim1:.55; --g-rim2:.10; --g-spot:0;
  position:relative;isolation:isolate;border-radius:var(--r-card);
  /* 3 body tint + cursor light + 7 grain */
  background:
    radial-gradient(380px circle at var(--mx,20%) var(--my,0%),rgba(255,255,255,var(--g-spot)),transparent 65%),
    linear-gradient(135deg,rgba(255,255,255,var(--g-t1)) 0%,rgba(255,255,255,var(--g-t2)) 45%,rgba(255,255,255,.012) 100%),
    var(--grain);
  /* 2 frost */
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(165%) brightness(1.06);
          backdrop-filter:blur(var(--g-blur)) saturate(165%) brightness(1.06);
  /* 5 bevel + depth */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.35),
    inset 0 0 28px rgba(255,255,255,.035),
    0 30px 60px -24px rgba(0,0,0,.7),
    0 12px 50px -24px rgba(154,123,224,.28);
  transition:--g-spot .4s,transform .5s var(--ease),box-shadow .4s;
}
/* 4 rim light — gradient border, bright top-left, dim bottom-right */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(140deg,rgba(255,255,255,var(--g-rim1)) 0%,rgba(255,255,255,.14) 28%,rgba(255,255,255,var(--g-rim2)) 62%,rgba(255,255,255,.22) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* 6 specular sheen */
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.075) 46%,rgba(255,255,255,.02) 52%,transparent 60%);
  background-size:260% 100%;background-position:var(--sheen,90%) 0;
  transition:background-position 1.1s var(--ease);mix-blend-mode:screen;
}
.glass:hover{--sheen:10%}
.glass > *{position:relative;z-index:3}

/* tiers */
.glass--1{--g-blur:12px;--g-t1:.08;--g-t2:.025;--g-rim1:.32}
.glass--3{--g-blur:28px;--g-t1:.16;--g-t2:.045}
/* iridescent animated rim */
.glass--iri::before{
  padding:1.2px;
  background:conic-gradient(from var(--ang),#81B8F6,#9A7BE0 25%,#D98BA6 45%,rgba(255,255,255,.18) 60%,rgba(255,255,255,.55) 80%,#81B8F6);
  animation:rim-spin 8s linear infinite;
}
@keyframes rim-spin{to{--ang:360deg}}
/* cursor light on */
.glass.is-lit{--g-spot:.09}
/* liquid refraction (Chromium only, added by JS) */
.liquid .glass--liquid{
  -webkit-backdrop-filter:url(#liquid) blur(var(--g-blur)) saturate(170%) brightness(1.08);
          backdrop-filter:url(#liquid) blur(var(--g-blur)) saturate(170%) brightness(1.08);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(34,33,35,.9)}
}

/* ---------- Ambient glows ---------- */
.glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:.9;z-index:0;animation:glow-drift 22s ease-in-out infinite alternate}
.glow--maroon{background:radial-gradient(circle,#5a2a33 0%,var(--glow-maroon) 45%,transparent 70%)}
.glow--plum{background:radial-gradient(circle,#4a2d5a 0%,var(--glow-plum) 45%,transparent 70%)}
.glow--blue{background:radial-gradient(circle,#233a66 0%,#16203a 45%,transparent 70%)}
@keyframes glow-drift{to{transform:translate3d(6%,-8%,0) scale(1.12)}}

section{position:relative}
/* content always paints above the ambient glows */
section > .wrap{position:relative;z-index:1}
.section{padding:clamp(88px,11vw,150px) 0;overflow:hidden;overflow:clip} /* clip (not hidden) so position:sticky keeps working inside sections */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:56px;flex-wrap:wrap}
.section-head .lede{margin-top:18px}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--d,0) * 70ms)}
[data-reveal]:not(.glass){filter:blur(6px)}
[data-reveal].in{opacity:1;transform:none;filter:none}
/* headings: each line slides up from behind a mask */
[data-reveal].split{opacity:1;transform:none;filter:none}
.split .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.split .ln > span{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--d,0) * 70ms + var(--l,0) * 120ms)}
.split.in .ln > span{transform:none}
/* media: soft clip-open + settle */
[data-reveal="media"]{filter:none;transform:scale(.965);clip-path:inset(7% 7% 7% 7% round 24px);transition:opacity 1.1s var(--ease),transform 1.4s var(--ease),clip-path 1.4s var(--ease)}
[data-reveal="media"].in{transform:none;clip-path:inset(0 0 0 0 round 24px)}
/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{position:fixed;top:14px;left:0;right:0;z-index:50;pointer-events:none}
.nav__bar{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;height:62px;padding:0 10px 0 20px;border-radius:999px;transition:background .4s}
.nav:not(.is-scrolled) .nav__bar{--g-t1:.03;--g-t2:.01;--g-rim1:.14;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:none}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:-.03em}
.logo img{width:30px;height:30px;object-fit:contain}
.nav__links{display:flex;gap:6px}
.nav__links a{padding:8px 14px;border-radius:999px;font-size:14.5px;color:var(--text-2);transition:color .2s,background .2s}
.nav__links a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav__cta{display:flex;align-items:center;gap:8px}
.nav__burger{display:none;width:42px;height:42px;border-radius:50%;align-items:center;justify-content:center}
.nav__burger span{display:block;width:18px;height:1.5px;background:#fff;position:relative;transition:.3s}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:#fff;transition:.3s}
.nav__burger span::before{top:-6px}.nav__burger span::after{top:6px}
.nav.open .nav__burger span{background:transparent}
.nav.open .nav__burger span::before{top:0;transform:rotate(45deg)}
.nav.open .nav__burger span::after{top:0;transform:rotate(-45deg)}
.nav__sheet{display:none}
@media (max-width:900px){
  .nav__links,.nav__cta .btn{display:none}
  .nav__burger{display:flex}
  .nav__bar{padding-left:18px;height:56px}
  .nav__sheet{pointer-events:auto;display:grid;gap:4px;margin-top:10px;padding:14px;border-radius:24px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:.35s var(--ease)}
  .nav.open .nav__sheet{opacity:1;transform:none;visibility:visible}
  .nav__sheet a{padding:14px 12px;font-size:18px;border-bottom:1px solid var(--line)}
  .nav__sheet .btn{margin-top:10px;justify-content:center;border:0}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{background:var(--ink-900);min-height:max(760px,100svh);display:flex;flex-direction:column;overflow:hidden}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%}
.hero__vignette{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(120% 80% at 62% 45%,transparent 30%,rgba(17,18,19,.85) 78%),
  linear-gradient(180deg,rgba(17,18,19,.6),transparent 25%,transparent 70%,var(--ink-900))}
.hero__inner{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:24px;padding:120px 0 60px}
.hero__copy{display:flex;flex-direction:column;gap:28px}
.hero__copy .lede{max-width:44ch}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}
.hero__stage{position:relative;aspect-ratio:1/1;max-width:600px;justify-self:end;width:100%}
.hero__sv{position:absolute;inset:4% 0 0 2%;width:96%;height:auto;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(62% 58% at 54% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(62% 58% at 54% 50%,#000 58%,transparent 100%);
  animation:sv-float 7s ease-in-out infinite;filter:saturate(1.15) contrast(1.05)}
@keyframes sv-float{0%,100%{transform:translate3d(0,0,0) rotate(-.4deg)}50%{transform:translate3d(0,-16px,0) rotate(.6deg)}}
.hero__halo{position:absolute;left:20%;top:62%;width:64%;height:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(129,184,246,.35),rgba(154,123,224,.15),transparent);filter:blur(24px);animation:halo 7s ease-in-out infinite}
@keyframes halo{50%{transform:scaleX(.86);opacity:.6}}
.chip{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:16px;white-space:nowrap;animation:chip-bob 6s ease-in-out infinite}
.chip__ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.chip__ic svg{width:18px;height:18px}
.chip strong{display:block;font-size:18px;letter-spacing:-.02em;line-height:1.1}
.chip small{display:block;font-size:12px;color:var(--text-2)}
.chip--a{left:-4%;top:16%}
.chip--b{right:-2%;bottom:18%;animation-delay:-3s}
@keyframes chip-bob{50%{transform:translateY(-10px)}}
.hero__rail{position:absolute;left:18px;bottom:120px;z-index:3;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;letter-spacing:.14em;color:var(--text-3)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;align-items:center;gap:72px;width:max-content;animation:marquee 45s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track img{height:30px;width:auto;opacity:.62;transition:opacity .3s}
.marquee__track img:hover{opacity:1}
@keyframes marquee{to{transform:translateX(-50%)}}

@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr;padding-top:110px;gap:8px}
  .hero__stage{justify-self:center;max-width:400px;margin:8px 0 -10px}
  .hero{min-height:auto}
  .chip{transform:scale(.86)}
  .chip--a{left:0;top:10%}.chip--b{right:0;bottom:14%}
  .hero__rail{display:none}
}

/* ==========================================================================
   CLIENT GRID
   ========================================================================== */
.clients{background:var(--ink-700);padding:110px 0 40px;overflow:hidden}
.clients h2{text-align:center;font-size:15px;font-weight:500;color:var(--text-2);margin-bottom:40px}
.clients h2 strong{color:#fff}
.grid-logos{position:relative;display:grid;grid-template-columns:repeat(6,1fr)}
.grid-logos li{position:relative;height:130px;display:grid;place-items:center;padding:24px}
.grid-logos img{max-height:46px;max-width:78%;width:auto;opacity:.72;transition:opacity .3s,transform .5s var(--ease)}
.grid-logos li:hover img{opacity:1;transform:scale(1.06)}
.grid-logos li::after{content:"";position:absolute;inset:0;background:radial-gradient(closest-side,rgba(154,123,224,.16),transparent);opacity:0;transition:opacity .4s}
.grid-logos li:hover::after{opacity:1}
/* animated dashed grid lines (Atomik pattern) */
.gl{position:absolute;pointer-events:none}
.gl--x{left:-10%;right:-10%;height:1px;background:linear-gradient(90deg,var(--line) 50%,transparent 0) 0 0/10px 1px;animation:dash-x 1.2s linear infinite}
.gl--y{top:-30px;bottom:-30px;width:1px;background:linear-gradient(180deg,var(--line) 50%,transparent 0) 0 0/1px 10px;animation:dash-y 1.2s linear infinite}
@keyframes dash-x{to{background-position:10px 0}}
@keyframes dash-y{to{background-position:0 10px}}
@media (max-width:760px){
  .grid-logos{grid-template-columns:repeat(3,1fr)}
  .grid-logos li{height:100px}
  .gl--y.d{display:none}
}

/* ==========================================================================
   SERVICES (bento + video placeholders)
   ========================================================================== */
.services{background:var(--ink-700)}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc{position:relative;border-radius:24px;overflow:hidden;background:var(--ink-900);border:1px solid var(--line);min-height:600px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;transition:transform .6s var(--ease),border-color .4s}
.svc:hover{border-color:rgba(255,255,255,.2)}
.svc--wide{grid-column:1/-1;min-height:640px;display:grid;grid-template-columns:.9fr 1.1fr;align-items:stretch}
.svc__body{position:relative;z-index:4;padding:32px;display:flex;flex-direction:column;gap:14px;background:linear-gradient(0deg,rgba(11,11,12,.95) 30%,rgba(11,11,12,.6) 70%,transparent)}
.svc--wide .svc__body{background:none;justify-content:center;padding:56px}
.svc h3{font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.05}
.svc--wide h3{font-size:clamp(30px,3.2vw,42px)}
.svc p{color:var(--text-2);font-size:15.5px;max-width:42ch}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:12.5px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text-2)}
.svc__link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin-top:4px}
.svc__link svg{width:12px;transition:transform .3s var(--ease)}
.svc:hover .svc__link svg{transform:translateX(4px)}
.svc .scene{position:relative;height:410px;flex:none;z-index:1}
.svc:not(.svc--wide) .svc__body{margin-top:-24px;padding-top:36px;flex:1;justify-content:flex-end}
.svc--wide .scene{height:auto}
@media (max-width:1000px){
  .bento{grid-template-columns:1fr 1fr}
  .svc--wide{grid-template-columns:1fr}
  .svc--wide .scene{min-height:380px}
  .svc--wide .svc__body{padding:32px}
  .svc:last-child{grid-column:1/-1}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr}
  .svc{min-height:500px}
  .svc:last-child{grid-column:auto}
}

/* ---------- Video placeholder scaffold ---------- */
.scene{overflow:hidden;background:radial-gradient(90% 70% at 60% 30%,#1d1a24,var(--ink-900) 70%)}
.scene *{animation-play-state:paused!important}
.scene.playing *{animation-play-state:running!important}
/* Scene A — Distribution network */
.sc-dist{display:grid;place-items:center;padding:64px 40px 130px}
.sc-dist__net{position:relative;width:100%;max-width:580px;aspect-ratio:1.3}
.sc-dist__lines{position:absolute;inset:0;width:100%;height:100%}
.sc-dist__lines path{fill:none;stroke:url(#gLine);stroke-width:1.2;stroke-dasharray:4 6;animation:flow 1.4s linear infinite;opacity:.8}
@keyframes flow{to{stroke-dashoffset:-20}}
.src{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:9/16;transform:translate(-50%,-50%);border-radius:14px;overflow:hidden;padding:0!important}
.src img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;animation:kb 8s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.12) translateY(-3%)}}
.src__bar{position:absolute;left:8px;right:8px;bottom:8px;height:3px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}
.src__bar::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:prog 4s linear infinite}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.src__live{position:absolute;top:8px;left:8px;font:600 9px/1 var(--f-alt);padding:4px 6px;border-radius:4px;background:#ff4d5e;letter-spacing:.06em}
.reel{position:absolute;width:16%;aspect-ratio:9/16;border-radius:9px;overflow:hidden;background:linear-gradient(160deg,var(--c1),var(--c2));box-shadow:0 10px 24px -8px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.14);opacity:0;animation:pop 8s var(--ease) infinite;animation-delay:calc(var(--i) * .45s)}
.reel::before{content:"";position:absolute;left:12%;right:30%;bottom:22%;height:5%;border-radius:2px;background:rgba(255,255,255,.7);box-shadow:0 7px 0 -1px rgba(255,255,255,.35)}
.reel::after{content:"";position:absolute;left:50%;top:38%;width:0;height:0;border-left:8px solid rgba(255,255,255,.85);border-top:5px solid transparent;border-bottom:5px solid transparent;transform:translateX(-40%)}
.reel span{position:absolute;top:5px;left:5px;font:600 8px/1 var(--f-alt);padding:3px 4px;border-radius:3px;background:rgba(0,0,0,.45)}
@keyframes pop{0%{opacity:0;transform:scale(.6)}8%,86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.9)}}
.sc-dist__meter{position:absolute;left:40px;right:40px;bottom:36px;padding:14px 16px;border-radius:14px;display:grid;gap:8px;font-size:12.5px}
.sc-dist__meter div{display:flex;justify-content:space-between;color:var(--text-2)}
.sc-dist__meter b{color:#fff;font-weight:600}
.meter{height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.meter i{display:block;height:100%;width:100%;background:var(--iri);transform-origin:left;animation:fill 8s var(--ease) infinite}
@keyframes fill{0%{transform:scaleX(.05)}70%,100%{transform:scaleX(.94)}}

/* Scene B — Brand & influence */
.sc-brand img.bg{position:absolute;left:-4%;top:0;width:66%;height:100%;object-fit:cover;object-position:50% 10%;animation:kb 10s ease-in-out infinite alternate;opacity:.9;-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent)}
.profile{position:absolute;top:40px;right:16px;width:min(210px,58%);padding:14px;border-radius:16px;display:grid;gap:10px}
.profile__top{display:flex;align-items:center;gap:10px}
.profile__top img{width:36px;height:36px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 4px #d98ba6}
.profile__top b{font-size:13px;display:flex;align-items:center;gap:4px}
.profile__top b svg{width:12px;height:12px}
.profile__top small{font-size:11px;color:var(--text-2)}
.profile__stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;font-size:10.5px;color:var(--text-2)}
.profile__stats strong{display:block;font-size:14px;color:#fff;font-variant-numeric:tabular-nums}
.profile__follow{height:28px;border-radius:8px;background:#3b82f6;display:grid;place-items:center;font-size:12px;font-weight:600;animation:tap 5s infinite}
@keyframes tap{0%,55%{background:#3b82f6}60%{transform:scale(.95)}65%,100%{background:rgba(255,255,255,.12);transform:none}}
.hearts{position:absolute;right:34px;bottom:40px;width:40px;height:200px}
.hearts span{position:absolute;bottom:0;left:50%;font-size:18px;color:#ff5a7a;opacity:0;animation:rise 4s ease-in infinite;animation-delay:calc(var(--i) * .7s)}
@keyframes rise{0%{opacity:0;transform:translate(-50%,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x,10px)),-190px) scale(1.1)}}

/* Scene C — Content timeline */
.sc-edit{padding:28px 22px 0}
.monitor{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#0b0b0c;box-shadow:inset 0 0 0 1px var(--line)}
.monitor__frame{position:absolute;inset:0;background-size:cover;background-position:50% 20%;opacity:0;animation:frames 9s infinite}
.monitor__frame:nth-child(2){animation-delay:3s}.monitor__frame:nth-child(3){animation-delay:6s}
@keyframes frames{0%,30%{opacity:1}36%,100%{opacity:0}}
.monitor__cap{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);font:700 13px/1.2 var(--f-alt);text-transform:uppercase;text-align:center;padding:4px 8px;background:#ffe14d;color:#111;border-radius:4px;white-space:nowrap;animation:cap 3s steps(1) infinite}
@keyframes cap{0%{clip-path:inset(0 100% 0 0)}10%{clip-path:inset(0 50% 0 0)}20%,100%{clip-path:inset(0 0 0 0)}}
.tl{position:relative;margin-top:18px;padding:10px;border-radius:12px;display:grid;gap:6px}
.tl__track{position:relative;height:18px;border-radius:5px;background:rgba(255,255,255,.04)}
.tl__clip{position:absolute;top:0;bottom:0;border-radius:4px;left:var(--l);width:var(--w);background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.tl__wave{display:flex;align-items:center;gap:2px;height:18px;padding:0 4px}
.tl__wave i{flex:1;height:30%;background:rgba(129,184,246,.7);border-radius:1px;animation:wv 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.13s)}
@keyframes wv{to{height:95%}}
.tl__head{position:absolute;top:4px;bottom:4px;left:10px;width:2px;background:#ff4d5e;box-shadow:0 0 10px #ff4d5e;animation:head 6s linear infinite}
.tl__head::before{content:"";position:absolute;top:-4px;left:-4px;border:5px solid transparent;border-top-color:#ff4d5e}
@keyframes head{to{left:calc(100% - 12px)}}

/* Scene D — Performance dashboard */
.sc-perf{padding:28px 22px 0}
.dash{padding:18px;border-radius:16px;display:grid;gap:16px}
.dash__kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line)}
.kpi small{display:block;font-size:10.5px;color:var(--text-2)}
.kpi strong{font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi em{font-style:normal;font-size:10.5px;color:#6ee7a8;margin-left:4px}
.chart{width:100%;height:auto}
.chart .area{fill:url(#gArea);opacity:0;animation:area 7s var(--ease) infinite}
.chart .ln{fill:none;stroke:url(#gLine);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:draw 7s var(--ease) infinite}
.chart .dot{fill:#fff;opacity:0;animation:dotp 7s infinite}
.chart .grid line{stroke:rgba(255,255,255,.07)}
@keyframes draw{0%{stroke-dashoffset:420}55%,100%{stroke-dashoffset:0}}
@keyframes area{0%,30%{opacity:0}60%,100%{opacity:1}}
@keyframes dotp{0%,52%{opacity:0;r:0}58%,100%{opacity:1;r:4}}
.bars{display:flex;align-items:flex-end;gap:5px;height:44px}
.bars i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,rgba(154,123,224,.9),rgba(154,123,224,.15));height:var(--h);transform-origin:bottom;animation:bar 7s var(--ease) infinite;animation-delay:calc(var(--i) * .08s)}
@keyframes bar{0%{transform:scaleY(.1)}40%,100%{transform:scaleY(1)}}

/* ==========================================================================
   NUMBERS
   ========================================================================== */
.numbers{background:var(--ink-900)}
.numbers__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.star-wrap{position:relative;max-width:560px;width:100%;margin-inline:auto;aspect-ratio:1}
.star-wrap svg{width:100%;height:100%;overflow:visible}
.star-wrap svg{animation:star-float 9s ease-in-out infinite;will-change:transform}
@keyframes star-float{50%{transform:translateY(-10px) rotate(.5deg)}}
.star-core{position:absolute;left:50%;top:54.5%;transform:translate(-50%,-50%);text-align:center}
.star-core strong{display:block;font-size:clamp(44px,6vw,74px);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 2px 18px rgba(0,0,0,.45),0 0 40px rgba(154,123,224,.5)}
.star-core small{display:block;margin-top:6px;line-height:1.35;font-size:13px;font-weight:500;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
.stat{padding:22px 22px 20px;border-radius:18px}
.stat strong{display:block;font-size:clamp(32px,3.4vw,44px);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:8px;font-size:14px;color:var(--text-2);line-height:1.35}
.stat--wide{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px}
.stat--wide span{margin:0;text-align:right;max-width:24ch}
@media (max-width:900px){.numbers__grid{grid-template-columns:1fr}.star-wrap{max-width:420px}}

/* ==========================================================================
   CASE STUDIES
   ========================================================================== */
.work{background:var(--ink-700)}
.case{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--line)}
.case:nth-of-type(even) .case__media{order:2}
.case__body{display:flex;flex-direction:column;gap:18px}
.case__body h3{font-size:clamp(30px,3.4vw,44px);line-height:1}
.case__body .sub{font-size:19px;font-weight:500;letter-spacing:-.02em}
.case__body p{color:var(--text-2);font-size:16px;max-width:52ch}
.case__meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.metric{padding:14px 16px;border-radius:14px}
.metric small{display:block;font:500 11px/1.2 var(--f-alt);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.metric strong{font-size:22px;font-weight:600;letter-spacing:-.03em}
.case__media{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/4.4;background:radial-gradient(70% 60% at 50% 40%,#2a2330,var(--ink-900));border:1px solid var(--line)}
.case__media .scene{position:absolute;inset:0;background:transparent}
.case__media img.portrait{position:absolute;left:0;right:0;bottom:0;margin:auto;height:92%;width:auto;max-width:none;left:50%;transform:translateX(-50%);
  -webkit-mask-image:radial-gradient(75% 85% at 50% 40%,#000 55%,transparent 88%);mask-image:radial-gradient(75% 85% at 50% 40%,#000 55%,transparent 88%);animation:kb2 12s ease-in-out infinite alternate}
@keyframes kb2{to{transform:translateX(-50%) scale(1.05)}}
.case__media img.phone{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);height:88%;width:auto;max-width:none;border-radius:28px;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent);animation:phone-scroll 10s ease-in-out infinite alternate}
@keyframes phone-scroll{to{transform:translate(-50%,-53%) rotate(-1.5deg)}}
.clipcard{position:absolute;left:18px;right:18px;bottom:18px;padding:14px 16px;border-radius:16px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.play{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#111;box-shadow:0 0 0 0 rgba(255,255,255,.4);animation:ping 2.4s infinite}
.play svg{width:14px;height:14px;margin-left:2px}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(255,255,255,0)}}
.clipcard b{display:block;font-size:14px;font-weight:600}
.clipcard small{font-size:12px;color:var(--text-2)}
.clipcard .meter{margin-top:8px}
.clipcard .meter i{animation-duration:6s}
.views{font:600 13px/1 var(--f-alt);font-variant-numeric:tabular-nums;color:#fff;text-align:right}
.views small{display:block;font-weight:400;margin-top:4px}
.floaty{position:absolute;top:18px;right:18px;padding:10px 12px;border-radius:12px;font-size:12px;display:flex;align-items:center;gap:8px;animation:chip-bob 5s ease-in-out infinite}
.floaty svg{width:14px;height:14px;color:#6ee7a8}
@media (max-width:900px){
  .case{grid-template-columns:1fr;gap:28px}
  .case:nth-of-type(even) .case__media{order:0}
}

/* more work rail */
.rail-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:72px 0 24px;flex-wrap:wrap}
.rail-head h3{font-size:22px;font-weight:600;letter-spacing:-.02em}
.rail{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rail .marquee__track{gap:14px;animation-duration:70s;padding:6px 0}
.rail:hover .marquee__track{animation-play-state:paused}
.mini{position:relative;flex:none;width:250px;height:320px;border-radius:18px;overflow:hidden;background:var(--ink-900);border:1px solid var(--line);transition:transform .5s var(--ease),border-color .3s}
.mini:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.25)}
.mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%;opacity:.9;transition:transform .8s var(--ease)}
.mini:hover img{transform:scale(1.05)}
.mini__txt{position:absolute;left:10px;right:10px;bottom:10px;padding:12px 14px;border-radius:14px}
.mini__txt b{display:block;font:700 14px/1.2 var(--f-alt);text-transform:uppercase}
.mini__txt span{font-size:13px;color:var(--text-2)}
.mini__txt strong{color:#fff;font-weight:600}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testi{background:var(--ink-800)}
.testi__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
.testi__stack{position:relative;max-height:560px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent)}
.tq-track{display:grid;gap:16px;animation:tq 70s linear infinite}
.testi__stack:hover .tq-track{animation-play-state:paused}
@keyframes tq{to{transform:translateY(calc(-50% - 8px))}}
.vt{position:relative;border-radius:24px;overflow:hidden;min-height:560px;border:1px solid var(--line)}
.vt .scene{position:absolute;inset:0}
.vt img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%;animation:kb 12s ease-in-out infinite alternate}
.vt__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,11,.95) 10%,transparent 60%)}
.vt__sub{position:absolute;left:50%;bottom:170px;transform:translateX(-50%);width:max-content;max-width:86%;text-align:center}
.vt__sub span{position:absolute;left:50%;transform:translateX(-50%);width:max-content;max-width:100%;padding:6px 10px;border-radius:6px;background:rgba(0,0,0,.6);font-size:14px;font-weight:500;opacity:0;animation:subs 12s infinite}
.vt__sub span:nth-child(2){animation-delay:4s}.vt__sub span:nth-child(3){animation-delay:8s}
@keyframes subs{0%,2%{opacity:0;transform:translate(-50%,6px)}5%,30%{opacity:1;transform:translate(-50%,0)}33%,100%{opacity:0}}
.vt__foot{position:absolute;left:18px;right:18px;bottom:18px;padding:18px;border-radius:18px;display:grid;gap:12px}
.who{display:flex;align-items:center;gap:12px}
.who img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.who b{display:block;font-size:16px;font-weight:600}
.who small{font-size:13px;color:var(--text-2)}
.quote{padding:28px;border-radius:24px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.quote blockquote{margin:0;font-size:17px;line-height:1.55;color:#e9e9eb}
.quote blockquote::before{content:"\201C";display:block;font:700 54px/0.6 Georgia,serif;margin-bottom:10px;background:var(--iri);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:900px){.testi__grid{grid-template-columns:1fr}.vt{min-height:520px}}

/* ==========================================================================
   ABOUT / PHILOSOPHY
   ========================================================================== */
.about{background:var(--ink-700)}
.about__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.about__intro{position:sticky;top:120px;align-self:start}
.about__intro .steps-title{margin-top:32px}
.about .steps{margin-top:0}
.about .steps .step:first-child{padding-top:0;border-top:0}
.steps{display:grid;gap:0;margin-top:44px}
.step{display:grid;grid-template-columns:90px 1fr;gap:20px;padding:26px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step__n{font-size:54px;font-weight:700;letter-spacing:-.05em;line-height:.9;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.08));-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.step p{color:var(--text-2);font-size:15.5px}
@media (max-width:900px){.about__grid{grid-template-columns:1fr;gap:28px}.about__intro{position:relative;top:0}}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{background:var(--ink-700)}
.faq__list{max-width:820px;margin:0 auto;display:grid;gap:10px}
.faq details{border-radius:16px;padding:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 22px;font-size:17px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);transition:transform .4s var(--ease),background .3s}
.faq summary i svg{width:12px;height:12px}
.faq details[open] summary i{transform:rotate(45deg);background:var(--iri);color:#111}
.faq details p{padding:0 22px 22px;color:var(--text-2);font-size:15.5px;max-width:64ch}
.faq details[open]{--g-t1:.14}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{background:var(--ink-900);padding:clamp(110px,13vw,170px) 0}
.cta__mark{position:absolute;left:50%;top:50%;width:min(1100px,130%);transform:translate(-50%,-50%);opacity:.22;filter:grayscale(.6) brightness(1.3);mix-blend-mode:screen;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent)}
.cta__sweep{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(129,184,246,.10) 48%,rgba(217,139,166,.08) 52%,transparent 60%);background-size:300% 100%;animation:sweep 9s ease-in-out infinite}
@keyframes sweep{0%{background-position:120% 0}100%{background-position:-20% 0}}
.cta .h2{font-size:clamp(44px,6.4vw,84px);text-shadow:0 4px 40px rgba(0,0,0,.6)}
.cta__card{position:relative;max-width:760px;margin:0 auto;padding:clamp(20px,4vw,48px) 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.cta__contacts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;font-size:14px;color:var(--text-2)}
.cta__contacts a,.cta__contacts span{display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.cta__contacts a:hover{color:#fff}
.cta__contacts svg{width:15px;height:15px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--ink-900);padding:80px 0 0;overflow:hidden;border-top:1px solid var(--line)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer__brand p{color:var(--text-2);font-size:15px;margin-top:14px;max-width:30ch}
.footer h4{font-size:13px;font-weight:500;color:var(--text-3);margin-bottom:16px}
.footer li{margin:10px 0}
.footer li a{font-size:15px;color:var(--text-2);transition:color .2s}
.footer li a:hover{color:#fff}
.socials{display:flex;gap:8px;margin-top:22px}
.socials a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center}
.socials svg{width:17px;height:17px}
.footer__word{font-weight:700;font-size:clamp(90px,22vw,340px);letter-spacing:-.06em;line-height:.8;text-align:center;margin-top:70px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;transform:translateY(12%)}
.footer__legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 0;border-top:1px solid var(--line);font-size:13px;color:var(--text-3);position:relative;z-index:2;background:var(--ink-900)}
@media (max-width:900px){.footer__top{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none;filter:none;clip-path:none}
  .split .ln > span{transform:none}
}
@media (max-width:760px){
  .glass{--g-blur:12px}
  .glass--3{--g-blur:18px}
}



/* ==========================================================================
   MERGED FROM FRAMER SITE: studios, portfolio tabs, process, form, lightbox
   ========================================================================== */

/* hero showreel link */
.reel-btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 6px;font-weight:600;font-size:15px;color:var(--text-2);transition:color .2s}
.reel-btn:hover{color:#fff}
.reel-btn .play{width:38px;height:38px}
.reel-btn .play svg{width:11px;height:11px}

/* ---------- Four studios ---------- */
.studios-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin:88px 0 28px}
.studios-head h3{font-size:clamp(26px,3vw,38px);font-weight:400;letter-spacing:-.03em;line-height:1.1}
.studios-head h3 span{font-weight:700}
.studios-head p{color:var(--text-2);font-size:15.5px;max-width:46ch}
.studios{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.studio{padding:12px;border-radius:24px;display:flex;flex-direction:column}
.studio__img{border-radius:16px;overflow:hidden;aspect-ratio:16/8.4;background:var(--ink-900)}
.studio__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.studio:hover .studio__img img{transform:scale(1.05)}
.studio__body{padding:22px 14px 14px;display:flex;flex-direction:column;gap:12px;flex:1}
.studio__body h4{font-size:24px;font-weight:600;letter-spacing:-.03em}
.studio__body p{color:var(--text-2);font-size:15px}
.studio__body .svc__link{margin-top:auto;padding-top:6px}
@media (max-width:760px){.studios{grid-template-columns:1fr}}

/* ---------- Our Work ---------- */
.portfolio{background:var(--ink-800)}
.showreel{position:relative;width:min(340px,100%);aspect-ratio:16/9;border-radius:20px;overflow:hidden;padding:0;cursor:pointer}
.showreel > img{position:absolute!important;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;transition:transform 1s var(--ease),opacity .4s;z-index:0!important}
.showreel:hover > img{transform:scale(1.06);opacity:.9}
.showreel__txt{position:absolute!important;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(10,10,12,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:left}
.showreel__txt .play{width:40px;height:40px;flex:none}
.showreel__txt .play svg{width:12px;height:12px}
.showreel__txt b{display:block;font-size:15px}
.showreel__txt small{font-size:12.5px;color:var(--text-2)}

.pf-tabs{position:relative;display:flex;gap:4px;width:max-content;max-width:100%;margin:0 auto 22px;padding:6px;border-radius:999px;overflow-x:auto;scrollbar-width:none}
.pf-tabs::-webkit-scrollbar{display:none}
.pf-tabs button{position:relative;z-index:3;flex:none;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--text-2);transition:color .3s}
.pf-tabs button:hover{color:#fff}
.pf-tabs button[aria-selected="true"]{color:#0c0c0d}
.pf-tabs button i{font-style:normal;font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.08);transition:background .3s}
.pf-tabs button[aria-selected="true"] i{background:rgba(0,0,0,.08)}
.pf-tabs__ind{position:absolute!important;z-index:2!important;top:6px;bottom:6px;left:0;width:0;border-radius:999px;background:#fff;box-shadow:0 8px 24px -10px rgba(255,255,255,.5);transition:transform .55s var(--ease),width .55s var(--ease)}
.pf-intro{text-align:center;color:var(--text-2);font-size:15.5px;max-width:60ch;margin:0 auto 32px}
.pf-panel[hidden]{display:none}
.pf-panel.is-active{animation:pf-in .7s var(--ease) both}
@keyframes pf-in{from{opacity:0;transform:translateY(16px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* social case rail */
.pf-rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(620px,88%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 8px;overscroll-behavior-x:contain}
.pf-rail::-webkit-scrollbar{display:none}
.sc{scroll-snap-align:start;display:grid;grid-template-columns:230px 1fr;gap:6px;padding:12px;border-radius:24px}
.sc__phone{border-radius:16px;background:radial-gradient(80% 60% at 50% 40%,#2c2436,var(--ink-900));display:grid;place-items:center;padding:20px 12px;overflow:hidden}
.sc__phone img{height:340px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6));transition:transform .8s var(--ease)}
.sc:hover .sc__phone img{transform:translateY(-6px) scale(1.02)}
.sc__body{padding:12px 14px 10px 18px;display:flex;flex-direction:column;gap:10px}
.sc__role{font:500 11px/1.3 var(--f-alt);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.sc__body h3{font-size:26px;line-height:1}
.sc__tag{font-size:17px;font-weight:500;letter-spacing:-.02em;line-height:1.3}
.sc__desc{font-size:14.5px;color:var(--text-2)}
.sc__stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.sc__stats strong{display:block;font-size:30px;font-weight:600;letter-spacing:-.04em;line-height:1;background:linear-gradient(180deg,#fff 40%,#c9c4d6);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc__stats span{display:block;margin-top:6px;font-size:12.5px;color:var(--text-2)}
.pf-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:#fff}
.pf-link svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.pf-link:hover svg,.site:hover .pf-link svg{transform:translate(2px,-2px)}
.pf-nav{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.pf-nav button{width:46px;height:46px;border-radius:50%;display:grid;place-items:center}
.pf-nav button svg{width:15px;height:15px}
.pf-nav button:disabled{opacity:.35;cursor:default}
@media (max-width:640px){
  .sc{grid-template-columns:1fr}
  .sc__phone img{height:280px}
  .sc__body{padding:16px 8px 6px}
}

/* video tiles (3D + reels) */
.vtile{position:relative;display:block;width:100%;padding:0;border-radius:18px;overflow:hidden;background:var(--ink-900);border:1px solid var(--line);cursor:pointer;isolation:isolate;transition:transform .6s var(--ease),border-color .3s}
.vtile--L{aspect-ratio:16/9}
.vtile--V{aspect-ratio:9/16}
.vtile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.vtile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 40%);opacity:.8;transition:opacity .4s}
.vtile:hover{border-color:rgba(255,255,255,.25)}
.vtile:hover video{transform:scale(1.04)}
.vtile__play{position:absolute;z-index:2;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 30px -10px rgba(0,0,0,.6);opacity:0;transform:scale(.85);transition:opacity .35s,transform .45s var(--ease)}
.vtile__play svg{width:16px;height:16px;margin-left:3px;color:#fff}
.vtile:hover .vtile__play,.vtile:focus-visible .vtile__play,.pod:hover .vtile__play{opacity:1;transform:none}
@media (hover:none){.vtile__play{opacity:.9;transform:scale(.8)}}
.pf-row{display:grid;gap:14px}
.pf-row--l{grid-template-columns:repeat(3,1fr)}
.pf-row--v{grid-template-columns:repeat(4,1fr);margin-top:14px}
.pf-reels{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:900px){.pf-row--l{grid-template-columns:1fr 1fr}.pf-row--v{grid-template-columns:repeat(2,1fr)}.pf-reels{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.pf-row--l{grid-template-columns:1fr}.pf-reels{grid-template-columns:repeat(2,1fr);gap:10px}.pf-row--v{gap:10px}}

/* graphic design masonry */
.pf-design{columns:4 220px;column-gap:14px}
.dz{display:block;width:100%;margin:0 0 14px;padding:0;border-radius:16px;overflow:hidden;break-inside:avoid;border:1px solid var(--line);background:var(--ink-900);cursor:zoom-in;transition:transform .5s var(--ease),border-color .3s}
.dz img{width:100%;height:auto;transition:transform 1s var(--ease)}
.dz:hover{border-color:rgba(255,255,255,.25)}
.dz:hover img{transform:scale(1.04)}

/* podcasts */
.pf-pods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pod{display:flex;flex-direction:column;text-align:left;padding:10px;border-radius:20px;cursor:pointer}
.pod__img{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:16/9}
.pod__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pod:hover .pod__img img{transform:scale(1.05)}
.pod__body{display:flex;flex-direction:column;gap:6px;padding:14px 8px 8px}
.pod__body b{font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.pod__body small{font-size:13px;color:var(--text-2)}
@media (max-width:900px){.pf-pods{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pf-pods{grid-template-columns:1fr}}

/* websites */
.pf-web{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.site{display:flex;flex-direction:column;padding:10px;border-radius:22px}
.site__shots{position:relative;display:block;aspect-ratio:16/11;border-radius:14px;overflow:hidden;background:radial-gradient(80% 70% at 45% 35%,#2b2535,var(--ink-900))}
.site__desk{position:absolute;left:5%;top:12%;width:84%;height:auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55));transition:transform .9s var(--ease)}
.site__mob{position:absolute;right:5%;bottom:-6%;height:74%;width:auto;filter:drop-shadow(0 16px 22px rgba(0,0,0,.6));transition:transform .9s var(--ease)}
.site:hover .site__desk{transform:translateY(-4px)}
.site:hover .site__mob{transform:translateY(-10px)}
.site__body{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 8px 8px}
.site__body b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em}
.site__body small{font-size:13px;color:var(--text-2)}
@media (max-width:1000px){.pf-web{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.pf-web{grid-template-columns:1fr}}

/* ---------- Process ---------- */
.steps-title{margin-top:48px;font-size:20px;font-weight:400;letter-spacing:-.02em;color:var(--text-2)}
.steps-title span{color:#fff;font-weight:600}
.steps-title + .steps{margin-top:18px}
.step h3 em{font-style:normal;font:500 11px/1 var(--f-alt);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-left:8px;vertical-align:middle}

/* ---------- Contact form ---------- */
.cform{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left;margin-top:6px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field span{font-size:13px;color:var(--text-2)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:15px;color:#fff;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background-color:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .25s,background-color .25s;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23b2b2b5' stroke-width='1.8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.field select option{background:#1b1b1a;color:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:rgba(154,123,224,.8);background-color:rgba(255,255,255,.08)}
.field.is-bad input,.field.is-bad select{border-color:#ff6b7a}
.cform__foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.cform__note{font-size:13.5px;color:var(--text-2);min-height:1em}
.cta__card{max-width:820px}
@media (max-width:600px){.cform{grid-template-columns:1fr}.cform__foot .btn{width:100%;justify-content:center}}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;display:none}
.lb[open]{display:grid;place-items:center;animation:lb-in .4s var(--ease)}
.lb::backdrop{background:rgba(8,8,10,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lb__stage{display:grid;place-items:center;max-width:94vw;max-height:88vh;animation:lb-pop .5s var(--ease)}
@keyframes lb-pop{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
.lb__stage video,.lb__stage img{max-width:94vw;max-height:88vh;border-radius:18px;box-shadow:0 40px 80px -20px rgba(0,0,0,.8);background:#000}
.lb__stage iframe{width:min(1100px,94vw);aspect-ratio:16/9;height:auto;border:0;border-radius:18px;background:#000}
.lb__close{position:fixed!important;top:18px;right:18px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;z-index:5}
.lb__close svg{width:16px;height:16px}
/* ===== MULTIPAGE ===== */
/* ---------- Nav dropdown ---------- */
.nav__dd{position:relative}
.nav__ddbtn{display:inline-flex!important;align-items:center;gap:6px}
.nav__ddbtn svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.nav__dd:hover .nav__ddbtn svg,.nav__dd:focus-within .nav__ddbtn svg{transform:rotate(180deg)}
.nav__menu{position:absolute;top:calc(100% + 14px);left:50%;width:520px;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px;border-radius:22px;
  background:rgba(24,23,27,.94);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px -20px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .3s}
.nav__menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav__dd:hover .nav__menu,.nav__dd:focus-within .nav__menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav__links .nav__menu a{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:14px;color:#fff}
.nav__links .nav__menu a b{font-size:14.5px;font-weight:600}
.nav__links .nav__menu a small{font-size:12.5px;color:var(--text-2)}
.nav__links .nav__menu a:hover{background:rgba(255,255,255,.07)}
.nav__links .nav__menu .nav__menuall{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:600;border-top:1px solid var(--line);border-radius:0 0 14px 14px;margin-top:4px}
.nav__menuall svg{width:12px;height:12px}
.nav__sheet a.sub{padding:10px 12px 10px 26px;font-size:15.5px;color:var(--text-2)}

/* ---------- Page hero ---------- */
.phero{position:relative;overflow:hidden;background:var(--ink-900);padding:150px 0 100px}
.phero__inner{position:relative;z-index:1}
.phero--split .phero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.phero__copy{display:flex;flex-direction:column;gap:22px;max-width:640px}
.phero__title{font-size:clamp(44px,6.2vw,84px)}
.phero .tags li{font-size:13px}
.phero__media{position:relative}
.phero__frame{padding:10px;border-radius:26px;animation:sv-float 9s ease-in-out infinite}
.phero__frame img{width:100%;height:auto;border-radius:18px;aspect-ratio:16/9;object-fit:cover}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-3)}
.crumbs a{color:var(--text-2);transition:color .2s}
.crumbs a:hover{color:#fff}
.crumbs svg{width:10px;height:10px}
.crumbs span{color:#fff}
@media (max-width:900px){
  .phero{padding:120px 0 72px}
  .phero--split .phero__inner{grid-template-columns:1fr;gap:40px}
}

/* ---------- Section sub-heads ---------- */
.sub-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:36px}
.sub-head .lede{max-width:48ch}
.h2--sm{font-size:clamp(30px,3.6vw,46px)}
.h2--sm i{font-style:normal;font-size:14px;font-weight:600;letter-spacing:0;vertical-align:top;margin-left:6px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--text-2)}
.sub-gap{height:110px}
.showcase{background:var(--ink-800)}

/* social cards as a grid on the Social page */
.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:1100px){.sc-grid{grid-template-columns:1fr}}

/* ---------- Capabilities ---------- */
.capabilities{background:var(--ink-700)}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cap-grid li{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:18px;font-size:16.5px;font-weight:500;letter-spacing:-.01em}
.cap-grid li span{font:600 12px/1 var(--f-alt);color:var(--text-3);letter-spacing:.06em}
@media (max-width:900px){.cap-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cap-grid{grid-template-columns:1fr}}

/* ---------- Services overview rows ---------- */
.studios-page{background:var(--ink-700)}
.srow{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:56px 0;border-bottom:1px solid var(--line)}
.srow:first-child{padding-top:0}
.srow:last-child{border-bottom:0;padding-bottom:0}
.srow--flip .srow__img{order:2}
.srow__img{display:block;padding:10px;border-radius:26px;overflow:hidden}
.srow__img img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px;transition:transform 1.2s var(--ease)}
.srow__img:hover img{transform:scale(1.04)}
.srow__body{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.srow__title{font-size:clamp(28px,3.2vw,42px);font-weight:600;letter-spacing:-.035em;line-height:1.05}
.srow__body p{color:var(--text-2);font-size:16px;max-width:50ch}
@media (max-width:900px){.srow{grid-template-columns:1fr;gap:28px}.srow--flip .srow__img{order:0}}
.growth{background:var(--ink-900)}
.gcards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gcard{padding:26px 22px;border-radius:22px;display:flex;flex-direction:column;gap:12px}
.gcard__n{font-size:40px;font-weight:700;letter-spacing:-.05em;line-height:1;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.08));-webkit-background-clip:text;background-clip:text;color:transparent}
.gcard h3{font-size:20px;font-weight:600;letter-spacing:-.02em}
.gcard p{color:var(--text-2);font-size:14.5px}
.gcard .tags{margin-top:auto}
@media (max-width:1000px){.gcards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gcards{grid-template-columns:1fr}}

/* ---------- Contact page ---------- */
.contact-hero{padding-bottom:120px}
.contact__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.contact__info{display:flex;flex-direction:column;gap:22px}
.ccards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.ccard{display:flex;align-items:center;gap:14px;padding:16px;border-radius:18px;height:100%}
.ccard__ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.ccard__ic svg{width:18px;height:18px}
.ccard small{display:block;font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;font-family:var(--f-alt)}
.ccard b{font-size:15px;font-weight:600;word-break:break-word}
.contact__social{display:flex;gap:10px;flex-wrap:wrap}
.contact__social a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:500}
.contact__social svg{width:16px;height:16px}
.contact__formwrap{padding:34px;border-radius:28px;position:relative}
.contact__formwrap h2{font-size:26px;font-weight:600;letter-spacing:-.03em}
.contact__formwrap > p{color:var(--text-2);font-size:14.5px;margin:6px 0 22px}
@media (max-width:980px){.contact__grid{grid-template-columns:1fr}}
@media (max-width:480px){.ccards{grid-template-columns:1fr}.contact__formwrap{padding:22px}}
/* ===== CASE STUDY SLIDESHOW ===== */
.cs-slider{position:relative}
.cs-viewport{overflow:hidden;border-radius:30px;touch-action:pan-y}
.cs-track{display:flex;transition:transform .9s var(--ease);will-change:transform}
.cs-track.is-dragging{transition:none}
.cs-slide.case{flex:0 0 100%;min-width:0;margin:0;padding:22px;border-top:0;border-radius:30px;gap:48px;grid-template-columns:.95fr 1.05fr;align-items:center}
.cs-slide.case .case__media{order:0;aspect-ratio:1/1}
.cs-slide .case__body{padding-right:22px}
/* inactive slides recede so the move reads as depth, not just a pan */
.cs-slide{transition:opacity .9s var(--ease),filter .9s var(--ease)}
.cs-slide:not(.is-active){opacity:.25;filter:blur(2px)}
.cs-controls{display:flex;align-items:center;gap:20px;margin-top:22px}
.cs-dots{display:flex;gap:8px}
.cs-dot{width:44px;height:28px;display:grid;place-items:center;padding:0}
.cs-dot span{display:block;width:100%;height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;position:relative}
.cs-dot span::after{content:"";position:absolute;inset:0;background:var(--iri);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.cs-dot.is-active span::after{transform:scaleX(1)}
.cs-dot:hover span{background:rgba(255,255,255,.32)}
.cs-count{font:500 13px/1 var(--f-alt);letter-spacing:.06em;color:var(--text-3);font-variant-numeric:tabular-nums}
.cs-count b{color:#fff;font-weight:600}
.cs-arrows{margin:0 0 0 auto}
@media (max-width:900px){
  .cs-slide.case{grid-template-columns:1fr;gap:24px;padding:14px}
  .cs-slide .case__body{padding:0 8px 10px}
  .cs-slide.case .case__media{aspect-ratio:4/3.6}
}
@media (max-width:560px){.cs-dot{width:28px}.cs-controls{gap:12px}}
/* ===== PERSONALITY LAUNCH PAGE ===== */
/* hero: endless wall of clips behind the headline */
.pl-hero{position:relative;overflow:hidden;background:var(--ink-900);min-height:max(760px,100svh);display:flex;align-items:center}
.pl-wall{position:absolute;inset:-18% -8%;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;transform:rotate(-8deg);opacity:.55;pointer-events:none}
.pl-col{overflow:hidden}
.pl-colin{display:flex;flex-direction:column;gap:16px;animation:pl-up var(--dur,40s) linear infinite}
.pl-col--down .pl-colin{animation-name:pl-down}
@keyframes pl-up{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 8px))}}
@keyframes pl-down{from{transform:translateY(calc(-50% - 8px))}to{transform:translateY(0)}}
.pl-tile{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:var(--ink-600);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pl-tile img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.pl-tile span{position:absolute;left:10px;bottom:10px;font:600 12px/1 var(--f-alt);padding:6px 9px;border-radius:999px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pl-hero__veil{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(58% 52% at 50% 50%,rgba(17,18,19,.94) 0%,rgba(17,18,19,.78) 48%,rgba(17,18,19,.3) 100%),
  linear-gradient(180deg,var(--ink-900) 0%,transparent 22%,transparent 78%,var(--ink-900) 100%)}
.pl-hero__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;padding:150px 0 90px}
.pl-hero__inner .lede{max-width:56ch;margin:0 auto}
.pl-hero__inner .h-display{font-size:clamp(44px,6.6vw,92px)}
.pl-hero .hero__actions{justify-content:center}
.pl-new{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;font:600 12px/1 var(--f-alt);letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.pl-new i{width:7px;height:7px;border-radius:50%;background:var(--iri);box-shadow:0 0 0 0 rgba(154,123,224,.6);animation:rec 1.8s infinite}
@keyframes rec{70%{box-shadow:0 0 0 9px rgba(154,123,224,0)}}
.pl-facts{display:grid;grid-template-columns:repeat(3,auto);margin-top:18px;border:1px solid var(--line);border-radius:20px;background:rgba(17,18,19,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pl-facts li{padding:16px 28px;display:flex;flex-direction:column;gap:4px}
.pl-facts li + li{border-left:1px solid var(--line)}
.pl-facts b{font-size:26px;font-weight:600;letter-spacing:-.03em}
.pl-facts span{font-size:13px;color:var(--text-2)}
@media (max-width:700px){.pl-wall{grid-template-columns:repeat(3,1fr)}.pl-facts{grid-template-columns:1fr}.pl-facts li + li{border-left:0;border-top:1px solid var(--line)}}

/* proof grid */
.pl-proof{background:var(--ink-700)}
.pl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pl-card{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:24px}
.pl-card__head{display:flex;align-items:center;gap:12px}
.pl-card__av{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:50% 12%;box-shadow:0 0 0 2px rgba(255,255,255,.14)}
.pl-card__av--phone{object-position:50% 30%}
.pl-card__head b{display:block;font-size:15.5px;font-weight:600}
.pl-card__head small{font-size:12.5px;color:var(--text-2)}
.pl-card > p{font-size:14.5px;color:var(--text-2);min-height:2.9em}
.pl-card__media{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:radial-gradient(70% 70% at 50% 40%,#2b2535,var(--ink-900))}
.pl-card__media img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transition:transform 1s var(--ease)}
.pl-card__media--phone img{object-fit:contain;object-position:50% 0;padding-top:14px;transform-origin:top}
.pl-card:hover .pl-card__media img{transform:scale(1.04)}
.pl-chip{position:absolute!important;left:12px;top:12px;padding:7px 11px;border-radius:999px;font:600 12px/1 var(--f-alt)}
.pl-card__stats{display:flex;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.pl-card__stats span{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--text-2)}
.pl-card__stats b{font-size:17px;font-weight:600;color:#fff;letter-spacing:-.02em}
.pl-card--you{justify-content:center;align-items:flex-start;gap:16px;padding:32px}
.pl-card--you h3{font-size:clamp(30px,3vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1}
.pl-card--you p{min-height:0}
@media (max-width:1000px){.pl-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.pl-grid{grid-template-columns:1fr}}

/* big number with orbit */
.pl-orbit{background:var(--ink-700);padding:20px 0 120px}
.pl-orbit__inner{position:relative;max-width:900px}
.pl-orbit__svg{width:100%;height:auto;overflow:visible}
.pl-orbit__num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px}
.pl-orbit__num strong{font-size:clamp(64px,10vw,128px);font-weight:600;letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums}
.pl-orbit__num span{color:var(--text-2);font-size:15.5px;max-width:28ch}

/* how it works: steps scroll, visual stays */
.pl-how{background:var(--ink-900)}
.pl-how__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:start}
.pl-how__steps .h2{margin:18px 0 28px}
.pl-step{display:grid;grid-template-columns:72px 1fr;gap:18px;padding:40px 0;min-height:240px;border-top:1px solid var(--line);opacity:.32;transition:opacity .5s var(--ease)}
.pl-step.is-active{opacity:1}
.pl-step__n{font-size:44px;font-weight:700;letter-spacing:-.05em;line-height:.9;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.08));-webkit-background-clip:text;background-clip:text;color:transparent}
.pl-step h3{font-size:24px;font-weight:600;letter-spacing:-.025em;margin-bottom:10px}
.pl-step p{color:var(--text-2);font-size:16px;max-width:44ch}
.pl-how__vis{position:sticky;top:120px;aspect-ratio:1/1;border-radius:28px;overflow:hidden}
.pl-vis{position:absolute!important;inset:0;padding:36px;display:flex;flex-direction:column;justify-content:center;gap:26px;opacity:0;transform:scale(.97);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.pl-vis.is-active{opacity:1;transform:none}
.pl-vis__label{text-align:center;color:var(--text-2);font-size:15px}
.pl-vis__label b{color:#fff;font-size:22px;font-weight:600;letter-spacing:-.02em;margin-right:6px}
/* 01 podcast */
.pl-rec{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.45);font:600 12px/1 var(--f-alt);letter-spacing:.08em}
.pl-rec i{width:8px;height:8px;border-radius:50%;background:#ff4d5e;animation:blink 1.2s steps(2) infinite}
.pl-rec b{font-variant-numeric:tabular-nums}
@keyframes blink{50%{opacity:.2}}
.pl-wave{display:flex;align-items:center;gap:4px;height:120px}
.pl-wave i{flex:1;height:20%;border-radius:3px;background:linear-gradient(180deg,#81B8F6,#9A7BE0);animation:plwave 1.2s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.09s)}
@keyframes plwave{to{height:90%}}
.pl-qs{display:flex;flex-direction:column;gap:10px}
.pl-qs span{align-self:flex-start;padding:12px 16px;border-radius:16px 16px 16px 4px;background:rgba(255,255,255,.07);border:1px solid var(--line);font-size:15px;animation:plq 6s var(--ease) infinite both}
.pl-qs span:nth-child(2){animation-delay:.8s;align-self:center}
.pl-qs span:nth-child(3){animation-delay:1.6s;align-self:flex-end}
@keyframes plq{0%{opacity:0;transform:translateY(10px)}12%,85%{opacity:1;transform:none}100%{opacity:0}}
/* 02 clips */
.pl-reels{display:flex;justify-content:center;gap:14px}
.pl-reel{position:relative;width:30%;aspect-ratio:9/16;border-radius:16px;overflow:hidden;box-shadow:0 20px 40px -14px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.12);transform:rotate(calc((var(--i) - 1) * 4deg));animation:plreel 5s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -1.6s)}
.pl-reel img{width:100%;height:100%;object-fit:cover}
.pl-reel b{position:absolute;left:8px;right:8px;bottom:12px;font:700 11px/1.25 var(--f-alt);text-transform:uppercase;text-align:center;padding:5px 6px;border-radius:5px;background:#ffe14d;color:#111}
@keyframes plreel{to{translate:0 -10px}}
/* 03 pages network */
.pl-pages{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.pl-pages i{aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);animation:plpage 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * .07s)}
@keyframes plpage{0%,100%{background:rgba(255,255,255,.07)}40%,60%{background:linear-gradient(135deg,#81B8F6,#9A7BE0,#D98BA6);box-shadow:0 0 18px rgba(154,123,224,.6)}}
/* 04 launch week */
.pl-week{display:flex;align-items:flex-end;gap:12px;height:240px}
.pl-day{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}
.pl-day i{display:block;width:100%;height:var(--h);border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#D98BA6,#9A7BE0 50%,rgba(129,184,246,.35));transform-origin:bottom;animation:plbar 4s var(--ease) infinite;animation-delay:calc(var(--i) * .12s)}
.pl-day span{font:600 11px/1 var(--f-alt);color:var(--text-3)}
@keyframes plbar{0%{transform:scaleY(.08)}45%,100%{transform:scaleY(1)}}
@media (max-width:900px){
  .pl-how__grid{grid-template-columns:1fr;gap:28px}
  .pl-how__vis{display:none}
  .pl-step{opacity:1;min-height:0;padding:28px 0}
}

/* people + brands */
.pl-who{background:var(--ink-700)}
.pl-who__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pl-who__card{padding:34px;border-radius:26px;display:flex;flex-direction:column;gap:14px}
.pl-who__ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.pl-who__ic svg{width:22px;height:22px;fill:url(#gIri);color:#9A7BE0}
.pl-who__card h3{font-size:26px;font-weight:600;letter-spacing:-.03em}
.pl-who__card p{color:var(--text-2);font-size:16px;max-width:46ch}
@media (max-width:760px){.pl-who__grid{grid-template-columns:1fr}}

/* services page: link to the new vertical */
.pl-banner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:26px 30px;border-radius:26px;margin-bottom:56px}
.pl-banner .pl-new{white-space:nowrap}
.pl-banner h3{font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.pl-banner p{color:var(--text-2);font-size:15px;margin-top:6px}
@media (max-width:800px){.pl-banner{grid-template-columns:1fr;gap:14px}}
/* ===== LAUNCHES GRID (Instagram + LinkedIn cards) ===== */
.lv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:40px}
.lv-head .lede{margin-top:14px;max-width:46ch}
.lv-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* sort dropdown */
.lv-sort{position:relative;z-index:5}
.lv-sort__btn{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px;border-radius:999px;font-size:14px;color:var(--text-2)}
.lv-sort__btn svg{width:15px;height:15px}
.lv-sort__btn b{color:#fff;font-weight:600}
.lv-sort__sep{width:1px;height:14px;background:var(--line-strong)}
.lv-sort__chev{transition:transform .3s var(--ease)}
.lv-sort__btn[aria-expanded="true"] .lv-sort__chev{transform:rotate(180deg)}
.lv-sort__menu{position:absolute;top:calc(100% + 8px);left:0;min-width:100%;padding:6px;border-radius:16px;background:rgba(24,23,27,.96);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 50px -16px rgba(0,0,0,.8);opacity:0;visibility:hidden;transform:translateY(6px);transition:.25s var(--ease)}
.lv-sort.open .lv-sort__menu{opacity:1;visibility:visible;transform:none}
.lv-sort__menu li{padding:10px 14px;border-radius:10px;font-size:14px;color:var(--text-2);cursor:pointer;white-space:nowrap}
.lv-sort__menu li:hover,.lv-sort__menu li:focus{background:rgba(255,255,255,.07);color:#fff;outline:none}
.lv-sort__menu li[aria-selected="true"]{color:#fff;font-weight:600}
/* platform toggle */
.lv-seg{position:relative;display:flex;padding:5px;border-radius:999px}
.lv-seg button{position:relative;z-index:3;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px;border-radius:999px;font-size:14px;font-weight:500;color:var(--text-2);transition:color .3s}
.lv-seg button svg{width:15px;height:15px}
.lv-seg button i{font-style:normal;font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.08)}
.lv-seg button[aria-selected="true"]{color:#0c0c0d}
.lv-seg button[aria-selected="true"] i{background:rgba(0,0,0,.08)}
.lv-seg__ind{position:absolute!important;z-index:2!important;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:#fff;transition:transform .5s var(--ease),width .5s var(--ease)}
.lv-in{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;background:#0a66c2;color:#fff;font:700 10px/1 var(--f-alt)}
.lv-ig{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;background:linear-gradient(45deg,#feda75,#fa7e1e 25%,#d62976 55%,#962fbf 80%,#4f5bd5)}
.lv-seg button .lv-ig svg{width:11px;height:11px;color:#fff}

/* grid + shared card skeleton */
.lv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lc{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:24px;color:inherit;transition:transform .5s var(--ease),opacity .4s}
a.lc:hover{transform:translateY(-4px)}
.lc[hidden]{display:none}
.lc.is-in{animation:lc-in .55s var(--ease) both;animation-delay:calc(var(--k,0) * 45ms)}
@keyframes lc-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lc__head{display:flex;align-items:center;gap:12px}
.lc__av{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font:700 13px/1 var(--f-alt);letter-spacing:.02em;color:#fff}
.lc__av span{display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;background:hsl(var(--h) 45% 30%)}
.lc__who{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lc__who b{display:flex;align-items:center;gap:5px;font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc__tick{flex:none;width:15px;height:15px}
.lc__who small{font-size:12.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc__plat{flex:none;width:20px;height:20px}
.lc__cap{font-size:14.5px;line-height:1.5;color:#d9d9dc;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3em}
.lc__media{position:relative;aspect-ratio:16/11;border-radius:16px;overflow:hidden;background:var(--ink-900)}
.lc__badge{position:absolute!important;left:10px;top:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:9px;font:600 13px/1 var(--f-alt);background:rgba(255,255,255,.92);color:#111}
.lc__badge svg{width:13px;height:13px}
.lc__stats{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line);align-items:end}
.lc__stats--2{grid-template-columns:repeat(2,1fr)}
.lc__stats--3{grid-template-columns:repeat(3,1fr)}
.lc__stats--4{grid-template-columns:repeat(4,1fr)}
.lc__stat{display:grid;grid-template-columns:auto 1fr;column-gap:6px;align-items:center;min-width:0}
.lc__stat svg{width:15px;height:15px;color:var(--text-2);grid-row:1/3}
.lc__stat b{font-size:14.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.lc__stat small{font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Instagram variant: story ring, gradient glyph, reel strip */
.lc--ig .lc__av{padding:2.5px;background:conic-gradient(from 210deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75)}
.lc--ig .lc__av span{box-shadow:0 0 0 2.5px var(--ink-600)}
.lc__plat--ig{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:linear-gradient(45deg,#feda75,#fa7e1e 25%,#d62976 55%,#962fbf 80%,#4f5bd5)}
.lc__plat--ig svg{width:14px;height:14px;color:#fff}
.lc__media--ig{display:flex;justify-content:center;gap:8px;padding:12px}
.lc__media--ig .lc__blur{position:absolute!important;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);max-width:none;aspect-ratio:auto;object-fit:cover;border-radius:0;box-shadow:none;filter:blur(26px) brightness(.55) saturate(1.2)}
.lc__media--ig img{position:relative;height:100%;width:auto;aspect-ratio:9/16;object-fit:cover;border-radius:10px;box-shadow:0 10px 24px -8px rgba(0,0,0,.7)}
.lc__media--n1 img{aspect-ratio:auto;max-width:100%;object-fit:contain}
.lc__reel{position:absolute!important;right:10px;top:10px;z-index:2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lc__reel svg{width:11px;height:11px;margin-left:2px;color:#fff}
.lc--ig .lc__badge{background:linear-gradient(90deg,#fa7e1e,#d62976 60%,#962fbf);color:#fff}

/* LinkedIn variant: company square, blue glyph, post screenshot, reaction cluster */
.lc--li .lc__av{border-radius:12px}
.lc--li .lc__av span{border-radius:12px;background:hsl(var(--h) 40% 34%)}
.lc__plat--li{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:#0a66c2;color:#fff;font:700 12px/1 var(--f-alt)}
.lc__media--li{background:#f3f2ef}
.lc__media--li img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.lc--li .lc__badge{background:#0a66c2;color:#fff;top:auto;bottom:10px}
.lc__media--n3 img{height:auto;width:calc((100% - 16px) / 3);align-self:center}
.lc--li .lc__stats{grid-template-columns:auto repeat(3,1fr)}
.lc--li .lc__stats--2{grid-template-columns:auto repeat(2,1fr)}
.lc__reacts{display:flex;align-self:center}
.lc__reacts i{width:18px;height:18px;border-radius:50%;border:2px solid var(--ink-600);margin-left:-6px}
.lc__reacts i:first-child{margin-left:0}
.lc__reacts .r1{background:radial-gradient(circle at 50% 45%,#fff 0 22%,#378fe9 24%)}
.lc__reacts .r2{background:radial-gradient(circle at 50% 50%,#fff 0 20%,#df704d 22%)}
.lc__reacts .r3{background:radial-gradient(circle at 50% 50%,#fff 0 20%,#6dae4f 22%)}

/* closing card */
.lv-you{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:16px;padding:28px 32px;border-radius:26px}
.lv-you h3{font-size:clamp(26px,2.6vw,34px);font-weight:700;letter-spacing:-.04em;line-height:1.05;margin:10px 0 6px}
.lv-you p{color:var(--text-2);font-size:15px}
@media (max-width:1050px){.lv-grid{grid-template-columns:1fr 1fr}}
.lc{min-width:0}
@media (max-width:640px){.lc__stats--4{grid-template-columns:repeat(2,1fr);row-gap:12px}.lc--li .lc__stats,.lc--li .lc__stats--2{grid-template-columns:repeat(3,1fr)}.lc__reacts{display:none}}
@media (max-width:640px){.lv-grid{grid-template-columns:1fr}.lv-controls{width:100%}.lv-seg{flex:1}.lv-seg button{flex:1;justify-content:center;padding:0 8px}}
/* ===== LAUNCH VIRALITY HERO v2 ===== */
.lvh{position:relative;overflow:hidden;overflow:clip;background:var(--ink-900);padding:150px 0 110px}
.lvh__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.lvh__copy{display:flex;flex-direction:column;gap:22px}
.lvh__copy .h-display{font-size:clamp(44px,5.6vw,80px)}
.lvh__copy .lede{max-width:46ch}
.lvh__facts{display:flex;gap:0;margin-top:10px;border-top:1px solid var(--line)}
.lvh__facts li{flex:1;padding:18px 18px 0 0;display:flex;flex-direction:column;gap:4px}
.lvh__facts li + li{padding-left:18px;border-left:1px solid var(--line)}
.lvh__facts b{font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.035em}
.lvh__facts span{font-size:13px;color:var(--text-2)}

/* stage: one phone, waves rippling out of it */
.lvh__stage{position:relative;display:grid;place-items:center;min-height:620px}
.lvh__ring{position:absolute;left:50%;top:50%;width:380px;height:380px;margin:-190px 0 0 -190px;border-radius:50%;border:1px solid rgba(154,123,224,.45);opacity:0;animation:lvh-ring 6s cubic-bezier(.2,.6,.3,1) infinite;animation-delay:calc(var(--i) * 2s)}
@keyframes lvh-ring{0%{transform:scale(.6);opacity:0}15%{opacity:.9}100%{transform:scale(1.9);opacity:0}}
.lvh__phone{position:relative;width:min(300px,78%);aspect-ratio:9/19;border-radius:44px;padding:10px;animation:sv-float 8s ease-in-out infinite}
.lvh__screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#000}
.lvh__screen video{width:100%;height:100%;object-fit:cover}
.lvh__notch{position:absolute;top:10px;left:50%;width:92px;height:24px;margin-left:-46px;border-radius:999px;background:#000}
.lvh__live{position:absolute;top:46px;left:12px;display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;font:600 11px/1 var(--f-alt);letter-spacing:.02em;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lvh__live i{width:7px;height:7px;border-radius:50%;background:#ff4d5e;animation:blink 1.2s steps(2) infinite}
.lvh__cap{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 16px;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);display:flex;flex-direction:column;gap:3px}
.lvh__cap b{font-size:14px}
.lvh__cap small{font-size:12.5px;color:rgba(255,255,255,.8)}
.lvh__bar{margin-top:10px;height:3px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden}
.lvh__bar i{display:block;height:100%;width:100%;background:#fff;transform-origin:left;animation:prog 6s linear infinite}
.lvh__chip{position:absolute!important;animation:chip-bob 6s ease-in-out infinite}
.lvh__chip .chip__ic svg{width:18px;height:18px;color:#c9b8ff;fill:none}
.lvh__chip--a{left:0;top:18%}
.lvh__chip--b{right:0;bottom:16%;animation-delay:-3s}
@media (max-width:960px){
  .lvh{padding:120px 0 80px}
  .lvh__inner{grid-template-columns:1fr;gap:36px}
  .lvh__stage{min-height:520px}
  .lvh__chip{transform:scale(.88)}
}
@media (max-width:480px){.lvh__facts li{padding-right:10px}.lvh__facts li + li{padding-left:10px}.lvh__chip--a{left:-6px}.lvh__chip--b{right:-6px}}
/* ===== LAUNCH VIRALITY HERO v3: launch globe ===== */
.lvh__stage{position:relative;aspect-ratio:1/1;width:100%;max-width:620px;justify-self:end;min-height:0}
.lvh__globe{position:absolute;inset:0;width:100%;height:100%}
.lvh__core{position:absolute!important;left:50%;top:50%;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;z-index:3;box-shadow:0 0 60px rgba(154,123,224,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.lvh__core::after{border-radius:50%}
.lvh__mic{width:34px;height:34px;color:#fff;filter:drop-shadow(0 0 10px rgba(129,184,246,.6))}
.lvh__wave{display:flex;align-items:center;gap:3px;height:14px}
.lvh__wave i{width:3px;height:30%;border-radius:2px;background:linear-gradient(180deg,#81B8F6,#D98BA6);animation:plwave .9s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.13s)}
.lvh__chip strong{font-variant-numeric:tabular-nums;min-width:7ch;display:inline-block}
.lvh__chip--a{left:-2%;top:12%}
.lvh__chip--b{right:-2%;top:62%}
.lvh__days{position:absolute!important;left:50%;bottom:2%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:7px 9px 7px 14px;border-radius:999px;z-index:3}
.lvh__days span{font:600 11px/1 var(--f-alt);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-right:6px;white-space:nowrap}
.lvh__days i{font:600 11px/1 var(--f-alt);font-style:normal;padding:6px 8px;border-radius:999px;color:var(--text-3);background:rgba(255,255,255,.05);transition:background .4s,color .4s}
.lvh__days i.on{color:#fff;background:linear-gradient(135deg,rgba(129,184,246,.55),rgba(154,123,224,.55),rgba(217,139,166,.55))}
.lvh__days i.now{box-shadow:0 0 0 1px rgba(255,255,255,.6),0 0 16px rgba(154,123,224,.7)}
@media (max-width:960px){.lvh__stage{justify-self:center;max-width:520px}}
@media (max-width:520px){.lvh__core{width:88px;height:88px;margin:-44px 0 0 -44px}.lvh__mic{width:26px;height:26px}.lvh__days span{display:none}.lvh__days i{padding:5px 6px}}
/* ===== OUR WORK: launches tab ===== */
.pf-launch .lc{animation:none}
.pf-more{display:flex;justify-content:center;margin-top:28px}
/* ===== STEP 2: clipping animation ===== */
/* one 6s loop: playhead scans the long-form, each highlighted moment is cut, then drops in as a reel */
.pl-vis--1{gap:22px}
.pl-src{display:flex;flex-direction:column;gap:10px}
.pl-src__top{display:flex;justify-content:space-between;align-items:center;font:600 12px/1 var(--f-alt);color:var(--text-2)}
.pl-src__top span{display:inline-flex;align-items:center;gap:7px}
.pl-src__top svg{width:14px;height:14px;color:#c9b8ff}
.pl-src__out{color:#fff;padding:6px 10px;border-radius:999px;background:rgba(154,123,224,.22);box-shadow:inset 0 0 0 1px rgba(154,123,224,.45)}
.pl-strip{position:relative;display:flex;height:64px;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.pl-strip img{flex:1;min-width:0;height:100%;object-fit:cover;filter:saturate(.7) brightness(.55)}
.pl-seg{position:absolute!important;top:0;bottom:0;left:var(--p);width:12%;border-radius:6px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18);animation:plseg 6s infinite;animation-delay:var(--t)}
.pl-seg i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-style:normal;font-size:18px;line-height:1;color:#fff;text-shadow:0 0 10px rgba(255,225,77,.9);opacity:0;animation:plsnip 6s infinite;animation-delay:inherit}
@keyframes plseg{0%{background:rgba(255,225,77,0)}3%{background:rgba(255,225,77,.55);box-shadow:inset 0 0 0 2px #ffe14d,0 0 22px rgba(255,225,77,.6)}20%,100%{background:rgba(255,225,77,.18);box-shadow:inset 0 0 0 1.5px rgba(255,225,77,.6)}}
@keyframes plsnip{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-30deg)}4%{opacity:1;transform:translate(-50%,-50%) scale(1.3) rotate(0)}18%,100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.pl-head{position:absolute!important;top:-4px;bottom:-4px;left:0;width:2px;background:#ff4d5e;box-shadow:0 0 12px #ff4d5e;animation:plhead 6s linear infinite}
.pl-head::before{content:"";position:absolute;top:0;left:-5px;border:6px solid transparent;border-top-color:#ff4d5e}
@keyframes plhead{0%{left:0}80%,100%{left:calc(100% - 2px)}}
/* the cut reels */
.pl-reels--cut .pl-reel{rotate:calc((var(--i) - 1) * 4deg);transform:none;opacity:0;animation:plclip 6s cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(.86s + var(--i) * 1.54s)}
@keyframes plclip{0%{opacity:0;transform:translateY(-46px) scale(.72)}9%{opacity:1;transform:translateY(0) scale(1)}62%{opacity:1;transform:none}72%,100%{opacity:0;transform:translateY(12px) scale(.94)}}
.pl-reels--cut .pl-reel::after{content:"";position:absolute;left:10px;right:10px;top:10px;height:3px;border-radius:3px;background:rgba(255,255,255,.3)}
.pl-reels--cut .pl-reel::before{content:"";position:absolute;z-index:2;left:10px;top:10px;height:3px;width:calc(100% - 20px);border-radius:3px;background:#fff;transform-origin:left;animation:plplay 6s linear infinite;animation-delay:inherit}
@keyframes plplay{0%,9%{transform:scaleX(0)}62%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.pl-reels--cut .pl-reel{opacity:1}}
/* ===== STEP 2: illustrated (no footage) ===== */
.pl-strip{background:linear-gradient(90deg,rgba(129,184,246,.14),rgba(154,123,224,.16),rgba(217,139,166,.14))}
.pl-wave2{position:absolute!important;inset:8px 8px;display:flex;align-items:center;gap:2px}
.pl-wave2 i{flex:1;height:var(--h);border-radius:2px;background:rgba(255,255,255,.32)}
.pl-reel__art{position:absolute;inset:0;background:
  radial-gradient(circle at 50% 40%,rgba(255,255,255,.34) 0 11.5%,transparent 12%),
  radial-gradient(ellipse 50% 17% at 50% 70%,rgba(255,255,255,.26) 0 97%,transparent 100%),
  radial-gradient(120% 80% at 20% 0%,hsla(var(--a),80%,70%,.55),transparent 60%),
  linear-gradient(165deg,hsl(var(--a) 55% 42%),hsl(var(--b) 50% 22%))}
.pl-reel__ui{position:absolute;right:7px;bottom:46%;display:flex;flex-direction:column;gap:7px}
.pl-reel__ui i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.55)}
.pl-reel__ui i:first-child{background:#ff5a7a}
/* ===== PERSONAL BRANDS (big phone cards) + TESTIMONIAL WALL ===== */
.pf-rail--pb{grid-auto-columns:78%;gap:20px}
.pb{scroll-snap-align:start;position:relative;display:grid;grid-template-columns:1fr minmax(260px,330px);gap:32px;min-height:580px;padding:44px 0 0 48px;border-radius:32px;overflow:hidden}
.pb::after{display:none}
.pb > .pb__stage{position:relative;z-index:1}
.pb .pb__stage::before{content:"";position:absolute;left:50%;top:10%;width:420px;height:420px;margin-left:-210px;border-radius:50%;background:radial-gradient(closest-side,hsla(var(--h),70%,55%,.55),hsla(var(--h),70%,40%,.15) 60%,transparent);filter:blur(10px)}
.pb__body{display:flex;flex-direction:column;gap:14px;padding-bottom:44px;align-self:center}
.pb__handle{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--text-2)}
.pb__tick{width:16px;height:16px}
.pb__name{font-size:clamp(34px,3.6vw,52px);font-weight:700;letter-spacing:-.045em;line-height:1}
.pb__role{color:var(--text-2);font-size:15.5px}
.pb__big{display:flex;align-items:baseline;gap:14px;margin-top:10px}
.pb__big strong{font-size:clamp(56px,7vw,96px);font-weight:600;letter-spacing:-.06em;line-height:.9;background:linear-gradient(180deg,#fff 30%,hsl(var(--h) 60% 78%));-webkit-background-clip:text;background-clip:text;color:transparent}
.pb__big span{font-size:14px;color:var(--text-2);max-width:9ch;line-height:1.3}
.pb__row{display:flex;gap:28px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pb__row b{display:block;font-size:22px;font-weight:600;letter-spacing:-.03em}
.pb__row small{font-size:12.5px;color:var(--text-2)}
.pb__what{color:#d4d4d8;font-size:15.5px;line-height:1.55;max-width:46ch}
/* phone mockup: bleeds out of the card's bottom edge */
.pb__stage{display:flex;justify-content:center;align-items:flex-start}
.pb__phone{position:relative;width:100%;max-width:300px;margin-top:6px;padding:9px;border-radius:46px;background:linear-gradient(145deg,#3a393f,#121214 55%,#26252a);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6);transform:translateY(0);transition:transform .9s var(--ease)}
.pb:hover .pb__phone{transform:translateY(-14px)}
.pb__screen{position:relative;border-radius:37px;overflow:hidden;background:#000;aspect-ratio:1080/2275}
.pb__screen img{display:block;width:100%;height:auto}
.pb__island{position:absolute!important;z-index:2;top:20px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:999px;background:#000}
.pb__screen{padding-top:34px;background:#000}
@media (max-width:900px){
  .pf-rail--pb{grid-auto-columns:88%}
  .pb{grid-template-columns:1fr;padding:30px 26px 0;min-height:0;gap:22px}
  .pb__body{padding-bottom:0}
  .pb__stage{height:380px;overflow:hidden}
  .pb__phone{max-width:250px}
}

/* testimonial wall: three columns drifting in opposite directions */
.tw{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;height:680px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.tw-col{overflow:hidden}
.tw-track{display:flex;flex-direction:column;gap:18px;animation:tw-up var(--dur,50s) linear infinite}
.tw-col--down .tw-track{animation-name:tw-down}
.tw:hover .tw-track{animation-play-state:paused}
@keyframes tw-up{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 9px))}}
@keyframes tw-down{from{transform:translateY(calc(-50% - 9px))}to{transform:translateY(0)}}
.tw-card{margin:0;padding:26px;border-radius:24px;display:flex;flex-direction:column;gap:20px}
.tw-card blockquote{margin:0;font-size:16px;line-height:1.6;color:#e9e9eb}
.tw-card blockquote::before{content:"\201C";display:block;font:700 46px/.6 Georgia,serif;margin-bottom:14px;background:var(--iri);-webkit-background-clip:text;background-clip:text;color:transparent}
.tw-card .who img{width:42px;height:42px}
@media (max-width:1000px){.tw{grid-template-columns:1fr 1fr}.tw-col:nth-child(3){display:none}}
@media (max-width:640px){.tw{grid-template-columns:1fr;height:620px}.tw-col:nth-child(2){display:none}}
@media (prefers-reduced-motion:reduce){.tw{height:auto;-webkit-mask-image:none;mask-image:none}.tw-track{animation:none}.tw-track [aria-hidden="true"]{display:none}}

/* Launches tab: slideshow, 3 visible, moves one card per click */
.pf-rail--launch{grid-auto-columns:calc((100% - 32px) / 3);gap:16px}
.pf-rail--launch .lc{scroll-snap-align:start}
@media (max-width:1000px){.pf-rail--launch{grid-auto-columns:calc((100% - 16px) / 2)}}
@media (max-width:640px){.pf-rail--launch{grid-auto-columns:88%}}
/* ===== STEP 2 v3: clip queue ===== */
.pl-clips{display:flex;flex-direction:column;gap:10px}
.pl-clip{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);opacity:0;animation:plrow 6s cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(.86s + var(--i) * 1.54s)}
@keyframes plrow{0%{opacity:0;transform:translateY(-14px)}8%{opacity:1;transform:none;box-shadow:inset 0 0 0 1px rgba(255,225,77,.55),0 0 24px -6px rgba(255,225,77,.45)}22%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}74%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateY(6px)}}
.pl-clip__wave{display:flex;align-items:center;gap:2px;height:34px;padding:0 8px;border-radius:9px;background:rgba(255,225,77,.12);box-shadow:inset 0 0 0 1px rgba(255,225,77,.35)}
.pl-clip__wave i{flex:1;height:var(--h);border-radius:1px;background:rgba(255,225,77,.75)}
.pl-clip__txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.pl-clip__txt small{font:500 11px/1.2 var(--f-alt);letter-spacing:.04em;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-clip__txt b{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-clip__ok{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--f-alt);color:#6ee7a8;padding:6px 9px;border-radius:999px;background:rgba(110,231,168,.1)}
.pl-clip__ok svg{width:12px;height:12px}
@media (prefers-reduced-motion:reduce){.pl-clip{opacity:1}}
@media (max-width:520px){.pl-clip{grid-template-columns:56px 1fr}.pl-clip__ok{display:none}}
/* ===== SERVICE CARDS: equal graphic frames ===== */
/* every small service graphic sits in the same 22px/28px inset frame, so all three are identical in height */
.svc:not(.svc--wide) .scene{--fi:28px;--fs:22px}
.sc-edit,.sc-perf{display:flex;flex-direction:column;padding:var(--fi) var(--fs)}
.sc-edit .monitor{flex:1;min-height:0;aspect-ratio:auto}
.sc-edit .tl{flex:none}
.sc-perf .dash{flex:1;min-height:0;display:flex;flex-direction:column}
.sc-perf .chart{flex:none}
.sc-perf .bars{flex:1;min-height:44px;height:auto}
/* brand: photo + profile card inside a matching rounded frame */
.sc-brand::before{content:"";position:absolute;inset:var(--fi) var(--fs);border-radius:16px;background:radial-gradient(90% 80% at 30% 30%,#2a2330,#141316);box-shadow:inset 0 0 0 1px var(--line);z-index:0}
.sc-brand img.bg{top:var(--fi);left:var(--fs);height:calc(100% - var(--fi) * 2);width:62%;border-radius:16px 0 0 16px;z-index:1}
.sc-brand .profile{top:calc(var(--fi) + 16px);right:calc(var(--fs) + 14px);z-index:2}
.sc-brand .hearts{bottom:calc(var(--fi) + 16px);right:calc(var(--fs) + 24px);z-index:2}

/* personal brand cards: shorter; phone no longer sets the height, it is cropped by the card's bottom edge */
.pb{min-height:500px;padding-top:36px}
.pb__body{padding-bottom:36px}
.pb__stage{align-self:stretch}
.pb__phone{position:absolute;top:0;left:50%;transform:translateX(-50%);margin-top:0;width:min(290px,100%)}
.pb:hover .pb__phone{transform:translate(-50%,-14px)}
.pb .pb__stage::before{top:4%}
@media (max-width:900px){.pb{min-height:0}.pb__stage{height:340px}.pb__phone{width:240px}}

/* tighter top bezel on the brand phones */
.pb__screen{padding-top:20px}
.pb__island{top:16px;width:76px;height:20px;margin-left:-38px}

/* slideshows: leave room for the card shadows to fade out instead of being clipped by the scroll box */
.pf-rail{padding-top:10px;padding-bottom:64px;margin-bottom:-54px}

/* brand logos in launch-card avatars */
.lc__av--logo span{background:#fff;overflow:hidden}
.lc__av--logo img{width:100%;height:100%;object-fit:contain}

/* brand avatars 20% larger (44px -> 53px) */
.lc__av{width:53px;height:53px}

/* footer: non-link items (e.g. the address) match the links */
.footer li{font-size:15px;color:var(--text-2)}

/* platform marks: plain bright-white outline icons, no tile backgrounds */
.lc__plat--ig,.lc__plat--li{background:none!important;width:24px;height:24px;border-radius:0;display:grid;place-items:center;color:#fff}
.lc__plat--ig svg,.lc__plat--li svg{width:22px;height:22px;color:#fff;fill:none}
.lc__plat--li svg{fill:none}
.lv-ig,.lv-in{background:none!important;width:18px;height:18px;border-radius:0;color:currentColor}
.lv-seg button .lv-ig svg,.lv-seg button .lv-in svg{width:18px;height:18px;color:currentColor}
.pb__handle .lc__plat--ig svg{width:20px;height:20px}
/* ===== PAGE LOADER ===== */
.loader{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:radial-gradient(60% 50% at 50% 45%,#1d1724,var(--ink-900) 70%);
  transition:opacity .7s var(--ease),visibility .7s,clip-path .9s var(--ease);clip-path:inset(0 0 0 0);
  animation:loader-failsafe .6s 5.5s forwards}
.loader.is-done{opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0)}
@keyframes loader-failsafe{to{opacity:0;visibility:hidden}}
.loader__mark{position:relative;width:88px;height:88px;display:grid;place-items:center}
.loader__star{width:58px;height:58px;filter:drop-shadow(0 0 18px rgba(154,123,224,.7));animation:loader-breathe 1.6s ease-in-out infinite}
.loader.is-done .loader__star{animation:none;transform:scale(1.35);opacity:0;transition:transform .7s var(--ease),opacity .5s}
@keyframes loader-breathe{50%{transform:scale(1.08) rotate(4deg)}}
.loader__ring{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;border:1.5px solid rgba(154,123,224,.55);opacity:0;animation:loader-ring 1.8s cubic-bezier(.2,.6,.3,1) infinite;animation-delay:calc(var(--i,0) * .6s)}
.loader__ring:nth-child(2){--i:1}.loader__ring:nth-child(3){--i:2}
@keyframes loader-ring{0%{transform:scale(.55);opacity:0}20%{opacity:.9}100%{transform:scale(2.4);opacity:0}}
.loader__word{font-weight:700;font-size:22px;letter-spacing:-.03em;color:#fff;opacity:.92}
.loader__bar{width:140px;height:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.loader__bar i{display:block;height:100%;width:100%;background:var(--iri);transform-origin:left;transform:scaleX(0);animation:loader-bar 1.1s var(--ease) forwards}
@keyframes loader-bar{to{transform:scaleX(.92)}}
.loader.is-done .loader__bar i{transform:scaleX(1);animation:none;transition:transform .3s}
/* hold the first-screen reveals until the loader has gone, so they play in view */
html.is-loading [data-reveal].in{opacity:0;transform:translateY(24px)}
html.is-loading .split.in .ln > span{transform:translateY(110%)}
@media (prefers-reduced-motion:reduce){.loader__ring{display:none}.loader__star{animation:none}.loader{transition:opacity .3s}}

/* StarVave SV mark (vector) */
.logo img.logo__mark{width:auto;height:26px;object-fit:contain}
.footer .logo img.logo__mark{height:28px}
.loader__star{width:84px;height:auto}

/* hero SV: transparent cut-out, so no screen blend or square-fading mask needed */
.hero__sv{mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none;filter:none}

/* ===== ONE TITLE STYLE: single weight, no light/bold split ===== */
.h-display{font-weight:600;font-size:clamp(46px,6.8vw,92px);line-height:1;letter-spacing:-.045em}
.h2{font-weight:600;font-size:clamp(34px,4.2vw,56px);line-height:1.05;letter-spacing:-.04em}
.h2--sm{font-size:clamp(30px,3.4vw,46px)}
.h-display b,.h2 b{font-weight:inherit;display:inline}
.phero__title,.lvh__copy .h-display{font-size:clamp(46px,6vw,84px)}
.clients h2{font-size:15px;font-weight:500;color:var(--text-2)}
.steps-title{font-weight:500;color:var(--text-2)}

/* ===== LOADER v2: centred logo inside a 0 -> 100% progress ring ===== */
.loader{gap:0}
.loader__mark{position:relative;width:148px;height:148px;display:grid;place-items:center}
.loader__ring{position:absolute;inset:0;left:0;top:0;margin:0;width:100%;height:100%;border:0;border-radius:0;opacity:1;animation:none;transform:rotate(-90deg);overflow:visible}
.loader__track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:2}
.loader__prog{fill:none;stroke:url(#gRing);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:351.86;stroke-dashoffset:351.86;
  filter:drop-shadow(0 0 6px rgba(154,123,224,.6));animation:ring-fill var(--ld,1100ms) cubic-bezier(.4,.1,.3,1) forwards}
@keyframes ring-fill{to{stroke-dashoffset:28}}
.loader.is-complete .loader__prog{animation:none;stroke-dashoffset:0;transition:stroke-dashoffset .28s ease-out}
.loader .loader__star{width:76px;height:auto;animation:none;filter:drop-shadow(0 0 16px rgba(154,123,224,.55))}
.loader.is-done .loader__star{transform:scale(1.15);opacity:0}
.loader.is-done .loader__ring{opacity:0;transform:rotate(-90deg) scale(1.15);transition:opacity .5s,transform .7s var(--ease)}
.loader__word,.loader__bar{display:none}
@media (prefers-reduced-motion:reduce){.loader__prog{animation-duration:150ms}}

/* ===== LOADER v3: dashed ring, lit dashes glow, unloaded dashes faded grey ===== */
.loader__track{fill:none;stroke:rgba(255,255,255,.16);stroke-width:2.6;stroke-dasharray:6 5.2}
.loader__dash{fill:none;stroke:url(#gRing);stroke-width:2.6;stroke-dasharray:6 5.2}
.loader__lit{filter:drop-shadow(0 0 4px rgba(154,123,224,.9)) drop-shadow(0 0 10px rgba(129,184,246,.45))}
.loader__prog{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:butt;filter:none;stroke-dasharray:351.86;stroke-dashoffset:351.86;animation:ring-fill var(--ld,2200ms) cubic-bezier(.45,.05,.35,1) forwards}
.loader.is-complete .loader__prog{animation:none;stroke-dashoffset:0;transition:stroke-dashoffset .45s ease-out}

/* ===== PERFORMANCE PASS (2026-10-28) ===== */
/* looping animations pause while their section is off-screen (class set by main.js) */
.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}
/* lighter frost on small/secondary glass */
.glass--1{--g-blur:8px}
/* testimonials: static cards, reveal on scroll, soft glow on hover only */
.tw{display:block;height:auto;overflow:visible;columns:3 300px;column-gap:18px;-webkit-mask-image:none;mask-image:none}
.tw-card{break-inside:avoid;margin:0 0 18px;--g-spot:0!important;transition:box-shadow .45s var(--ease),opacity .9s var(--ease),transform .9s var(--ease)}
.tw-card::after{display:none}
.tw-card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.35),inset 0 0 28px rgba(255,255,255,.035),0 30px 60px -24px rgba(0,0,0,.7),0 0 46px -10px rgba(154,123,224,.45)}

/* ===== MOBILE FIXES (2026-10-29) ===== */
/* arrow icon in card links had no height, so phones drew it 150px tall */
.svc__link svg{height:12px;flex:none}
@media (max-width:640px){
  /* work tabs: separate pills that wrap, all visible */
  .pf-tabs{flex-wrap:wrap;justify-content:center;gap:8px;width:auto;padding:0;overflow:visible;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .pf-tabs::before,.pf-tabs::after,.pf-tabs__ind{display:none!important}
  .pf-tabs button{padding:9px 14px;font-size:14px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line);transition:color .3s,background .3s}
  .pf-tabs button[aria-selected="true"]{background:#fff;color:#0c0c0d;box-shadow:0 8px 24px -10px rgba(255,255,255,.5)}
  /* Launch Virality service card: no empty band between the copy and the graphic */
  .svc--wide .svc__body{padding-bottom:12px}
  .svc--wide .scene{min-height:0;padding:12px 24px 112px}
  /* personal brand cards: tighter text, bigger phone */
  .pb{padding:24px 20px 0;gap:14px}
  .pb__body{gap:9px;padding-bottom:0}
  .pb__handle{font-size:13.5px}
  .pb__name{font-size:28px}
  .pb__role{font-size:13.5px}
  .pb__big{margin-top:2px;gap:10px}
  .pb__big strong{font-size:46px}
  .pb__big span{font-size:12px}
  .pb__row{gap:20px;padding:10px 0}
  .pb__row b{font-size:18px}
  .pb__row small{font-size:11.5px}
  .pb__what{font-size:13.5px;line-height:1.5}
  .pb__stage{height:430px}
  .pb__phone{width:min(262px,100%)}
}

/* ===== PERFORMANCE PASS 2 (2026-10-29) ===== */
/* 1. scroll reveals and tab switches: fade + rise only, no animated blur */
[data-reveal]{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0) * 70ms)}
[data-reveal]:not(.glass){filter:none}
@keyframes pf-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* 2. glow blobs: the radial gradient is already soft, drop the extra 80px blur filter */
.glow{filter:none;will-change:transform}
/* 3. skip rendering sections far from the viewport (sections already clip their overflow) */
.section{content-visibility:auto;contain-intrinsic-size:auto 900px}
.cv-all .section{content-visibility:visible}
/* 4. lighter frost on phones */
@media (max-width:760px){.glass{--g-blur:12px}.glass--3{--g-blur:14px}.glass--1{--g-blur:7px}}
/* 5. iridescent rim only rotates on hover */
.glass--iri::before{animation-play-state:paused}
.glass--iri:hover::before{animation-play-state:running}

/* case-study slides on phones: smaller copy, shorter stat tiles */
@media (max-width:640px){
  .cs-slide .case__body{gap:12px}
  .cs-slide .case__body h3{font-size:26px}
  .cs-slide .case__body .sub{font-size:15.5px;line-height:1.4}
  .cs-slide .case__body p{font-size:13.5px;line-height:1.55}
  .cs-slide .case__meta{gap:8px;margin-top:2px}
  .cs-slide .metric{padding:10px 12px;border-radius:12px}
  .cs-slide .metric small{font-size:9.5px;margin-bottom:3px}
  .cs-slide .metric strong{font-size:18px}
}