/* =========================================================
   DRVN Social — Homepage v1
   Type: N27 (display) + Space Grotesk (body)
   Palette: monotone. Colour comes from the work + the emojis.
   ========================================================= */

/* N27 Bold Italic with DRVN uniform optical spacing baked in (every letter pair sits the same visible distance apart) */
@font-face{font-family:"N27";src:url("../fonts/N27-BoldItalic-DRVN.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"N27";src:url("../fonts/N27-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"N27";src:url("../fonts/N27-MediumItalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"N27";src:url("../fonts/N27-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"N27";src:url("../fonts/N27-LightItalic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}

:root{
  --ink:#0a0a0a;
  --ink-2:#141414;
  --ink-3:#1f1f1f;
  --paper:#f1f0ec;
  --paper-2:#e4e2dc;
  --grey:#8c8c8c;
  --grey-2:#5c5c5c;
  --line:rgba(255,255,255,.12);
  --line-dark:rgba(10,10,10,.14);
  --display:"N27","Arial Narrow",Arial,sans-serif;
  --body:"Space Grotesk",system-ui,sans-serif;
  --gutter:clamp(16px,3.2vw,48px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#fff;font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em{font-style:normal;color:#fff}
::selection{background:#fff;color:#000}

.wrap{width:100%;max-width:1520px;margin:0 auto;padding:0 var(--gutter)}

.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.7);margin:0 0 24px}
.eyebrow--dark{color:var(--grey-2)}
.rec{width:8px;height:8px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 0 rgba(255,59,48,.6);animation:rec 1.6s infinite}
@keyframes rec{0%{box-shadow:0 0 0 0 rgba(255,59,48,.6)}70%{box-shadow:0 0 0 10px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}

.h-xl{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(48px,8.4vw,150px);line-height:.86;letter-spacing:-.025em;margin:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;height:52px;padding:0 26px;border-radius:999px;font-weight:500;font-size:15px;letter-spacing:.01em;transition:transform .4s var(--ease),background .3s,color .3s;will-change:transform}
.btn--light{background:#fff;color:#000}
.btn--light:hover{background:var(--paper-2)}
.btn--glass{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}
.btn--glass:hover{background:rgba(255,255,255,.18)}
.btn--line{border:1px solid currentColor}
.btn--big{height:64px;padding:0 34px;font-size:17px}
.btn__play{font-size:10px;width:24px;height:24px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;padding-left:2px}

/* =========================================================
   CURSOR
   ========================================================= */
.cursor{position:fixed;inset:0;pointer-events:none;z-index:200}
/* custom cursor waits for a real mouse move, and stays hidden while the opening search bar is centred */
.cursor{opacity:0;transition:opacity .45s var(--ease)}
.cursor.is-live{opacity:1}
html.intro-center .cursor{opacity:0}
html.intro-center body.has-cursor{cursor:auto}
.cursor__dot,.cursor__ring{position:fixed;left:0;top:0;border-radius:50%;transform:translate3d(-100px,-100px,0)}
.cursor__dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff;mix-blend-mode:difference}
.cursor__ring{width:44px;height:44px;margin:-22px 0 0 -22px;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,border-color .35s;mix-blend-mode:difference}
.cursor__label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#000;opacity:0;transition:opacity .2s}
.cursor.is-label .cursor__ring{width:92px;height:92px;margin:-46px 0 0 -46px;background:#fff;border-color:#fff;mix-blend-mode:normal}
.cursor.is-label .cursor__label{opacity:1}
.cursor.is-label .cursor__dot{opacity:0}
.cursor.is-grab .cursor__ring{width:70px;height:70px;margin:-35px 0 0 -35px;border-color:#fff}
/* hovering something clickable: ring grows (44 -> 64px), brightens and picks up a faint fill; dot shrinks */
.cursor__dot{transition:transform 0s,width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),opacity .3s}
.cursor.is-link .cursor__ring{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:rgba(255,255,255,.9);background:rgba(255,255,255,.06)}
.cursor.is-link .cursor__dot{width:4px;height:4px;margin:-2px 0 0 -2px}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
@media (hover:hover) and (pointer:fine){body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}}

/* =========================================================
   GLASS NAV: liquid glass
   Clear body, lens-warped rim, chromatic edge, bright specular rim.
   ========================================================= */
.nav{position:fixed;top:16px;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:0 var(--gutter);pointer-events:none}
.nav__glass{
  position:relative;pointer-events:auto;display:flex;align-items:center;gap:6px;
  height:60px;padding:0 6px 0 22px;border-radius:999px;width:min(800px,100%);
  isolation:isolate;
  background:rgba(255,255,255,.025);
  --nav-drop:0 14px 34px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.16);
  box-shadow:none;  /* drop shadow lives on ::before so the lens never refracts it */
  transition:width .6s var(--ease-out),height .4s var(--ease),transform .5s var(--ease),background .4s;
}
/* the lens itself: what's behind gets bent here */
.nav__refract{position:absolute;inset:-24px;z-index:-3;padding:24px;border-radius:999px;-webkit-mask:linear-gradient(#000 0 0) content-box;mask:linear-gradient(#000 0 0) content-box;
  backdrop-filter:blur(12px) saturate(180%) brightness(1.06);
  -webkit-backdrop-filter:blur(12px) saturate(180%) brightness(1.06)}
.is-refract .nav__refract{backdrop-filter:url(#glass-refract) saturate(150%) brightness(1.08)}
/* thickness: soft inner glow + light pooling at the edges */
.nav__glass::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.28),
    inset 1.5px 2px 1px -1px rgba(255,255,255,.75),
    inset -1.5px -2px 1px -1px rgba(255,255,255,.4),
    inset 0 0 14px rgba(255,255,255,.07),
    inset 0 -10px 18px -12px rgba(255,255,255,.18),
    var(--nav-drop)}
/* specular rim: bright top-left & bottom-right, fades through the sides */
.nav__rim{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;padding:1.2px;
  background:linear-gradient(var(--rim-a,125deg),rgba(255,255,255,.95) 0%,rgba(255,255,255,.18) 22%,rgba(255,255,255,0) 45%,rgba(255,255,255,0) 58%,rgba(255,255,255,.22) 80%,rgba(255,255,255,.8) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* faint iridescence that slides around the rim with the cursor */
.nav__glass::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;padding:1.5px;opacity:.45;
  background:conic-gradient(from var(--hue-a,200deg),#ff7ad9,#8d9bff,#6fe6ff,#b6ffb0,#ffe27a,#ff7ad9);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.nav__sheen{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(140px 70px at var(--mx,30%) var(--my,0%),rgba(255,255,255,.22),transparent 70%)}
.nav__glass:hover .nav__sheen{opacity:1}
.nav.is-scrolled .nav__glass{width:min(740px,100%);height:56px}
.nav.is-hidden .nav__glass{transform:translateY(-120%)}

.nav__logo{display:block;color:#fff;flex:none;margin-right:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));--lh:19.3px;--vbw:688.62}
/* full "DRVN SOCIAL" at the top of the page, collapsing to "DRVN" on scroll (driven by JS) */
.logo-clip{display:block;height:var(--lh);width:calc(var(--lh) * var(--vbw) / 94.89);overflow:hidden}
.logo-clip svg{height:100%;width:auto;display:block;overflow:visible}
.logo-social{will-change:transform}
.nav__tabs{position:relative;display:flex;align-items:center;gap:0;height:44px}
.nav__tab{position:relative;z-index:1;height:40px;display:grid;place-items:center;padding:0 16px;border-radius:999px;font-family:var(--display);font-style:italic;font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:14px;color:rgba(255,255,255,.72);text-shadow:0 1px 2px rgba(0,0,0,.3);transition:color .3s}
.nav__tab:hover,.nav__tab.is-active{color:#fff}
/* active tab = a smaller drop of glass */
.nav__lens{position:absolute;top:2px;left:0;height:40px;width:60px;border-radius:999px;z-index:0;
  background:rgba(255,255,255,.1);
  box-shadow:inset 1px 1.5px 1px -1px rgba(255,255,255,.8),inset -1px -1.5px 1px -1px rgba(255,255,255,.45),inset 0 0 0 .5px rgba(255,255,255,.25),0 3px 10px rgba(0,0,0,.18);
  transition:transform .55s cubic-bezier(.3,1.5,.5,1),width .55s cubic-bezier(.3,1.5,.5,1),scale .3s var(--ease)}
.nav__lens.is-moving{scale:1.12 .9}
/* Start Project: chromatic edge glow (blue / cyan / amber / burnt orange, after the glass-lens reference)
   that follows the cursor around the rim; plus spins clockwise on hover */
@property --ga{syntax:"<angle>";inherits:true;initial-value:0deg}
.nav__cta{position:relative;isolation:isolate;margin-left:6px;height:46px;display:inline-flex;align-items:center;gap:.6em;padding:0 18px 0 20px;border-radius:999px;background:transparent;color:#000;
  font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:14px;flex:none;
  --ga:0deg;--cx:50%;--cy:50%;
  --chroma:conic-gradient(from var(--ga),#1546ff 0deg,#3fd4ff 50deg,rgba(255,255,255,.9) 85deg,#ffb238 125deg,#e2550f 165deg,#1a0a00 200deg,#1546ff 250deg,#5fe1ff 300deg,#ff9a2e 335deg,#1546ff 360deg);
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.15);transition:transform .4s var(--ease-out),box-shadow .4s}
/* thin crisp rim */
.cta__ring{position:absolute;inset:-1.5px;border-radius:inherit;padding:2px;background:var(--chroma);pointer-events:none;opacity:0;transition:opacity .35s var(--ease);
  -webkit-mask:radial-gradient(90px 70px at var(--cx) var(--cy),#000 20%,rgba(0,0,0,.35) 100%),linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:source-in,xor;
  mask:radial-gradient(90px 70px at var(--cx) var(--cy),#000 20%,rgba(0,0,0,.35) 100%) intersect,linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* soft bloom outside the rim, brightest nearest the cursor */
.cta__bg{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#fff;transition:background .4s}
.cta__halo{position:absolute;inset:-7px;z-index:-2;border-radius:inherit;background:var(--chroma);filter:blur(9px);pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  -webkit-mask:radial-gradient(120px 90px at var(--cx) var(--cy),#000 15%,rgba(0,0,0,.25) 100%);
  mask:radial-gradient(120px 90px at var(--cx) var(--cy),#000 15%,rgba(0,0,0,.25) 100%)}
.nav__cta:hover .cta__ring{opacity:1}
.nav__cta:hover .cta__halo{opacity:.85}
.cta__roll{display:block;height:1.15em;line-height:1.15;clip-path:inset(0 -.5em)}
.cta__roll span{display:block;transition:transform .5s var(--ease-out)}
.cta__plus{width:13px;height:13px;flex:none;transition:transform .6s cubic-bezier(.34,1.4,.5,1)}
.nav__cta:hover{transform:translateY(-1px);box-shadow:inset 0 -2px 4px rgba(0,0,0,.08),0 8px 22px rgba(0,0,0,.25)}
.nav__cta:hover .cta__roll span{transform:translateY(-100%)}
.nav__cta:hover .cta__plus{transform:rotate(180deg)}
.nav__cta:active{transform:scale(.97)}
.nav__burger{display:none;width:46px;height:46px;border-radius:50%;position:relative;flex:none;background:rgba(255,255,255,.1);box-shadow:inset 1px 1.5px 1px -1px rgba(255,255,255,.7),inset 0 0 0 .5px rgba(255,255,255,.2)}
.nav__burger span{position:absolute;left:15px;right:15px;height:1.5px;background:#fff;transition:transform .35s var(--ease)}
.nav__burger span:first-child{top:19px}.nav__burger span:last-child{top:26px}
.nav.is-open .nav__burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav.is-open .nav__burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.nav__sheet{display:none}

/* over light sections */
.nav__logo,.nav__tab,.nav__cta,.nav__burger span{transition:color .4s,background .4s}
.nav.is-light .nav__glass{--nav-drop:0 14px 34px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.08)}
.nav.is-light .nav__logo{color:#0a0a0a;filter:none}
.nav.is-light .nav__tab{color:rgba(0,0,0,.62);text-shadow:none}
.nav.is-light .nav__tab:hover,.nav.is-light .nav__tab.is-active{color:#000}
.nav.is-light .nav__lens{background:rgba(255,255,255,.55)}
.nav.is-light .nav__cta{color:#fff}
.nav.is-light .cta__bg{background:#0a0a0a}
.nav.is-light .nav__burger span{background:#000}

@media (max-width:900px){
  .nav__tabs,.nav .nav__cta{display:none}
  .nav__burger{display:block}
  .nav__glass{height:56px;padding:0 5px 0 20px}
  .nav__sheet{display:flex;flex-direction:column;position:absolute;top:70px;left:var(--gutter);right:var(--gutter);padding:12px;border-radius:28px;pointer-events:auto;
    background:rgba(20,20,20,.55);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
    box-shadow:inset 1.5px 2px 1px -1px rgba(255,255,255,.6),inset 0 0 0 .5px rgba(255,255,255,.2);
    opacity:0;transform:translateY(-10px) scale(.98);visibility:hidden;transition:all .35s var(--ease)}
  .nav__sheet a{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:30px;line-height:1;padding:14px 12px;border-bottom:1px solid var(--line)}
  .nav__sheet a:last-child{border:0}
  .nav.is-open .nav__sheet{opacity:1;transform:none;visibility:visible}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--ink)}
.hero__media{position:absolute;inset:0;transform-origin:50% 0;will-change:transform,border-radius}
.hero__video{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.hero__shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 45%,rgba(10,10,10,.82) 86%,var(--ink) 100%),
  radial-gradient(120% 80% at 0% 100%,rgba(0,0,0,.6),transparent 60%)}
.hero__grain{position:absolute;inset:-50%;opacity:.08;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 66%);mask-image:linear-gradient(180deg,#000 55%,transparent 66%);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}

.hero__inner{position:absolute;left:0;right:0;bottom:96px;padding:0 var(--gutter);z-index:3;pointer-events:none}
.hero__inner a,.hero__inner button{pointer-events:auto}
.hero__eyebrow{margin-bottom:18px}
.hero__title{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(64px,13.6vw,250px);line-height:.82;letter-spacing:-.035em;margin:0 0 28px;will-change:transform}
.hero__title .line{display:block;overflow:hidden;padding:0 .06em .02em 0}
.hero__title .line--indent{padding-left:.9em}
.hero__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.hero__lede{max-width:520px;margin:0;font-size:clamp(16px,1.35vw,20px);color:rgba(255,255,255,.78)}
.hero__actions{display:flex;gap:10px;flex-wrap:wrap}
.hero__hint{position:absolute;right:var(--gutter);top:96px;z-index:3;margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* split text intro */
.split .ch{display:inline-block;transform:translateY(105%) rotate(6deg);opacity:0;transition:transform 1s var(--ease-out),opacity .6s}
.split .sp{display:inline-block;width:.24em}
.split .wd{display:inline-block;white-space:nowrap}
.is-in .split .ch,.split.is-in .ch{transform:none;opacity:1}

/* ticker: client logomarks, all white */
.ticker{position:absolute;left:0;right:0;bottom:0;z-index:3;height:64px;overflow:hidden;display:flex;align-items:center;background:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__track{display:flex;width:max-content;animation:marq 42s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__set{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.ticker__set li{flex:none;display:flex;align-items:center;justify-content:center;padding:0 clamp(32px,4.2vw,64px);height:64px}
.ticker__set img{display:block;height:30px;width:auto;max-width:none;flex:none;opacity:.85;transition:opacity .35s var(--ease),filter .35s var(--ease),transform .45s var(--ease-out)}
.ticker__set li:hover img{opacity:1;transform:scale(1.08);filter:drop-shadow(0 0 8px rgba(255,255,255,.45))}
.ticker__set li{cursor:none}
/* client name pill that rides the cursor */
.client-tip{position:fixed;left:0;top:0;z-index:210;pointer-events:none;transform:translate3d(-200px,-200px,0);will-change:transform}
.client-tip span{display:block;transform:translate(-50%,-100%) translateY(-30px) scale(.6);transform-origin:50% 100%;opacity:0;white-space:nowrap;padding:8px 14px 7px;border-radius:999px;background:rgba(10,10,10,.28);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);border:1px solid rgba(255,255,255,.85);color:#fff;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:12px;line-height:1;letter-spacing:-.01em;box-shadow:0 8px 24px rgba(0,0,0,.25),inset 0 0 12px rgba(255,255,255,.06);text-shadow:0 0 8px rgba(255,255,255,.35);transition:opacity .25s var(--ease),transform .45s var(--ease-out)}
.client-tip.is-on span{opacity:1;transform:translate(-50%,-100%) translateY(-30px) scale(1)}
@keyframes marq{to{transform:translateX(-50%)}}

/* =========================================================
   STICKERS (reactive emojis)
   ========================================================= */
.stickers{position:absolute;inset:0;z-index:4;pointer-events:none}
.stickers .sticker{pointer-events:auto}
.sticker{position:absolute;left:0;top:0;will-change:transform;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.sticker svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45)) drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.sticker.is-drag{cursor:grabbing;z-index:5}
.sticker.is-drag svg{filter:drop-shadow(0 34px 40px rgba(0,0,0,.5))}
.sticker.is-pop svg{animation:pop .5s var(--ease-out)}
@keyframes pop{0%{transform:scale(1)}30%{transform:scale(1.35) rotate(-8deg)}60%{transform:scale(.9) rotate(4deg)}100%{transform:scale(1)}}
.chip{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 8px;border-radius:999px;font-weight:600;font-size:16px;white-space:nowrap;color:#fff;
  background:linear-gradient(180deg,#ff4d6d,#e0123c);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 18px 30px rgba(0,0,0,.35)}
.chip__ico{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:14px}
.chip--light{background:linear-gradient(180deg,#fff,#e9e9e9);color:#000}
.chip--light .chip__ico{background:#000;color:#fff}
.burst{position:absolute;pointer-events:none;z-index:6;font-size:22px;will-change:transform,opacity}

/* =========================================================
   MANIFESTO
   ========================================================= */
.manifesto{position:relative;height:260vh;background:var(--ink)}
.manifesto__pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);max-width:1520px;margin:0 auto}
.manifesto__text{font-family:var(--display);font-weight:700;font-style:italic;font-size:clamp(34px,5.6vw,96px);line-height:.98;letter-spacing:-.02em;margin:0;text-transform:none}
.manifesto__text .w{color:rgba(255,255,255,.14);transition:color .35s}
.manifesto__text .w.on{color:#fff}
.manifesto__text .w.hl{transition:color .35s,text-shadow 1.1s var(--ease)}
.manifesto__text .w.hl.on{text-shadow:0 0 1px rgba(255,255,255,.35),-1.2px 0 5px rgba(70,140,255,.8),1.2px 0 5px rgba(255,170,90,.5),0 0 16px rgba(110,200,255,.22)}
.inline-emoji{display:inline-block;width:.9em;height:.9em;vertical-align:-.08em;margin:0 .04em;transform:scale(0) rotate(-30deg);transition:transform .6s cubic-bezier(.34,1.8,.5,1)}
.inline-emoji.on{transform:scale(1) rotate(0)}
.inline-emoji svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4))}

/* =========================================================
   KINETIC BAND
   ========================================================= */
.band{padding:6vh 0 10vh;overflow:hidden;background:var(--ink)}
.band__row{display:flex;align-items:center;gap:.35em;white-space:nowrap;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(72px,14vw,260px);line-height:.95;letter-spacing:-.03em;will-change:transform}
.band__row--outline{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.5);font-size:clamp(56px,10vw,190px)}
.band__emoji{display:inline-block;width:.8em;height:.8em;flex:none;transform:rotate(var(--r,0deg))}
.band__emoji svg{width:100%;height:100%;overflow:visible}

/* =========================================================
   SERVICES
   ========================================================= */
.services{background:var(--paper);color:var(--ink);padding:clamp(80px,12vw,180px) 0;border-radius:40px 40px 0 0;position:relative;z-index:2}
.services em{color:var(--ink)}
.section-head{display:grid;gap:28px;margin-bottom:clamp(48px,7vw,100px);max-width:1100px}
.section-head--row{grid-template-columns:1fr minmax(0,420px);align-items:end;max-width:none}
.section-head__lede{margin:0;font-size:clamp(17px,1.4vw,21px);max-width:520px;color:inherit;opacity:.72}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillar{position:relative;background:#fff;border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:16px;box-shadow:0 1px 0 rgba(0,0,0,.04);transition:transform .5s var(--ease),box-shadow .5s}
.pillar:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
.pillar__num{font-family:var(--display);font-style:italic;font-weight:700;font-size:15px;color:var(--grey)}
.pillar h3{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:clamp(40px,4vw,64px);line-height:.9;letter-spacing:-.02em;margin:8px 0 0}
.pillar p{margin:0;color:#3a3a3a}
.tags{list-style:none;margin:auto 0 0;padding:12px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--line-dark)}
.pillar__ui{height:220px;border-radius:18px;background:var(--ink);color:#fff;position:relative;overflow:hidden}

/* create: viewfinder */
.vf{position:absolute;inset:18px;background:
  linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.5)),
  url(https://cdn.prod.website-files.com/69e329615752288e8bdb6468/6abeab33be35be70772abb17_APOL_HERO.jpg) center/cover,#222;border-radius:6px;font-size:11px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.vf i{position:absolute;width:18px;height:18px;border:2px solid #fff}
.vf i:nth-child(1){top:10px;left:10px;border-right:0;border-bottom:0}
.vf i:nth-child(2){top:10px;right:10px;border-left:0;border-bottom:0}
.vf i:nth-child(3){bottom:10px;left:10px;border-right:0;border-top:0}
.vf i:nth-child(4){bottom:10px;right:10px;border-left:0;border-top:0}
.vf__rec{position:absolute;top:14px;left:38px;color:#ff3b30;animation:blink 1s steps(2) infinite}
.vf__tc{position:absolute;bottom:14px;left:38px}
.vf__ratio{position:absolute;top:14px;right:38px;opacity:.8}
@keyframes blink{50%{opacity:0}}

/* activate: orbit */
.orbit{position:absolute;inset:0;display:grid;place-items:center}
.orbit__core{width:74px;height:74px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-family:var(--display);font-style:italic;font-weight:700;font-size:15px;z-index:2;box-shadow:0 0 0 12px rgba(255,255,255,.06),0 0 0 26px rgba(255,255,255,.04)}
.orbit__p{position:absolute;left:50%;top:50%;font-size:12px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);white-space:nowrap;
  animation:orbit 14s linear infinite;animation-delay:calc(var(--a) * -2.8s)}
@keyframes orbit{
  from{transform:translate(-50%,-50%) rotate(0deg) translateX(min(125px,28vw)) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg) translateX(min(125px,28vw)) rotate(-360deg)}}

/* convert: bars */
.bars{position:absolute;inset:26px 26px 22px;display:flex;align-items:flex-end;gap:8px;border-bottom:1px solid rgba(255,255,255,.2)}
.bars i{flex:1;height:var(--h);background:linear-gradient(180deg,#fff,rgba(255,255,255,.25));border-radius:6px 6px 0 0;transform-origin:bottom;transform:scaleY(.05);transition:transform 1.2s var(--ease-out)}
.bars i:nth-child(2){transition-delay:.08s}.bars i:nth-child(3){transition-delay:.16s}.bars i:nth-child(4){transition-delay:.24s}.bars i:nth-child(5){transition-delay:.32s}.bars i:nth-child(6){transition-delay:.4s}.bars i:nth-child(7){transition-delay:.48s}
.is-in .bars i{transform:scaleY(1)}
.bars__pill{position:absolute;top:0;left:0;font-size:12px;font-weight:600;background:#fff;color:#000;padding:6px 10px;border-radius:999px}

/* =========================================================
   SCALE (pinned horizontal)
   ========================================================= */

/* =========================================================
   STATS
   ========================================================= */
.stats{padding:clamp(60px,10vw,140px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stat{display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--line);padding-left:24px}
.stat__n{font-family:var(--display);font-weight:700;font-style:italic;font-size:clamp(64px,9vw,160px);line-height:.85;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{color:rgba(255,255,255,.6);font-size:15px}

/* =========================================================
   WORK
   ========================================================= */

/* =========================================================
   FEED
   ========================================================= */
.phone{position:absolute;width:clamp(160px,16vw,250px);aspect-ratio:9/19;border-radius:34px;background:#000;padding:8px;
  box-shadow:0 0 0 1.5px #2a2a2a inset,0 40px 80px -20px rgba(0,0,0,.45);transform-style:preserve-3d;transition:transform .6s var(--ease)}
.phone video{width:100%;height:100%;object-fit:cover;border-radius:27px;background:#1a1a1a}
.phone::before{content:"";position:absolute;top:16px;left:50%;width:30%;height:18px;border-radius:999px;background:#000;transform:translateX(-50%);z-index:2}
.phone__ui{position:absolute;inset:8px;border-radius:27px;pointer-events:none;color:#fff;font-size:13px;font-weight:600}
.phone__views{position:absolute;left:14px;bottom:16px;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:5px 10px;border-radius:999px}
.phone__side{position:absolute;right:12px;bottom:70px;display:flex;flex-direction:column;gap:14px;font-style:normal;text-align:center;font-size:18px;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.phone__side i{font-style:normal}
.reactions{position:absolute;inset:0;pointer-events:none;z-index:5}
.reaction{position:absolute;bottom:10%;width:46px;height:46px;will-change:transform,opacity}
.reaction svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}

/* =========================================================
   CTA + FOOTER
   ========================================================= */
.cta{position:relative;padding:clamp(100px,16vw,220px) 0 clamp(80px,10vw,140px);overflow:hidden}
.cta__trail{position:absolute;inset:0;pointer-events:none;z-index:0}
.cta .wrap{position:relative;z-index:1}
.cta__title{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(64px,13vw,240px);line-height:.84;letter-spacing:-.035em;margin:0 0 56px}
.cta__title a{display:inline-block;transition:transform .6s var(--ease)}
.cta__title a:hover{transform:skewX(-4deg)}
.cta__row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.cta__row p{max-width:520px;margin:0;color:rgba(255,255,255,.7);font-size:clamp(17px,1.4vw,20px)}
.trail-emoji{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;pointer-events:none;will-change:transform,opacity}
.trail-emoji svg{width:100%;height:100%;overflow:visible}

.footer{border-top:1px solid var(--line);padding:56px 0 28px;font-size:15px}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;align-items:start}
.footer__logo{width:120px;height:auto}
.footer__k{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:8px}
.footer a:hover{opacity:.6}
.footer__base{display:flex;justify-content:space-between;margin-top:64px;font-size:13px;color:rgba(255,255,255,.45)}

/* modal */
.modal{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:5vw;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.modal.is-open{opacity:1;visibility:visible}
.modal video{width:100%;max-height:86vh;border-radius:16px;background:#000}
.modal__close{position:absolute;top:22px;right:22px;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);font-size:18px}

/* generic reveal */
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
.pillars [data-reveal]:nth-child(2){transition-delay:.12s}
.pillars [data-reveal]:nth-child(3){transition-delay:.24s}
.stats [data-reveal]:nth-child(2){transition-delay:.1s}
.stats [data-reveal]:nth-child(3){transition-delay:.2s}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .pillars{grid-template-columns:1fr}
  .pillar{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
  .pillar__ui{grid-row:span 4}
}
@media (max-width:900px){
  body{font-size:16px}
  .hero{min-height:600px}
  .hero__inner{bottom:72px}
  .hero__title{font-size:14.2vw;margin-bottom:22px}
  .hero__title .line--indent{padding-left:.5em}
  .cta__title{font-size:14vw}
  .hero__hint{display:none}
  .section-head--row{grid-template-columns:1fr}
  .pillar{display:flex}
  .pillar__ui{height:190px}
  .stats__grid{grid-template-columns:1fr;gap:40px}
  .phone{width:clamp(140px,40vw,230px)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__logo{grid-column:1/-1}
  .footer__base{flex-direction:column;gap:6px}
  .manifesto{height:220vh}
  .services{border-radius:28px 28px 0 0}
}
@media (max-width:520px){
  .hero__actions .btn{height:48px;padding:0 20px}
  .chip{height:36px;font-size:13px;padding:0 12px 0 6px}
  .chip__ico{width:24px;height:24px}
}

/* =========================================================
   DISPLAY TYPE: one rule for every N27 element
   Always caps + italic, kerning on, tracking pulled in tight so the
   uneven built-in letter spacing of N27 closes up and reads evenly.
   ========================================================= */
:root{--track-xl:-.055em;--track-l:-.045em;--track-m:-.03em;--track-s:-.01em}
.hero__title,.cta__title,.band__row,.h-xl,.manifesto__text,.wlist__t,.stat__n,.pillar h3,.lw__name,
.pillar__num,.orbit__core,.nav__tab,.nav__cta,.nav__sheet a{
  font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-kerning:normal;font-feature-settings:"kern" 1;text-rendering:optimizeLegibility}
.hero__title,.cta__title,.band__row{letter-spacing:var(--track-xl)}
.h-xl,.stat__n,.manifesto__text{letter-spacing:var(--track-l)}
.nav__tab,.nav__cta{letter-spacing:var(--track-s)}
.manifesto__text{line-height:.92}

/* =========================================================
   NAV: quieter active state + light frost for legibility
   ========================================================= */
/* no pill: the current page is set in full-weight white, the rest step back */
.nav__lens{display:none}
.nav__tab{padding:0 14px;font-weight:500;color:#fff;opacity:.5;transition:opacity .35s var(--ease),color .4s}
.nav__tab:hover{opacity:.8}
.nav__tab.is-active{font-weight:700;opacity:1}
/* reserve the bold width so tabs don't shift when the weight changes */
.nav__tab{display:inline-grid}
.nav__tab::after{content:attr(data-label);font-weight:700;height:0;visibility:hidden;overflow:hidden;grid-area:1/1}
.nav__tab>span{grid-area:1/1}
.nav.is-light .nav__tab{color:#000}
/* tabs roll their label on hover, same as Start Project, with a soft white glow */
.tab__roll{display:block;height:1.15em;line-height:1.15;clip-path:inset(0 -.5em)}  /* clip top/bottom only: italics can overhang the sides */
.tab__roll span{display:block;transition:transform .5s var(--ease-out)}
.nav__tab:hover .tab__roll span{transform:translateY(-100%)}
.nav__tab{transition:opacity .35s var(--ease),color .4s,filter .4s var(--ease)}
.nav__tab:hover{opacity:1;filter:drop-shadow(0 0 6px rgba(255,255,255,.55)) drop-shadow(0 0 14px rgba(255,255,255,.25))}
.nav.is-light .nav__tab:hover{filter:drop-shadow(0 0 6px rgba(255,255,255,.9)) drop-shadow(0 0 12px rgba(0,0,0,.12))}
/* legibility without losing the lens: the glass stays crisp (all the bending lives at the rim),
   and a soft frost sits only behind the text in the middle, fading out well before the edges */
/* tint sits on ::before (painted above the lens) so the glass never "sees" its own edge */
.nav__glass,.nav.is-light .nav__glass{background:transparent}
.nav__glass::before{background:var(--nav-tint,rgba(12,12,12,.06))}
.nav.is-light .nav__glass{--nav-tint:rgba(255,255,255,.06)}
.nav__frost{position:absolute;inset:6px 10px;z-index:-1;border-radius:inherit;pointer-events:none;
  backdrop-filter:blur(3px) saturate(120%);-webkit-backdrop-filter:blur(3px) saturate(120%);
  background:rgba(10,10,10,.16);
  -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent) intersect,linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent)}
.nav.is-light .nav__frost{background:rgba(255,255,255,.22)}

/* hero headline sized so "WHERE CONTENT" holds one line */
/* hero line: four words, staggered left -> right, CONTENT/CONVERSION in heavy, connectors in light.
   Lines alternate direction as they leave on scroll (JS sets --slide). */
.hero__inner{top:0;padding-top:92px;display:flex;flex-direction:column}
.hero__title{font-size:min(9.6vw,15.5vh,170px);line-height:.84;text-align:center;margin:auto;transform:none!important;width:100%}
.hero__title .line{padding:0 .06em .02em;--dir:1;--spd:1;transform:translate3d(calc(var(--x) + var(--dir) * var(--spd) * var(--slide,0) * 1px),0,0)}
/* zig-zag stagger (not a staircase); each word leaves at its own speed, alternating direction */
.hero__title .l1{--x:-3vw;--dir:-1;--spd:1.3}
.hero__title .l2{--x:-12vw;--dir:1;--spd:.8}
.hero__title .l3{--x:11vw;--dir:-1;--spd:1.6}
.hero__title .l4{--x:6vw;--dir:1;--spd:1.05}
/* frosted words: same heavy weight, knocked back with a soft top-to-bottom fade (mask on the whole word,
   padded so italic overhangs are never trimmed) */
.hero__title .line{padding:0 .22em .04em}
.hero__title .is-frost .ch{color:rgba(255,255,255,.62)}
.hero__title .is-frost{-webkit-mask-image:linear-gradient(180deg,#000 8%,rgba(0,0,0,.62) 52%,rgba(0,0,0,.22) 100%);mask-image:linear-gradient(180deg,#000 8%,rgba(0,0,0,.62) 52%,rgba(0,0,0,.22) 100%)}
/* CONTENT / CONVERSION: solid white letters; a liquid-glass glow hugs the edges of the letters nearest the cursor (JS sets --e per letter) */
.hero__title .line .ch{color:#fff;
  text-shadow:0 0 calc(var(--e,0) * 2px) rgba(255,255,255,calc(var(--e,0) * .55)),
    calc(var(--e,0) * -1.2px) 0 calc(var(--e,0) * 6px) rgba(70,140,255,calc(var(--e,0) * .85)),
    calc(var(--e,0) * 1.2px) 0 calc(var(--e,0) * 6px) rgba(255,170,90,calc(var(--e,0) * .55)),
    0 0 calc(var(--e,0) * 22px) rgba(110,200,255,calc(var(--e,0) * .45))}
@media (max-width:900px){.hero__title{font-size:min(14vw,11vh)}.hero__title .l1{--x:-4vw}.hero__title .l2{--x:-9vw}.hero__title .l3{--x:9vw}.hero__title .l4{--x:2vw}}

/* hero 3D glass objects (WebGL canvas, see glass3d.js) */
.glass3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}

/* =========================================================
   BUTTONS: one system
   ========================================================= */
/* white buttons reuse the Start Project build (.nav__cta) */
.nav__cta.is-btn{margin-left:0}
.nav__cta.btn--big{height:60px;padding:0 24px 0 28px;font-size:16px}
.nav__cta.btn--big .cta__plus{width:15px;height:15px}
/* outline buttons are small pieces of the nav's liquid glass */
.gbtn{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.6em;height:46px;padding:0 20px;font-size:14px;border-radius:999px;color:#fff;background:transparent;border:0;
  --nav-drop:0 14px 34px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.16);transition:transform .4s var(--ease-out)}
.gbtn::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;background:rgba(12,12,12,.06);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.28),inset 1.5px 2px 1px -1px rgba(255,255,255,.75),inset -1.5px -2px 1px -1px rgba(255,255,255,.4),inset 0 0 14px rgba(255,255,255,.07),inset 0 -10px 18px -12px rgba(255,255,255,.18),var(--nav-drop)}
.gbtn::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;padding:1.5px;opacity:.45;
  background:conic-gradient(from var(--hue-a,200deg),#ff7ad9,#8d9bff,#6fe6ff,#b6ffb0,#ffe27a,#ff7ad9);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.gbtn .nav__frost{inset:4px 8px}
.gbtn:hover .nav__sheen{opacity:1}
.gbtn:hover{transform:translateY(-1px)}
.gbtn:active{transform:scale(.97)}
.gbtn__label{display:block;transition:filter .4s var(--ease)}  /* glow lives outside the roll's clip */
.gbtn .tab__roll span{transition:transform .5s var(--ease-out)}
.gbtn:hover .tab__roll span{transform:translateY(-100%)}
.gbtn:hover .gbtn__label{filter:drop-shadow(0 0 6px rgba(255,255,255,.55)) drop-shadow(0 0 14px rgba(255,255,255,.25))}
.gbtn .btn__play{width:22px;height:22px;font-size:9px;font-style:normal;transition:transform .6s cubic-bezier(.34,1.4,.5,1)}
.gbtn:hover .btn__play{transform:scale(1.12)}
/* every button label: N27 bold italic caps */
.nav__cta,.gbtn,.react-btn,.btn{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:var(--track-s);font-kerning:normal}
@media (max-width:520px){.hero__actions .nav__cta,.hero__actions .gbtn{height:48px;padding:0 18px}}

/* =========================================================
   OPENING SEQUENCE  (html.intro + stage classes, driven by main.js)
   1 search bar in the centre, logo types  ->  2 bar lifts + expands into the nav
   3 headline animates in  ->  4 everything else fades up
   ========================================================= */
html.intro{overflow:hidden}
html.intro .nav{transition:transform 1.15s cubic-bezier(.75,0,.2,1)}
html.intro-center .nav{transform:translate3d(0,calc(50vh - 16px - 30px),0)}
html.intro-1 .nav__glass{width:min(360px,calc(100vw - 32px));animation:introPop .7s cubic-bezier(.2,.9,.25,1.15) both}
/* hold the pop-in until the 3D icons have finished starting up (that work briefly blocks the page) */
html.intro-1:not(.intro-go) .nav__glass{animation-play-state:paused}
html.intro-2 .nav__glass{transition:width .95s cubic-bezier(.65,0,.25,1),height .4s var(--ease)}
@keyframes introPop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
/* hide what isn't the logo until the bar opens up */
html.intro .nav__tabs,html.intro .nav__cta,html.intro .nav__burger{transition:opacity .6s var(--ease)}
html.intro-1 .nav__tabs,html.intro-1 .nav__burger{opacity:0;pointer-events:none}
html.intro-2 .nav__tabs{transition-delay:.45s}
html.intro-2 .nav__burger{transition-delay:.95s}
html.intro-1 .nav__logo svg path{opacity:0}
html.intro .nav__logo svg path{transition:none}
.nav__logo{position:relative}
/* the bar's right-hand end: Start Project as a white circle with the plus, which grows into the button */
html.intro .nav__cta{transition:opacity .5s var(--ease),padding .95s cubic-bezier(.65,0,.25,1),gap .95s cubic-bezier(.65,0,.25,1)}
html.intro .cta__roll{transition:max-width .95s cubic-bezier(.65,0,.25,1),opacity .5s var(--ease)}
html.intro .nav__cta{min-width:46px;justify-content:center}
html.intro-1 .nav__cta{opacity:1;padding:0;gap:0;pointer-events:none;transition-delay:.35s}
html.intro-1 .cta__roll{max-width:0;opacity:0}
html.intro-2 .cta__roll{max-width:160px;opacity:1;transition-delay:0s,.25s}
html.intro-2 .nav__cta{transition-delay:0s,0s,0s}
/* tabs open out alongside the bar so nothing jumps */
html.intro-1 .nav__tabs{max-width:0;overflow:hidden}
html.intro-2 .nav__tabs{max-width:280px;overflow:hidden;transition:opacity .6s var(--ease) .45s,max-width .95s cubic-bezier(.65,0,.25,1)}
.logo-caret{position:absolute;top:-3px;bottom:-3px;left:0;width:2px;border-radius:2px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.6);display:none;transition:none}
html.intro .logo-caret{display:block;animation:caret 1s steps(1) infinite}
html.intro .logo-caret.is-typing{animation:none}
html.intro:not(.intro-center) .logo-caret{display:none}
@keyframes caret{50%{opacity:0}}
/* the rest of the hero waits, then fades up */
html.intro .hero__media,html.intro #heroStickers,html.intro .hero__foot,html.intro .ticker{opacity:0;transition:opacity 1.1s var(--ease)}
html.intro .hero__foot{transform:translateY(16px);transition:opacity 1s var(--ease),transform 1.1s var(--ease-out)}
html.intro-4 .hero__media,html.intro-4 #heroStickers,html.intro-4 .ticker{opacity:1}
html.intro-4 .hero__foot{opacity:1;transform:none;transition-delay:.2s}
html.intro-4 .ticker{transition-delay:.35s}

/* =========================================================
   BODY TYPE: Space Grotesk, refined
   ~11% smaller, tracking pulled in, Light for running text, SemiBold for highlighted words
   ========================================================= */
body{font-size:15px;font-weight:300;letter-spacing:-.012em;line-height:1.55}
em,strong{font-weight:600;letter-spacing:-.018em}
.hero__lede{font-size:clamp(14.5px,1.2vw,17.5px)}
.section-head__lede{font-size:clamp(15px,1.22vw,18.5px)}
.cta__row p{font-size:clamp(15px,1.22vw,17.5px)}
.pillar p{font-size:14.5px}
.stat span{font-size:13.5px}
.tags li{font-size:12px;font-weight:400}
.footer{font-size:13.5px}
.footer__k{font-weight:400}
.footer a{font-weight:400}
.eyebrow{font-size:11px;font-weight:400;letter-spacing:.17em}

.phone__ui{font-weight:600}
@media (max-width:900px){body{font-size:14.5px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .split .ch{transform:none;opacity:1}
  [data-reveal]{opacity:1;transform:none}
}

/* =========================================================
   GLASS EMOJIS (filmstrips baked by glass3d.js)
   ========================================================= */
.gem{display:block;width:100%;height:100%;position:relative;background:var(--g) 0 0/2400% 100% no-repeat;
  animation:gemWobble 2.6s steps(23) infinite alternate;opacity:0;transition:opacity .6s var(--ease)}
html.gem-ready .gem{opacity:1}
.gem__fb{display:none}
html.gem-fail .gem{background:none;opacity:1;animation:none}
html.gem-fail .gem__fb{display:block;width:100%;height:100%}
.gem__fb svg{width:100%;height:100%;overflow:visible}
@keyframes gemWobble{to{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.gem{animation:none!important;background-position:47.8% 0}}
.band__emoji{width:1em;height:1em;margin:0 -.05em}
.band__emoji .gem{filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.reaction .gem,.trail-emoji .gem{filter:drop-shadow(0 8px 14px rgba(0,0,0,.3))}
.reaction{width:54px;height:54px}
.trail-emoji{width:64px;height:64px;margin:-32px 0 0 -32px}

/* =========================================================
   FROSTED BAND ROW (matches "Where" / "meets")
   ========================================================= */
.band__row--outline{color:rgba(255,255,255,.62);-webkit-text-stroke:0;
  -webkit-mask-image:linear-gradient(180deg,#000 8%,rgba(0,0,0,.62) 52%,rgba(0,0,0,.22) 100%);mask-image:linear-gradient(180deg,#000 8%,rgba(0,0,0,.62) 52%,rgba(0,0,0,.22) 100%)}

/* manifesto: find out more appears once the whole line is lit */
.manifesto__more{margin-top:clamp(28px,4vh,48px);opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .9s var(--ease-out);pointer-events:none}
.manifesto__more.is-on{opacity:1;transform:none;pointer-events:auto}

/* cursor on light backgrounds */
.cursor.is-dark .cursor__dot{background:#000;mix-blend-mode:normal}
.cursor.is-dark .cursor__ring{border-color:rgba(0,0,0,.55);mix-blend-mode:normal}
.cursor.is-dark.is-link .cursor__ring{border-color:rgba(0,0,0,.85);background:rgba(0,0,0,.05)}
.cursor.is-dark.is-label .cursor__ring{background:#000;border-color:#000}
.cursor.is-dark .cursor__label{color:#fff}
.cursor.is-dark.is-grab .cursor__ring{border-color:#000}

/* =========================================================
   LATEST WORK: collapsing client panels
   ========================================================= */
.latest{background:var(--ink);padding:clamp(90px,12vw,170px) 0 clamp(80px,10vw,140px)}
.lw{margin-top:clamp(36px,5vw,64px)}
.lw__track{display:flex;height:clamp(380px,62vh,720px);padding:0 calc(var(--gutter) - 5px);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.lw__panel{--w:0%;position:relative;flex:0 0 var(--w);min-width:0;margin:0;border-radius:18px;overflow:hidden;background:#151515;cursor:pointer;
  transition:flex-basis .9s cubic-bezier(.65,0,.25,1),margin .9s cubic-bezier(.65,0,.25,1),border-radius .6s var(--ease)}
.lw__panel.v{margin:0 5px}
.lw__panel.d0{--w:calc(60% - 10px);cursor:default}
.lw__panel.d1{--w:calc(13% - 10px)}
.lw__panel.d2{--w:calc(7% - 10px)}
.lw__img{position:absolute;inset:0;background:#222 center/cover no-repeat;transform:scale(1.08);transition:transform 1.4s var(--ease-out),filter .9s var(--ease)}
.lw__panel:not(.d0) .lw__img{filter:saturate(.75) brightness(.8)}
.lw__panel:not(.d0):hover .lw__img{filter:none;transform:scale(1.12)}
.lw__panel.d0 .lw__img{transform:scale(1)}
.lw__panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 26%,transparent 52%,rgba(0,0,0,.72) 100%);opacity:0;transition:opacity .8s var(--ease);pointer-events:none}
.lw__panel.d0::after{opacity:1}
.lw__top,.lw__stats{position:absolute;left:clamp(20px,2.6vw,40px);right:clamp(20px,2.6vw,40px);z-index:1;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .7s var(--ease-out);pointer-events:none;white-space:nowrap}
.lw__panel.d0 .lw__top,.lw__panel.d0 .lw__stats{opacity:1;transform:none;transition-delay:.55s}
.lw__panel.d0 .lw__stats{transition-delay:.7s}
.lw__top{top:clamp(20px,2.6vw,36px);display:flex;align-items:center;gap:14px}
.lw__logo{height:34px;width:auto;max-width:none;flex:none;opacity:.95}
.lw__k-unused{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.lw__name{margin:4px 0 0;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(20px,2vw,32px);line-height:.95}
.lw__stats{bottom:clamp(22px,2.8vw,40px);display:flex;align-items:stretch}
.lw__stat{display:flex;flex-direction:column;gap:6px;padding:0 clamp(18px,2.4vw,36px);border-left:1px solid rgba(255,255,255,.35)}
.lw__stat:first-child{padding-left:0;border-left:0}
.lw__stat b{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(34px,3.6vw,58px);line-height:.9;letter-spacing:var(--track-m,-.02em)}
.lw__stat span{font-size:clamp(11px,.95vw,14px);letter-spacing:.04em;text-transform:uppercase;opacity:.85}
.lw__nav{display:flex;justify-content:center;gap:14px;margin-top:clamp(24px,3vw,36px)}
.lw__arrow{width:62px;height:62px;border-radius:50%;border:1px solid rgba(255,255,255,.6);color:#fff;background:transparent;display:grid;place-items:center;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s,transform .35s var(--ease-out)}
.lw__arrow svg{width:24px;height:24px}
.lw__arrow:hover{background:#fff;color:#000;border-color:#fff}
.lw__arrow:active{transform:scale(.94)}
@media (max-width:900px){
  .lw__panel.d0{--w:calc(80% - 10px)}.lw__panel.d1{--w:calc(10% - 10px)}.lw__panel.d2{--w:0%}
  .lw__panel.d2.v{margin:0}
  .lw__stats{flex-wrap:wrap;row-gap:14px;white-space:normal}
  .lw__stat{padding:0 14px}
  .lw__logo{height:26px}
}
@media (prefers-reduced-motion:reduce){.lw__panel,.lw__img{transition:none}}

/* latest work: logo only, service pills top right */
.lw__top{right:auto}
.lw__logo{height:38px}
.lw__wordmark{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:18px;line-height:1}
.lw__tags{position:absolute;top:clamp(20px,2.6vw,36px);right:clamp(20px,2.6vw,36px);z-index:1;display:flex;gap:6px;margin:0;padding:0;list-style:none;
  opacity:0;transform:translateY(-8px);transition:opacity .5s var(--ease),transform .7s var(--ease-out);pointer-events:none}
.lw__panel.d0 .lw__tags{opacity:1;transform:none;transition-delay:.6s}
.lw__tags li{padding:6px 12px 5px;border-radius:999px;border:1px solid rgba(255,255,255,.7);background:rgba(10,10,10,.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.latest__aside{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
@media (max-width:900px){.lw__tags{display:none}.lw__panel.d0 .lw__tags{display:flex;top:auto;bottom:118px;left:20px;right:auto;flex-wrap:wrap}}

/* =========================================================
   FEED — parallax phones around a big centred title, on black
   ========================================================= */
.feed{position:relative;background:var(--ink);height:280vh}
.feed__pin{position:sticky;top:0;height:100vh;overflow:hidden}
.feed__layer{position:absolute;inset:0;pointer-events:none}
.feed__layer--back{z-index:1}
.feed__layer--front{z-index:3}
.feed__copy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gutter);pointer-events:none}
.feed__copy .eyebrow{margin-bottom:22px}
.feed__title{margin:0;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:min(13vw,19vh,230px);line-height:.82;letter-spacing:var(--track-xl,-.035em)}
.feed__title .line{display:block;padding:0 .12em .04em}
.feed__title .line:not(.is-frost) .ch{color:#fff}
.feed__title .is-frost .ch{color:rgba(255,255,255,.62)}
.feed__title .is-frost{-webkit-mask-image:linear-gradient(180deg,#000 8%,rgba(0,0,0,.62) 52%,rgba(0,0,0,.22) 100%);mask-image:linear-gradient(180deg,#000 8%,rgba(0,0,0,.62) 52%,rgba(0,0,0,.22) 100%)}
.feed__title[data-reveal]{opacity:1;transform:none}
.feed__lede{margin:26px 0 0;max-width:440px;font-size:15px;color:rgba(255,255,255,.7)}
.fphone{position:absolute;left:var(--x);top:0;width:var(--w);will-change:transform}
.fphone__in{position:relative;aspect-ratio:9/19;border-radius:calc(var(--w) * .15);background:#000;padding:calc(var(--w) * .032);
  box-shadow:0 0 0 1.5px #2c2c2c inset,0 0 0 1px rgba(255,255,255,.06),0 50px 90px -30px rgba(0,0,0,.8);transform:rotate(var(--rz,0deg))}
.fphone__in::before{content:"";position:absolute;top:calc(var(--w) * .06);left:50%;width:30%;height:calc(var(--w) * .07);border-radius:999px;background:#000;transform:translateX(-50%);z-index:2}
.fphone video{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--w) * .12);background:#1a1a1a}
.fphone .phone__ui{inset:calc(var(--w) * .032);border-radius:calc(var(--w) * .12)}
.feed__layer--back .fphone{filter:brightness(.62) saturate(.85) blur(.6px)}
/* positions: --x across the frame, --y start (vh below the fold), --s parallax speed */
.fp1{--x:4%;--w:clamp(120px,11vw,190px);--y:30;--s:.55;--rz:-6deg}
.fp2{--x:25%;--w:clamp(110px,10vw,170px);--y:95;--s:.7;--rz:4deg}
.fp3{--x:66%;--w:clamp(120px,11vw,190px);--y:55;--s:.6;--rz:6deg}
.fp4{--x:86%;--w:clamp(110px,10vw,170px);--y:5;--s:.5;--rz:-4deg}
.fp5{--x:11%;--w:clamp(170px,17vw,290px);--y:110;--s:1.25;--rz:5deg}
.fp6{--x:72%;--w:clamp(180px,18vw,300px);--y:150;--s:1.4;--rz:-6deg}
.fp7{--x:42%;--w:clamp(150px,14vw,240px);--y:200;--s:1.15;--rz:3deg}
.feed .reactions{position:absolute;inset:0;z-index:4;pointer-events:none}
@media (max-width:900px){
  .feed{height:240vh}
  .fp1{--x:-6%}.fp4{--x:80%}.fp5{--x:-4%}.fp6{--x:62%}
  .fp2,.fp7{display:none}
}

/* =========================================================
   FINALE — devices scroll past "Let's make some noise", then the
   footer locks up underneath it and the glass emojis rise in
   ========================================================= */
.finale{position:relative;background:var(--ink);height:360vh}
.finale__pin{position:sticky;top:0;height:100vh;overflow:hidden}
.finale__layer{position:absolute;inset:0;pointer-events:none}
.finale__layer--back{z-index:1}
.finale__layer--front{z-index:3}
.finale__layer--back .fphone{filter:brightness(.62) saturate(.85) blur(.6px)}
.finale__glass{position:absolute;inset:0;z-index:4;pointer-events:none}
.finale__stage{position:absolute;inset:0;z-index:2;pointer-events:none}
.finale__title{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%);transform-origin:50% 50%;white-space:nowrap;text-align:center;
  font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:min(12.5vw,17vh,220px);line-height:.82;letter-spacing:var(--track-xl,-.035em);will-change:transform}
.finale__title .line{display:block;padding:0 .12em .04em}
.finale__title .line:not(.is-frost) .ch{color:#fff}
.finale__title .is-frost .ch{color:rgba(255,255,255,.62)}
.finale__title .is-frost{-webkit-mask-image:linear-gradient(180deg,#000 8%,rgba(0,0,0,.62) 52%,rgba(0,0,0,.22) 100%);mask-image:linear-gradient(180deg,#000 8%,rgba(0,0,0,.62) 52%,rgba(0,0,0,.22) 100%)}
.finale__title[data-reveal]{opacity:1}
.finale__foot{position:absolute;left:50%;top:0;width:min(760px,calc(100% - 2 * var(--gutter)));transform:translate(-50%,110vh);pointer-events:auto;will-change:transform;text-align:center}
.finale__cta{display:flex;flex-direction:column;align-items:center;gap:16px}
.finale__k{margin:0;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(26px,2.6vw,40px);line-height:.9;letter-spacing:var(--track-m,-.02em)}
.finale__cta p{margin:0;max-width:520px;color:rgba(255,255,255,.7);font-size:clamp(14px,1.1vw,16px)}
.finale__cta .nav__cta,.finale__cta .btn{margin-top:6px}
.finale__footer{margin-top:clamp(28px,4.5vh,52px);padding-top:22px;border-top:1px solid var(--line);font-size:13.5px}
.finale__links{display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left}
.finale__links .footer__logo{width:96px;height:auto}
.finale__links a:hover{opacity:.6}
.finale__base{display:flex;justify-content:space-between;margin-top:20px;font-size:12px;color:rgba(255,255,255,.45)}
@media (max-width:760px){
  .finale{height:300vh}
  .finale__links{flex-wrap:wrap;justify-content:center;text-align:center}
  .finale__base{flex-direction:column;align-items:center;gap:6px}
}

/* =========================================================
   HERO LAYOUT TEST: small left-aligned headline, bottom left
   (html.hero-left; ?hero=center shows the original)
   ========================================================= */
html.hero-left .hero__title{font-size:min(6vw,9.5vh,112px);line-height:.86;text-align:left;width:auto;margin:auto 0 clamp(18px,2.6vh,28px) 0}
html.hero-left .hero__title .line{--x:0px;padding:0 .22em .04em 0}
html.hero-left .hero__title .l1,html.hero-left .hero__title .l2,html.hero-left .hero__title .l3,html.hero-left .hero__title .l4{--x:0px}
@media (max-width:900px){html.hero-left .hero__title{font-size:min(12vw,7.5vh)}}
html.hero-left .hero__title .is-frost .ch{color:#fff}
html.hero-left .hero__title .is-frost{-webkit-mask-image:none;mask-image:none}
/* header video eases in slowly once it actually starts playing */
.hero__video{transform:none}  /* no upscaling: keep the footage pin-sharp */
/* the header video handles its own fade (from the moment the bar lifts), so its frame is never held back by the intro */
html.intro .hero__media{opacity:1}

/* header video: a black veil lifts in step with the footage itself (JS, frame-accurate), so it rises out of pure black with no jump */
.hero__fade{position:absolute;inset:0;background:var(--ink);pointer-events:none;will-change:opacity}
html.no-veil .hero__fade{opacity:0}
.hero__grain{display:none}
/* page-wide film noise (canvas, see main.js) */
.page-noise{position:fixed;inset:0;width:100vw;height:100vh;z-index:190;pointer-events:none;image-rendering:pixelated}
/* headline exit: each line fades and lifts a touch in turn (JS sets --fo 0→1 on scroll) */
html.hero-left .hero__title .line{transform:translate3d(0,calc(var(--fo,0) * -.18em),0);opacity:calc(1 - var(--fo,0));filter:blur(calc(var(--fo,0) * 14px));transition:opacity .35s linear,transform .35s linear,filter .35s linear}
html.hero-left .hero__title.is-settled .line{overflow:visible}

/* =========================================================
   WHAT WE DO — panel visuals
   ========================================================= */
/* Strategy: a hand-drawn plan that writes itself in when the card appears */
.ui-plan{background:#f4f1e8;color:#1a1a1a;background-image:linear-gradient(rgba(30,60,120,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(30,60,120,.07) 1px,transparent 1px);background-size:22px 22px;background-position:-1px -1px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.ui-plan::before{content:"";position:absolute;top:0;bottom:0;left:16px;width:1px;background:rgba(200,40,40,.25)}
.plan{position:absolute;inset:0;width:100%;height:100%}
.plan__t{font-family:Caveat,"Segoe Print","Bradley Hand",cursive;font-weight:500;font-size:21px;fill:#1c1c1c;opacity:0;transition:opacity .6s ease var(--d,0s)}
.plan__h{font-weight:700;font-size:28px;opacity:1}
.plan__goal{font-weight:700;font-size:24px}
.plan__sm{font-size:18px;fill:#555}
.plan__s{fill:none;stroke:#1c1c1c;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.5,0,.3,1) var(--d,0s)}
.plan__ring{stroke-width:2}
.is-in .plan__t{opacity:1}
.is-in .plan__s{stroke-dashoffset:0}
.pillar:hover .plan__ring{stroke-dashoffset:0;animation:planRing 1.2s cubic-bezier(.5,0,.3,1)}
@keyframes planRing{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* Creative: real footage behind the viewfinder */
.ui-create__img{position:absolute;inset:0;background:#222 center/cover no-repeat;transform:scale(1.04);transition:transform 1.4s var(--ease-out)}
.pillar:hover .ui-create__img{transform:scale(1.1)}
.ui-create .vf{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35))}

/* Activation: one shoot cut into every platform's format */
.ui-activate{container-type:size}
.fmts{position:absolute;left:0;right:0;bottom:44px;display:flex;align-items:flex-end;justify-content:center;gap:.55em;font-size:calc(100cqw / 27.5)}
.fmt{margin:0;display:flex;flex-direction:column;align-items:center;gap:.5em;opacity:0;transform:translateY(14px);transition:opacity .6s ease calc(var(--i) * .1s + .2s),transform .8s var(--ease-out) calc(var(--i) * .1s + .2s)}
.is-in .fmt{opacity:1;transform:none}
.fmt__img{display:block;border-radius:.4em;background:#222 center/cover no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.18);animation:fmtOn 7.5s ease-in-out infinite;animation-delay:calc(var(--i) * 1.5s)}
.f916 .fmt__img{width:3.6em;height:6.4em}
.f169 .fmt__img{width:6.2em;height:3.5em}
.f45 .fmt__img{width:4em;height:5em}
.f11 .fmt__img{width:4.4em;height:4.4em}
.f191 .fmt__img{width:6.4em;height:3.35em}
.fmt figcaption{display:flex;flex-direction:column;align-items:center;line-height:1.15;white-space:nowrap}
.fmt figcaption b{font-size:max(9px,.72em);font-weight:600}
.fmt figcaption i{font-style:normal;font-size:max(8px,.62em);opacity:.55}
@keyframes fmtOn{0%,22%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.18);filter:brightness(.7)}6%,16%{box-shadow:0 0 0 2px #fff,0 10px 24px -6px rgba(120,190,255,.55);filter:brightness(1.05)}}
.fmts__k{position:absolute;left:18px;top:16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
@media (prefers-reduced-motion:reduce){.fmt__img{animation:none;filter:none}}
.manifesto__text{font-size:min(4.7vw,6.4vh,86px)}
@media (max-width:760px){.manifesto__text{font-size:min(8.6vw,5.2vh)}}
/* body-copy keywords: a step up in weight and colour so the cards can be skimmed */
.pillar p strong{font-weight:600;color:#0a0a0a}
.section-head__lede strong{font-weight:600;opacity:1}
.services .section-head__lede strong{color:#0a0a0a}
/* quieter "View all projects" */
.gbtn.btn--sm,.btn--sm{height:38px;padding:0 16px;font-size:11.5px;gap:.5em}

/* =========================================================
   TESTIMONIALS — big bold quotes, story-style progress
   ========================================================= */
.testi{position:relative;background:var(--ink);padding:clamp(90px,12vw,170px) 0 clamp(80px,10vw,140px)}
.testi__head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(28px,4vw,52px)}
.testi__ctrl{display:flex;align-items:center;gap:12px}
.testi__count{font-family:var(--display);font-style:italic;font-weight:700;font-size:14px;letter-spacing:.02em;color:rgba(255,255,255,.45);margin-right:8px;font-variant-numeric:tabular-nums}
.testi__count b{color:#fff;font-weight:700}
.testi__arrow{width:50px;height:50px}
.testi__arrow svg{width:20px;height:20px}
.testi__stage{display:grid}
.tq{grid-area:1/1;margin:0;display:flex;flex-direction:column;gap:clamp(28px,4vh,48px);pointer-events:none}
.tq.is-on{pointer-events:auto}
.tq__q{margin:0;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:min(4.7vw,6.6vh,86px);line-height:.95;letter-spacing:var(--track-l,-.025em);max-width:31ch}
.tq__w{display:inline-block;color:rgba(255,255,255,.92);opacity:0;filter:blur(10px);transform:translate3d(0,.25em,0);
  transition:opacity .5s ease,filter .6s ease,transform .7s var(--ease-out)}
.tq__w.hl{color:#fff}
.tq.is-on .tq__w{opacity:1;filter:none;transform:none;transition-delay:calc(var(--i) * 28ms + .15s)}
.tq.is-on .tq__w.hl{text-shadow:0 0 1px rgba(255,255,255,.35),-1.2px 0 5px rgba(70,140,255,.8),1.2px 0 5px rgba(255,170,90,.5),0 0 16px rgba(110,200,255,.22)}
.tq.is-out .tq__w{opacity:0;filter:blur(10px);transform:translate3d(0,-.2em,0);transition-delay:calc(var(--i) * 10ms)}
.tq__by{display:flex;align-items:center;flex-wrap:wrap;gap:14px 16px;opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .7s var(--ease-out)}
.tq.is-on .tq__by{opacity:1;transform:none;transition-delay:.55s}
.tq__av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:var(--display);font-style:italic;font-weight:700;font-size:15px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 0 14px rgba(255,255,255,.08)}
.tq__who{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.tq__who b{font-weight:600;font-size:16px}
.tq__who span{font-size:14px;color:rgba(255,255,255,.6)}
.tq__g{display:inline-flex;align-items:center;gap:12px;margin-left:auto;padding:8px 14px 8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04)}
.tq__stars{display:inline-flex;gap:2px}
.tq__stars svg{width:14px;height:14px;fill:#fff}
.tq__ver{display:inline-flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.85)}
.tq__ver svg{width:16px;height:16px;fill:#fff;flex:none}
.testi__bars{display:flex;gap:6px;margin-top:clamp(40px,6vh,72px)}
.tq__bar{flex:1;height:22px;padding:10px 0;background:none;border:0;cursor:pointer}
.tq__bar i{display:block;height:2px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden;position:relative}
.tq__bar i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(var(--p,0))}
.tq__bar.is-done i::after{--p:1}
@media (max-width:760px){
  .tq__q{font-size:min(8.4vw,5vh)}
  .tq__g{margin-left:0}
  .testi__count{display:none}
}
@media (prefers-reduced-motion:reduce){.tq__w{filter:none;transform:none;transition:opacity .3s}}

/* =========================================================
   INSIGHT — latest three posts (smaller cousin of the work panels)
   ========================================================= */
.ins{background:var(--ink);padding:clamp(70px,9vw,130px) 0 clamp(60px,8vw,110px);border-top:1px solid var(--line)}
.ins__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(24px,3.5vw,44px)}
.ins__head .eyebrow{margin-bottom:12px}
.ins__h{margin:0;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(34px,4.2vw,68px);line-height:.9;letter-spacing:var(--track-l,-.025em)}
.ins__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ins__card{position:relative;display:block;aspect-ratio:4/3.3;border-radius:16px;overflow:hidden;background:#151515;color:#fff;isolation:isolate}
.ins__img{position:absolute;inset:0;background:#222 center/cover no-repeat;transform:scale(1.04);filter:saturate(.8) brightness(.85);transition:transform 1.2s var(--ease-out),filter .6s var(--ease)}
.ins__card::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,transparent 30%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.82) 100%)}
.ins__card:hover .ins__img{transform:scale(1.1);filter:none}
.ins__tag{position:absolute;top:16px;right:16px;z-index:1;padding:5px 11px 4px;border-radius:999px;border:1px solid rgba(255,255,255,.7);background:rgba(10,10,10,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.ins__body{position:absolute;left:20px;right:64px;bottom:20px;z-index:1;display:flex;flex-direction:column;gap:8px}
.ins__meta{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.ins__t{margin:0;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(18px,1.7vw,26px);line-height:.95;letter-spacing:var(--track-m,-.02em)}
.ins__x{font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.72);max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s var(--ease)}
.ins__card:hover .ins__x{max-height:4.2em;opacity:1}
.ins__go{position:absolute;right:16px;bottom:18px;z-index:1;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.6);display:grid;place-items:center;transition:background .35s var(--ease),color .35s var(--ease),transform .5s var(--ease-out)}
.ins__go svg{width:16px;height:16px}
.ins__card:hover .ins__go{background:#fff;color:#000;transform:rotate(45deg)}
.ins__grid [data-reveal]:nth-child(2){transition-delay:.1s}.ins__grid [data-reveal]:nth-child(3){transition-delay:.2s}
@media (max-width:900px){.ins__grid{grid-template-columns:1fr}.ins__card{aspect-ratio:16/10}.ins__x{max-height:none;opacity:1}}

/* =========================================================
   FOOTER — full width, with a live local-time clock
   ========================================================= */
.finale__foot{width:calc(100% - 2 * var(--gutter))}
.finale__cta{max-width:760px;margin:0 auto}
.finale__links{display:grid;grid-template-columns:1.2fr repeat(3,auto) 1fr;align-items:end;gap:20px clamp(24px,4vw,64px)}
.finale__links .clock{justify-self:end;text-align:right}
.clock__t{display:inline-flex;align-items:baseline;gap:1px;font-family:var(--display);font-weight:700;font-style:italic;font-size:clamp(22px,2vw,30px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.clock__t b{font-weight:700;display:inline-block;min-width:1.25em;text-align:center}
.clock__t i{font-style:normal;opacity:.35;transition:opacity .25s}
.clock__t.is-tick i{opacity:.9}
.clock__t small{margin-left:8px;font-family:var(--body);font-style:normal;font-weight:400;font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.5)}
@media (max-width:900px){
  .finale__links{grid-template-columns:1fr 1fr;justify-items:center;text-align:center}
  .finale__links .footer__logo{grid-column:1/-1}
  .finale__links .clock{grid-column:1/-1;justify-self:center;text-align:center}
}

/* =========================================================
   FINALE v2 — stats sequence + header-style two-line title
   ========================================================= */
.finale{height:620vh}
.fphone__img{display:block;width:100%;height:100%;border-radius:calc(var(--w) * .12);background:#1a1a1a center/cover no-repeat}
.fstats{position:absolute;inset:0;pointer-events:none}
.fstat{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;opacity:0;will-change:opacity,filter,transform}
.fstat__n{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:min(17vw,26vh,300px);line-height:.85;letter-spacing:var(--track-xl,-.035em);font-variant-numeric:tabular-nums;color:#fff;
  text-shadow:0 0 1px rgba(255,255,255,.35),-2px 0 8px rgba(70,140,255,.55),2px 0 8px rgba(255,170,90,.35),0 0 30px rgba(110,200,255,.18);padding:0 .1em}
.fstat__k{font-size:clamp(12px,1.1vw,15px);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75);max-width:30ch}
/* title: same size and treatment as the header headline, two lines, glow follows the cursor */
.finale__title{font-size:min(6vw,9.5vh,112px);line-height:.86}
.finale__title .line{display:block;padding:0 .22em .04em;opacity:calc(1 - var(--fo,1));filter:blur(calc(var(--fo,1) * 14px));transform:translate3d(0,calc(var(--fo,1) * .18em),0)}
.finale__title .line .ch{color:#fff;
  text-shadow:0 0 calc(var(--e,0) * 2px) rgba(255,255,255,calc(var(--e,0) * .55)),
    calc(var(--e,0) * -1.2px) 0 calc(var(--e,0) * 6px) rgba(70,140,255,calc(var(--e,0) * .85)),
    calc(var(--e,0) * 1.2px) 0 calc(var(--e,0) * 6px) rgba(255,170,90,calc(var(--e,0) * .55)),
    0 0 calc(var(--e,0) * 22px) rgba(110,200,255,calc(var(--e,0) * .45))}
@media (max-width:760px){.finale{height:520vh}.finale__title{font-size:min(12vw,7.5vh)}.fstat__n{font-size:min(24vw,20vh)}}

/* =========================================================
   FINALE v3 — phones kept off the centre line, centred lock-up, thin footer bar
   ========================================================= */
.fp1{--x:3%}.fp2{--x:17%}.fp3{--x:76%}.fp4{--x:89%}
.fp5{--x:7%}.fp6{--x:80%}.fp7{--x:22%}
.fphone{top:0}
.finale__cta{gap:20px}
.finale__cta p{font-size:clamp(15px,1.2vw,17.5px);max-width:560px}
.finale__bar{position:absolute;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(20px,4vw,64px);
  padding:16px var(--gutter) 18px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(10,10,10,0),rgba(10,10,10,.9) 40%);font-size:13px;transform:translate3d(0,110%,0);will-change:transform}
.finale__brand{display:flex;align-items:center;gap:16px}
.finale__brand .footer__logo{width:78px;height:auto}
.finale__brand span{font-size:11.5px;color:rgba(255,255,255,.45);white-space:nowrap}
.finale__bar .finale__links{display:flex;justify-content:center;gap:clamp(20px,3.4vw,56px);text-align:left}
.finale__bar .footer__k{margin-bottom:3px;font-size:10px}
.finale__bar a:hover{opacity:.6}
.finale__bar .clock{text-align:right}
.finale__bar .clock__t{font-size:clamp(18px,1.5vw,22px)}
@media (max-width:900px){
  .finale__bar{grid-template-columns:1fr auto;row-gap:10px;padding-top:12px;padding-bottom:12px}
  .finale__bar .finale__links{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:12px;font-size:12px}
  .finale__brand span{display:none}
}
/* =========================================================
   INSIGHT v2 — numbered, glass tags, glowing titles
   ========================================================= */
.ins__n{position:absolute;top:14px;left:18px;z-index:1;font-family:var(--display);font-style:italic;font-weight:700;font-size:15px;letter-spacing:.02em;color:rgba(255,255,255,.85)}
.ins__card{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .5s var(--ease)}
.ins__card:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.ins__img{filter:grayscale(.6) brightness(.8)}
.ins__card:hover .ins__img{filter:none}
.ins__t{transition:text-shadow .6s var(--ease)}
.ins__card:hover .ins__t{text-shadow:0 0 1px rgba(255,255,255,.35),-1.2px 0 5px rgba(70,140,255,.8),1.2px 0 5px rgba(255,170,90,.5),0 0 16px rgba(110,200,255,.22)}
.ins__go{background:rgba(10,10,10,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* FINALE v4 — nine devices, earlier start */
.fp1{--x:2%}.fp2{--x:17%}.fp3{--x:75%}.fp4{--x:89%}.fp8{--x:31%;--w:clamp(110px,10vw,170px);--rz:-3deg}
.fp5{--x:5%}.fp6{--x:79%}.fp7{--x:21%}.fp9{--x:71%;--w:clamp(150px,14vw,240px);--rz:-4deg}
@media (max-width:760px){.fp8,.fp9{display:none}}
/* footer links: soft glow on hover */
.finale__bar a{transition:text-shadow .35s var(--ease),opacity .35s var(--ease),filter .35s var(--ease)}
.finale__bar a:hover{opacity:1;text-shadow:0 0 1px rgba(255,255,255,.4),-1px 0 5px rgba(70,140,255,.75),1px 0 5px rgba(255,170,90,.5),0 0 14px rgba(110,200,255,.3)}
.finale__home{display:inline-flex;color:#fff}
.finale__home:hover{filter:drop-shadow(-1px 0 4px rgba(70,140,255,.8)) drop-shadow(1px 0 4px rgba(255,170,90,.55)) drop-shadow(0 0 10px rgba(110,200,255,.35))}

/* =========================================================
   WHO WE WORK WITH — one tight line closing "What we do"
   ========================================================= */
.who{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:clamp(40px,6vw,80px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--line-dark)}
.who .eyebrow{margin:0 10px 0 0}
.who__line{margin:0;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(20px,2vw,30px);line-height:1;letter-spacing:var(--track-m,-.02em)}
.who__list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.who__list li{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(14px,1.2vw,17px);padding:9px 16px 8px;border-radius:999px;background:var(--ink);color:#fff;letter-spacing:var(--track-s,-.01em)}

/* =========================================================
   COOKIE TAB — small, quiet, bottom-left
   ========================================================= */
.consent{position:fixed;left:16px;bottom:16px;z-index:180;display:flex;align-items:center;gap:6px;max-width:calc(100% - 32px);padding:6px 6px 6px 14px;border-radius:999px;
  background:rgba(14,14,14,.72);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.8);font-size:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .6s var(--ease-out)}
.consent.is-on{opacity:1;transform:none}
.consent[hidden]{display:none}   /* returning visitors: the dismissed banner must not sit invisibly over the footer logo */
.consent p{margin:0 6px 0 0;white-space:nowrap}
.consent a{color:#fff;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(255,255,255,.35)}
.consent button{height:28px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font:inherit;font-size:11.5px;cursor:pointer;transition:background .25s,color .25s}
.consent button:hover{background:rgba(255,255,255,.12)}
.consent button.is-yes{background:#fff;color:#000;border-color:#fff}
.consent button.is-yes:hover{background:#e8e8e8}
@media (max-width:520px){.consent p{white-space:normal}}

/* WHO v2 — sector marquee */
.who{display:block}
.who__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 22px}
.who__marquee{margin-top:clamp(18px,2.4vw,30px);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)}
.who__track{display:flex;width:max-content;animation:marq 38s linear infinite}
.who__set{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.who__set li{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(44px,7vw,120px);line-height:1;letter-spacing:var(--track-xl,-.035em);color:var(--ink);padding:.04em .12em;white-space:nowrap}
.who__set li:nth-child(4n+3){color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.who__set .who__dot{width:.2em;height:.2em;padding:0;margin:0 .3em;border-radius:50%;background:var(--ink);font-size:clamp(44px,7vw,120px)}
@media (prefers-reduced-motion:reduce){.who__track{animation:none}}

/* WHO v3 — one small centred line, solid smaller sectors, glass emojis as dividers */
.who__k{display:flex;justify-content:center;text-align:center;margin:0}
.who__set li{font-size:clamp(30px,3.8vw,60px);padding:.04em .1em}
.who__set li:nth-child(4n+3){color:var(--ink);-webkit-text-stroke:0}
.who__set .who__gem{width:1.15em;height:1.15em;margin:0 .35em;padding:0;font-size:clamp(30px,3.8vw,60px);flex:none}
.who__gem .gem{filter:drop-shadow(0 10px 16px rgba(0,0,0,.25))}

/* Activation: one shoot, sent out to every platform (simple line graphic) */
.ui-activate .dist{position:absolute;inset:8px 6px;width:calc(100% - 12px);height:calc(100% - 16px)}
.dist__src rect{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.9);stroke-width:1.4}
.dist__play{fill:#fff}
.dist__src text,.dist__p text{font-family:var(--body);font-size:11.5px;fill:rgba(255,255,255,.88);letter-spacing:.02em}
.dist__src text{text-anchor:middle;font-size:10px;letter-spacing:.14em;text-transform:uppercase;fill:rgba(255,255,255,.55)}
.dist__l{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.5,0,.3,1) var(--d,0s)}
.is-in .dist__l{stroke-dashoffset:0}
.dist__dot{fill:#fff;filter:drop-shadow(0 0 4px rgba(120,190,255,.9));opacity:0;transition:opacity .6s ease 1.1s}
.is-in .dist__dot{opacity:1}
.dist__p{opacity:0;transform:translateX(-8px);transition:opacity .6s ease var(--d,0s),transform .8s var(--ease-out) var(--d,0s)}
.is-in .dist__p{opacity:1;transform:none}
.dist__p > rect:first-child{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.3);stroke-width:1}
.dist__r{fill:none;stroke:#fff;stroke-width:1.3}
.pillar:hover .dist__p > rect:first-child{stroke:rgba(255,255,255,.6)}
@media (prefers-reduced-motion:reduce){.dist__dot{display:none}}

/* who marquee: room for the emoji shadows; tighter gap before the work section */
.who__marquee{padding:22px 0 30px;margin-top:clamp(0px,1vw,10px)}
.services{padding-bottom:clamp(36px,4.5vw,64px)}

/* =========================================================
   WORK PAGE — index grid + case study
   ========================================================= */
.is-page .nav{position:fixed}
.phead{padding:clamp(150px,18vw,250px) 0 clamp(28px,3vw,44px)}
.phead .section-head{margin-bottom:clamp(36px,4vw,56px)}
.phead .section-head__lede{opacity:.8}
.wfilter{display:flex;flex-wrap:wrap;gap:8px}
.wfilter button{height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.28);font-size:13px;font-weight:400;color:rgba(255,255,255,.72);transition:border-color .3s,color .3s,background .3s}
.wfilter button:hover{border-color:#fff;color:#fff}
.wfilter button.is-on{background:#fff;color:#000;border-color:#fff;font-weight:500}

.wgrid{padding:0 0 clamp(80px,10vw,150px)}
.wg{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2vw,32px);row-gap:clamp(44px,5.5vw,84px)}
.wc{display:block;color:inherit;grid-column:span 6;min-width:0}
.wc.is-l{grid-column:span 7}
.wc.is-s{grid-column:span 5;margin-top:clamp(40px,7vw,120px)}
.wc.is-hidden{display:none}
.wc__media{position:relative;overflow:hidden;border-radius:clamp(16px,1.6vw,28px);aspect-ratio:4/3;background:var(--ink-2);isolation:isolate}
.wc.is-s .wc__media{aspect-ratio:4/5}
.wc__img,.wc__loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;transition:transform 1.4s var(--ease-out),opacity .6s ease}
.wc__loop{opacity:0;z-index:1}
.wc.is-playing .wc__loop{opacity:1}
.wc:hover .wc__img,.wc:hover .wc__loop{transform:scale(1.035)}
.wc .lw__top{position:absolute;left:clamp(20px,2.6vw,36px);top:clamp(20px,2.6vw,36px);z-index:2;display:flex;align-items:center}
.wc .lw__top,.wc .lw__tags{opacity:1;transform:none;transition:none}
.wc .lw__logo{height:clamp(26px,2.4vw,36px);filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.wc .lw__tags{z-index:2}
.wc__meta{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:18px 4px 0}
.wc__name{margin:0 0 6px;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(22px,2.1vw,32px);line-height:.95;letter-spacing:var(--track-m,-.02em)}
.wc__line{margin:0;font-size:14px;color:rgba(255,255,255,.62);max-width:380px}
.wc__stat{text-align:right;flex:none}
.wc__stat b{display:block;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(28px,2.8vw,44px);line-height:.9;letter-spacing:var(--track-m,-.02em)}
.wc__stat span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.wc__stat.is-tbc b{opacity:.3}
.wg__empty{margin:60px 0 0;text-align:center;color:rgba(255,255,255,.5)}
a.wc .wc__name{transition:text-shadow .4s}
a.wc:hover .wc__name{text-shadow:0 0 18px rgba(255,255,255,.55)}

/* static footer for inner pages: the same bar as the homepage finale, just not pinned */
.pfoot{position:relative;padding:clamp(90px,12vw,170px) 0 0;background:var(--ink);overflow:hidden}
.pfoot__in{display:grid;gap:28px;justify-items:start;padding-bottom:clamp(90px,11vw,160px)}
.pfoot__in .section-head__lede{max-width:520px}
.pfoot .finale__bar{position:relative;transform:none;background:none}

/* case study */
.cs-hero{position:relative;height:min(82vh,900px);min-height:520px;overflow:hidden;border-radius:0 0 clamp(24px,3vw,40px) clamp(24px,3vw,40px)}
.cs-hero__img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04)}
.cs-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.25) 0%,rgba(10,10,10,0) 35%,rgba(10,10,10,.85) 100%)}
.cs-hero__in{position:absolute;left:0;right:0;bottom:0;z-index:1;display:grid;grid-template-columns:1fr auto;align-items:end;gap:32px;padding-bottom:clamp(36px,4.5vw,64px)}
.cs-hero__in .lw__logo{height:clamp(30px,3vw,44px);margin-bottom:22px}
.cs-hero__in .eyebrow{margin-bottom:14px}
.cs-hero__in .h-xl{font-size:clamp(44px,6.6vw,110px)}
.cs-meta{display:grid;gap:14px;text-align:right}
.cs-meta div{display:grid;gap:2px}
.cs-meta .footer__k{font-size:10px}
.cs-meta b{font-weight:500;font-size:14px}
.cs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px);padding:clamp(48px,6vw,90px) 0}
.cs-stats .lw__stat{border-left:1px solid rgba(255,255,255,.25);padding:0 clamp(18px,2.4vw,36px)}
.cs-stats .lw__stat:first-child{padding-left:0;border-left:0}
.cs-stats .lw__stat b{font-size:clamp(44px,5.4vw,96px)}
.cs-body{padding:0 0 clamp(80px,10vw,150px)}
.cs-row{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:clamp(24px,4vw,80px);padding:clamp(36px,4vw,60px) 0;border-top:1px solid rgba(255,255,255,.12)}
.cs-row h2{margin:0;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(28px,3vw,46px);line-height:.92;letter-spacing:var(--track-m,-.02em)}
.cs-row p{margin:0 0 1em;font-size:clamp(16px,1.3vw,20px);line-height:1.5;color:rgba(255,255,255,.8);max-width:720px}
.cs-row p strong{font-weight:600;color:#fff}
.cs-row p:last-child{margin-bottom:0}
.cs-row ul{margin:0;padding-left:18px;color:rgba(255,255,255,.8);font-size:clamp(15px,1.2vw,18px);line-height:1.6}
.cs-media{display:grid;grid-template-columns:2fr 1fr;gap:clamp(12px,1.6vw,24px);margin:clamp(24px,3vw,48px) 0 0}
.cs-media>*{border-radius:clamp(14px,1.4vw,22px);overflow:hidden;background:var(--ink-2)}
.cs-media .cs-still{aspect-ratio:16/10;background-size:cover;background-position:center}
.cs-media video{width:100%;height:100%;object-fit:cover;aspect-ratio:9/16}
.cs-next{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:clamp(28px,3vw,44px) 0;border-top:1px solid rgba(255,255,255,.12)}
.cs-next a{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(22px,2.4vw,36px);line-height:1;transition:text-shadow .4s}
.cs-next a:hover{text-shadow:0 0 18px rgba(255,255,255,.55)}
.cs-next .footer__k{display:block;margin-bottom:6px}

@media (max-width:900px){
  .wc,.wc.is-l,.wc.is-s{grid-column:span 12;margin-top:0}
  .wc.is-s .wc__media{aspect-ratio:4/3}
  .cs-hero__in{grid-template-columns:1fr}.cs-meta{text-align:left;grid-template-columns:repeat(3,auto);justify-content:start;gap:24px}
  .cs-stats{grid-template-columns:1fr;gap:28px}.cs-stats .lw__stat{border-left:0;padding:0}
  .cs-row{grid-template-columns:1fr;gap:16px}
  .cs-media{grid-template-columns:1fr}.cs-media video{aspect-ratio:9/16;max-height:70vh}
}

/* work page v2: page-wide glass, softer headline, proof strip, hover crossfade */
.page-glass{position:fixed;inset:0;z-index:150;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.page-glass.is-on{opacity:1}
.page-glass canvas{position:absolute;inset:0}
.h-xl--page{font-size:clamp(40px,6vw,96px)}
.wc__loop{transition:transform 1.4s var(--ease-out),opacity .9s ease}
.wc.is-moving{transition:transform .7s var(--ease-out),opacity .5s ease}
.proof{padding:clamp(40px,6vw,90px) 0 0}
.proof__k{display:flex;justify-content:center;text-align:center;margin-bottom:18px}
.proof__strip{position:relative;height:72px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof__strip .ticker{height:72px}
.proof__strip .ticker__set li{height:72px}

/* inner pages: cursor glow on big titles, same recipe as the homepage headline */
.glow-title .line{display:block;padding:0 .22em .04em 0}
.glow-title .line .ch{color:#fff;
  text-shadow:0 0 calc(var(--e,0) * 2px) rgba(255,255,255,calc(var(--e,0) * .55)),
    calc(var(--e,0) * -1.2px) 0 calc(var(--e,0) * 6px) rgba(70,140,255,calc(var(--e,0) * .85)),
    calc(var(--e,0) * 1.2px) 0 calc(var(--e,0) * 6px) rgba(255,170,90,calc(var(--e,0) * .55)),
    0 0 calc(var(--e,0) * 22px) rgba(110,200,255,calc(var(--e,0) * .45))}
.pfoot__in .glow-title{font-size:min(6vw,9.5vh,112px)}
.pfoot__in p{max-width:520px}
/* inner-page CTA: centred lockup, identical to the homepage finale */
.pfoot__in{justify-items:center;text-align:center;gap:20px}
.pfoot__in .glow-title .line{padding:0 .22em .04em;text-align:center}
.pfoot__in .section-head__lede{margin:0;max-width:560px;color:rgba(255,255,255,.7);opacity:1;font-size:clamp(15px,1.2vw,17.5px)}
.pfoot__in .btn{margin-top:6px}
/* inner-page CTA: same arrival as the homepage finale — lines blur/lift in one after another, then the copy + button rise */
.pfoot__in .glow-title .line{opacity:calc(1 - var(--fo,1));filter:blur(calc(var(--fo,1) * 14px));transform:translate3d(0,calc(var(--fo,1) * .18em),0)}
.pfoot__foot{display:grid;justify-items:center;gap:20px;opacity:var(--op,0);transform:translate3d(0,calc((1 - var(--op,0)) * 70px),0);will-change:transform,opacity}
.testi{padding-top:clamp(80px,10vw,150px)}
.pfoot__in .glow-title .split .ch{transform:none;opacity:1;transition:none}

/* inner-page CTA arrival: timed, class-driven (replaces the scroll-driven --fo version) */
.pfoot__in .glow-title .line{opacity:0;filter:blur(14px);transform:translate3d(0,.18em,0);transition:opacity 1.1s var(--ease-out),filter 1.1s var(--ease-out),transform 1.2s var(--ease-out)}
.pfoot__in .glow-title .line:nth-child(2){transition-delay:.22s}
.pfoot.is-in .glow-title .line{opacity:1;filter:blur(0);transform:none}
.pfoot__foot{opacity:0;transform:translate3d(0,70px,0);transition:opacity .9s var(--ease-out) .55s,transform 1.1s var(--ease-out) .55s}
.pfoot.is-in .pfoot__foot{opacity:1;transform:none}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.ab-hero{padding:0 0 clamp(70px,9vw,130px)}
.ab-hero__media{position:relative;overflow:hidden;border-radius:clamp(16px,1.8vw,30px);aspect-ratio:21/9;background:var(--ink-2)}
.ab-hero__img{position:absolute;inset:0;background-size:cover;background-position:center}
.ab-hero__tag{position:absolute;left:clamp(16px,2vw,28px);top:clamp(16px,2vw,28px);display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:rgba(10,10,10,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.ab-hero__tag .rec{width:7px;height:7px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 8px #ff3b3b;animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.ab-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,32px);list-style:none;margin:clamp(28px,3.5vw,52px) 0 0;padding:0}
.ab-facts li{display:grid;gap:6px;padding:0 clamp(16px,2vw,32px);border-left:1px solid rgba(255,255,255,.25)}
.ab-facts li:first-child{padding-left:0;border-left:0}
.ab-facts b{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(28px,3vw,48px);line-height:.9;letter-spacing:var(--track-m,-.02em)}
.ab-facts span{font-size:12px;letter-spacing:.04em;text-transform:uppercase;opacity:.6}

.founders{padding:0 0 clamp(80px,10vw,150px)}
.founders__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px)}
.founder__photo{position:relative;aspect-ratio:4/5;border-radius:clamp(16px,1.6vw,26px);overflow:hidden;background:linear-gradient(160deg,#1c1c1c,#0e0e0e);display:grid;place-items:center;background-size:cover;background-position:center 20%}
.founder__ph{font-family:var(--display);font-weight:700;font-style:italic;font-size:clamp(90px,12vw,200px);line-height:1;color:rgba(255,255,255,.08);letter-spacing:-.04em}
.founder__soon{position:absolute;left:18px;bottom:16px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.founder__name{margin:22px 0 4px;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(26px,2.6vw,40px);line-height:.95;letter-spacing:var(--track-m,-.02em)}
.founder__name .is-tbc{opacity:.3}
.founder__role{margin:0 0 14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.founder__bio{margin:0;max-width:520px;font-size:clamp(15px,1.15vw,17px);color:rgba(255,255,255,.78)}
.founder__links{margin:14px 0 0;font-size:13px}
.founder__links a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.3)}
.founders__note{max-width:680px;margin:clamp(36px,4vw,60px) 0 0;color:rgba(255,255,255,.6);font-size:clamp(14px,1.05vw,16px)}

.studio{background:var(--paper);color:var(--ink);padding:clamp(80px,11vw,160px) 0;border-radius:40px;position:relative;z-index:2}
.studio .section-head__lede{opacity:.72}
.studio__grid{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:auto auto;gap:clamp(12px,1.6vw,24px)}
.studio__card{position:relative;overflow:hidden;border-radius:clamp(14px,1.4vw,22px);background:var(--paper-2);min-height:220px}
.studio__card.is-big{grid-row:1/3;aspect-ratio:4/3.4}
.studio__img{position:absolute;inset:0;background-size:cover;background-position:center}
.studio__cap{position:absolute;left:16px;bottom:14px;padding:6px 12px;border-radius:999px;background:rgba(10,10,10,.55);color:#fff;font-size:11px;letter-spacing:.06em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.studio__card.is-list{padding:clamp(20px,2.2vw,32px);background:var(--ink);color:#fff;display:grid;align-content:start;gap:14px}
.studio__card.is-list .eyebrow{margin:0;color:rgba(255,255,255,.6)}
.studio__card.is-list ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px}
.studio__card.is-list li{padding-left:16px;position:relative}
.studio__card.is-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:#fff}

.how{padding:clamp(90px,12vw,170px) 0 clamp(40px,5vw,80px)}
.steps{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.step{display:grid;grid-template-columns:90px 1fr minmax(0,300px);gap:clamp(16px,3vw,56px);align-items:start;padding:clamp(26px,3vw,44px) 0;border-bottom:1px solid rgba(255,255,255,.14)}
.step__n{font-family:var(--display);font-weight:700;font-style:italic;font-size:clamp(28px,3vw,46px);line-height:.9;color:rgba(255,255,255,.35);letter-spacing:-.03em}
.step h3{margin:0 0 10px;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(28px,3.2vw,52px);line-height:.92;letter-spacing:var(--track-m,-.02em)}
.step p{margin:0;max-width:640px;font-size:clamp(15px,1.2vw,18px);color:rgba(255,255,255,.78)}
.step__k{justify-self:end;text-align:right;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);padding-top:.6em}

.faq{padding:clamp(60px,8vw,120px) 0 clamp(40px,5vw,80px)}
.faq__in{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:clamp(24px,5vw,90px);align-items:start}
.faq__list{border-top:1px solid rgba(255,255,255,.14)}
.qa{border-bottom:1px solid rgba(255,255,255,.14)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-weight:500;font-size:clamp(16px,1.3vw,20px);transition:text-shadow .35s}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;font-weight:300;font-size:18px;transition:transform .4s var(--ease),background .3s}
.qa[open] summary::after{transform:rotate(45deg);background:#fff;color:#000}
.qa summary:hover{text-shadow:0 0 14px rgba(255,255,255,.45)}
.qa p{margin:0;padding:0 48px 24px 0;max-width:640px;color:rgba(255,255,255,.72);font-size:clamp(14px,1.1vw,16.5px)}

@media (max-width:900px){
  .ab-facts{grid-template-columns:1fr 1fr}.ab-facts li:nth-child(odd){padding-left:0;border-left:0}
  .founders__grid{grid-template-columns:1fr}
  .studio__grid{grid-template-columns:1fr}.studio__card.is-big{grid-row:auto;aspect-ratio:4/3}
  .step{grid-template-columns:56px 1fr}.step__k{grid-column:2;justify-self:start;text-align:left;padding-top:0}
  .faq__in{grid-template-columns:1fr}
}

/* about v2: cycling hero, who-we-are, skills */
.ab-hero__img{opacity:0;transform:scale(1.04);transition:opacity 1.3s ease,transform 5s linear}
.ab-hero__img.is-on{opacity:1;transform:scale(1)}
.ab-hero__dots{position:absolute;right:clamp(16px,2vw,28px);bottom:clamp(14px,1.8vw,24px);display:flex;gap:6px}
.ab-hero__dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);transition:background .4s,transform .4s}
.ab-hero__dots i.is-on{background:#fff;transform:scale(1.3)}
.who-we-are{padding:0 0 clamp(80px,10vw,150px)}
.who-we-are__in,.skills__in{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:clamp(24px,5vw,90px);align-items:start}
.who-we-are__copy p{margin:0 0 1.1em;max-width:760px;font-size:clamp(17px,1.5vw,23px);line-height:1.45;color:rgba(255,255,255,.78);font-weight:300}
.who-we-are__lead{font-size:clamp(22px,2.2vw,34px)!important;line-height:1.3!important;color:#fff!important;letter-spacing:-.015em}
.who-we-are__copy strong{font-weight:500;color:#fff}
.shifts{list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;border-top:1px solid rgba(255,255,255,.14);max-width:760px}
.shifts li{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(18px,2vw,30px);line-height:1;letter-spacing:var(--track-m,-.02em)}
.shifts span{color:rgba(255,255,255,.4)}
.shifts i{font-style:normal;font-family:var(--body);font-weight:300;color:rgba(255,255,255,.5)}
.shifts b{font-weight:700}
.skills{padding:0 0 clamp(90px,11vw,160px)}
.skills__in>div:first-child{display:grid;gap:22px;justify-items:start}
.skills__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px)}
.skills__list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.skills__list li{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:clamp(15px,1.25vw,19px);font-weight:300}
.skills__list .skills__k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.55);padding:10px 0}
.founders{padding:clamp(60px,8vw,120px) 0 clamp(40px,5vw,80px)}
@media (max-width:900px){.who-we-are__in,.skills__in{grid-template-columns:1fr}.skills__cols{grid-template-columns:1fr}.shifts li{font-size:18px}}
.skills__in{grid-template-columns:minmax(0,440px) 1fr}
.skills__in .h-xl--page{font-size:clamp(36px,4.6vw,74px)}

/* about v3: bars under the hero, sticky process, compact founders, accordion FAQ */
.ab-hero__bars{position:absolute;left:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);bottom:clamp(12px,1.6vw,20px);display:flex;gap:4px}
.ab-hero__bars button{flex:1;height:18px;padding:8px 0;background:none;border:0;cursor:pointer}
.ab-hero__bars i{display:block;height:2px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden;position:relative}
.ab-hero__bars i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(var(--p,0))}
.ab-hero__dots{display:none}
.who-we-are{padding-bottom:clamp(60px,8vw,120px)}

.stages{position:relative;height:calc(100vh * 5 + 200vh)}
.stages__pin{position:sticky;top:0;height:100vh;display:grid;grid-template-rows:auto 1fr;gap:clamp(20px,3vh,40px);padding-top:clamp(90px,12vh,130px);padding-bottom:clamp(30px,5vh,60px)}
.stages__line{position:relative;height:2px;background:rgba(255,255,255,.16);margin:0 10px}
.stages__fill{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0);will-change:transform}
.stages__line i{position:absolute;top:50%;left:calc(var(--i) * 25%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--ink);border:2px solid rgba(255,255,255,.4);transition:border-color .4s,background .4s,box-shadow .4s}
.stages__line i.is-on{border-color:#fff;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.6)}
.stages__line i b{position:absolute;top:18px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.4);transition:color .4s}
.stages__line i:last-child b{transform:translateX(-100%)}.stages__line i:first-child b{transform:none}
.stages__line i.is-on b{color:#fff}
.stages__stack{position:relative;min-height:0}
.stage{position:absolute;inset:0;display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,72px);align-items:center;opacity:0;pointer-events:none;transition:opacity .6s ease}
.stage.is-on{opacity:1;pointer-events:auto}
.stage__img{height:100%;max-height:62vh;border-radius:clamp(16px,1.6vw,26px);background-size:cover;background-position:center;background-color:var(--ink-2);transform:translateY(30px) scale(.98);transition:transform 1.1s var(--ease-out)}
.stage.is-on .stage__img{transform:none}
.stage__copy{display:grid;gap:14px;align-content:center}
.stage__copy>*{transform:translateY(24px);opacity:0;transition:transform .9s var(--ease-out),opacity .7s ease}
.stage.is-on .stage__copy>*{transform:none;opacity:1}
.stage.is-on .stage__copy>*:nth-child(2){transition-delay:.08s}.stage.is-on .stage__copy>*:nth-child(3){transition-delay:.16s}.stage.is-on .stage__copy>*:nth-child(4){transition-delay:.24s}
.stage__copy h3{margin:0;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(40px,5vw,84px);line-height:.9;letter-spacing:var(--track-m,-.02em)}
.stage__copy p{margin:0;max-width:520px;font-size:clamp(16px,1.3vw,20px);color:rgba(255,255,255,.78)}
.stage__copy .step__k{justify-self:start;text-align:left;padding:0}
.stage__copy .step__n{font-size:clamp(22px,2.2vw,34px)}

.founders{padding:clamp(60px,8vw,110px) 0 clamp(30px,4vw,60px)}
.founders__in{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:clamp(24px,5vw,90px);align-items:start}
.founders__h{font-size:clamp(32px,4vw,60px)}
.founders__grid{gap:clamp(16px,2vw,32px)}
.founder{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:start}
.founder__photo{aspect-ratio:4/5;border-radius:14px}
.founder__ph{font-size:48px}
.founder__name{margin:0 0 4px;font-size:clamp(20px,1.8vw,26px)}
.founder__role{margin:0 0 8px;font-size:11px}
.founder__bio{font-size:14px;color:rgba(255,255,255,.7)}

.qa{border-bottom:1px solid rgba(255,255,255,.14)}
.qa__q{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-weight:500;font-size:clamp(16px,1.3vw,20px);cursor:pointer;transition:text-shadow .35s}
.qa__q::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;font-weight:300;font-size:18px;transition:transform .5s var(--ease),background .3s,color .3s}
.qa.is-open .qa__q::after{transform:rotate(45deg);background:#fff;color:#000}
.qa__q:hover{text-shadow:0 0 14px rgba(255,255,255,.45)}
.qa__a{height:0;overflow:hidden;transition:height .55s var(--ease)}
.qa__a p{margin:0;padding:0 48px 24px 0;max-width:640px;color:rgba(255,255,255,.72);font-size:clamp(14px,1.1vw,16.5px)}
@media (max-width:900px){
  .stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:16px}.stage__img{max-height:34vh}.stage__copy h3{font-size:36px}
  .stages__line i b{display:none}
  .founders__in{grid-template-columns:1fr}.founders__grid{grid-template-columns:1fr}
}
.founders__h{font-size:clamp(28px,3.4vw,52px)}
/* founders: light band, circular portraits */
.founders{background:var(--paper);color:var(--ink);border-radius:40px;position:relative;z-index:2;padding:clamp(60px,8vw,110px) 0;margin:clamp(20px,3vw,40px) 0}
.founder__photo{aspect-ratio:1;width:120px;border-radius:50%;background:var(--paper-2);background-size:cover;background-position:center 20%}
.founder__role{color:rgba(10,10,10,.55)}
.founder__bio{color:rgba(10,10,10,.75)}
.founder__name .is-tbc{opacity:.3}
.faq{padding-top:clamp(40px,6vw,90px)}
.founder__li{display:inline-block;margin-top:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(10,10,10,.3)}
.founder__li:hover{text-decoration-color:currentColor}
.ab-hero__hit{position:absolute;top:0;bottom:40px;width:50%;background:none;border:0;cursor:none;z-index:2}
.ab-hero__hit.is-prev{left:0}.ab-hero__hit.is-next{right:0}
.ab-hero__tag{z-index:3}.ab-hero__bars{z-index:3}
.cursor.is-glyph .cursor__label{font-size:22px;font-weight:300;letter-spacing:0}
/* glow titles everywhere on inner pages: letters show on reveal; dark glow on light sections */
.glow-title[data-reveal].is-in .split .ch{transform:none;opacity:1}
.glow-title .line{padding-right:.06em}
[data-nav="light"] .glow-title .line .ch{color:var(--ink);
  text-shadow:0 0 calc(var(--e,0) * 2px) rgba(0,0,0,calc(var(--e,0) * .35)),
    calc(var(--e,0) * -1.2px) 0 calc(var(--e,0) * 6px) rgba(70,140,255,calc(var(--e,0) * .7)),
    calc(var(--e,0) * 1.2px) 0 calc(var(--e,0) * 6px) rgba(255,140,60,calc(var(--e,0) * .55)),
    0 0 calc(var(--e,0) * 18px) rgba(110,160,255,calc(var(--e,0) * .35))}
/* discovery stage: three client feeds on phones, floating in 3D over black (same device as the homepage finale) */
.stage__img--phones{background:#000;overflow:hidden;perspective:1400px;position:relative}
.sphones{position:absolute;inset:0;transform-style:preserve-3d}
.sphones .fphone{--w:clamp(120px,11.5vw,200px);top:auto;transition:transform 1.4s var(--ease-out);transform-style:preserve-3d}
.sphones .fphone::after{content:attr(data-app);position:absolute;left:50%;bottom:calc(var(--w) * -.22);transform:translateX(-50%);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap}
.sphones .sp1{left:14%;bottom:18%;transform:rotateY(22deg) rotateX(6deg) rotateZ(-6deg) translateZ(-40px)}
.sphones .sp2{left:50%;bottom:26%;margin-left:calc(var(--w) * -.5);transform:rotateY(0) rotateX(4deg) translateZ(40px)}
.sphones .sp3{right:14%;bottom:14%;left:auto;transform:rotateY(-22deg) rotateX(6deg) rotateZ(6deg) translateZ(-40px)}
.sphones .fphone__in{box-shadow:0 40px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.stage:not(.is-on) .sphones .fphone{transform:translateY(60px)}
@media (max-width:900px){.sphones .fphone{--w:92px}.sphones .sp1{left:6%}.sphones .sp3{right:6%}}
.sphones .fphone__in img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:calc(var(--w) * .12);background:#111}
.sphones .fphone::after{display:none}
/* activate stage: three deliverables suspended at different depths, bleeding off the frame */
.stage__img--float .fphone{--w:clamp(130px,12.5vw,220px)}
.stage__img--float .fl1{left:-6%;top:-8%;bottom:auto;transform:rotateY(18deg) rotateX(-8deg) rotateZ(-10deg) translateZ(-80px) scale(.92)}
.stage__img--float .fl2{left:50%;top:14%;bottom:auto;margin-left:calc(var(--w) * -.5);transform:rotateY(-6deg) rotateX(4deg) rotateZ(3deg) translateZ(60px) scale(1.08)}
.stage__img--float .fl3{right:-8%;left:auto;bottom:-14%;transform:rotateY(-20deg) rotateX(8deg) rotateZ(12deg) translateZ(-40px)}
.stage:not(.is-on) .stage__img--float .fphone{transform:translateY(60px)}
/* process timeline v2: centred discovery phones; milestones pulse when reached, are clickable, and a marker rides the line */
.stage[data-i="0"] .sphones .sp1{bottom:28%}.stage[data-i="0"] .sphones .sp2{bottom:34%}.stage[data-i="0"] .sphones .sp3{bottom:24%}
.stages__line{margin-top:10px}
.stages__line i{cursor:pointer;pointer-events:auto;width:14px;height:14px;margin:-7px 0 0 -7px}
.stages__line i::before,.stages__line i::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid #fff;opacity:0;pointer-events:none}
.stages__line i.is-hit::before{animation:ripple 1.1s var(--ease-out) forwards}
.stages__line i.is-hit::after{animation:ripple 1.1s var(--ease-out) .18s forwards}
@keyframes ripple{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.5);opacity:0}}
.stages__line i:hover b{color:#fff}
.stages__head{position:absolute;top:50%;left:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.14),0 0 24px rgba(255,255,255,.7);transform:translateX(calc(var(--p,0) * var(--line-w,0px)));will-change:transform;pointer-events:none}
.stages__pct{position:absolute;top:-30px;left:0;transform:translateX(calc(var(--p,0) * var(--line-w,0px) - 50%));font-family:var(--display);font-weight:700;font-style:italic;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.55);white-space:nowrap;pointer-events:none}
.stages__pin{padding-top:clamp(110px,14vh,150px)}
/* discovery phones: true vertical centre of the container */
.stage[data-i="0"] .sphones .fphone{top:50%;bottom:auto;margin-top:calc(var(--w) * -1.055)}   /* half of the 9:19 height */
.stage[data-i="0"] .sphones .sp1{transform:rotateY(22deg) rotateX(6deg) rotateZ(-6deg) translateZ(-40px) translateY(4%)}
.stage[data-i="0"] .sphones .sp2{transform:rotateY(0) rotateX(4deg) translateZ(40px)}
.stage[data-i="0"] .sphones .sp3{transform:rotateY(-22deg) rotateX(6deg) rotateZ(6deg) translateZ(-40px) translateY(6%)}
.stage[data-i="0"]:not(.is-on) .sphones .fphone{transform:translateY(60px)}

/* =========================================================
   INSIGHT PAGE + ARTICLE
   ========================================================= */
.igrid{padding:0 0 clamp(80px,10vw,150px)}
.ig{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)}
.ig .ic{aspect-ratio:4/3.3}
.ig .ic.is-feat{grid-column:span 2;aspect-ratio:auto}
.ig .ic.is-hidden{display:none}
.ig .ic.is-moving{transition:transform .7s var(--ease-out),opacity .5s ease}
.ig .ic .ins__t{font-size:clamp(20px,1.9vw,30px)}
.ig .ic.is-feat .ins__t{font-size:clamp(26px,2.8vw,44px);max-width:620px}
.ig .ic .ins__x{color:rgba(255,255,255,.78)}
.post{padding:clamp(150px,18vw,250px) 0 clamp(60px,8vw,120px)}
.post__head{display:grid;gap:18px;max-width:1000px;margin:0 auto}
.post__back{font-size:13px;color:rgba(255,255,255,.6);width:max-content}
.post__back:hover{color:#fff}
.post__head .eyebrow{margin:0}
.post__head .h-xl--page{font-size:clamp(36px,5.4vw,84px)}
.post__standfirst{margin:6px 0 0;max-width:760px;font-size:clamp(18px,1.6vw,24px);line-height:1.35;color:rgba(255,255,255,.78);font-weight:300}
.post__by{display:flex;align-items:center;gap:12px;font-size:14px;margin-top:8px}
.post__by small{color:rgba(255,255,255,.55);font-size:12px}
.post__avatar{width:42px;height:42px;border-radius:50%;background:#222 center 20%/cover}
.post__hero{max-width:1240px;margin:clamp(36px,5vw,70px) auto;padding:0 var(--gutter)}
.post__hero>div{aspect-ratio:21/9;border-radius:clamp(16px,1.8vw,30px);background:#151515 center/cover}
.post__body{max-width:760px;margin:0 auto}
.post__body p{margin:0 0 1.4em;font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:rgba(255,255,255,.8)}
.post__lead{font-size:clamp(19px,1.6vw,24px)!important;color:#fff!important;line-height:1.45!important}
.post__body h2{margin:1.8em 0 .6em;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(26px,2.6vw,40px);line-height:.95;letter-spacing:var(--track-m,-.02em)}
.post__body blockquote{margin:1.6em 0;padding:0 0 0 24px;border-left:2px solid #fff;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(22px,2.2vw,34px);line-height:1.05;letter-spacing:var(--track-m,-.02em)}
.post__body ul{margin:0 0 1.6em;padding-left:20px;color:rgba(255,255,255,.8);font-size:clamp(15px,1.2vw,18px);line-height:1.6}
.post__tags{display:flex;gap:8px;margin-top:2em;padding-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.post__tags span{padding:6px 12px 5px;border-radius:999px;border:1px solid rgba(255,255,255,.4);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.post__next{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;margin:clamp(50px,7vw,100px) auto 0;padding-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.post__next a{display:grid;gap:8px}
.post__next a.is-right{text-align:right}
.post__next b{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(18px,1.8vw,26px);line-height:1;letter-spacing:var(--track-m,-.02em);transition:text-shadow .4s}
.post__next a:hover b{text-shadow:0 0 18px rgba(255,255,255,.55)}
@media (max-width:900px){.ig{grid-template-columns:1fr}.ig .ic.is-feat{grid-column:auto;aspect-ratio:4/3.3}.post__next{grid-template-columns:1fr}.post__next a.is-right{text-align:left}}
/* podcast posts: lazy YouTube embed, two-avatar byline */
.post__avatar.is-2{margin-left:-14px;box-shadow:0 0 0 2px var(--ink)}
.post__hero--video>div{aspect-ratio:16/9}
.post__embed{position:relative;background:#151515 center/cover;cursor:pointer;overflow:hidden}
.post__embed::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25);transition:background .4s}
.post__embed:hover::after{background:rgba(0,0,0,.1)}
.post__embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}
.post__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 24px 0 8px;border-radius:999px;background:#fff;color:#000;font-weight:500;font-size:15px;transition:transform .4s var(--ease)}
.post__play span{width:40px;height:40px;border-radius:50%;background:#000;display:grid;place-items:center}
.post__play span::before{content:"";border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff;margin-left:3px}
.post__embed:hover .post__play{transform:translate(-50%,-50%) scale(1.05)}
.post__cta{margin-top:2em}
/* insight cards + podcast heroes: B&W at rest, full colour on hover */
.ins__img{filter:grayscale(1) brightness(.85);transition:transform 1.2s var(--ease-out),filter .7s var(--ease)}
.ins__card:hover .ins__img,.ins__card:focus-visible .ins__img{filter:grayscale(0) brightness(1)}
.post__embed{filter:grayscale(1);transition:filter .7s var(--ease)}
.post__embed:hover,.post__embed:has(iframe){filter:none}
.post__hero--img>div{aspect-ratio:21/9;filter:grayscale(1);transition:filter .7s var(--ease)}
.post__hero--img:hover>div{filter:none}
/* podcast posts: the video preview shows the real YouTube thumbnail, in colour */
.post__embed{filter:none}
.ins--related{padding-top:clamp(60px,8vw,110px)}

/* =========================================================
   CONTACT / START A PROJECT
   ========================================================= */
.phead--contact .eyebrow{margin-bottom:18px}
.phead--contact .section-head__lede{max-width:620px;margin-top:22px}
.contact{padding:0 0 clamp(80px,10vw,140px)}
.contact__in{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:clamp(32px,6vw,110px);align-items:start}
.contact__info{display:grid;gap:26px;position:sticky;top:120px}
.contact__item{display:grid;gap:6px}
.contact__item a,.contact__item p{margin:0;font-size:clamp(17px,1.4vw,21px);line-height:1.4}
.contact__item>a{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(20px,1.9vw,28px);letter-spacing:var(--track-m,-.02em);transition:text-shadow .35s}
.contact__item a:hover{text-shadow:0 0 1px rgba(255,255,255,.4),-1px 0 5px rgba(70,140,255,.75),1px 0 5px rgba(255,170,90,.5),0 0 14px rgba(110,200,255,.3)}
.contact__item p a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.3)}
.contact__studio{aspect-ratio:4/3;border-radius:18px;background:#151515 center/cover;filter:grayscale(1);margin-top:6px}
.cform{display:grid;gap:clamp(26px,3vw,40px)}
.cform fieldset{border:0;margin:0;padding:0;display:grid;gap:16px}
.cform legend{padding:0 0 14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.55)}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:8px}
.field span{font-size:13px;color:rgba(255,255,255,.72)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px;color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px 16px;transition:border-color .3s,background .3s,box-shadow .3s;-webkit-appearance:none;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23fff' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.field select option{color:#000}
.field textarea{resize:vertical;min-height:130px}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.07);box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.field.is-bad input,.field.is-bad select{border-color:#ff6b6b}
.svcs{display:flex;flex-wrap:wrap;gap:8px}
.svc{position:relative;cursor:pointer}
.svc input{position:absolute;opacity:0;pointer-events:none}
.svc span{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.28);font-size:14px;color:rgba(255,255,255,.78);transition:background .3s,color .3s,border-color .3s}
.svc span::before{content:"+";font-weight:300;font-size:16px;line-height:1;transition:transform .35s var(--ease)}
.svc:hover span{border-color:#fff;color:#fff}
.svc input:checked+span{background:#fff;color:#000;border-color:#fff;font-weight:500}
.svc input:checked+span::before{transform:rotate(45deg)}
.svc input:focus-visible+span{box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.cform__consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:rgba(255,255,255,.65);cursor:pointer}
.cform__consent input{margin-top:2px;width:18px;height:18px;accent-color:#fff;flex:none}
.cform__consent a{text-decoration:underline;text-underline-offset:3px}
.cform__consent.is-bad{color:#ff8b8b}
.cform__foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cform__err{margin:0;color:#ff8b8b;font-size:14px}
.cform__done h2{margin:0 0 10px;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(30px,3.4vw,52px);line-height:.95}
.cform__done p{margin:0;color:rgba(255,255,255,.75)}
.cform__done a{text-decoration:underline;text-underline-offset:4px}
.pfoot--bar{padding:0}
@media (max-width:900px){.contact__in{grid-template-columns:1fr}.contact__info{position:static}.cform__row{grid-template-columns:1fr}}
/* contact: email / call / address read as actions */
.contact__item--link{position:relative;display:grid;gap:6px;padding:18px 64px 18px 20px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.03);transition:border-color .35s,background .35s}
.contact__item--link b{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(18px,1.6vw,24px);line-height:1.05;letter-spacing:var(--track-m,-.02em);transition:text-shadow .35s}
.contact__item--link address{font-style:normal;font-size:16px;line-height:1.45;color:rgba(255,255,255,.85)}
.contact__go{position:absolute;right:16px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;transition:background .35s var(--ease),color .35s var(--ease),transform .5s var(--ease-out)}
.contact__go svg{width:15px;height:15px}
.contact__item--link:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.contact__item--link:hover b{text-shadow:0 0 1px rgba(255,255,255,.4),-1px 0 5px rgba(70,140,255,.75),1px 0 5px rgba(255,170,90,.5),0 0 14px rgba(110,200,255,.3)}
.contact__item--link:hover .contact__go{background:#fff;color:#000;transform:rotate(45deg)}
.contact__info{gap:12px}
.contact__info>.contact__item:not(.contact__item--link){padding:12px 4px 0}
.lw__stats--line{white-space:normal}
.lw__line{margin:0;max-width:520px;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(20px,2vw,32px);line-height:1;letter-spacing:var(--track-m,-.02em)}
/* testimonials: real Google reviews (pull quote + full review) */
.testi__lead{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px}
.testi__lead .eyebrow{margin:0}
.testi__rating{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:#fff;text-decoration:none;font-size:12px;letter-spacing:.04em;transition:background .3s,border-color .3s}
.testi__rating:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)}
.testi__rating b{font-family:var(--display);font-style:italic;font-size:15px}
.testi__rating .tq__stars svg{width:12px;height:12px}
.tq__q{font-size:min(4vw,5.6vh,72px);max-width:28ch}
.tq__full{max-width:68ch;font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:rgba(255,255,255,.66);opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .7s var(--ease-out)}
.tq__full p{margin:0}
.tq__full p+p{margin-top:.8em}
.tq.is-on .tq__full{opacity:1;transform:none;transition-delay:.45s}
@media (max-width:760px){.tq__q{font-size:min(7.4vw,4.4vh)}.tq__full{font-size:14px}}

/* =====================================================================
   PROJECT TEMPLATE (work-*.html)
   ===================================================================== */
.pj-h{margin:0;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(34px,4.4vw,72px);line-height:.92;letter-spacing:var(--track-m,-.02em)}
/* 1 hero */
.pj-hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--ink);isolation:isolate}
.pj-hero__media{position:absolute;inset:0;z-index:-1}
.pj-hero__vid{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02)}
.pj-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,10,.45) 0%,rgba(10,10,10,0) 28%,rgba(10,10,10,.15) 55%,rgba(10,10,10,.92) 100%)}
.pj-hero__in{position:absolute;left:0;right:0;bottom:0;display:grid;gap:clamp(28px,4vh,48px);padding-bottom:clamp(40px,6vh,72px)}
.pj-hero__logo{height:clamp(34px,3.2vw,52px);width:auto;margin-bottom:clamp(16px,2vh,24px);display:block}
.pj-hero__head .eyebrow{margin-bottom:14px}
.pj-hero__title{margin:0;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(46px,7.4vw,128px);line-height:.88;letter-spacing:var(--track-l,-.025em)}
.pj-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.25);padding-top:clamp(18px,2.4vh,28px)}
.pj-stats .lw__stat{padding:0 clamp(16px,2.4vw,40px);border-left:1px solid rgba(255,255,255,.2)}
.pj-stats .lw__stat:first-child{padding-left:0;border-left:0}
.pj-stats .lw__stat b{display:block;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(40px,5vw,92px);line-height:.9;letter-spacing:var(--track-m,-.02em)}
.pj-stats .lw__stat span{display:block;margin-top:8px;font-size:clamp(11px,.9vw,13px);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.pj-hero__cue{position:absolute;right:var(--gutter);top:50%;width:1px;height:70px;background:rgba(255,255,255,.2);overflow:hidden}
.pj-hero__cue span{position:absolute;left:0;top:-40%;width:1px;height:40%;background:#fff;animation:pjCue 2s var(--ease-out) infinite}
@keyframes pjCue{to{top:100%}}
/* 2 brief */
.pj-brief{padding:clamp(90px,11vw,170px) 0 clamp(60px,7vw,110px)}
.pj-brief__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:clamp(40px,7vw,140px);align-items:start}
.pj-brief__main .eyebrow{margin-bottom:18px}
.pj-brief__main .pj-h{max-width:16ch;margin-bottom:clamp(24px,3vw,40px)}
.pj-brief__main p{margin:0 0 1em;max-width:62ch;font-size:clamp(16px,1.3vw,20px);line-height:1.55;color:rgba(255,255,255,.78)}
.pj-brief__main p strong,.pj-steps p strong{color:#fff;font-weight:600}
.pj-side{position:sticky;top:120px;padding:clamp(22px,2.4vw,34px);border:1px solid rgba(255,255,255,.14);border-radius:clamp(16px,1.6vw,24px);background:rgba(255,255,255,.03)}
.pj-meta{margin:0 0 26px;display:grid;gap:14px}
.pj-meta div{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline}
.pj-meta dt,.pj-side__k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.pj-meta dd{margin:0;font-size:15px}
.pj-meta a{border-bottom:1px solid rgba(255,255,255,.3)}
.pj-side__k{margin:0 0 12px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.pj-svcs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pj-svcs li{padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);font-size:13px;line-height:1}
/* 3 solve */
.pj-solve{padding:clamp(40px,5vw,80px) 0 clamp(90px,10vw,160px)}
.pj-solve__head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,70px)}
.pj-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px)}
.pj-steps li{padding-top:22px;border-top:1px solid rgba(255,255,255,.25)}
.pj-steps__n{font-family:var(--display);font-style:italic;font-weight:700;font-size:14px;color:rgba(255,255,255,.5)}
.pj-steps h3{margin:14px 0 12px;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(22px,2vw,32px);line-height:.95}
.pj-steps p{margin:0;font-size:clamp(15px,1.1vw,17px);line-height:1.55;color:rgba(255,255,255,.72)}
/* modules shared */
.mod{padding:clamp(70px,8vw,130px) 0;border-top:1px solid rgba(255,255,255,.1)}
.mod__head{display:grid;gap:14px;margin-bottom:clamp(32px,4vw,60px)}
.mod__head--row{grid-template-columns:1fr auto;align-items:end}
.mod__head--row .eyebrow{margin-bottom:14px}
.mod__lede{margin:0;max-width:52ch;font-size:clamp(15px,1.15vw,18px);line-height:1.5;color:rgba(255,255,255,.65)}
/* 4 long-form */
.lf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(16px,1.6vw,28px)}
.lf{all:unset;box-sizing:border-box;display:grid;gap:14px;cursor:pointer;min-width:0}
.lf--feat{grid-column:1/-1;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:end;gap:clamp(20px,3vw,48px)}
.lf__media{position:relative;display:block;aspect-ratio:16/9;border-radius:clamp(12px,1.2vw,20px);overflow:hidden;background:var(--ink-2);isolation:isolate}
.lf__media img,.lf__loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out),opacity .5s}
.lf__loop{opacity:0}
.lf.is-playing .lf__loop{opacity:1}
.lf:hover .lf__media img,.lf:hover .lf__loop{transform:scale(1.04)}
.lf__play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.35);transition:transform .5s var(--ease-out),background .3s}
.lf--feat .lf__play{width:92px;height:92px;margin:-46px 0 0 -46px}
.lf__play svg{width:40%;height:40%;fill:#fff;margin-left:6%}
.lf:hover .lf__play{transform:scale(1.1);background:rgba(255,255,255,.26)}
.lf__dur{position:absolute;right:10px;bottom:10px;padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.7);font-size:12px;font-variant-numeric:tabular-nums}
.lf__meta{display:grid;gap:8px;min-width:0}
.lf__kind{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.lf__t{font-size:clamp(15px,1.15vw,18px);line-height:1.3;font-weight:500}
.lf--feat .lf__t{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(26px,2.6vw,44px);line-height:.95}
.lf__v{font-size:13px;color:rgba(255,255,255,.55)}
.lf:focus-visible .lf__media{outline:2px solid #fff;outline-offset:4px}
/* 5 photography */
.ph-grid{columns:3;column-gap:clamp(12px,1.4vw,22px)}
.ph{all:unset;display:block;width:100%;margin:0 0 clamp(12px,1.4vw,22px);break-inside:avoid;border-radius:clamp(10px,1vw,18px);overflow:hidden;cursor:pointer;background:var(--ink-2)}
.ph img{display:block;width:100%;height:auto;transition:transform 1.1s var(--ease-out),filter .6s}
.ph:hover img{transform:scale(1.035)}
.ph:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* 6 social */
.so-rail{display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(var(--gutter),calc((100vw - 1520px)/2 + var(--gutter))) 24px;scrollbar-width:none;cursor:grab}
.so-rail::-webkit-scrollbar{display:none}
.so-rail.is-drag{cursor:grabbing;scroll-snap-type:none}
.so{flex:0 0 clamp(200px,19vw,280px);margin:0;scroll-snap-align:start}
.so__ph{position:relative;aspect-ratio:9/16;border-radius:clamp(22px,2.2vw,34px);overflow:hidden;background:var(--ink-2);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.so__ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.so figcaption{margin-top:12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
/* 7 related */
.pj-rel{padding:clamp(70px,8vw,130px) 0 clamp(90px,10vw,150px);border-top:1px solid rgba(255,255,255,.1)}
.pj-rel__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.pj-rel__grid .wc{grid-column:auto;margin:0}
.pj-rel__grid .wc .wc__media{aspect-ratio:4/5}
.pj-rel__grid .wc__meta{flex-direction:column;align-items:flex-start;gap:14px}
.pj-rel__grid .wc__stat{text-align:left}
/* lightbox */
.pj-lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(16px,4vw,64px);background:rgba(5,5,5,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transition:opacity .35s}
.pj-lb.is-open{opacity:1}
.pj-lb[hidden]{display:none}
.pj-lb__stage{width:min(100%,1400px);max-height:100%;display:grid;place-items:center}
.pj-lb__stage iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:#000}
.pj-lb__stage img{max-width:100%;max-height:calc(100svh - 120px);border-radius:12px;display:block}
.pj-lb__x{position:absolute;top:clamp(14px,2vw,28px);right:clamp(14px,2vw,28px);width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);cursor:pointer;display:grid;place-items:center}
.pj-lb__x svg{width:20px;height:20px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round}
.pj-lb__nav{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;font-size:20px;cursor:pointer}
.pj-lb__nav--p{left:clamp(10px,2vw,28px)}.pj-lb__nav--n{right:clamp(10px,2vw,28px)}
@media (max-width:1000px){
  .pj-brief__grid{grid-template-columns:1fr}
  .pj-side{position:static}
  .pj-steps{grid-template-columns:1fr}
  .lf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lf--feat{grid-template-columns:1fr}
  .ph-grid{columns:2}
  .pj-rel__grid{grid-template-columns:1fr 1fr}
  .pj-rel__grid .wc:nth-child(3){display:none}
}
@media (max-width:640px){
  .pj-stats .lw__stat{padding:0 10px}
  .pj-stats .lw__stat b{font-size:clamp(30px,9vw,40px)}
  .pj-stats .lw__stat span{font-size:10px}
  .lf-grid{grid-template-columns:1fr}
  .so{flex-basis:62vw}
  .pj-rel__grid{grid-template-columns:1fr}
  .pj-rel__grid .wc:nth-child(3){display:block}
  .mod__head--row{grid-template-columns:1fr}
  .pj-hero__cue{display:none}
}
.so-rail{scroll-padding-inline:max(var(--gutter),calc((100vw - 1520px)/2 + var(--gutter)))}
.lf--wide{grid-column:span 2}
@media (max-width:1000px){.lf--wide{grid-column:auto}}
/* project v2: brief + solve share the column beside the sticky services */
.pj-brief__solve{margin-top:clamp(48px,6vw,90px);padding-top:clamp(32px,4vw,52px);border-top:1px solid rgba(255,255,255,.14)}
.pj-brief__solve .eyebrow{margin-bottom:18px}
.pj-h--sm{font-size:clamp(28px,3.2vw,52px);margin-bottom:clamp(20px,2.4vw,32px)}
.pj-brief{padding-bottom:clamp(90px,10vw,150px)}
/* featured long-form: live YouTube preview + badge */
.lf__yt{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity 1s ease;pointer-events:none}
.lf__yt iframe{position:absolute;left:50%;top:50%;width:100%;height:100%;border:0;transform:translate(-50%,-50%) scale(1.22)}
.lf.is-live .lf__yt{opacity:1}
.lf.is-live .lf__play{opacity:.85}
.lf__new{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;background:#fff;color:#0a0a0a;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.lf__new::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 8px #ff3b3b;animation:blink 1.4s steps(1) infinite}
.lf__d{font-size:clamp(14px,1.05vw,16px);line-height:1.5;color:rgba(255,255,255,.65);max-width:40ch}
.lf__play,.lf__dur{z-index:2}
/* photography carousel (16:9, story bars, click halves) */
.pj-car{position:relative;overflow:hidden;border-radius:clamp(16px,1.8vw,30px);aspect-ratio:16/9;background:var(--ink-2);isolation:isolate;outline:none}
.pj-car__img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.04);transition:opacity 1.2s ease,transform 5s linear}
.pj-car__img.is-on{opacity:1;transform:scale(1)}
.pj-car__img.is-tall{background-size:contain;background-repeat:no-repeat}
.pj-car__img.is-tall::before{content:"";position:absolute;inset:-40px;z-index:-1;background:var(--bg) center/cover;filter:blur(36px) brightness(.45)}
.pj-car::after{content:"";position:absolute;inset:auto 0 0;height:22%;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent);pointer-events:none}
.pj-car__hit{position:absolute;top:0;bottom:40px;width:50%;background:none;border:0;cursor:none;z-index:2}
.pj-car__hit.is-prev{left:0}.pj-car__hit.is-next{right:0}
@media (hover:none){.pj-car__hit{cursor:pointer}}
.pj-car__bars{position:absolute;left:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);bottom:clamp(12px,1.6vw,20px);display:flex;gap:4px;z-index:3}
.pj-car__bars button{flex:1;height:18px;padding:8px 0;background:none;border:0;cursor:pointer}
.pj-car__bars i{display:block;height:2px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden;position:relative}
.pj-car__bars i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(var(--p,0))}
.pj-car__count{position:absolute;right:clamp(16px,2vw,28px);top:clamp(16px,2vw,28px);z-index:3;padding:6px 12px;border-radius:999px;background:rgba(10,10,10,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--display);font-style:italic;font-weight:700;font-size:13px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.pj-car__count b{color:#fff}
.pj-car:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* related: copy sits inside the tile */
.pj-rel__grid .wc{position:relative}
.pj-rel__grid .wc .wc__media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,10,0) 40%,rgba(10,10,10,.88) 100%);pointer-events:none}
.pj-rel__grid .wc__meta{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:clamp(18px,1.8vw,26px);flex-direction:column;align-items:flex-start;gap:14px;pointer-events:none}
.pj-rel__grid .wc__name{font-size:clamp(20px,1.6vw,26px)}
.pj-rel__grid .wc__line{color:rgba(255,255,255,.75)}
.pj-rel__grid .wc__stat{text-align:left;display:flex;align-items:baseline;gap:10px}
.pj-rel__grid .wc__stat b{font-size:clamp(26px,2.4vw,38px)}
.pj-brief__main .pj-h--sm{max-width:none}
.pj-lb__stage video{width:100%;max-height:calc(100svh - 120px);aspect-ratio:16/9;border-radius:14px;background:#000;outline:none}
.pj-stats--line{display:block;border-top:1px solid rgba(255,255,255,.25);padding-top:clamp(18px,2.4vh,28px)}
.pj-stats--line .lw__line{max-width:640px;font-size:clamp(22px,2.6vw,40px)}
.pj-hero__word{display:block;margin-bottom:clamp(16px,2vh,24px);font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(20px,1.8vw,28px);letter-spacing:.02em}
.lw__panel.d0{cursor:pointer}
.lw__open{position:absolute;right:clamp(16px,2vw,28px);top:clamp(16px,2vw,28px);z-index:3;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:rgba(10,10,10,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fff;opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .5s var(--ease-out),background .3s}
.lw__panel.d0 .lw__open{opacity:1;transform:none;transition-delay:.3s}
.lw__open:hover{background:rgba(255,255,255,.18)}
.lw__open span{transition:transform .3s}.lw__open:hover span{transform:translateX(3px)}
.pj-stats--line .lw__line{max-width:900px;font-size:clamp(18px,2vw,30px);line-height:1.05}
/* social clip sound toggle */
.so__ph{isolation:isolate}
.so__mute{position:absolute;right:12px;bottom:12px;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(10,10,10,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;display:grid;place-items:center;transition:background .3s,transform .3s var(--ease-out)}
.so__mute:hover{background:rgba(255,255,255,.18);transform:scale(1.06)}
.so__mute svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
.so__mute svg path:first-child{fill:#fff;stroke:none}
.so__mute .so__ic-on{display:none}
.so__mute.is-on .so__ic-on{display:block}.so__mute.is-on .so__ic-off{display:none}
.so__mute.is-on{background:#fff;border-color:#fff}
.so__mute.is-on svg{stroke:#0a0a0a}.so__mute.is-on svg path:first-child{fill:#0a0a0a}
.pfoot__glass{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .8s}
.pfoot__glass.is-on{opacity:1}
.pfoot__glass canvas{position:absolute;inset:0}
.pfoot .wrap{z-index:1}
/* instagram post embed inside an article */
.post__ig{margin:clamp(28px,4vw,48px) auto;max-width:400px}
.post__ig-ph{position:relative;aspect-ratio:9/16;border-radius:clamp(20px,2vw,30px);overflow:hidden;background:var(--ink-2);border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);cursor:pointer;isolation:isolate}
.post__ig-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.post__ig-ph:hover img{transform:scale(1.03)}
.post__ig-ph iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;z-index:2}
.post__ig-ph.is-live img,.post__ig-ph.is-live .post__ig-play{display:none}
.post__ig-play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.35);transition:transform .5s var(--ease-out),background .3s}
.post__ig-play svg{width:40%;height:40%;fill:#fff;margin-left:6%}
.post__ig-ph:hover .post__ig-play{transform:scale(1.1);background:rgba(255,255,255,.26)}
.post__ig figcaption{margin-top:14px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.6);text-align:center}
.post__ig figcaption a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
/* lightbox: native cursor back, custom cursor off, big clear close button */
html.is-lb-open .cursor{opacity:0!important}
html.is-lb-open body.has-cursor,html.is-lb-open body.has-cursor a,html.is-lb-open body.has-cursor button{cursor:auto}
html.is-lb-open .pj-lb__x,html.is-lb-open .pj-lb__nav,html.is-lb-open .pj-lb__stage iframe,html.is-lb-open .pj-lb__stage video{cursor:pointer}
.pj-lb{z-index:400}
.pj-lb__x{width:auto;height:52px;padding:0 20px 0 16px;gap:10px;border-radius:999px;background:#fff;border-color:#fff;color:#0a0a0a;font-weight:500;font-size:14px;letter-spacing:.02em;display:inline-flex;align-items:center;transition:transform .3s var(--ease-out),background .3s}
.pj-lb__x svg{stroke:#0a0a0a;width:18px;height:18px}
.pj-lb__x:hover{transform:scale(1.05)}
.pj-lb__x:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pj-lb__stage iframe{box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
/* stills inside an article */
.post__gallery{display:grid;gap:clamp(10px,1.2vw,18px);margin:clamp(28px,4vw,48px) 0}
.post__gallery--2{grid-template-columns:1fr 1fr}
.post__gallery img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;border-radius:clamp(12px,1.2vw,20px);background:var(--ink-2)}
.post__gallery--bts{grid-template-columns:minmax(0,420px);justify-content:center;text-align:center}
.post__gallery--bts img{aspect-ratio:3/4}
.post__gallery--bts figcaption{font-size:13px;color:rgba(255,255,255,.6);margin-top:4px}
@media (max-width:640px){.post__gallery--2{grid-template-columns:1fr}}
/* launch hardening */
html{overflow-x:clip}
body{overflow-x:clip}
@media (max-width:900px){.lw__panel.d0 .lw__tags{top:calc(clamp(20px,2.6vw,36px) + 50px);bottom:auto;left:clamp(20px,2.6vw,36px);right:auto;flex-wrap:wrap;max-width:70%}}
@media (max-width:640px){
  .pj-stats{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0}
  .pj-stats .lw__stat span{font-size:9px;letter-spacing:.04em;line-height:1.25}
  .pj-brief__main .pj-h{font-size:clamp(30px,9vw,40px)}
  .post__ig{max-width:100%}
  .pj-lb{padding:12px}
  .pj-lb__x{top:12px;right:12px;height:44px;padding:0 14px 0 12px}
  .so-rail{padding-left:var(--gutter);padding-right:var(--gutter)}
}
img{max-width:100%;height:auto}
.pj-hero__vid,.so__ph video,.lf__loop,.wc__loop{max-width:none;height:100%}

/* phones: keep the nav refraction halo inside the viewport */
@media (max-width:640px){.nav__refract{inset:-10px;padding:10px}}

/* =========================================================
   MOBILE PASS 2 — fixes from the first phone walkthrough (iPhone 16 Pro)
   ========================================================= */
/* split-text: italic glyphs overhang their box; give each letter room so Safari never trims the right edge mid-animation */
.split .ch{padding-right:.22em;margin-right:-.22em}
/* the headline must not flash in plain before the opening sequence types it in */
html.intro .hero__title:not(.is-in){visibility:hidden}
/* film noise: cover the whole screen on phones, including behind the toolbars and the rounded corners */
.page-noise{inset:0;width:100%;height:100vh;height:100lvh}
/* burger: just the two lines, no circle */
.nav__burger{background:none;box-shadow:none}

@media (max-width:900px){
  /* full-screen black menu: big N27 items, centred, Start Project as the real button */
  .nav__sheet{position:fixed;inset:0;top:0;left:0;right:0;bottom:0;height:100dvh;z-index:-1;padding:0 var(--gutter);border-radius:0;background:#0a0a0a;
    -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;justify-content:center;align-items:center;gap:6px;
    opacity:0;transform:none;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s}
  .nav.is-open .nav__sheet{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
  .nav__sheet a{padding:10px 0;border:0;text-align:center;font-size:clamp(44px,14vw,72px);line-height:.92;letter-spacing:var(--track-l,-.025em);
    opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .7s var(--ease-out)}
  .nav.is-open .nav__sheet a{opacity:1;transform:none}
  .nav.is-open .nav__sheet a:nth-child(1){transition-delay:.08s}.nav.is-open .nav__sheet a:nth-child(2){transition-delay:.14s}
  .nav.is-open .nav__sheet a:nth-child(3){transition-delay:.2s}.nav.is-open .nav__sheet a:nth-child(4){transition-delay:.3s}
  .nav__sheet .nav__cta{display:inline-flex;margin:28px 0 0;height:60px;padding:0 26px 0 30px;font-size:16px;line-height:1.15;letter-spacing:var(--track-s);border:0}
  .nav__sheet .nav__cta .cta__plus{width:15px;height:15px}
  .nav.is-open .nav__glass{background:transparent}
  html.is-menu-open,html.is-menu-open body{overflow:hidden}

  /* latest-work panels: stats stacked, tags pinned top-right (stacked when there are two), logo smaller,
     and nothing fades in until the panel has finished resizing */
  .lw__top{top:18px;left:18px;right:auto;max-width:38%}
  .lw__logo{height:22px}
  .lw__wordmark{font-size:15px}
  .lw__tags,.lw__panel.d0 .lw__tags{display:flex;flex-direction:column;align-items:flex-end;gap:5px;top:18px;right:18px;left:auto;bottom:auto;max-width:60%}
  .lw__tags li{font-size:10px;padding:5px 10px 4px;white-space:nowrap}
  .lw__stats{left:18px;right:18px;bottom:20px;flex-direction:column;row-gap:12px;white-space:normal}
  .lw__stat,.lw__stat:first-child{padding:0 0 0 12px;border-left:1px solid rgba(255,255,255,.35);gap:3px}
  .lw__stat b{font-size:clamp(28px,8vw,34px)}
  .lw__stat span{font-size:10px}
  .lw__panel.d0 .lw__top,.lw__panel.d0 .lw__stats,.lw__panel.d0 .lw__tags{transition-delay:.95s}
  .lw__panel:not(.d0) .lw__top,.lw__panel:not(.d0) .lw__stats,.lw__panel:not(.d0) .lw__tags{transition:opacity .2s var(--ease);transform:none}

  /* buttons keep their natural width in stacked header rows */
  .ins__head,.mod__head--row,.section-head--row{align-items:flex-start}
  .ins__head .btn,.mod__head--row .btn,.section-head--row .btn,.skills__in .btn,
  .ins__head .gbtn,.mod__head--row .gbtn,.section-head--row .gbtn,.skills__in .gbtn,
  .ins__head .nav__cta,.mod__head--row .nav__cta,.section-head--row .nav__cta,.skills__in .nav__cta{align-self:flex-start;justify-self:start;width:auto}

  /* footer bar: contact details stacked on the left, time + place bottom right */
  .finale__bar{grid-template-columns:1fr auto;grid-template-areas:"links brand" "links clock";align-items:end}
  .finale__bar .finale__brand{grid-area:brand;justify-self:end;align-self:start}
  .finale__bar .finale__links{grid-area:links;flex-direction:column;align-items:flex-start;gap:14px;text-align:left}
  .finale__bar .clock{grid-area:clock;align-self:end;text-align:right;padding-bottom:1px}
  .finale__bar .clock .footer__k{display:block;margin-bottom:3px}

  /* about: taller image frame, stacked service lists, process stacks image → title → copy */
  .ab-hero__media{aspect-ratio:4/5}
  .skills__in{grid-template-columns:1fr}
  .skills__cols{grid-template-columns:1fr;gap:8px}
  .stages{height:calc(100svh * 5 + 200vh)}
  .stages__pin{height:100svh;padding-top:88px;grid-template-rows:auto 1fr;gap:16px}
  .stage{grid-template-rows:auto 1fr;gap:18px;align-content:start}
  .stage__img{height:min(42svh,380px);max-height:none}
  .stages__pct{display:none}
  .stage__copy{grid-template-columns:1fr;align-content:start;gap:10px}
  .stage__copy>*{grid-column:1}
  .stage__copy .step__n{order:0}.stage__copy h3{order:1;font-size:clamp(34px,10.5vw,44px)}.stage__copy .step__k{order:2}.stage__copy p{order:3;font-size:15.5px}

  /* project pages: client / sector box first, then the brief; photography gets a taller frame */
  .pj-brief__grid{gap:36px}
  .pj-side{order:-1}
  .pj-car{aspect-ratio:4/5}
  .pj-rel .mod__head--row .gbtn{width:auto}

  /* contact: the form gets its own heading once it stacks under the details */
  .cform__head{display:block;margin:0 0 6px}
}
@media (max-width:760px){
  /* testimonial timer above the quote, where it can be seen whatever the review length */
  .testi .wrap{display:flex;flex-direction:column}
  .testi__head{order:0}
  .testi__bars{order:1;margin:0 0 26px}
  .testi__stage{order:2}
  /* "Let's make some noise" the same size on every page as the homepage finale */
  .pfoot__in .glow-title{font-size:min(12vw,7.5vh)}
}
@media (min-width:901px){.cform__head{display:none}}

/* pass 3 */
.btn__play svg,.gbtn .btn__play svg{width:9px;height:9px;fill:currentColor;display:block}
/* insight cards: excerpt capped at two lines so it never swallows the image */
.ins__x{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis}
.ins__card:hover .ins__x{max-height:3em}
@media (max-width:900px){
  .ins__x{max-height:3em}
  /* "What we do" band: less dead space around the heading on phones */
  .services{padding-top:clamp(48px,9vw,80px)}
  .services .section-head{margin-bottom:clamp(24px,5vw,40px);gap:16px}
  .services .section-head .eyebrow{margin-bottom:0}
  /* insight → finale: pull the first stat up so the page doesn't look finished */
  .ins{padding-bottom:28px}
}

/* pass 4 */
/* glass buttons: the label never wraps (it was folding onto a hidden second line and leaving a gap) */
.gbtn,.gbtn__label,.tab__roll{white-space:nowrap}
/* testimonials: one Google rating lock-up at the top is enough */
.tq__g{display:none}
/* work cards: count-ups must not reflow the copy beside them */
.wc__stat b,.lw__stat b,.cs-stats b,.pj-stats b{font-variant-numeric:tabular-nums}
/* founders heading: same size as every other page title */
.founders__h{font-size:clamp(40px,6vw,96px)}
/* about copy: paragraphs arrive one after another */
.who-we-are__copy p:nth-child(2){transition-delay:.12s}.who-we-are__copy p:nth-child(3){transition-delay:.24s}
/* contact form: fields arrive one by one */
.cform .field[data-reveal]{transform:translateY(24px)}
.cform .field[data-reveal]:nth-child(2){transition-delay:.1s}
/* band: continuous marquee on phones (the scroll-linked version stuttered) */
@keyframes bandMarq{to{transform:translate3d(-50%,0,0)}}
.band__row--marq{animation:bandMarq var(--dur,26s) linear infinite}
.band__row--marq.is-rev{animation-direction:reverse}
@media (max-width:900px){
  .manifesto__pin{padding-top:96px}
  .stages__pin{padding-top:128px;gap:26px}
  .stage__img,.stage__img--phones{height:min(40svh,360px)}
  .stage__img--phones .fphone,.stage__img--float .fphone{--w:min(25vw,108px)}
  .stage[data-i="0"] .sphones .fphone{margin-top:calc(var(--w) * -1.055)}
  .stage__img--float .fl1{left:3%;top:6%}
  .stage__img--float .fl2{top:16%}
  .stage__img--float .fl3{right:7%;bottom:8%}
  .finale__bar{padding-top:12px;padding-bottom:12px;align-items:end}
  .finale__bar .finale__links{gap:10px}
  .finale__bar .clock{align-self:end;line-height:1}
  .finale__bar .clock .footer__k{margin-bottom:2px}
  .finale__bar .clock__t{font-size:18px}
  /* inner-page CTA: lands as a full-screen lock-up with the footer bar at the very bottom */
  .pfoot{display:flex;flex-direction:column;min-height:100svh;padding-top:0}
  .pfoot--bar{min-height:0;display:block}
  .pfoot__in{flex:1;align-content:center;padding:96px 0 40px}
}

/* pass 5 */
/* film noise: overscan the viewport so it reaches every corner and behind the toolbars on phones */
.page-noise{inset:-6vh -6vw;width:112vw;height:112vh;height:112lvh;transform:translateZ(0)}
/* no grey tap flash on carousels / taps (iOS) */
*{-webkit-tap-highlight-color:transparent}
.pj-car__hit,.ab-hero__hit,.pj-car,.ab-hero__media{touch-action:manipulation}
/* insight cards: the box-shadow transition was overriding the reveal, so they popped in */
.ins__card[data-reveal]{transition:box-shadow .5s var(--ease),opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
.ins__card.is-in{opacity:1;transform:none}
/* homepage: phones get the inner-page CTA instead of the scroll-driven finale */
.pfoot--home{display:none}
@media (max-width:900px){.finale{display:none}.pfoot--home{display:flex}}

/* phones: glass icons are baked filmstrips (no live WebGL), so scrolling stays smooth */
.hero__gems{display:none}
@keyframes gemFloat{to{transform:translateY(-14px)}}
@media (max-width:900px){
  .hero__gems{display:block;position:absolute;inset:0;pointer-events:none}
  .hero__gem{position:absolute;width:var(--s,120px);height:var(--s,120px);animation:gemFloat 5.5s ease-in-out infinite alternate}
  .hero__gem.g1{left:6%;top:20%;--s:150px}
  .hero__gem.g2{right:5%;top:30%;--s:118px;animation-delay:-2s}
  .hero__gem.g3{left:54%;top:50%;--s:128px;animation-delay:-3.5s}
  body{position:relative}
  .page-glass{position:absolute;top:0;left:0;right:0;height:100%;overflow:hidden}
  .pg-gem{position:absolute;width:112px;height:112px;animation:gemFloat 6s ease-in-out infinite alternate}
}
/* founders: portrait above the name, larger, mono until hovered */
.founder{grid-template-columns:1fr;gap:18px}
.founder__photo{width:clamp(150px,13vw,210px);filter:grayscale(1);transition:filter .6s var(--ease),transform .6s var(--ease-out)}
.founder:hover .founder__photo{filter:none;transform:scale(1.03)}
@media (max-width:900px){.founder__photo{width:140px}}

/* pass 7 */
/* animated titles: room for the italic overhang at the end of every line, and on each testimonial word */
.h-xl .line,.glow-title .line,.pj-h .line{padding-right:.24em}
.tq__w{padding:0 .14em 0 .02em;margin:0 -.14em 0 -.02em}
@media (max-width:900px){
  .pfoot__in .section-head__lede{padding:0 14px}
  .gbtn .btn__play{width:30px;height:30px}
  .gbtn .btn__play svg{width:12px;height:12px}
  /* nav logo tuck as a tween */
  .logo-clip{transition:width .75s var(--ease)}
  .logo-social{transition:transform .75s var(--ease)}
  .nav.is-tucked .nav__logo{--vbw:346}
  .nav.is-tucked .logo-social{transform:translateX(-372px)}
  html.intro .logo-clip,html.intro .logo-social{transition:none}
  /* project panels: logos back to their original size */
  .lw__logo{height:26px}
  .lw__wordmark{font-size:17px}
  .lw__top{max-width:52%}
}

/* pass 8 */
.gbtn .btn__play svg{width:11px;height:11px}
@media (max-width:900px){
  .gbtn .btn__play{width:32px;height:32px}
  .gbtn .btn__play svg{width:14px;height:14px}
  /* every page's CTA: same full-screen lock-up, copy centred, footer bar flush at the bottom */
  .pfoot{min-height:100svh;padding-bottom:0}
  .pfoot__in{flex:1;align-content:center;padding:96px 0 48px}
  .pfoot .finale__bar{margin-top:0}
  .cform__head .pj-h{max-width:none}
}
@media (max-width:900px){.pfoot--bar{min-height:0;display:block;padding-top:0}}

/* phones: baked icons arrive with a pop instead of just appearing */
@keyframes gemIn{from{opacity:0;transform:translateY(46px) scale(.55) rotate(-14deg)}60%{opacity:1}to{opacity:1;transform:none}}
@media (max-width:900px){
  .hero__gem{opacity:0}
  html.gem-ready:not(.intro) .hero__gem,html.gem-ready.intro-4 .hero__gem{animation:gemIn .9s cubic-bezier(.2,.9,.25,1.12) both,gemFloat 5.5s ease-in-out .9s infinite alternate}
  html.gem-ready:not(.intro) .hero__gem.g2,html.gem-ready.intro-4 .hero__gem.g2{animation-delay:.14s,1.04s}
  html.gem-ready:not(.intro) .hero__gem.g3,html.gem-ready.intro-4 .hero__gem.g3{animation-delay:.28s,1.18s}
  .pfoot__glass.is-on{opacity:1}
  .pf-gem{position:absolute;width:118px;height:118px;opacity:0}
  .pf-gem--1{left:4%;top:9%}
  .pf-gem--2{right:3%;top:16%;width:98px;height:98px}
  html.gem-ready .pfoot.is-in .pf-gem{animation:gemIn .9s cubic-bezier(.2,.9,.25,1.12) both,gemFloat 6s ease-in-out .9s infinite alternate}
  html.gem-ready .pfoot.is-in .pf-gem--2{animation-delay:.16s,1.06s}
}

/* ---- showreel button: no reel yet, so hover/tap rolls the label to "Coming soon" ---- */
.gbtn.is-alt .tab__roll span{transform:translateY(-100%)}
.gbtn[aria-disabled="true"]{cursor:default}