/* Layout: light-first, high-contrast editorial page on a wide left-aligned grid. Oversized Oswald headlines,
   white space as a brand element, documentary photography of real work in black frames, one black "mode"
   (Studio, and the results band on case pages) and one yellow field (Brief Us).
   Single look by choice: a brand site has to render the same for every reviewer. */
:root{
  color-scheme:light;
  --paper:#f8f8f8;      /* Off-White: page ground */
  --white:#ffffff;      /* True white: lifted sections, form fields */
  --ink:#161616;        /* Almost Black: type, rules, black mode */
  --black:#000000;      /* True Black: video and photo frames only */
  --yellow:#ffe600;     /* Vivid Yellow: intentional, not mandatory */
  --red:#D92B1F;        /* Signal Red: punctuation only */
  --mist:#ecece9;       /* light gray */
  --rule:#d0d0cc;       /* hairlines on light */
  --muted:#62625d;      /* secondary text on light */
  --ash:#a8a8a2;        /* secondary text on dark */
  --graphite:#2c2c2a;   /* rules and fills on dark */
  --scrim:rgb(0 0 0 / .62);
  --scrim-0:rgb(0 0 0 / 0);
  --scrim-soft:rgb(0 0 0 / .3);
  --display:"Oswald","Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif;
  --body:"Red Hat Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --row-pad:clamp(10px,1.4vw,22px);
  --band:clamp(64px,9vw,136px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--display);text-transform:uppercase;margin:0;text-wrap:balance;font-weight:700}
p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
img,video{display:block;max-width:100%}
img{height:auto}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--yellow)}
.wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--band)}
section[id]{scroll-margin-top:76px}

/* type roles */
.eyebrow{font:500 .8125rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.on-dark .eyebrow{color:var(--ash)}
.h2{font-size:clamp(2.5rem,7.2vw,6.5rem);line-height:.94;letter-spacing:-.01em}
.h3{font-size:clamp(1.375rem,2.2vw,1.875rem);line-height:1.05;font-weight:500;letter-spacing:.01em}
.lede{font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.45;max-width:38em}
.copy{max-width:34em}
.dim{color:var(--muted)}
.on-dark .dim{color:var(--ash)}
.label{font:500 .8125rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase}
.fine{font-size:.875rem;line-height:1.5}
.subhead{font:500 clamp(1.25rem,2vw,1.75rem)/1.14 var(--display);text-transform:uppercase;letter-spacing:.02em;text-wrap:balance}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font:500 .9375rem/1 var(--display);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;padding:1em 1.5em;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background .18s,color .18s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--yellow);color:var(--ink)}
.btn-yellow{background:var(--yellow)}
.btn-yellow:hover{background:var(--ink);color:var(--yellow)}
.text-link{font:500 .8125rem/1.3 var(--body);letter-spacing:.11em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.35em}
.text-link:hover{text-decoration-thickness:3px}


/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);border-bottom:1.5px solid var(--ink)}
.head-row{display:flex;align-items:center;gap:20px;min-height:64px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:14px;text-decoration:none;margin-right:auto}
.mark img{height:30px;width:auto}
.mark>span:last-child{font:500 .75rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* corner badge: the hexagon mark, built in code so it stays sharp at any size. Plays three times on load (YW3, You win, We win, YW3), then settles. */
.badge{position:relative;display:block;width:86px;aspect-ratio:100/62;flex:none;font-size:86px}
.badge svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.badge .hx{fill:var(--ink);stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:miter}
.badge .wm{position:absolute;left:15%;width:70%;height:auto;top:50%;transform:translateY(-50%);filter:invert(1)}
.badge .bt{position:absolute;inset:0;display:grid;place-items:center;font:700 .23em/1 var(--display);text-transform:uppercase;letter-spacing:.03em;opacity:0;color:var(--ink);white-space:nowrap}
/* glitch pass: the hexagon flashes, a light streak and scanlines tear across it, and each line of text splits into red/yellow channels as it snaps in. Fast cycle, plays three times, then rests on the wordmark. */
.badge::before,.badge::after{content:"";position:absolute;left:-10%;right:-10%;pointer-events:none;opacity:0;z-index:2}
.badge::before{top:30%;height:2px;background:linear-gradient(90deg,transparent,var(--yellow) 18%,#fff 50%,var(--yellow) 82%,transparent);box-shadow:0 0 8px 1px var(--yellow)}
.badge::after{top:4%;bottom:4%;left:0;right:0;background:repeating-linear-gradient(to bottom,rgb(255 230 0 / .6) 0 1px,transparent 1px 4px)}
@media (prefers-reduced-motion:no-preference){
  .badge{animation:bdJit 3.2s steps(1,end) 3 both}
  .badge::before{animation:bdStreak 3.2s steps(1,end) 3 both}
  .badge::after{animation:bdScan 3.2s steps(1,end) 3 both}
  .badge .hx{animation:bdFill 3.2s steps(1,end) 3 both}
  .badge .wm{animation:bdWm 3.2s steps(1,end) 3 both}
  .badge .t1{animation:bdT1 3.2s steps(1,end) 3 both}
  .badge .t2{animation:bdT2 3.2s steps(1,end) 3 both}
  @keyframes bdFill{
    0%{fill:transparent;stroke:var(--ink)}
    8%{fill:var(--ink);stroke:var(--ink)}
    17%{fill:#fff;stroke:#fff}
    19%{fill:var(--yellow);stroke:var(--yellow)}
    43%{fill:var(--ink);stroke:var(--ink)}
    67%{fill:#fff;stroke:#fff}
    69%{fill:var(--yellow);stroke:var(--yellow)}
    71%{fill:var(--ink);stroke:var(--ink)}
    100%{fill:var(--ink);stroke:var(--ink)}}
  @keyframes bdWm{
    0%{opacity:0;filter:invert(1);clip-path:none}
    8%{opacity:1;filter:invert(1);clip-path:none}
    11%{opacity:1;filter:invert(1);clip-path:inset(0 0 55% 0)}
    12%{opacity:1;filter:invert(1);clip-path:inset(40% 0 0 0)}
    13%{opacity:1;filter:invert(1);clip-path:none}
    17%{opacity:0}
    69%{opacity:1;filter:none;clip-path:inset(50% 0 0 0)}
    70%{opacity:1;filter:none;clip-path:inset(0 0 45% 0)}
    71%{opacity:1;filter:invert(1);clip-path:none}
    100%{opacity:1;filter:invert(1);clip-path:none}}
  @keyframes bdT1{
    0%{opacity:0;clip-path:none;transform:none;text-shadow:none}
    20%{opacity:1;clip-path:inset(0 0 58% 0);transform:translateX(-5px);text-shadow:3px 0 var(--red),-3px 0 #fff}
    21.5%{opacity:1;clip-path:inset(46% 0 0 0);transform:translateX(4px);text-shadow:-3px 0 var(--red),3px 0 #fff}
    23%{opacity:1;clip-path:none;transform:none;text-shadow:1.5px 0 var(--red),-1.5px 0 #fff}
    25%{opacity:1;clip-path:none;transform:none;text-shadow:none}
    33%{opacity:1;clip-path:inset(30% 0 35% 0);transform:translateX(3px) skewX(-12deg);text-shadow:2px 0 var(--red)}
    34%{opacity:1;clip-path:none;transform:none;text-shadow:none}
    40%{opacity:1;clip-path:inset(0 0 50% 0);transform:translateX(-6px);text-shadow:3px 0 var(--red)}
    41.5%{opacity:0;clip-path:none;transform:none;text-shadow:none}
    100%{opacity:0;clip-path:none;transform:none;text-shadow:none}}
  @keyframes bdT2{
    0%,43%{opacity:0;clip-path:none;transform:none;text-shadow:none;color:var(--yellow)}
    44%{opacity:1;clip-path:inset(52% 0 0 0);transform:translateX(5px);text-shadow:-3px 0 var(--red),3px 0 #fff}
    45.5%{opacity:1;clip-path:inset(0 0 48% 0);transform:translateX(-4px);text-shadow:3px 0 var(--red),-3px 0 #fff}
    47%{opacity:1;clip-path:none;transform:none;text-shadow:-1.5px 0 var(--red),1.5px 0 #fff}
    49%{opacity:1;clip-path:none;transform:none;text-shadow:none}
    57%{opacity:1;clip-path:inset(35% 0 30% 0);transform:translateX(-3px) skewX(12deg);text-shadow:-2px 0 var(--red)}
    58%{opacity:1;clip-path:none;transform:none;text-shadow:none}
    64%{opacity:1;clip-path:inset(50% 0 0 0);transform:translateX(6px);text-shadow:-3px 0 var(--red)}
    65.5%{opacity:0;clip-path:none;transform:none;text-shadow:none}
    100%{opacity:0;clip-path:none;transform:none;text-shadow:none}}
  @keyframes bdStreak{
    0%{opacity:0;top:30%;transform:none}
    10%{opacity:1;top:22%;transform:translateX(-12%) scaleX(.7)}
    11%{opacity:1;top:66%;transform:translateX(10%)}
    12.5%{opacity:0}
    20%{opacity:1;top:46%;transform:translateX(8%) scaleX(.6)}
    21.5%{opacity:0}
    44%{opacity:1;top:58%;transform:translateX(-10%)}
    45.5%{opacity:1;top:28%;transform:translateX(12%) scaleX(.8)}
    47%{opacity:0}
    68%{opacity:1;top:40%;transform:translateX(-8%)}
    69.5%{opacity:1;top:74%;transform:translateX(6%) scaleX(.5)}
    71%{opacity:0}
    100%{opacity:0;top:30%;transform:none}}
  @keyframes bdScan{
    0%{opacity:0;transform:none}
    10.5%{opacity:.9;transform:translateY(-2px)}
    12%{opacity:.5;transform:translateY(2px)}
    13%{opacity:0;transform:none}
    44.5%{opacity:.8;transform:translateY(1px)}
    46%{opacity:0;transform:none}
    68.5%{opacity:.9;transform:translateY(-1px)}
    70.5%{opacity:0;transform:none}
    100%{opacity:0;transform:none}}
  @keyframes bdJit{
    0%,9%{transform:none}10%{transform:translateX(-2px) skewX(-8deg)}11%{transform:translateX(2px)}12%{transform:translateX(-1px) skewX(4deg)}13%,19%{transform:none}
    20%{transform:translateX(1.5px) skewX(6deg)}21.5%,43%{transform:none}44%{transform:translateX(-2px) skewX(-8deg)}45.5%{transform:translateX(2px)}47%,67%{transform:none}
    68%{transform:translateX(-2px) skewX(8deg)}69%{transform:translateX(2px)}70%{transform:translateX(-1px)}71.5%,100%{transform:none}}
}
.on-dark .lockup-t{border-left-color:var(--paper)}
.on-dark .lockup-t span{color:var(--ash)}
.lockup img.inv{filter:invert(1)}
.nav{display:flex;gap:clamp(16px,2.2vw,34px)}
.nav a{font:500 .8125rem/1 var(--body);letter-spacing:.11em;text-transform:uppercase;text-decoration:none;padding-block:8px;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--ink)}
.head-row .btn{padding:.8em 1.2em;font-size:.8125rem}
.menu-btn,.nav .nav-brief{display:none}

/* hero: the reel runs behind the headline */
.hero{position:relative;background:var(--black);color:var(--paper);overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(to top,var(--scrim) 0%,var(--scrim-soft) 55%,var(--scrim-soft) 100%)}
.hero-inner{position:relative;min-height:clamp(400px,50vw,700px);display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(14px,1.6vw,22px);padding-block:clamp(28px,4vw,56px)}
.hero .eyebrow{color:var(--paper)}
.hero-h{font-size:clamp(1.75rem,5.6vw,5rem);line-height:.98;letter-spacing:-.01em}
.hero-h .line{display:block}
.hero-h mark{background:none;color:var(--yellow);white-space:nowrap}
.hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 28px;margin-top:clamp(6px,1vw,14px)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.reel-ctl{display:flex;align-items:center;gap:14px;font:500 .75rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase}
.hero :focus-visible{outline-color:var(--yellow)}
.hero .btn-yellow{border-color:var(--yellow)}
.intro{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.2vw,30px);padding-block:clamp(36px,5vw,72px) clamp(28px,3.6vw,52px)}
.intro .subhead{font:700 clamp(1.4rem,3.4vw,3.2rem)/1.04 var(--display);letter-spacing:0;text-wrap:wrap}
.intro .subhead span{display:block;white-space:nowrap}
.intro .subhead i{font-style:normal;color:var(--red)}
.intro .lede{max-width:40em;padding-top:clamp(16px,1.8vw,24px);border-top:1.5px solid var(--ink)}
.top-film .cap{flex-wrap:wrap;align-items:baseline}
@media (prefers-reduced-motion:no-preference){
  .hero-h .line{animation:rise .7s cubic-bezier(.2,.7,.1,1) both}
  .hero-h .line:nth-child(2){animation-delay:.08s}
  .hero-h .line:nth-child(3){animation-delay:.16s}
  @keyframes rise{from{transform:translateY(.22em)}to{transform:none}}
}

/* reel: the hero film in a monitor frame, with a real running timecode */
.reel{position:relative;background:var(--black);color:var(--paper);aspect-ratio:21/9;max-width:100%;overflow:hidden}
.reel video{width:100%;height:100%;object-fit:cover}
.reel-top,.reel-bot{position:absolute;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:clamp(12px,1.8vw,24px);font:500 .75rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase}
.reel-top{top:0;background:linear-gradient(to bottom,var(--scrim),var(--scrim-0));padding-bottom:40px}
.reel-bot{bottom:0;background:linear-gradient(to top,var(--scrim),var(--scrim-0));padding-top:40px}
.rec::before{content:"";display:inline-block;width:.62em;height:.62em;border-radius:50%;background:var(--red);margin-right:.65em;vertical-align:.02em}
.tc{font-variant-numeric:tabular-nums}
.reel-btn{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--paper);background:transparent;border:1.5px solid var(--paper);padding:.6em 1em;cursor:pointer;min-width:6.5em}
.reel-btn:hover{background:var(--paper);color:var(--ink)}
.reel :focus-visible{outline-color:var(--yellow)}

/* photo frames */
.frame{background:var(--black);overflow:hidden}
.frame img{width:100%;height:100%;object-fit:cover}
.frame img.wlogo{width:auto;height:clamp(20px,2.2vw,30px);object-fit:contain}
.frame img.wlogo.tall{height:clamp(36px,4vw,56px)}
.cap{display:flex;justify-content:space-between;gap:16px;padding-top:10px;font:500 .75rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.on-dark .cap{color:var(--ash)}

/* clients */
.clients{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:16px 24px;padding-block:clamp(22px,2.6vw,36px);border-bottom:1.5px solid var(--ink);align-items:start}
.clients ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);margin-top:-14px}
.clients li{display:flex;align-items:center;gap:.75rem;min-width:0;min-height:4rem;padding-block:14px;border-bottom:1px solid var(--rule);font:500 clamp(.875rem,1.2vw,1.0625rem)/1.15 var(--display);text-transform:uppercase;letter-spacing:.06em}
.clients svg,.clogo{flex:none;height:calc(var(--h,1.5rem)*var(--ls,1));width:auto}
.clients svg{fill:currentColor}
.logo-wait{display:grid;place-items:center;border:1.5px dashed var(--muted);color:var(--muted);font:500 .5625rem/1 var(--body);letter-spacing:.1em}
.clients li>span:last-child{border-left:1.5px solid var(--ink);padding:.4em 0 .4em .75em;min-width:0}

/* work */
.work-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vw,56px)}
.work-title{display:grid;gap:14px;min-width:0}
.wgroup{margin-top:clamp(40px,5vw,72px)}
.wgroup-h{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 32px;padding-bottom:16px;border-bottom:2px solid var(--ink)}
.wgroup-h .lockup{font-size:clamp(1.5rem,4.2vw,3.5rem)}
/* section dividers use the YW3 lockup construction from the style guide: wordmark, rule, name over descriptor */
.sec-h{margin-top:clamp(48px,6vw,88px);display:flex;align-items:flex-end;padding-bottom:16px;border-bottom:2px solid var(--ink)}
.sec-h .lockup{font-size:clamp(1.5rem,4.2vw,3.5rem)}
/* group heads ease in once when they scroll into view: the lockup fades up, then the rule draws left to right */
.anim .wgroup-h{border-bottom-color:transparent}
.anim .wgroup-h::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform 1.1s cubic-bezier(.22,1,.36,1) .35s}
.anim .wgroup-h .lockup{opacity:0;transform:translateY(.3em);transition:opacity 1s ease,transform 1.2s cubic-bezier(.22,1,.36,1)}
.anim .wgroup-h.is-in .lockup{opacity:1;transform:none}
.anim .wgroup-h.is-in::after{transform:none}
.wgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4.4vw,64px) clamp(20px,3vw,48px);margin-top:clamp(24px,3vw,40px)}
.wcat{display:grid;gap:18px;align-content:start;min-width:0}
.wcat.wide{grid-column:1/-1}
.wcat-h{font:500 .8125rem/1.3 var(--body);letter-spacing:.12em;border-top:6px solid var(--ink);padding-top:12px}
.wcards{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,48px)}
.wcat.wide .wcards{grid-template-columns:repeat(2,minmax(0,1fr))}
.wcard{position:relative;display:grid;gap:12px;align-content:start;min-width:0}
.wcard .frame{aspect-ratio:3/2;position:relative}
.xfade img{position:absolute;inset:0}
@media (prefers-reduced-motion:no-preference){.xfade img+img{opacity:0;animation:xf 10s ease-in-out infinite}}
@keyframes xf{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
.wcard .frame.has-logo::after{content:"";position:absolute;inset:auto 0 0 0;height:44%;background:linear-gradient(to top,var(--scrim),var(--scrim-0));pointer-events:none}
.wlogo{position:absolute;left:clamp(12px,1.6vw,22px);bottom:clamp(12px,1.5vw,20px);z-index:1;height:clamp(20px,2.2vw,30px);width:auto;fill:var(--paper);pointer-events:none}
.wlogo.sq{height:clamp(28px,3vw,40px)}
.wlogo.tall{height:clamp(36px,4vw,56px)}
.wcard-title{font:700 clamp(1.625rem,3.1vw,2.875rem)/.98 var(--display);text-transform:uppercase;letter-spacing:-.005em;margin:0}
.wcard-title a{text-decoration:none}
.wcard-title a::after{content:"";position:absolute;inset:0}
.wcard:hover .wcard-title a,.wcard:focus-within .wcard-title a{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.12em}
.wcard-fact{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3em .8em}
.wcard-fact b{font:700 clamp(1.5rem,2.6vw,2.25rem)/1 var(--display);font-variant-numeric:tabular-nums}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{font:500 .75rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:.85em 1.05em;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.chip:hover{background:var(--mist)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.count{font:500 .75rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-left:8px;font-variant-numeric:tabular-nums}
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:end;padding-bottom:clamp(32px,4vw,56px)}
.feature .frame{aspect-ratio:3/2}
.feature .frame.film{aspect-ratio:16/9}
.frame video{width:100%;height:100%;object-fit:cover}
.feature-text{display:grid;gap:18px;justify-items:start}
.case-client{font:700 clamp(1.625rem,3.1vw,2.875rem)/.98 var(--display);text-transform:uppercase;letter-spacing:-.005em}
.feature .case-client{font-size:clamp(2rem,4.3vw,3.875rem);line-height:.95}
.case-client a{text-decoration:none}
.case-for{display:block;margin-top:.8rem}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);width:100%}
.stats li{display:grid;gap:4px;padding-block:12px;border-top:1.5px solid var(--ink)}
.stats b{font:700 clamp(1.625rem,2.9vw,2.625rem)/1 var(--display);font-variant-numeric:tabular-nums}
.case{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(14px,2.4vw,40px);padding-block:clamp(20px,2.4vw,32px);padding-inline:var(--row-pad);margin-inline:calc(var(--row-pad) * -1);position:relative;transition:background .2s,color .2s;align-items:start}
.case::before{content:"";position:absolute;top:0;left:var(--row-pad);right:var(--row-pad);border-top:1.5px solid var(--ink)}
.case .frame{aspect-ratio:3/2}
.case .case-client a::after{content:"";position:absolute;inset:0}
.case:hover,.case:focus-within{background:var(--ink);color:var(--paper)}
.case:hover .dim,.case:focus-within .dim{color:var(--ash)}
.case:focus-within :focus-visible{outline-color:var(--yellow)}
.case-body{display:grid;gap:12px;align-content:start;min-width:0}
.tags{display:flex;flex-wrap:wrap;gap:6px 14px}
.tags li{font:500 .75rem/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase}
.tags li::before{content:"/ "}
.fact{display:grid;gap:8px;align-content:start;justify-items:start;min-width:0}
.fact b{font:700 clamp(1.75rem,3.4vw,3.25rem)/.95 var(--display);text-transform:uppercase;font-variant-numeric:tabular-nums}
.fact .go{margin-top:8px}
.work-end{border-top:1.5px solid var(--ink);padding-top:clamp(20px,2.4vw,32px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.empty{padding-block:32px;border-top:1.5px solid var(--ink)}

/* brand experience */
.bx-head{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:18px clamp(24px,4vw,64px);align-items:end}
.bx-head .eyebrow{grid-column:1/-1}
.bx-copy{display:grid;gap:14px;min-width:0}
.bx-head.bx-stack{grid-template-columns:minmax(0,1fr)}
.bx-stack .h2{font-size:clamp(2.5rem,6.7vw,6.1rem)}
.bx-stack .h2 span{display:block}
.bx-stack .lede{max-width:42em;margin-top:10px}
/* Brand Experience: the film runs muted behind the headline, lede and the three pillars */
.bx{position:relative;background:var(--black);color:var(--paper);overflow:hidden}
.bx-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bx-scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgb(0 0 0 / .78) 0%,rgb(0 0 0 / .55) 45%,rgb(0 0 0 / .8) 100%)}
.bx-inner{position:relative;padding-block:var(--band)}
.bx .lede{color:var(--paper)}
.bx .three{border-top-color:var(--paper)}
.bx .three>div{border-left-color:rgb(248 248 248 / .45)}
.bx .three .dim{color:#d6d6d0}
.bx-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 32px;margin-top:clamp(32px,4vw,56px);padding-top:clamp(18px,2vw,28px);border-top:1.5px solid var(--paper)}
.bx-sum{font:700 clamp(1.5rem,3.4vw,3rem)/1 var(--display);text-transform:uppercase;text-wrap:balance}
.bx-sum mark{background:none;color:var(--yellow)}
.bx :focus-visible{outline-color:var(--yellow)}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,5vw,72px);border-top:1.5px solid var(--ink)}
.three>div{display:grid;gap:14px;align-content:start;padding:clamp(20px,2.4vw,36px) clamp(16px,2.2vw,36px) clamp(24px,3vw,44px);border-left:1.5px solid var(--ink)}
.three>div:first-child{border-left:0;padding-left:0}
.pillar-line{font-weight:700;font-size:1.125rem;line-height:1.3}
.track-head{margin-top:clamp(24px,3vw,40px);display:grid;gap:10px;max-width:46em}
.track-line{font:700 clamp(1.75rem,3.6vw,3rem)/.98 var(--display);text-transform:uppercase;text-wrap:balance}
.track-note{margin-top:clamp(24px,3vw,36px)}
.track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:14px;counter-reset:stage}
.track li{counter-increment:stage;display:grid;gap:10px;align-content:start;border-top:6px solid var(--ink);padding-top:16px}
/* five points of entry, not a forced sequence: equal weight, no end state */
.track li::before{content:"Entry " counter(stage);font:500 .75rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hiw{aspect-ratio:1;border:1px solid var(--graphite);order:-1}
.hiw video{width:100%;height:100%;object-fit:cover}
.track h4{font:500 .8125rem/1.3 var(--body);letter-spacing:.12em}

/* measurement: two states, switched from the staging strip */
.measure{position:relative;overflow:hidden;background:var(--white);border-block:1.5px solid var(--ink)}
/* very light beacon animation behind the section: Wi-Fi and Bluetooth marks spray up and across from the bottom-left corner */
.signals{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.measure>.wrap{position:relative;z-index:1}
[data-bem="named"] .bem-plain,[data-bem="plain"] .bem-named{display:none}
/* product lockup, as on the BEM one-sheet: YW3 wordmark, a rule, then the name over its descriptor */
.lockup{display:flex;align-items:stretch;gap:.4em;font:700 clamp(1.75rem,3.2vw,2.875rem)/1 var(--display);text-transform:uppercase;letter-spacing:0;min-width:0}
.lockup img{flex:none;height:1.34em;width:auto;align-self:center}
.lockup-t{display:grid;align-content:center;gap:.13em;border-left:.045em solid var(--ink);padding-left:.4em;min-width:0}
.lockup-t b{font-weight:600;line-height:.84;letter-spacing:.01em}
.lockup-t span{font-weight:500;color:var(--muted);font-size:max(.44em,.6875rem);line-height:1;letter-spacing:.06em;text-wrap:balance}
.mast{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 32px;padding-bottom:16px;border-bottom:2px solid var(--ink)}
.mast-tag{font:400 .75rem/1.2 var(--display);letter-spacing:.24em;text-transform:uppercase}
.measure-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,88px);margin-top:28px;align-items:start}
.measure-left{display:grid;gap:28px;min-width:0}
.measure .h2{font-size:clamp(2.25rem,5.6vw,5.25rem);overflow-wrap:break-word}
.measure .h2 .ln,.studio .h2 .ln{display:block}
.modules{display:grid}
.modules li{display:grid;gap:8px;padding-block:22px;border-top:1.5px solid var(--ink)}
.modules li:last-child{border-bottom:1.5px solid var(--ink)}
.versus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(40px,5vw,72px);border:1.5px solid var(--ink)}
.versus>div{display:grid;gap:10px;align-content:start;padding:clamp(18px,2.4vw,32px)}
.versus>div:first-child{background:var(--ink);color:var(--paper)}
.versus>div:first-child .dim{color:var(--ash)}
.versus-note{margin-top:10px}
.privacy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(32px,4vw,56px)}
.privacy li{display:grid;gap:8px;align-content:start;border-top:1.5px solid var(--ink);padding-top:14px}
.kpi{margin-top:clamp(40px,5vw,72px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px 40px}
.kpi p{font:700 clamp(1.75rem,4.4vw,3.75rem)/.98 var(--display);text-transform:uppercase}

/* studio: black mode */
.studio{background:var(--ink);color:var(--paper)}
.studio-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);margin-top:clamp(36px,5vw,64px);align-items:start}
.studio-text{display:grid;gap:22px}
.studio .frame{aspect-ratio:16/10;border:1px solid var(--graphite)}
.film-link{position:relative;display:block}
.play-tag{position:absolute;left:clamp(12px,1.6vw,20px);bottom:clamp(12px,1.6vw,20px);background:var(--yellow);color:var(--ink);font:500 .8125rem/1 var(--display);letter-spacing:.09em;text-transform:uppercase;padding:.9em 1.2em}
.film-link:hover .play-tag,.film-link:focus-visible .play-tag{background:var(--paper)}
.statement{margin-top:clamp(48px,6vw,96px);font:700 clamp(1.75rem,4.4vw,3.75rem)/.98 var(--display);text-transform:uppercase;text-wrap:balance}
.modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(20px,2.4vw,32px);border-block:1.5px solid var(--paper)}
.modes li{padding:clamp(16px,2vw,28px) clamp(8px,1.4vw,24px);border-left:1.5px solid var(--graphite);font:700 clamp(1.25rem,3.4vw,3rem)/1 var(--display);text-transform:uppercase;min-width:0;overflow-wrap:anywhere}
.modes li:first-child{border-left:0;padding-left:0}
.modes{position:relative}
.anim .modes{border-block-color:transparent}
.anim .modes::before,.anim .modes::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--paper);transform:scaleX(0);transform-origin:left center;transition:transform 1.3s cubic-bezier(.22,1,.36,1)}
.anim .modes::before{top:0}
.anim .modes::after{bottom:0;transition-delay:.5s}
.anim .modes.is-in::before,.anim .modes.is-in::after{transform:none}
.anim .modes li{opacity:0;transform:translateY(.35em);transition:opacity .9s ease,transform 1s cubic-bezier(.22,1,.36,1);transition-delay:calc(.25s + var(--i,0) * .22s)}
.anim .modes.is-in li{opacity:1;transform:none}
.anim .modes li.gen{opacity:1;transform:none;transition:none}
.anim .modes li.gen>span:not(.gw){opacity:0;transition:opacity .9s ease 2.3s}
.anim .modes.is-in li.gen>span:not(.gw){opacity:1}
.modes li span.gw,.modes li span.gl{display:inline-block;margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit;color:inherit;overflow-wrap:normal}
.modes li span.gw{position:relative}
.anim .modes .gl{opacity:0;transition:opacity .5s ease;transition-delay:calc(1.2s + var(--k) * .07s)}
.anim .modes.is-in .gl{opacity:1}
.anim .modes .gw::after{content:"";position:absolute;left:0;bottom:-.14em;width:100%;height:.09em;background:var(--yellow);transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.22,1,.36,1) 2.4s}
.anim .modes.is-in .gw::after{transform:none}
.caps{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.caps li{font:500 .75rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:.8em 1em;border:1.5px solid var(--graphite)}
.roip{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);margin-top:clamp(48px,6vw,96px);align-items:start}
.roip-big{font:700 clamp(4rem,13vw,11rem)/.82 var(--display);color:var(--yellow);letter-spacing:-.02em}
.roip-mark{display:grid;gap:14px;min-width:0}
.roip-text{display:grid;gap:clamp(20px,2.4vw,32px)}
.def{display:grid;gap:10px;border-top:1.5px solid var(--graphite);padding-top:16px}
.modes li span{display:block;margin-top:.9em;font:400 .9375rem/1.45 var(--body);text-transform:none;letter-spacing:0;color:var(--ash);overflow-wrap:normal}

/* collective */
.col-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(36px,5vw,64px)}
.col-grid>div{display:grid;gap:12px;align-content:start;border-top:6px solid var(--ink);padding-top:18px}
.partner{margin-top:clamp(36px,5vw,64px);background:var(--mist);padding:clamp(20px,3vw,40px);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:16px 40px;align-items:start}
.partner-id{display:grid;gap:16px;justify-items:start;min-width:0}
.partner-logo{width:min(100%,260px);height:auto}

/* thinking + press */
.think{background:var(--mist)}
.think-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,88px);align-items:start;margin-top:clamp(28px,4vw,56px)}
.shelf{display:grid;gap:clamp(32px,4vw,56px);min-width:0}
.pub{display:grid;gap:16px;justify-items:start;border-top:6px solid var(--ink);padding-top:18px;min-width:0}
.pub .lockup{font-size:clamp(1.5rem,2.7vw,2.375rem);margin-bottom:4px}
.paper{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:clamp(16px,2.4vw,32px);align-items:start;width:100%}
.paper-cover{background:var(--yellow);color:var(--ink);border:1.5px solid var(--ink);aspect-ratio:17/22;max-width:100%;display:grid;align-content:space-between;padding:12px}
.paper-cover.img{padding:0;display:block;border-color:var(--ink)}
.paper-cover.img img{width:100%;height:100%;object-fit:cover}
.paper-cover span{font:500 .625rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase}
.paper-cover b{font:700 1.25rem/.95 var(--display);text-transform:uppercase}
.paper-text{display:grid;gap:12px;justify-items:start;min-width:0}
.paper-title{font:700 clamp(1.5rem,2.6vw,2.25rem)/1 var(--display);text-transform:uppercase}
.paper-cta{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;margin-top:4px}
.sheet{border:2px solid var(--ink);padding:0;width:min(92vw,900px);max-height:92vh;overflow:auto;background:var(--white);color:var(--ink)}
.sheet::backdrop{background:var(--scrim)}
.sheet form{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 14px;background:var(--white);border-bottom:1.5px solid var(--ink)}
.sheet form .btn{padding:.7em 1.1em;font-size:.8125rem}
.sheet img{width:100%;height:auto}
.btn.is-pending,.btn.is-pending:hover{border-style:dashed;border-color:var(--muted);color:var(--muted);background:transparent;cursor:default}
.issue{background:var(--white);border:1.5px solid var(--ink);padding:clamp(18px,2.4vw,30px);display:grid;gap:10px;width:100%}
.issue .h3{font-family:var(--display);text-transform:uppercase}
.pub-h{border-top:6px solid var(--ink);padding-top:18px;margin-bottom:clamp(14px,2vw,24px)}
.pub-h .lockup{font-size:clamp(1.5rem,2.7vw,2.375rem)}
.strike{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:.09em}
/* the red strike draws left to right once, the first time it scrolls into view */
.strike{position:relative}
.anim .strike{text-decoration:none}
.anim .strike::after{content:"";position:absolute;left:0;right:0;top:54%;height:.09em;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform 1s cubic-bezier(.22,1,.36,1) .3s}
.anim .strike.is-in::after{transform:none}
.film-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,40px);margin-top:clamp(40px,5vw,72px)}
.film-pair .film-box.pending{aspect-ratio:16/9}
.film-pair .cap{justify-content:flex-start;text-align:left}
@media (max-width:620px){.film-pair{grid-template-columns:minmax(0,1fr)}}
.cv-results .cv-tag{margin-top:clamp(28px,3.4vw,48px);font:700 clamp(1.25rem,2.4vw,2rem)/1.1 var(--display);text-transform:uppercase;text-wrap:balance}
.press li{border-top:1.5px solid var(--ink)}
.press li:last-child{border-bottom:1.5px solid var(--ink)}
.press a{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:8px 24px;padding-block:18px;text-decoration:none;align-items:baseline}
.press a:hover .press-t{text-decoration:underline;text-underline-offset:.2em}
.press-t{font:500 clamp(1.0625rem,1.5vw,1.3125rem)/1.25 var(--display);text-transform:uppercase;letter-spacing:.01em}
.press-m{font-variant-numeric:tabular-nums}

/* brief us: the one yellow field */
.brief{background:var(--yellow);color:var(--ink)}
.brief-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:start}
.brief-left{display:grid;gap:24px}
.brief .h2{font-size:clamp(3.5rem,11vw,10rem);line-height:.86}
.email-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.email{font:700 clamp(1.25rem,2vw,1.625rem)/1.1 var(--display);letter-spacing:.02em;user-select:all}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:grid;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font:500 .75rem/1.2 var(--body);letter-spacing:.11em;text-transform:uppercase}
.field input,.field textarea{font:400 1rem/1.4 var(--body);color:var(--ink);background:var(--white);border:2px solid var(--ink);border-radius:0;padding:.8em .9em;width:100%}
.field textarea{min-height:9.5em;resize:vertical}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.status{font:500 .9375rem/1.4 var(--body);max-width:32em}

/* case pages */
.cv{scroll-margin-top:160px}
.cv-head{padding-block:clamp(28px,4vw,56px) clamp(24px,3vw,40px);display:grid;gap:18px;justify-items:start}
.cv-title{font-size:clamp(2.5rem,7.6vw,7rem);line-height:.94;letter-spacing:-.012em}
.cv-title:focus{outline:none}
.cv-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:start}
.cv-lead .frame{aspect-ratio:3/2}
.cv-lead.contain .frame img{object-fit:contain}
.cv-lead .film-box.vertical video{max-height:min(72vh,640px)}
/* award mark: two hairlines draw out from the centre, the name settles in, then a yellow rule signs it. Plays once each time the case opens. */
.award{position:relative;display:inline-grid;justify-items:center;gap:.5em;margin-top:6px;padding:.95em 1.6em .9em;text-decoration:none;text-align:center}
.award::before,.award::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--ink)}
.award::before{top:0}
.award::after{bottom:0}
.award-k{font:500 .75rem/1.2 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.award-v{position:relative;font:700 clamp(1.375rem,2.4vw,2rem)/1 var(--display);text-transform:uppercase;letter-spacing:.04em;padding-bottom:.28em}
.award-v::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.12em;background:var(--yellow)}
.award:hover .award-v::after{background:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .award::before,.award::after{animation:awRule 1.1s cubic-bezier(.22,1,.36,1) .25s both}
  .award::after{animation-delay:.4s}
  .award-k{animation:awName 1.3s cubic-bezier(.22,1,.36,1) .7s both}
  .award-v{animation:awWin 1s cubic-bezier(.22,1,.36,1) 1.25s both}
  .award-v::after{transform-origin:left center;animation:awSign .8s cubic-bezier(.22,1,.36,1) 1.9s both}
  @keyframes awRule{from{transform:scaleX(0)}to{transform:none}}
  @keyframes awName{from{opacity:0;letter-spacing:.5em}to{opacity:1;letter-spacing:.24em}}
  @keyframes awWin{from{opacity:0;transform:translateY(.3em)}to{opacity:1;transform:none}}
  @keyframes awSign{from{transform:scaleX(0)}to{transform:none}}
}
.cv-aside{display:grid;gap:24px}
.cv-meta{display:grid;border-bottom:1.5px solid var(--ink)}
.cv-meta div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:12px;padding-block:12px;border-top:1.5px solid var(--ink);align-items:baseline}
.cv-meta dt{font:500 .75rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cv-block{display:grid;gap:12px;align-content:start}
.cv-block>.label{color:var(--muted)}
.cv-two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start;margin-top:clamp(48px,6vw,88px);padding-top:clamp(24px,3vw,40px);border-top:1.5px solid var(--ink)}
.cv-strategy{font:700 clamp(1.5rem,2.8vw,2.5rem)/1 var(--display);text-transform:uppercase}
.cv-bullets{display:grid}
.cv-bullets li{padding-block:12px;border-top:1.5px solid var(--rule)}
.film{margin-top:clamp(40px,5vw,72px)}
.film-box{position:relative;background:var(--black);color:var(--paper);aspect-ratio:16/9;max-width:100%;display:grid;place-items:center;overflow:hidden}
.film-box video{width:100%;height:100%;object-fit:contain}
.film-box.vertical{aspect-ratio:auto;padding-block:clamp(16px,2.4vw,32px)}
.film-box.vertical video{width:auto;height:auto;max-height:min(78vh,760px);max-width:min(100%,440px)}
.film-box.pending img{width:100%;height:100%;object-fit:cover}
.film-wait{font:500 clamp(1.125rem,2.6vw,2.25rem)/1.1 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--ash);padding:24px;text-align:center}
.gallery{columns:3;column-gap:clamp(10px,1.4vw,20px);margin-top:clamp(40px,5vw,72px)}
.gallery.n1{columns:1;max-width:900px}
.gallery.n2{columns:2}
.gallery img{width:100%;margin-bottom:clamp(10px,1.4vw,20px);break-inside:avoid;background:var(--black)}
.cv-results{background:var(--ink);color:var(--paper);margin-top:clamp(48px,6vw,88px);padding-block:clamp(40px,5vw,72px)}
.cv-results .label{color:var(--ash)}
.cv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(20px,3vw,48px);margin-top:24px}
.cv-stats.n5{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.cv-stats li{display:grid;gap:10px;align-content:start;border-top:1.5px solid var(--paper);padding-top:16px}
.cv-stats b{font:700 clamp(2.75rem,6vw,5.25rem)/.92 var(--display);text-transform:uppercase;font-variant-numeric:tabular-nums}
.cv-stats b.word{font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1}
.cv-stats span{color:var(--ash);max-width:22em}
.cv-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 32px;padding-block:clamp(28px,3.6vw,48px)}
.next{display:grid;gap:8px;text-decoration:none;padding-block:clamp(28px,4vw,56px);border-top:1.5px solid var(--ink)}
.next-t{font:700 clamp(2rem,6vw,5.5rem)/.95 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.next:hover .next-t{background:linear-gradient(to bottom,transparent 19.5%,var(--yellow) 19.5%,var(--yellow) 85.5%,transparent 85.5%);width:fit-content}

/* Wicked Cam: seven clips in one scrolling row, equal height, vertical and landscape side by side */
.cam-reel{margin-top:clamp(40px,5vw,72px)}
.cam-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;padding-top:clamp(18px,2vw,28px);border-top:1.5px solid var(--ink)}
.cam-row{display:flex;gap:clamp(10px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;padding-block:16px 8px;scrollbar-width:thin}
.cam{flex:none;scroll-snap-align:start;width:calc(var(--camh) * 9 / 16)}
.cam.wide{width:calc(var(--camh) * 16 / 9)}
.cam-reel{--camh:min(62vh,520px)}
.cam-box{height:var(--camh);background:var(--black)}
.cam-box video{width:100%;height:100%;object-fit:cover}
.cam .cap{gap:10px}
@media (max-width:620px){.cam-reel{--camh:min(56vh,420px)}}
/* footer */
.foot{background:var(--ink);color:var(--paper);padding-block:clamp(48px,6vw,88px) 32px}
.foot-badge{width:clamp(84px,9vw,128px);height:auto;margin-bottom:clamp(24px,3vw,40px)}
.foot-big{font:700 clamp(2.5rem,9vw,8.5rem)/.9 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 40px;margin-top:clamp(36px,5vw,72px);padding-top:22px;border-top:1.5px solid var(--graphite)}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 28px}

/* responsive */
@media (max-width:940px){
  .nav{display:none;order:5;flex-basis:100%;flex-direction:column;gap:0;padding-bottom:12px}
  .nav.is-open{display:flex}
  .nav a{padding-block:14px;border-bottom:1px solid var(--rule);font-size:.9375rem}
  .menu-btn{display:inline-flex;padding:.8em 1.1em;font-size:.8125rem}
  .mark>span:last-child{display:none}
  .intro .subhead span{white-space:normal}
  .intro,.feature,.bx-head,.measure-grid,.studio-grid,.roip,.think-grid,.brief-grid,.cv-top,.cv-two{grid-template-columns:minmax(0,1fr)}
  .hero-cta{justify-content:flex-start}
  .case{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:14px 20px}
  .case-body,.case .fact{grid-column:1/-1}
  .three{grid-template-columns:minmax(0,1fr)}
  .three>div{border-left:0;padding-inline:0;border-top:1.5px solid var(--ink)}
  .bx .three>div{border-top-color:rgb(248 248 248 / .45)}
  .three>div:first-child{border-top:0}
  .track,.privacy{grid-template-columns:repeat(2,minmax(0,1fr))}
  .col-grid,.notes-grid{grid-template-columns:minmax(0,1fr)}
  .clients,.partner{grid-template-columns:minmax(0,1fr)}
  .clients ul{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
  .gallery{columns:2}
}
@media (max-width:620px){
  .reel{aspect-ratio:16/10}
  .track,.privacy,.versus{grid-template-columns:minmax(0,1fr)}
  .modes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modes li{padding-inline:12px}
  .modes li:nth-child(odd){border-left:0;padding-left:0}
  .modes li:nth-child(n+3){border-top:1.5px solid var(--graphite)}
  .form{grid-template-columns:minmax(0,1fr)}
  .wgrid,.wcat.wide .wcards{grid-template-columns:minmax(0,1fr)}
  .clients ul{grid-template-columns:repeat(2,minmax(0,1fr));--ls:.7}
  .clients li{gap:.5rem;font-size:.8125rem;letter-spacing:.04em}
  .clients li>span:last-child{padding-left:.5rem}
  .paper{grid-template-columns:minmax(0,1fr)}
  .paper-cover{width:150px}
  .press a{grid-template-columns:minmax(0,1fr)}
  .head-row .btn-ink{display:none}
  .nav .nav-brief{display:block}
  .case{grid-template-columns:minmax(0,1fr)}
  .case .frame{aspect-ratio:16/9}
  .reel-top span+span{display:none}
  .gallery,.gallery.n2{columns:1}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.case{transition:none}}

/* ===== Design B: attention-led layout. One repeating section opener (eyebrow, highlighted title, one line, one link),
   alternating light and dark bands, denser horizontal sections, numbered lists. ===== */
.hl{background:linear-gradient(transparent 12%,var(--yellow) 12%,var(--yellow) 88%,transparent 88%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .12em;margin-left:-.12em}
.xband{padding-block:clamp(56px,7vw,104px)}
.xgrey{background:var(--mist)}
.xdark{background:var(--ink);color:var(--paper)}
.xh2{font:700 clamp(2.4rem,5vw,4.6rem)/.95 var(--display);text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
.xh2.sm{font-size:clamp(1.9rem,3.4vw,3rem)}
.xh2.light{color:var(--paper)}
.xh2 .y{color:var(--yellow)}
.xh2 span{display:inline}
.xh2:has(.hl){line-height:1.24}
.xhead{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr) minmax(0,2fr);gap:16px clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(28px,3.4vw,48px)}
.xhead-t{display:grid;gap:10px}
.xhead-t .eyebrow{font:700 clamp(.875rem,1.1vw,1rem)/1.2 var(--display);letter-spacing:.16em;color:var(--ink)}
.on-dark .xhead-t .eyebrow{color:var(--paper)}
.xhead.no-line{grid-template-columns:minmax(0,1fr) auto}
.xhead.no-line .xhead-line{display:none}
.xhead-line{font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.5;color:var(--muted);max-width:30em}
.on-dark .xhead-line{color:var(--ash)}
.xlink{justify-self:end;font:500 .8125rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:4px;white-space:nowrap}
.xlink:hover{border-bottom-width:3px}
.btn-line{border-color:var(--paper);color:var(--paper)}
.btn-line:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.hero-sub{font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.45;max-width:36em;color:var(--paper)}
.disciplines{background:var(--ink);color:var(--paper);border-top:1px solid var(--graphite)}
.disciplines p{display:grid;gap:10px;padding-block:clamp(16px,2vw,26px);font:700 clamp(1.25rem,2.6vw,2.4rem)/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.disciplines .dw{color:var(--paper);padding-inline:clamp(10px,1.4vw,22px);border-left:1.5px solid var(--graphite)}
.disciplines .dl{display:flex;flex-wrap:wrap;align-items:center;row-gap:8px}
.disciplines .dw:first-child{padding-left:0;border-left:0}
.disciplines .dw.y{color:var(--yellow)}
@media (prefers-reduced-motion:no-preference){.disciplines .dw{animation:dwIn .7s cubic-bezier(.22,1,.36,1) both}.disciplines .dw:nth-child(2){animation-delay:.1s}.disciplines .dw:nth-child(3){animation-delay:.2s}.disciplines .dl+.dl .dw{animation-delay:.3s}.disciplines .dl+.dl .dw:nth-child(2){animation-delay:.4s}.disciplines .dl+.dl .dw:nth-child(3){animation-delay:.5s}@keyframes dwIn{from{opacity:0;transform:translateY(.3em)}to{opacity:1;transform:none}}}
@media (max-width:620px){.disciplines .dw{padding-inline:10px}.disciplines .dw:nth-child(3){padding-left:0;border-left:0}}
/* work grid: four across, eight cases */
.xgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(16px,1.8vw,28px);row-gap:0}
.xcard{position:relative;display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:8px;align-content:start;min-width:0;border-bottom:1.5px solid var(--ink);padding-bottom:14px;margin-bottom:clamp(36px,4vw,56px)}
@supports not (grid-template-rows:subgrid){.xcard{grid-row:auto;grid-template-rows:none}}
.xcard .frame{aspect-ratio:4/3;position:relative;margin-bottom:6px}
.xcard-client{font:500 .75rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);align-self:end}
.xcard-title{font:700 clamp(1.25rem,1.8vw,1.625rem)/1.12 var(--display);text-transform:uppercase;margin:0 0 .3em}
.xcard-title a{text-decoration:none}
.xcard-title a::after{content:"";position:absolute;inset:0}
.xcard-desc{font-size:.9375rem;line-height:1.45;color:var(--muted)}
.xcard-fact{font-size:.875rem;align-self:end;padding-top:10px;border-top:1px solid var(--rule)}
.xcard-fact b{font:700 1.125rem/1 var(--display)}
.xcard-tags{display:flex;justify-content:space-between;align-items:center;align-self:end;font:500 .6875rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.xcard .arr{font-size:1.125rem;color:var(--ink);transition:transform .2s}
.xcard:hover .arr,.xcard:focus-within .arr{transform:translateX(4px)}
.xcard-title a{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.2em;text-underline-offset:.16em;text-decoration-skip-ink:none;transition:text-decoration-color .18s}
.xcard:hover .xcard-title a{text-decoration-color:var(--ink)}
.xcard .frame img{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.xcard:hover .frame img{transform:scale(1.03)}
/* brand experience: split, numbered pillars */
.xsplit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,88px);align-items:center}
.xsplit-l{display:grid;gap:22px;justify-items:start;padding-right:clamp(0px,2vw,32px);border-right:1px solid rgb(248 248 248 / .3)}
.xsplit-l .lockup{font-size:clamp(1.4rem,2.4vw,2rem)}
.xnum li{display:grid;grid-template-columns:1.35em minmax(0,1fr);gap:20px;align-items:start;padding-block:22px;border-bottom:1px solid rgb(248 248 248 / .3)}
.xnum li:first-child{padding-top:0}
.xnum li{font-size:clamp(2.4rem,4vw,3.4rem)}
.xnum li>*{font-size:1rem}
.xnum b{font:700 1em/.85 var(--display);font-size:clamp(2.4rem,4vw,3.4rem);color:var(--yellow);font-variant-numeric:tabular-nums}
.xnum h3{font:600 clamp(1.125rem,1.6vw,1.375rem)/1.1 var(--display);margin-bottom:6px}
.xnum p{color:#d6d6d0;font-size:.9688rem;line-height:1.5}
.xnum li.xsum{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px;border-bottom:0;padding-bottom:0}
.xsum p{flex:1 1 100%;font:700 clamp(1.375rem,2.2vw,2rem)/1.05 var(--display);text-transform:uppercase;color:var(--paper)}
.xsum mark{background:none;color:var(--yellow)}
/* how it works inside the band */
#how-it-works .track{margin-top:0}
.track li::before{color:var(--ink);font-weight:700}
/* BEM strip */
.xbem{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:clamp(24px,3.4vw,56px);align-items:start}
.xbem-id{display:grid;gap:10px;align-content:start}
.xbem-id .lockup{font-size:clamp(1.9rem,3.2vw,2.8rem)}
.xbem-mid{display:grid;gap:16px;justify-items:start;padding-inline:clamp(0px,2.4vw,40px);border-inline:1.5px solid var(--ink)}
.xbem .modules li{padding-block:14px}
.xbem .modules .h3{font-size:clamp(1.0625rem,1.4vw,1.25rem)}
.xbem .modules .dim{font-size:.9375rem}
.measure.xgrey{background:var(--mist)}
/* studio */
.xstudio{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:center}
.xstudio-l{display:grid;gap:20px}
.xstudio-l .lockup{font-size:clamp(1.4rem,2.4vw,2rem)}
.xstudio-film .frame{aspect-ratio:16/9;border:1px solid var(--graphite)}
.xroip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:center;margin-top:clamp(40px,5vw,72px);padding-top:clamp(24px,3vw,40px);border-top:1.5px solid var(--graphite)}
.xroip .roip-big{font-size:clamp(3.5rem,9vw,7.5rem)}
/* collective */
.xcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--ink)}
.xcols>div{display:grid;gap:10px;align-content:start;padding:clamp(18px,2vw,28px) clamp(16px,2vw,32px) 0;border-left:1.5px solid var(--ink)}
.xcols>div:first-child{border-left:0;padding-left:0}
.xcols h3{font:600 clamp(1.125rem,1.6vw,1.375rem)/1.1 var(--display);text-transform:uppercase}
.xcols p{color:var(--muted)}
.xtop{padding-block:clamp(40px,5vw,72px) 0}
.cap-link{color:var(--ink);text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1.5px;white-space:nowrap}
.cap-link:hover{text-decoration-thickness:3px}
.xsum .reel-ctl{flex:1 1 100%;justify-content:space-between;color:var(--ash)}
.xnum p.pl{color:var(--paper);font-weight:700;margin-bottom:4px}
.xline-b{display:block;color:var(--ink);font:400 clamp(1.125rem,1.5vw,1.375rem)/1.15 var(--display);text-transform:uppercase;letter-spacing:.02em;margin-bottom:6px}
.xbem-mid .subhead{font-size:clamp(1.0625rem,1.5vw,1.3125rem)}
.xstudio-l .caps{margin-top:4px}
#thinking .think-grid{margin-top:0}
#thinking .h2{display:none}
/* round 8 */
.xhead-r{display:grid;gap:18px;justify-items:start}
.xhead:not(.no-line){align-items:start}
.xhead-r{padding-top:calc(1.2 * clamp(.875rem,1.1vw,1rem) + 10px)}
@media (max-width:940px){.xhead-r{padding-top:0}}
.xhead:not(.no-line){grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.xhead-r .xlink{justify-self:start}
#how-it-works .track h4{font:700 clamp(1.125rem,1.5vw,1.375rem)/1.08 var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.xred{color:var(--red)}
.btn-y{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-y:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.xystate{color:var(--yellow)}
.ylock .lockup-t,.on-dark .ylock .lockup-t{border-left-color:var(--yellow)}
.ylock .lockup-t b,.ylock .lockup-t span,.on-dark .ylock .lockup-t span{color:var(--yellow)}
.ylock-top .lockup-t b{color:var(--yellow);-webkit-text-stroke:.012em var(--ink);paint-order:stroke fill}
.ylock-top img{filter:drop-shadow(0 0 .6px var(--ink)) drop-shadow(0 0 .6px var(--ink))}
.ylock-top .lockup-t span{color:var(--ink)}
.press-head{margin-bottom:clamp(18px,2vw,28px)}
.foot{position:relative;overflow:hidden}
.foot .wrap{position:relative;z-index:1}
.drones{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.foot-big .yw{color:var(--yellow)}
.foot-big .ww{color:var(--paper)}
.foot-big.tw .c{opacity:0}
.foot-big.tw .c.on{opacity:1}
.foot-big .caret{display:inline-block;width:.06em;height:.8em;background:var(--yellow);margin-left:.04em;vertical-align:-.02em;animation:caret .9s steps(1) infinite}
.foot-big .caret.ww-c{background:var(--paper)}
.foot-big .caret.done{animation:caret .9s steps(1) 3 forwards}
@keyframes caret{50%{opacity:0}}
/* header: eight sections in page order; tagline drops first, then the menu folds into Menu */
@media (min-width:1241px){
  .mark>span:last-child{display:none}
  .head-row{min-height:80px;flex-wrap:nowrap;gap:clamp(24px,3vw,56px)}
  .head-row .nav{margin-left:auto;gap:clamp(16px,1.75vw,32px)}
}
@media (max-width:1240px){
  .head-row .nav{display:none;order:5;flex-basis:100%;flex-direction:column;gap:0;padding-bottom:12px}
  .head-row .nav.is-open{display:flex}
  .head-row .nav a{padding-block:14px;border-bottom:1px solid var(--rule);font-size:.9375rem}
  .menu-btn{display:inline-flex;padding:.8em 1.1em;font-size:.8125rem}
  .head-row .btn-ink{margin-left:auto}
  .head-row .nav .nav-brief{display:block}
}
/* lockups to style guide p.07 and the BEM one-sheet: rule 1/2x from the wordmark and 1/2x from the name; descriptor on one line */
/* lockup drawn from the Studio Papers N° 01 masthead (x = wordmark height, 1.34em):
   0.55x either side of a hairline rule (x/27) that stands 0.82x tall, centred on the wordmark;
   name in widely tracked Oswald SemiBold at cap 0.42x; descriptor as a tracked label beneath */
.lockup{gap:.74em;align-items:stretch}
.lockup img{align-self:center}
.lockup-t{position:relative;border-left:0;padding-left:.74em;gap:.32em;align-content:center}
.lockup-t::before{content:"";position:absolute;left:0;top:50%;height:1.1em;width:max(1px,.05em);transform:translateY(-50%);background:var(--ink)}
.on-dark .lockup-t::before{background:var(--paper)}
.ylock .lockup-t::before{background:var(--yellow)}
.lockup-t b{font-size:.69em;font-weight:600;letter-spacing:.18em;line-height:.9}
.lockup-t span{font-size:max(.25em,.6875rem);font-weight:500;letter-spacing:.2em;line-height:1.1;color:#6b6b6b}
.on-dark .lockup-t span{color:#9e9e9e}
/* BEM header row, as on the one-sheet: lockup left, descriptor line right, hairline under */
.xbem{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.xbem-id{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 32px;padding-bottom:clamp(16px,2vw,24px);border-bottom:1.5px solid var(--ink)}
.xbem-id .lockup{font-size:clamp(2rem,4vw,3.4rem)}
.xbem-id .lockup-t span{white-space:nowrap}
.xbem-id .mast-tag{font:500 .8125rem/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0}
.xbem-mid{border-inline:0;border-right:1.5px solid var(--ink);padding-left:0}
@media (max-width:940px){.xbem .xbem-mid{border-right:0;border-top:0;padding-top:4px}}
.xnum h3{color:var(--yellow)}
/* disciplines strip resolves into the YW3 | Brand Experience lockup on the right */
/* one line, all white: three disciplines, a hairline that draws across, then the lockup they add up to */
.disciplines .wrap{padding-block:clamp(22px,2.6vw,36px)}
.disciplines p.dwords{display:block;padding:0;font:600 clamp(.95rem,1.55vw,1.4rem)/1 var(--display);letter-spacing:.16em;flex:none}
.disciplines p.dwords .dw{color:var(--paper);padding-inline:clamp(14px,1.8vw,30px)}
.disciplines p.dwords .dw:first-child{padding-left:0}
.dlink{flex:1 1 auto;min-width:40px;height:1px;background:linear-gradient(90deg,var(--graphite),var(--ash));transform-origin:left center}
@media (prefers-reduced-motion:no-preference){.dlink{animation:dlLink .9s .45s cubic-bezier(.65,0,.35,1) both}@keyframes dlLink{from{transform:scaleX(0)}to{transform:scaleX(1)}}}
@media (max-width:860px){.dlink{display:none}.disciplines p.dwords{font-size:clamp(.85rem,3.4vw,1.1rem)}}
@media (max-width:620px){.disciplines p.dwords .dw:nth-child(3){border-left:1.5px solid var(--graphite);padding-left:clamp(8px,3vw,14px)}}
@media (max-width:480px){.disciplines p.dwords .dw{padding-inline:8px;letter-spacing:.1em}}
.disciplines .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px 40px}
.disciplines .dlock{display:flex;gap:.74em;flex:none;padding:0;margin:0;font:700 clamp(1.5rem,2.7vw,2.5rem)/1 var(--display);letter-spacing:0}
@media (prefers-reduced-motion:no-preference){
  .dlock img{animation:dlMark 1s 1.2s cubic-bezier(.22,1,.36,1) both}
  .dlock .lockup-t::before{animation:dlRule .7s 1.65s cubic-bezier(.65,0,.35,1) both}
  .dlock b{animation:dlName 1s 1.95s cubic-bezier(.22,1,.36,1) both}
  @keyframes dlMark{from{opacity:0;transform:translateX(-.35em) scale(.94);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
  @keyframes dlRule{from{transform:translateY(-50%) scaleY(0)}to{transform:translateY(-50%) scaleY(1)}}
  @keyframes dlName{from{clip-path:inset(0 100% 0 0);transform:translateX(-.25em)}to{clip-path:inset(0 0 0 0);transform:none}}
}
@media (max-width:860px){.disciplines .dlock{display:none}}
#how-it-works .track li::before{content:none;display:none}
#how-it-works .track{row-gap:10px}
#how-it-works .track li{grid-row:span 3;grid-template-rows:subgrid;row-gap:10px;margin-bottom:clamp(20px,2.4vw,32px)}
#studio .xh2 .ln{display:block}
.xsum p mark{display:block;white-space:nowrap}
@media (max-width:520px){.xsum p mark{white-space:normal}}
.xsum .reel-ctl{position:absolute;right:var(--gutter);bottom:clamp(14px,1.6vw,22px);flex:none;justify-content:flex-end;gap:10px;font-size:.625rem;letter-spacing:.14em;color:var(--ash)}
.xsum .reel-btn{padding:.35em .7em;min-width:0;border-width:1px;font-size:.625rem}
.xnum li.xsum{border-bottom:0}
@media (max-width:1100px){.xgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:940px){
  .xhead{grid-template-columns:minmax(0,1fr)}
  .xlink{justify-self:start}
  .xsplit,.xbem,.xstudio{grid-template-columns:minmax(0,1fr)}
  .xsplit-l{border-right:0;padding-right:0;padding-bottom:28px;border-bottom:1px solid rgb(248 248 248 / .3)}
  .xbem-mid{border-inline:0;padding-inline:0;border-block:1.5px solid var(--ink);padding-block:22px}
  .xcols{grid-template-columns:minmax(0,1fr)}
  .xcols>div{border-left:0;padding-left:0;border-top:1.5px solid var(--ink);padding-bottom:18px}
  .xcols>div:first-child{border-top:0}
}
@media (max-width:620px){.xgrid{grid-template-columns:minmax(0,1fr)}.xroip{grid-template-columns:minmax(0,1fr)}}
/* embedded players (YouTube, Instagram, TikTok, Twitch) */
.embed{position:relative;background:var(--black)}
.embed iframe{display:block;width:100%;border:0}
.embed-yt,.embed-tw,.embed-ytl{aspect-ratio:16/9}
.embed-yt iframe,.embed-tw iframe,.embed-ytl iframe{position:absolute;inset:0;height:100%}
.embed-tt,.embed-yts{aspect-ratio:9/16}
.embed-tt iframe,.embed-yts iframe{position:absolute;inset:0;height:100%}
.embed-ig{background:#fff}
.embed-ig iframe{height:740px}
/* stage: vertical social players sit on a dark ground lit by the project's own image */
.embed-stage{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,2vw,28px);padding:clamp(22px,3.2vw,48px)}
.embed-stage .stage-bg{position:absolute;inset:-48px;width:calc(100% + 96px);height:calc(100% + 96px);max-width:none;object-fit:cover;filter:blur(30px) saturate(1.15) brightness(.42);z-index:-1}
.embed-stage .embed{box-shadow:0 28px 70px rgb(0 0 0 / .5)}
.embed-stage .embed-ig{flex:none;width:min(100%,360px)}
.embed-stage>.embed-yts,.embed-stage>.embed-tt{flex:none;width:min(100%,340px)}
.embed-stage figure{margin:0;flex:0 1 320px;min-width:0;display:grid;gap:10px}
.embed-stage .cap{color:var(--ash)}
.embed-stage .stage-tag{position:absolute;left:clamp(22px,3.2vw,48px);top:clamp(22px,3.2vw,48px);color:var(--ash)}
.embed-solo{margin:clamp(32px,4vw,56px) 0 0}
.cv-two:has(.embed-stage,.embed-rail-wrap){grid-template-columns:minmax(0,1fr)}
/* rail: a series of films, scrolled sideways, each playing as it comes into view */
.embed-rail-wrap{display:grid;gap:14px;min-width:0}
.rail-nav{display:flex;gap:8px;justify-content:flex-end}
.rail-btn{width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:500 1.125rem/1 var(--body);cursor:pointer;transition:background .18s,color .18s}
.rail-btn:hover{background:var(--yellow)}
.rail-btn:disabled{opacity:.3;cursor:default;background:transparent}
.embed-rail{display:flex;gap:clamp(14px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:14px;overscroll-behavior-x:contain}
.embed-rail figure{flex:0 0 min(620px,84%);margin:0;scroll-snap-align:start;display:grid;gap:10px}
@media (max-width:720px){
  .embed-stage.multi{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory}
  .embed-stage.multi figure{flex:0 0 74%;scroll-snap-align:center}
  .embed-stage .embed-ig iframe{height:680px}
  .embed-stage .stage-tag{display:none}
}
.cv-two:has(.ep-list){grid-template-columns:minmax(0,1fr)}
.ep-list{margin:0;display:grid;gap:10px}
.ep-list .embed,.ep-list .cap{width:min(100%,980px)}
.ep-trailer{margin:0;display:grid;gap:10px}
.cv-two:has(.ep-trailer){grid-template-columns:minmax(0,1fr)}
.versus>div{transition:background .4s ease,color .4s ease,box-shadow .4s ease}
.versus>div:first-child:is(:hover,.hot){background:var(--yellow);color:var(--ink)}
.versus>div:first-child:is(:hover,.hot) .dim{color:var(--ink)}
.versus .vx{background:linear-gradient(var(--red),var(--red)) no-repeat 0 55%/0 .12em;transition:background-size .5s cubic-bezier(.65,0,.35,1)}
.versus>div:last-child:is(:hover,.hot){box-shadow:inset 0 0 0 2px var(--red)}
.versus>div:last-child:is(:hover,.hot) .vx{background-size:100% .12em}
.roip-text .def{display:grid;gap:8px;padding-top:clamp(16px,1.8vw,24px)}
.dterm{font:700 clamp(1.75rem,3vw,2.6rem)/.95 var(--display);text-transform:uppercase;color:var(--paper);margin:0}
.dsub{display:flex;align-items:center;gap:.7em;font:600 .8125rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin:0 0 4px}
.dsub::before{content:"";width:.8em;height:.8em;background:var(--yellow);flex:none}
.roip-mark{position:sticky;top:96px}
.roip-mark .label{font:600 clamp(1.05rem,1.5vw,1.375rem)/1.15 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
.xcol-lock{font-size:clamp(1.4rem,2.4vw,2rem);margin-bottom:clamp(14px,1.6vw,22px)}
#collective .xhead-r{padding-top:calc(1.34 * clamp(1.4rem,2.4vw,2rem) + clamp(14px,1.6vw,22px) + 10px)}
@media (max-width:940px){#collective .xhead-r{padding-top:0}}
.cv-stats li{border-top:3px solid var(--paper)}
.cv-stats b{color:var(--yellow)}
#spotlight figcaption.cap{padding-top:clamp(16px,1.6vw,22px);gap:12px 32px;line-height:1.6}
#spotlight figcaption .cap-link{display:inline-block;margin-left:clamp(14px,1.6vw,28px);color:var(--ink)}
@media (max-width:760px){#spotlight figcaption .cap-link{display:block;margin:10px 0 0}}
.kpi:has(.bem-tag){flex-direction:column;align-items:flex-start;gap:clamp(12px,1.4vw,20px)}
.bem-tag{font:600 clamp(1.25rem,2.1vw,1.875rem)/1.1 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--ink);text-decoration:none;display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:0 .35em}
.bem-tag .bt-m{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 85%/0 .42em;padding:0 .08em;transition:background-size 1.1s cubic-bezier(.65,0,.35,1) .35s}
.bem-tag.is-in .bt-m{background-size:100% .42em}
.bem-tag .bt-ar{display:inline-block;transition:transform .3s ease}
.bem-tag:hover .bt-m{background-size:100% 100%;transition-duration:.35s;transition-delay:0s}
.bem-tag:hover .bt-ar{transform:translateX(.25em)}
@media (prefers-reduced-motion:reduce){.bem-tag .bt-m{background-size:100% .42em;transition:none}}
#brand-experience + #studio{border-top:1px solid var(--graphite)}
.xabout{background:var(--white)}
.ab2{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:clamp(32px,5vw,88px);align-items:stretch}
.ab2-co{display:flex;flex-direction:column;gap:clamp(18px,2vw,28px);container-type:inline-size}
.ab2-fo{display:grid;gap:10px;align-content:start;border-left:1.5px solid var(--ink);padding-left:clamp(24px,3.4vw,56px)}
.ab-lede{font:600 clamp(1.375rem,2.3vw,2.125rem)/1.15 var(--display);text-transform:uppercase;letter-spacing:.01em;margin:0}
.ab-lede b{font-weight:600}
.ab-body,.ab-bio{display:grid;gap:.9em;font-size:clamp(1rem,1.1vw,1.0625rem);line-height:1.6}
.ab-body{font-size:clamp(1.0625rem,1.35vw,1.3125rem);line-height:1.55;gap:1em}
.ab-body b,.ab-bio b{font-weight:700;color:var(--ink)}
.ab-statement{margin-top:auto;padding-top:clamp(12px,1.6vw,24px);font:700 clamp(2.25rem,11.3cqi,8rem)/1.06 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.ab-statement>span{display:block;white-space:nowrap}
.ab-statement .hl{display:inline}
.ab-portrait{margin:0 0 clamp(12px,1.4vw,20px)}
.ab-frame{aspect-ratio:1/1;background:var(--ink);width:min(100%,300px)}
.ab-frame img{width:100%;height:100%;object-fit:cover}
.ab-name{font:700 clamp(2rem,3.4vw,3rem)/.92 var(--display);text-transform:uppercase;margin:0}
.ab-role{font:500 .8125rem/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 .5em}
.ab-book{font-weight:700;letter-spacing:.04em;white-space:nowrap;color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.18em;text-underline-offset:.18em}
.ab-book:hover{text-decoration-color:var(--ink)}
.ab-ywwy{font:700 clamp(1.75rem,3vw,2.75rem)/1 var(--display);text-transform:uppercase;margin:.4em 0 0}
@media (max-width:940px){.ab2{grid-template-columns:minmax(0,1fr)}.ab2-fo{border-left:0;padding-left:0;border-top:1.5px solid var(--ink);padding-top:28px}}
.disciplines p.dwords{flex:0 1 auto;min-width:0}
.disciplines .dlock{font-size:clamp(1.2rem,2.1vw,2.2rem)}
.dlink{min-width:24px}
@media (max-width:620px){.disciplines p.dwords .dl{flex-wrap:wrap;row-gap:8px}.disciplines p.dwords{letter-spacing:.1em}}
@media (max-width:940px){.xhead:not(.no-line){grid-template-columns:minmax(0,1fr)}.xhead-r .xlink{white-space:normal}}
.cv-close{position:fixed;right:var(--gutter);top:96px;z-index:60;display:inline-flex;align-items:center;gap:.55em;background:var(--ink);color:var(--paper);font:600 .8125rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:.95em 1.25em;box-shadow:0 8px 24px rgb(0 0 0 / .18);transition:background .18s,color .18s}
.cv-close span{font-size:1.5em;line-height:.6;font-weight:400}
.cv-close:hover{background:var(--yellow);color:var(--ink)}
@media (max-width:620px){.cv-close{top:auto;bottom:16px;right:16px}}
.badge .bimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
@media (max-width:620px){
  .hero .hero-cta{display:none}
  .hero .reel-ctl{gap:8px;font-size:.5625rem;letter-spacing:.12em}
  .hero .reel-btn{padding:.35em .65em;min-width:0;border-width:1px;font-size:.5625rem}
  .hero-foot{margin-top:0}
}
.clients li{padding:0;border-bottom:0}
.clients .clink{display:flex;align-items:center;gap:.75rem;min-width:0;min-height:4rem;padding-block:14px;border-bottom:1px solid var(--rule);color:inherit;text-decoration:none;width:100%;transition:border-color .2s}
.clients .clink>span:last-child{border-left:1.5px solid var(--ink);padding:.4em 0 .4em .75em;min-width:0}
.clients .clink:hover{border-bottom-color:var(--yellow);box-shadow:inset 0 -3px 0 var(--yellow)}
.clients .cjump{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--yellow);padding-bottom:3px}
.clients .cjump:hover{background:var(--yellow)}
@media (max-width:620px){.clients .clink{gap:.5rem}}
@media (min-width:621px){ .clients{display:none !important} }
@media (max-width:620px){ .xsum .reel-ctl{left:var(--gutter,20px);right:var(--gutter,20px);width:auto;padding-inline:0;justify-content:space-between;align-items:center;gap:16px} .xsum .reel-ctl .xcap{min-width:0;line-height:1.5} }
#spotlight .xsub{margin-top:clamp(14px,1.6vw,22px);font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.5;color:var(--muted);max-width:44em}
#spotlight figcaption.cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px 24px;flex-wrap:wrap}
#spotlight figcaption .cap-link{margin-left:0 !important;display:inline-block}
#spotlight{padding-bottom:clamp(56px,6vw,96px) !important}
@media (max-width:760px){#spotlight figcaption .cap-link{display:block;margin:2px 0 0}}
.cv-stats.n6{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.hero-sub .hs-d{display:block;color:var(--paper);font-weight:500}
.hero-kick{margin-top:clamp(12px,1.4vw,20px);font:700 clamp(1.125rem,2vw,1.75rem)/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.hero-kick a{color:var(--yellow);text-decoration:none;background:linear-gradient(var(--yellow),var(--yellow)) 0 100%/0 2px no-repeat;transition:background-size .3s}
.hero-kick a:hover{background-size:100% 2px}
.roles{list-style:none;margin:0;padding:0;width:100%;border-top:1.5px solid var(--ink)}
.roles .role{display:flex;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none;transition:box-shadow .2s}
.roles .role-t{font:700 clamp(1.125rem,1.6vw,1.375rem)/1.2 var(--display);text-transform:uppercase}
.roles .role-m{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.roles .arr{margin-left:auto}
.roles .role:hover{box-shadow:inset 0 -3px 0 var(--yellow)}
@media (max-width:620px){.roles .role{flex-wrap:wrap;gap:4px 12px}}
@media (max-width:620px){
  .hero .hero-h{font-size:clamp(1.45rem,6.6vw,1.75rem)}
  .hero-sub .hs-x{display:none}
  .hero-kick{margin-top:28px;font-size:1rem}
  .disciplines .wrap{padding-block:14px}
  .clients{padding-top:40px}
  .clients .label{font-size:.6875rem;letter-spacing:.14em}
  .clients .cjump{border-bottom-width:1px;color:var(--muted)}
}
#thinking .th-head{display:grid;gap:14px;justify-items:start;margin-bottom:clamp(36px,4.5vw,64px)}
#thinking .th-lock{margin-bottom:4px}
#thinking .th-intro{font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.5;color:var(--muted);max-width:34em}
#thinking .th-k{font:700 .8125rem/1.2 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
#thinking .th-sub{font-size:.9375rem;color:var(--muted);margin-top:6px}
#thinking .th-feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
#thinking .th-cover{display:block;box-shadow:0 24px 60px -24px rgb(0 0 0 / .35);transition:transform .3s}
#thinking .th-cover:hover{transform:translateY(-4px)}
#thinking .th-cover img{display:block;width:100%;height:auto}
#thinking .th-ftext{display:grid;gap:14px;justify-items:start}
#thinking .th-tag{background:var(--yellow);color:var(--ink);font:700 .75rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;padding:.45em .6em}
#thinking .th-title{font:700 clamp(2.25rem,4.6vw,4.25rem)/.98 var(--display);text-transform:uppercase;letter-spacing:-.005em;color:var(--ink)}
#thinking .th-deck{font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.35;color:var(--ink)}
#thinking .th-copy{font-size:1rem;line-height:1.6;color:var(--muted);max-width:34em}
#thinking .th-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:6px}
#thinking .th-series{margin-top:clamp(56px,7vw,104px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,3vw,48px);align-items:start}
#thinking .th-issue{display:grid;gap:8px;padding:clamp(22px,2.4vw,32px) 0;border-top:1.5px solid var(--ink);color:var(--ink);text-decoration:none}
#thinking .th-meta{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
#thinking .th-ititle{font:700 clamp(1.625rem,2.8vw,2.5rem)/1.02 var(--display);text-transform:uppercase}
#thinking .th-desc{color:var(--muted);line-height:1.55;max-width:38em}
#thinking .th-go{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;margin-top:6px;justify-self:start;border-bottom:1.5px solid var(--ink);padding-bottom:3px}
#thinking .th-issue:hover .th-go{border-color:var(--yellow);box-shadow:inset 0 -6px 0 var(--yellow)}
#thinking .th-press{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,3vw,48px);align-items:start}
#thinking .pr-list{list-style:none;margin:0;padding:0}
#thinking .pr-list a{display:grid;grid-template-columns:9.5rem minmax(0,1fr) auto;gap:6px 20px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
#thinking .pr-list li:first-child a{padding-top:4px}
#thinking .pr-m{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#thinking .pr-t{font-size:1rem;line-height:1.45}
#thinking .pr-go{color:var(--muted);font-size:.875rem}
#thinking .pr-list a:hover .pr-t{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:.25em}
@media (max-width:820px){
  #thinking .th-feature{grid-template-columns:1fr}
  #thinking .th-cover{max-width:300px}
  #thinking .th-series,#thinking .th-press{grid-template-columns:1fr}
  #thinking .pr-list a{grid-template-columns:minmax(0,1fr) auto}
  #thinking .pr-m{grid-column:1/-1}
}
.xabout .ab-key{font-size:1.08em}
.xabout .ab-wink{font-size:1.06em}
@media (max-width:620px){
  .xabout .ab2{gap:44px}
  .xabout .ab-body,.xabout .ab-bio{display:grid;gap:12px}
  .xabout .ab-body p,.xabout .ab-bio p{font-size:.9375rem;line-height:1.55;margin:0}
  .xabout .ab-lede{font-size:1rem;line-height:1.45}
  .xabout .ab2-fo{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:16px;align-items:center}
  .xabout .ab2-fo .ab-portrait{grid-column:1;margin:0;max-width:96px}
  .xabout .ab2-fo .ab-id{grid-column:2}
  .xabout .ab2-fo .ab-id .eyebrow{margin:0 0 4px}
  .xabout .ab2-fo .ab-bio,.xabout .ab2-fo .ab-ywwy{grid-column:1/-1;margin-top:18px}
}
#measurement{padding-bottom:0}
.bm{position:relative}
.bm .bm-open{display:grid;gap:clamp(16px,1.8vw,24px);justify-items:start;max-width:62rem}
.bm .bm-h{font:700 clamp(2.75rem,6.4vw,6rem)/.92 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin-top:clamp(8px,1.5vw,20px)}
.bm .bm-h .ln{display:block}
.bm .bm-def{font-size:clamp(1.125rem,1.7vw,1.5rem);line-height:1.4;color:var(--ink);max-width:36em}
.bm .bm-cta{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;margin-top:6px}
.bm .btn-line{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.bm .btn-line:hover{background:var(--yellow)}
.bm .bm-trust{font-size:.8125rem;letter-spacing:.06em;color:var(--muted)}
.bm .bm-eb{font:700 .8125rem/1.2 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bm .bm-h3{font:700 clamp(1.5rem,2.4vw,2.25rem)/1.02 var(--display);text-transform:uppercase;color:var(--ink)}
.bm .bm-outs{margin-top:clamp(64px,8vw,120px)}
.bm .bm-sh{display:grid;gap:8px;margin-bottom:clamp(20px,2.4vw,32px)}
.bm .bm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(16px,2vw,32px)}
.bm .bm-grid li{display:grid;gap:10px;align-content:start;padding-top:18px;border-top:3px solid var(--ink)}
.bm .bm-grid b{font:700 clamp(1.5rem,2.3vw,2.25rem)/1 var(--display);text-transform:uppercase;letter-spacing:.005em}
.bm .bm-grid span{font-size:1rem;line-height:1.45;color:var(--muted)}
.bm .bm-dark{margin-top:clamp(72px,9vw,128px);background:var(--ink);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax);padding:clamp(56px,7vw,104px) 0}
.bm .bm-arch{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.bm .bm-arch li{display:grid;gap:12px;align-content:start}
.bm .bm-n{font:700 clamp(3rem,5.4vw,5rem)/.9 var(--display);color:var(--yellow)}
.bm .bm-n span{font-size:.32em;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);vertical-align:.35em;margin-left:.2em}
.bm .bm-tag{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.bm .bm-arch h3{font:700 clamp(1.5rem,2.3vw,2.125rem)/1.02 var(--display);text-transform:uppercase;color:var(--paper)}
.bm .bm-arch li>p:last-child{color:var(--ash);line-height:1.55}
.bm .bm-how{padding:clamp(72px,9vw,128px) 0 clamp(64px,8vw,112px)}
.bm .bm-two{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,56px);margin-top:20px}
.bm .bm-two>div{display:grid;gap:10px;align-content:start}
.bm .bm-two p{color:var(--muted);line-height:1.55}
.bm .bm-priv{padding-left:clamp(20px,2.4vw,32px);border-left:1.5px solid var(--ink)}
.bm .bm-meth{margin-top:clamp(28px,3vw,40px);display:grid;gap:14px;justify-items:start}
.bm button.text-link{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.bm .bm-det{font-size:.875rem;color:var(--muted);max-width:56em}
.bm .bm-det summary{cursor:pointer;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;list-style:none}
.bm .bm-det summary::before{content:"+ "}
.bm .bm-det[open] summary::before{content:"\2212  "}
.bm .bm-det ul{margin:14px 0 10px;padding-left:1.1em;display:grid;gap:8px;line-height:1.5}
.bm .bm-det b{color:var(--ink)}
.bm .bm-close{background:var(--yellow);box-shadow:0 0 0 100vmax var(--yellow);clip-path:inset(0 -100vmax);padding:clamp(64px,8vw,120px) 0;display:grid;gap:clamp(18px,2vw,28px);justify-items:start}
.bm .bm-kpi{font:700 clamp(3rem,7.4vw,7rem)/.9 var(--display);text-transform:uppercase;color:var(--ink);letter-spacing:-.01em}
.bm .bm-go{font:700 clamp(1.25rem,2vw,1.75rem)/1.1 var(--display);text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:3px solid var(--ink);padding-bottom:4px}
.bm .bm-close .btn-line:hover{background:var(--paper)}
@media (max-width:900px){
  .bm .bm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
  .bm .bm-arch,.bm .bm-two{grid-template-columns:1fr}
  .bm .bm-priv{padding-left:0;border-left:0;padding-top:20px;border-top:1.5px solid var(--ink)}
}
@media (max-width:620px){
  .bm .bm-h{font-size:clamp(2.25rem,11vw,3rem)}
  .bm .bm-def{font-size:1.0625rem}
  .bm .bm-cta{flex-direction:column;align-items:stretch;width:100%}
  .bm .bm-cta .btn{text-align:center;letter-spacing:.08em;padding-inline:12px}
  .bm .bm-go{font-size:1.125rem}
  .bm .bm-grid b{font-size:1.375rem}
  .bm .bm-grid span{font-size:.9375rem}
  .bm .bm-arch{gap:40px}
  .bm .bm-kpi{font-size:clamp(2.5rem,13vw,3.5rem)}
}
.badge .hxf{position:absolute;inset:0;clip-path:polygon(0 10.3%,50% 0,100% 10.3%,100% 89.7%,50% 100%,0 89.7%);-webkit-clip-path:polygon(0 10.3%,50% 0,100% 10.3%,100% 89.7%,50% 100%,0 89.7%);background:transparent;pointer-events:none}
.badge .bt{z-index:2}
@keyframes bdHx{0%{background:transparent}17%{background:#fff}19%{background:var(--yellow)}43%{background:var(--ink)}67%{background:#fff}69%{background:var(--yellow)}71%{background:transparent}100%{background:transparent}}
@media (prefers-reduced-motion:no-preference){.badge .hxf{animation:bdHx 3.2s steps(1,end) 3 both}}
.bm .bm-proof{display:grid;gap:8px;max-width:40em;padding-left:16px;border-left:3px solid var(--yellow)}
.bm .bm-proof p:last-child{font-size:1rem;line-height:1.55;color:var(--muted)}
.bm .bm-tech{margin-top:clamp(56px,7vw,96px)}
.bm .bm-cols{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.bm .bm-cols li{display:grid;gap:8px;align-content:start;padding-top:14px;border-top:1px solid var(--ink)}
.bm .bm-cols b{font:700 1.0625rem/1.1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.bm .bm-cols span{font-size:.9375rem;line-height:1.5;color:var(--muted)}
.bm .bm-outs{margin-top:clamp(56px,7vw,96px)}
.bm .bm-grid i{font-style:normal;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.bm .bm-grid b{font-size:clamp(1.375rem,2vw,2rem);white-space:nowrap}
.bm .bm-two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.bm .bm-grid b{white-space:normal}}
@media (max-width:900px){.bm .bm-cols{grid-template-columns:1fr;gap:18px}.bm .bm-two{grid-template-columns:1fr}}
@media (max-width:620px){
  .bm .bm-h{font-size:clamp(1.9rem,9.4vw,2.6rem)}
  .bm .bm-grid b{font-size:1.125rem}
}
.bm .bm-hl{background:var(--yellow);color:var(--ink);padding:0 .12em}
.bm .bm-close .bm-be{background:var(--ink);color:var(--yellow);padding:0 .14em}
.bm .bm-close .bm-go{border-bottom-width:3px}
.bm .bm-close .bm-kpi{position:relative}
.bm .bm-grid li{border-top-color:var(--ink)}
.bm .bm-grid li:hover{border-top-color:var(--yellow)}
.bm .bm-grid i{color:var(--ink)}
.bm .bm-grid i::first-letter{color:var(--ink)}
.xabout .ab2-co .ab-mark{margin:auto 0 clamp(28px,3vw,44px);padding-top:clamp(40px,5vw,72px);width:min(100%,520px)}
.xabout .ab2-co .ab-mark img{display:block;width:100%;height:auto}
.xabout .ab2-co .ab-mark + .ab-statement{margin-top:0}
@media (max-width:620px){.xabout .ab2-co .ab-mark{width:min(100%,320px);padding-top:28px;margin-bottom:22px}}
.xabout .ab2-co .ab-mark{padding-top:clamp(16px,2vw,28px);margin-bottom:clamp(16px,2vw,28px);width:min(100%,400px)}
/* hero: stack disciplines on phones */
@media (max-width:620px){.hero-sub .hs-d>span{display:block}.hero-sub .hs-d>span+span{margin-top:2px}}
/* BEM: built to move */
.bm .bm-move{margin-top:clamp(48px,6vw,80px);display:grid;gap:14px;justify-items:start;max-width:52rem}
.bm .bm-move-h span{display:inline-block;background:var(--yellow);color:var(--ink);font:700 clamp(2rem,4.4vw,3.75rem)/1 var(--display);text-transform:uppercase;padding:.08em .18em .04em}
.bm .bm-move-b{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.5;color:var(--ink);max-width:40em}
.bm .bm-move-k{font:700 clamp(1rem,1.4vw,1.1875rem)/1.3 var(--display);letter-spacing:.06em;text-transform:uppercase}
.bm .bm-fixed{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.bm .bm-fixed b{font:700 .9375rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase}
.bm .bm-fixed span{font-size:.8125rem;color:var(--muted)}
/* About credential */
.xabout .ab-cred{font-size:.9375rem;line-height:1.5;padding-top:12px;border-top:1px solid var(--rule);max-width:36em}
/* About: live YOU WIN. WE WIN. mark */
.ym{position:relative;aspect-ratio:1000/621;container-type:inline-size;overflow:hidden}
.ym .ym-body{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none}
.ym .ym-word{position:absolute;inset:0;z-index:1;background:var(--yellow);overflow:hidden;display:flex;flex-direction:column;justify-content:center;
  -webkit-mask-image:url(/media/yw3-word-mask.png);mask-image:url(/media/yw3-word-mask.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ym .ym-row{display:flex;width:max-content;white-space:nowrap;font:700 2.55cqw/1 var(--display);letter-spacing:.02em;color:var(--ink);height:2.5cqw;line-height:2.5cqw;flex:none;animation:ymL var(--d,44s) linear infinite}
.ym .ym-row.ym-rev{animation-name:ymR}
.ym .ym-row>span{padding-right:.6em}
@keyframes ymL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ymR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.ym .ym-row{animation:none}}
/* BEM: mobile entry cleanup */
@media (max-width:620px){
  section[id]{scroll-margin-top:64px}
  #measurement{padding-top:28px}
  .bm .bm-id{display:grid;gap:14px;justify-items:start}
  .bm .bm-id .lockup{font-size:1.6rem}
  .bm .bm-id .lockup img{width:auto;height:1.15em}
  .bm .bm-id .mast-tag{display:block;width:100%;font-size:.6875rem;letter-spacing:.2em;padding-top:10px;border-top:1px solid var(--ink);margin:0}
  .bm .bm-h{margin-top:22px;margin-bottom:6px}
  .bm .bm-cta .btn{white-space:normal;line-height:1.25}
  .bm .bm-move-h span{font-size:2.1rem}
}
#work.xgrey{background:var(--mist)}
#spotlight{border-bottom:1.5px solid var(--ink)}
section[id]{scroll-margin-top:var(--hh,76px)}
@media (max-width:620px){.dir-list a{padding:12px 0}}
/* nav v2: edited primary nav + full directory */
.site-head .head-row{display:flex;align-items:center;gap:clamp(18px,2vw,32px)}
.site-head .mark{margin-right:auto}
.site-head .mark>.badge{display:block!important}
.site-head .pnav{display:flex;align-items:center;gap:clamp(20px,2.1vw,36px)}
.site-head .pnav a{font:500 .8125rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;text-decoration:none;color:var(--ink);padding-block:8px;border-bottom:1.5px solid transparent;transition:border-color .2s}
.site-head .pnav a:hover,.site-head .pnav a[aria-current="true"]{border-bottom-color:var(--ink)}
.site-head #pnav ~ .head-brief{display:inline-flex;padding:.7em 1em;font-size:.75rem;letter-spacing:.12em;margin-left:clamp(4px,1vw,12px)}
.site-head #menu-btn{display:inline-flex;padding:.7em 1em;font-size:.75rem;letter-spacing:.14em;background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.site-head .dir{position:absolute;left:0;right:0;top:100%;height:calc(100dvh - var(--hh,72px));overflow:auto;background:var(--paper);border-top:1.5px solid var(--ink);display:none}
.site-head .dir.is-open{display:block}
.dir-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,5vw,96px);padding-block:clamp(32px,5vw,72px)}
.dir-list{list-style:none;margin:0;padding:0;counter-reset:none}
.dir-list a{display:flex;align-items:baseline;gap:18px;padding:10px 0;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.dir-n{font:500 .75rem/1 var(--body);letter-spacing:.14em;color:var(--muted);min-width:2ch}
.dir-t{font:700 clamp(1.75rem,3.4vw,3rem)/1 var(--display);text-transform:uppercase;letter-spacing:.005em}
.dir-list li:first-child .dir-t{font-size:clamp(2.25rem,4.6vw,4.25rem)}
.dir-list li:first-child .dir-n{color:var(--ink)}
.dir-list a:hover .dir-t{background:linear-gradient(var(--yellow),var(--yellow)) 0 88%/100% .32em no-repeat}
.dir-side{display:grid;gap:18px;align-content:start;justify-items:start;padding-top:12px}
.dir-k{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dir-line{font:700 clamp(1.5rem,2.2vw,2rem)/1.2 var(--display);text-transform:uppercase}
.dir-line mark{background:var(--yellow);color:var(--ink);padding:0 .08em}
.dir-brief{font-size:.875rem;padding:.95em 1.4em}
.dir-mail{font-size:.875rem;color:var(--muted)}
body.dir-lock{overflow:hidden}
@media (max-width:1180px){
  .site-head .pnav{display:none}
}
@media (max-width:620px){
  .site-head #pnav ~ .head-brief{display:none}
  .dir-in{grid-template-columns:1fr;gap:28px;padding-block:20px 32px}
  .dir-list a{padding:14px 0}
  .dir-t{font-size:1.75rem}
  .dir-list li:first-child .dir-t{font-size:2.25rem}
  .dir-side{padding-top:0}
  .dir-line{display:none}
  .dir-brief{width:100%;justify-content:center;font-size:1rem;padding:1.05em}
}
@media (max-width:620px){.site-head .dir .dir-list a{padding:12px 0}}
.site-head .mark>.badge{display:block!important;font:400 86px/1 var(--body);letter-spacing:normal;text-transform:none;color:var(--ink)}
.site-head .mark>.badge .bt{font:700 .23em/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.bm .bm-pr{position:relative;display:inline-block}
.bm .bm-pen{position:absolute;left:-2%;top:18%;width:104%;height:62%;overflow:visible;pointer-events:none}
.bm .bm-pen path{fill:none;stroke:var(--red);stroke-width:14;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.bm .bm-pen .bm-pen2{stroke-width:7;opacity:.85}
.bm .bm-pr.is-in .bm-pen path{animation:bmPen .55s cubic-bezier(.6,.05,.3,1) .25s forwards}
.bm .bm-pr.is-in .bm-pen .bm-pen2{animation-delay:.72s;animation-duration:.4s}
@keyframes bmPen{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.bm .bm-pen path{stroke-dashoffset:0;animation:none}}
@media (max-width:620px){.bm .bm-pen path{stroke-width:9}.bm .bm-pen .bm-pen2{stroke-width:5}}
.bm .bm-device{margin:0}
.bm .bm-device img{display:block;width:100%;height:auto}
@media (min-width:1000px){
  .bm .bm-open{max-width:none;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,96px);align-items:start}
  .bm .bm-open>*{grid-column:1}
  .bm .bm-open>.bm-device{grid-column:2;grid-row:1 / span 6;align-self:center;justify-self:end;width:min(112%,600px);margin-right:-2%;margin-top:clamp(24px,3vw,56px)}
}
@media (min-width:621px) and (max-width:999px){
  .bm .bm-device{order:10;width:min(100%,380px);justify-self:start;margin-block:18px 0}
}
@media (max-width:620px){
  .bm .bm-device{order:10;width:100%;margin-block:18px 0}
}

/* embedded players (YouTube, Instagram, TikTok, Twitch) */
.embed{position:relative;background:var(--black)}
.embed iframe{display:block;width:100%;border:0}
.embed-yt,.embed-tw,.embed-ytl{aspect-ratio:16/9}
.embed-yt iframe,.embed-tw iframe,.embed-ytl iframe{position:absolute;inset:0;height:100%}
.embed-tt,.embed-yts{aspect-ratio:9/16}
.embed-tt iframe,.embed-yts iframe{position:absolute;inset:0;height:100%}
.embed-ig{background:#fff}
.embed-ig iframe{height:740px}
/* stage: vertical social players sit on a dark ground lit by the project's own image */
.embed-stage{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,2vw,28px);padding:clamp(22px,3.2vw,48px)}
.embed-stage .stage-bg{position:absolute;inset:-48px;width:calc(100% + 96px);height:calc(100% + 96px);max-width:none;object-fit:cover;filter:blur(30px) saturate(1.15) brightness(.42);z-index:-1}
.embed-stage .embed{box-shadow:0 28px 70px rgb(0 0 0 / .5)}
.embed-stage .embed-ig{flex:none;width:min(100%,360px)}
.embed-stage>.embed-yts,.embed-stage>.embed-tt{flex:none;width:min(100%,340px)}
.embed-stage figure{margin:0;flex:0 1 320px;min-width:0;display:grid;gap:10px}
.embed-stage .cap{color:var(--ash)}
.embed-stage .stage-tag{position:absolute;left:clamp(22px,3.2vw,48px);top:clamp(22px,3.2vw,48px);color:var(--ash)}
.embed-solo{margin:clamp(32px,4vw,56px) 0 0}
.cv-two:has(.embed-stage,.embed-rail-wrap){grid-template-columns:minmax(0,1fr)}
/* rail: a series of films, scrolled sideways, each playing as it comes into view */
.embed-rail-wrap{display:grid;gap:14px;min-width:0}
.rail-nav{display:flex;gap:8px;justify-content:flex-end}
.rail-btn{width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:500 1.125rem/1 var(--body);cursor:pointer;transition:background .18s,color .18s}
.rail-btn:hover{background:var(--yellow)}
.rail-btn:disabled{opacity:.3;cursor:default;background:transparent}
.embed-rail{display:flex;gap:clamp(14px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:14px;overscroll-behavior-x:contain}
.embed-rail figure{flex:0 0 min(620px,84%);margin:0;scroll-snap-align:start;display:grid;gap:10px}
@media (max-width:720px){
  .embed-stage.multi{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory}
  .embed-stage.multi figure{flex:0 0 74%;scroll-snap-align:center}
  .embed-stage .embed-ig iframe{height:680px}
  .embed-stage .stage-tag{display:none}
}
.cv-two:has(.ep-list){grid-template-columns:minmax(0,1fr)}
.ep-list{margin:0;display:grid;gap:10px}
.ep-list .embed,.ep-list .cap{width:min(100%,980px)}
.ep-trailer{margin:0;display:grid;gap:10px}
.cv-two:has(.ep-trailer){grid-template-columns:minmax(0,1fr)}