/* Audience pages: brands, teams, athletes, agencies. Same system as index.html. */
:root{
  --black:#000;
  --signal:#FF4A3D;
  --white:#fff;
  --ash:#9a9a9a;
  --pitch:#1c1c1c;
  /* one hairline grey for every divider, one secondary white for supporting copy */
  --line:#2a2a2a;
  --ink-2:rgba(255,255,255,.85);
  --gutter:clamp(16px,4vw,56px);
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --display:"Hubot Sans","Archivo",sans-serif;
  /* hard edges everywhere; 2px is the most this should ever be */
  --r:0;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black);color:var(--white);-webkit-font-smoothing:antialiased;overflow-x:clip}
body{font-family:"Archivo",system-ui,sans-serif;background:var(--black);overflow-x:clip;line-height:1.5}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
img,video{display:block;max-width:100%}

.d{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.84;letter-spacing:-.017em;font-variation-settings:"wdth" var(--w,75)}
.d .r,.r{color:var(--signal)}
.case h3,.case-stats b,.case-idx .n,.point h3,.step h3,.step .n,.l3,.aud h3,.stat b,.dept{font-family:var(--display);font-stretch:75%;word-spacing:normal}

/* ---------- Header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;padding:18px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;transition:transform .7s var(--ease)}
.hdr::before{content:"";position:absolute;inset:0 0 -40px;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.85),transparent);opacity:0;transition:opacity .4s}
.hdr.solid::before{opacity:1}
.hdr.hide{transform:translateY(-110%)}
.hdr.hide::before,.hdr.on-red::before{opacity:0}
.hdr .logo img{height:clamp(26px,2.6vw,36px);width:auto}
/* the logo is inline so its play button can answer the page: red on black, black on the red sign-off */
.mark{display:block;height:clamp(26px,2.6vw,36px);width:auto;aspect-ratio:5992/707;fill:var(--white)}
.mark-play{fill:#FC021D;transition:fill .3s}
.hdr.on-red .mark-play{fill:var(--black)}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);font-size:14px;font-weight:600}
.nav a:not(.gti){color:var(--ash);transition:color .3s;position:relative}
.nav a:not(.gti):hover,.nav a[aria-current]{color:var(--white)}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--signal)}
.hdr.on-red .nav a:not(.gti){color:rgba(0,0,0,.62)}
.hdr.on-red .nav a:not(.gti):hover,.hdr.on-red .nav a[aria-current]{color:var(--black)}
.hdr.on-red .nav a[aria-current]::after{background:var(--black)}
/* the header key: the same red key with its arrow as on the home page */
.gti{display:inline-flex;align-items:center;gap:14px;height:46px;white-space:nowrap;padding:0 6px 0 20px;border-radius:var(--r);background:var(--signal);color:var(--black);font-weight:900;font-size:12px;letter-spacing:.12em;text-transform:uppercase;position:relative;transition:background .3s,color .3s}
.gti-ico{position:relative;width:34px;height:34px;border-radius:var(--r);background:var(--black);color:var(--white);overflow:hidden;transition:background .3s,color .3s}
.gti-ico svg{position:absolute;inset:0;margin:auto;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;animation:arrowOut 7s var(--ease) 3s infinite}
.gti-ico svg + svg{animation-name:arrowIn;transform:translate(-160%,160%)}
.gti:hover{background:var(--white)}
.gti:hover svg{animation-duration:.7s;animation-delay:0s;animation-iteration-count:1}
.hdr.on-red .gti{background:var(--black);color:var(--white)}
.hdr.on-red .gti-ico{background:var(--signal);color:var(--black)}
.hdr.on-red .gti:hover{background:var(--white);color:var(--black)}
@keyframes arrowOut{0%,100%{transform:none}8%{transform:translate(160%,-160%)}8.01%{transform:translate(-160%,160%)}16%{transform:none}}
@keyframes arrowIn{0%,100%{transform:translate(-160%,160%)}8%{transform:none}8.01%,16%{transform:translate(-160%,160%)}}

.btn{white-space:nowrap;display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 26px;border-radius:var(--r);background:var(--signal);color:var(--black);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:15px;position:relative;overflow:hidden}
.btn span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--white);transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover::before{transform:none}
.btn.big{height:68px;padding:0 36px;font-size:18px}

/* ---------- Generic ---------- */
.wrap{padding:clamp(96px,11vw,170px) var(--gutter)}
/* the ident: a short display line over a headline, red on black and black on red. Same as .dept on the home page */
.kicker,.dept{display:block;font-family:var(--display);font-weight:900;text-transform:uppercase;font-variation-settings:"wdth" 75;font-size:clamp(20px,2vw,32px);line-height:.95;word-spacing:normal;margin-bottom:clamp(16px,2vw,28px)}
.kicker{color:var(--signal)}
/* the slate: mono, uppercase and tracked, only for metadata (tags, field labels, timecodes) */
.lbl,.case-idx span:last-child{display:block;font-family:var(--mono);font-weight:500;font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.lede{font-size:clamp(18px,1.7vw,24px);max-width:38ch;color:var(--ink-2);font-weight:500;line-height:1.45}
.sec-h{font-size:clamp(44px,7vw,110px);max-width:13ch;margin-bottom:clamp(48px,6vw,88px)}
.stretch .ln{display:block;white-space:nowrap}

/* ---------- Hero ---------- */
.hero{padding:clamp(130px,15vw,200px) var(--gutter) clamp(64px,7vw,110px)}
.hero h1{font-size:clamp(56px,11vw,200px);white-space:nowrap}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.02em}
.hero h1 .ln > span{display:inline-block}
.hero-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:var(--gutter);align-items:end;margin-top:clamp(40px,5vw,80px)}
.hero-grid .lede{margin-bottom:32px}
.frame{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#111}
.frame img{width:100%;height:100%;object-fit:cover}
.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.7))}
.l3{position:absolute;left:16px;bottom:16px;z-index:1;display:flex;font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 66;font-size:clamp(12px,1.1vw,15px)}
.l3 .k{background:var(--signal);color:var(--black);padding:6px 12px}
.l3 .v{background:var(--white);color:var(--black);padding:6px 14px;white-space:nowrap}

/* ---------- Points ---------- */
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.point{border-top:1px solid var(--line);padding-top:20px}
.point h3{font-size:clamp(28px,2.6vw,42px);font-weight:900;text-transform:uppercase;font-variation-settings:"wdth" 75;line-height:.95}
.point p{color:var(--ash);margin-top:12px;max-width:36ch}

/* ---------- Stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);border-top:2px solid var(--white);padding-top:24px}
.stat b{display:block;font-weight:900;line-height:.82;text-transform:uppercase;font-variation-settings:"wdth" 75;font-size:clamp(56px,6.4vw,110px);white-space:nowrap;font-variant-numeric:tabular-nums}
.stat p{font-size:clamp(15px,1.2vw,18px);color:var(--ink-2);font-weight:500;margin-top:18px;max-width:26ch}

/* ---------- Work cases (stacked) ---------- */
.cases{display:grid;gap:clamp(72px,9vw,140px)}
.case{display:grid;grid-template-columns:minmax(260px,.72fr) 1.6fr;gap:clamp(28px,3.4vw,64px);align-items:center}
.case-idx{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-top:2px solid var(--white);padding-top:14px}
.case-idx .n{font-weight:900;font-variation-settings:"wdth" 75;font-size:clamp(40px,4.4vw,72px);line-height:.8;color:var(--signal);font-variant-numeric:tabular-nums}
.case-idx .n small{font-size:.42em;color:#555;margin-left:.3em}
.chan{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.av{width:48px;height:48px;border-radius:var(--r);background:#1a1a1a;display:grid;place-items:center;overflow:hidden;flex:none}
.av img{width:30px;height:30px;object-fit:contain}
.av img.cover{width:100%;height:100%;object-fit:cover}
.chan b{display:flex;align-items:center;gap:6px;font-size:16px}
.chan b svg{width:14px;height:14px;fill:var(--ash)}
.chan span{font-size:13px;color:var(--ash)}
.case h3{font-size:clamp(36px,3.9vw,64px);font-weight:900;text-transform:uppercase;font-variation-settings:"wdth" 75;line-height:.9}
.case .sum{color:var(--ash);margin-top:16px;max-width:34ch;font-size:15px}
.case-stats{display:flex;flex-wrap:wrap;gap:20px 36px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.case-stats b{display:block;font-size:clamp(30px,3vw,48px);font-weight:900;text-transform:uppercase;font-variation-settings:"wdth" 75;line-height:1}
.case-stats span{font-size:13px;color:var(--ash)}
.vids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
.vids.one{grid-template-columns:minmax(0,1fr)}
/* clip-path as well as overflow: Safari lets a playing video or the hover-scaled still leak a hairline past a rounded overflow box */
.yt-th{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;clip-path:inset(0 round var(--r));background:#111}
.yt-th img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
@media (hover:hover){.yt:hover .yt-th img{transform:scale(1.04)}}
.yt-meta{padding-top:10px}
.yt-meta h4{font-size:15px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.yt-meta p{font-size:13px;color:var(--ash);margin-top:2px}
.vids.one .yt-meta h4{font-size:18px}
.sponsor{display:grid;place-items:center;aspect-ratio:16/9;border-radius:var(--r);background:#0d0d0d;box-shadow:inset 0 0 0 1px var(--pitch)}
.sponsor img{width:46%;opacity:.9}

/* ---------- How it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.step{position:relative;padding-top:26px;border-top:1px solid var(--line)}
.step::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:var(--p,0%);background:var(--signal)}
.step .n{display:block;font-weight:900;font-variation-settings:"wdth" 75;font-size:clamp(56px,6vw,96px);line-height:.8;color:#2a2a2a}
.step h3{font-size:clamp(28px,2.6vw,42px);font-weight:900;text-transform:uppercase;font-variation-settings:"wdth" 75;line-height:.95;margin-top:20px}
.step p{color:var(--ash);margin-top:12px;max-width:34ch}

/* ---------- People (agencies) ---------- */
.quote{font-size:clamp(24px,2.6vw,40px);font-weight:600;line-height:1.2;max-width:30ch}
.quote em{font-style:normal;color:var(--signal)}

/* ---------- CTA ---------- */
.cta{background:var(--signal);color:var(--black)}
.cta .wrap{min-height:calc(100svh - var(--foot-h,0px));display:flex;flex-direction:column;justify-content:center;padding-top:112px;padding-bottom:clamp(40px,6vh,64px)}
.cta h2{font-size:clamp(64px,min(13vw,16vh),230px)}
.cta .offer{font-size:clamp(18px,1.7vw,24px);max-width:44ch;margin-top:clamp(36px,4vw,56px);font-weight:500}
.cta .lede,.cta .offer{color:rgba(0,0,0,.82)}
.cta-row{display:flex;gap:32px;align-items:center;flex-wrap:wrap;margin-top:40px}
.cta .btn{background:var(--black);color:var(--white)}
.cta .btn:hover{color:var(--black)}
.cta-row a.mail{font-size:clamp(18px,2vw,28px);font-weight:600;border-bottom:1px solid rgba(0,0,0,.4);padding-bottom:4px}
/* ---------- Footer: the studio band. Where a page ends on the red sign-off, the two share the last screen (the sign-off is
   sized to leave room for the band), so the band reads as part of it rather than a page of its own ---------- */
.foot{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start;padding:0 var(--gutter) 40px;background:var(--black)}
.foot::before{content:"";grid-area:1/1/2/13;height:1px;background:var(--line);margin-bottom:clamp(22px,3.4vh,36px)}
/* under the red sign-off the colour change is the divider */
.cta + .foot{padding-top:clamp(28px,4.4vh,48px)}
.cta + .foot::before{display:none}
/* the wrappers step aside so every part of the footer is a cell on the one grid */
.foot-top,.foot-id{display:contents}
.foot-lbl{display:none}
.foot-nav{display:flex;flex-direction:column;align-items:flex-start}
.foot-nav a:hover,.foot-nav a[aria-current]{color:var(--signal)}
.foot-mark{grid-area:2/1/4/4;justify-self:start}
.foot-id img{display:block;height:clamp(22px,2vw,30px);width:auto}
.foot-tag{grid-area:2/4/3/7;font-size:clamp(16px,1.25vw,19px);font-weight:600;color:var(--ink-2);text-wrap:balance}
.foot-id .mail{grid-area:3/4/4/7;justify-self:start;margin-top:8px;font-size:clamp(16px,1.25vw,19px);font-weight:600;color:var(--ash);border-bottom:1px solid #444;padding-bottom:3px;transition:color .3s,border-color .3s}
.foot-id .mail:hover{color:var(--white);border-color:var(--signal)}
/* the sign-off right above already gives the address */
.cta + .foot .foot-id .mail{display:none}
.foot-co{grid-area:2/7/4/9;margin-top:-4px}
.foot-co a{font-size:clamp(16px,1.25vw,19px);font-weight:600;line-height:1.25;padding:4px 0;transition:color .3s}
/* the clocks: a small departures table, each city and its time live to the second, the seconds ticking in red */
.clocks{grid-area:2/9/4/13;list-style:none}
.clocks li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:7px 0;border-bottom:1px solid var(--line)}
.clocks li:first-child{padding-top:0}
.clocks span{font-size:14px;font-weight:600}
.clocks time{font:500 14px/1 var(--mono);font-variant-numeric:tabular-nums}
.clocks time small{font:inherit;color:var(--signal)}
.clocks time small::before{content:":";color:var(--ash)}
.foot-legal{grid-area:4/1/5/13;margin-top:clamp(18px,3vh,32px);font-size:13px;color:var(--ash)}

/* Broadcast progress line: a nod to the home page player */
.prog{position:fixed;left:0;right:0;bottom:0;height:3px;z-index:60;background:rgba(255,255,255,.12)}
.prog i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--signal);transform-origin:left;transform:scaleX(0)}

/* ---------- Company pages: careers, imprint ---------- */
.co-hero h1{font-size:clamp(64px,9vw,150px)}
.statement{margin-top:clamp(28px,3vw,48px);max-width:30ch;font-size:clamp(22px,2.4vw,38px);font-weight:500;line-height:1.22;letter-spacing:-.01em}
.statement b{font-weight:800}
.lbl{margin-bottom:14px}
.co .wrap{padding-top:0}
.co-block{border-top:1px solid var(--line);padding:clamp(28px,3vw,44px) 0}
.co-block h2{font-size:clamp(20px,1.8vw,28px);font-weight:600;line-height:1.25;max-width:36ch}
.co-block p,.co-block dd{color:var(--ink-2);max-width:46ch}
.co-block p + p{margin-top:10px}
.co-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.co-block a{border-bottom:1px solid #555;transition:border-color .3s}
.co-block a:hover{border-color:var(--signal)}
/* placeholders the client still has to supply: impossible to miss, impossible to mistake for real details */
.tbc{display:inline-block;padding:3px 8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--signal);box-shadow:inset 0 0 0 1px currentColor}
.jobs{list-style:none;border-top:1px solid var(--line)}
.job{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:clamp(22px,2.6vw,36px) 0;border-bottom:1px solid var(--line)}
.job h3{font-family:var(--display);font-size:clamp(34px,4.6vw,72px);font-weight:900;text-transform:uppercase;font-variation-settings:"wdth" 75;line-height:.9;transition:color .4s}
.job .lbl{margin:12px 0 0}
.job-a{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);transition:color .3s}
.job-a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;transition:transform .5s var(--ease)}
.job:focus-visible h3{color:var(--signal)}
@media (hover:hover){
  .job:hover h3{color:var(--signal)}
  .job:hover .job-a{color:var(--white)}
  .job:hover .job-a svg{transform:translate(3px,-3px)}
}
.open-app{margin-top:clamp(28px,3vw,44px);color:var(--ash)}
.open-app a{color:var(--white);border-bottom:1px solid #555}
.open-app a:hover{border-color:var(--signal)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  /* the audience links drop to their own line under the wordmark instead of disappearing */
  .hdr{flex-wrap:wrap;gap:12px 20px}
  .hdr::after{content:"";order:1;flex-basis:100%}
  .nav{display:contents}
  .nav .gti{order:1;margin-left:auto}
  .nav a:not(.gti){order:2;font-size:13px}
  .nav a[aria-current]::after{bottom:-4px}
  .hero{padding-top:150px}
  .hero-grid,.points,.steps,.stats,.case{grid-template-columns:1fr}
  .stats,.points,.steps{gap:40px}
  .stretch .ln{white-space:normal}
  .hero h1{white-space:normal;font-size:13vw}
  .co-grid{grid-template-columns:1fr;gap:28px}
  .job{grid-template-columns:1fr;gap:14px}
  /* footer: one column, the studio band stacked */
  .foot{display:flex;flex-direction:column;align-items:stretch}
  .foot::before{margin-bottom:28px}
  .foot-mark{align-self:flex-start}
  .foot-tag{margin-top:16px;font-size:15px}
  .foot-id .mail{align-self:flex-start;margin-top:10px}
  .foot-co{flex-flow:row wrap;column-gap:24px;margin-top:18px}
  .clocks{margin-top:24px}
  .foot-legal{margin-top:24px}
  /* past the top, the two-line header is a solid bar, so the page never reads through the audience links */
  .hdr{transition:transform .45s var(--ease),padding .4s var(--ease)}
  .hdr::before{inset:0;background:var(--black);box-shadow:0 1px 0 var(--pitch)}
  .hdr.solid{padding-top:12px;padding-bottom:12px}
  .hdr.hide{transform:translateY(-101%)}
  .hdr.solid.on-red::before{opacity:1;background:var(--signal);box-shadow:0 1px 0 rgba(0,0,0,.18)}
  /* tighter rhythm between sections */
  .wrap{padding-top:72px;padding-bottom:72px}
  .cta .wrap{padding-top:72px;padding-bottom:56px}
  .sec-h{margin-bottom:36px}
  .cases{gap:72px}
}
@media (max-width:560px){
  /* the sound button is just its icon here, so it never covers the lower third */
  .frame .snd{width:38px;padding:0;justify-content:center;right:12px;bottom:12px}
  .frame .snd span{display:none}
  .l3{left:12px;bottom:12px;max-width:calc(100% - 74px);font-size:11px}
  .l3 .k{padding:6px 9px;white-space:nowrap}
  .l3 .v{padding:6px 10px;overflow:hidden;text-overflow:ellipsis}
  /* wordmark and button share the first line, sized as on the home page */
  .hdr{column-gap:12px}
  .hdr .logo img{height:24px}
  .hdr .mark{height:20px}
  .hdr .gti{height:40px;gap:10px;padding-left:16px;font-size:11px}
  .gti-ico{width:30px;height:30px}
  /* the whole playlist in one swiped row, a slice of the next video showing; each one plays as it comes into view */
  .vids{display:flex;gap:12px;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);scrollbar-width:none}
  .vids::-webkit-scrollbar{display:none}
  .vids > *{flex:0 0 82%;scroll-snap-align:start}
  .vids.one > *{flex-basis:100%}
  .vids .sponsor{align-self:flex-start}
  .hero .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- Videos: muted autoplay with a sound button ---------- */
.clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.clip.on{opacity:1}
.stand-in{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.yt-th:has(.clip.on) img{visibility:hidden}
.snd{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 11px;border:0;border-radius:var(--r);background:rgba(10,10,10,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--white);font:600 13px/1 "Archivo",system-ui,sans-serif;cursor:pointer;transition:background .3s,color .3s}
.snd:hover{background:var(--white);color:var(--black)}
.snd svg{width:18px;height:18px;fill:currentColor;flex:none}
.snd .i-on,.snd .t-on,.sound .snd .i-off,.sound .snd .t-off{display:none}
.sound .snd .i-on,.sound .snd .t-on{display:block}
.sound .snd{background:var(--signal);color:var(--black)}
/* in a grid of thumbnails the button is just the icon until you point at it */
.vids:not(.one) .snd{width:38px;padding:0;justify-content:center}
.vids:not(.one) .snd span{display:none}
@media (hover:hover){
  .vids:not(.one) .yt:hover .snd{width:auto;padding:0 14px 0 11px}
  .vids:not(.one) .yt:hover .snd .t-off{display:block}
  .vids:not(.one) .yt.sound:hover .snd .t-off{display:none}
  .vids:not(.one) .yt.sound:hover .snd .t-on{display:block}
}
/* phones set their own corner, level with the lower third */
@media (min-width:561px){.frame .snd{bottom:16px;right:16px}}

/* ---------- Brands: the partner marks under the hero, one hairline strip. Each mark has its own height (--h), set by eye
   so none shouts: the wide wordmarks sit lower, the tall marks taller ---------- */
.brandbar{padding:0 var(--gutter) clamp(8px,2vw,24px)}
.brandbar .lbl{margin-bottom:14px}
.brandbar ul{list-style:none;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brandbar li{display:grid;place-items:center;height:clamp(72px,7vw,112px)}
.brandbar li + li{box-shadow:inset 1px 0 0 var(--line)}
.brandbar img{height:calc(var(--h,22px) * var(--k,1.25));width:auto;max-width:72%;object-fit:contain;opacity:.75}

/* ---------- Phones: the audience pages lead with the footage, say the numbers as a scoreboard and swipe the proof ---------- */
@media (max-width:900px){
  /* past the top the header folds to one line, wordmark and key; the audience tabs belong to the top of the page */
  .hdr.solid .nav a:not(.gti),.hdr.solid::after{display:none}
  /* hero: the headline, then the clip, then the line and a compact key (the header already carries the big one) */
  .hero{padding-bottom:32px}
  .hero-grid{display:flex;flex-direction:column;gap:22px;margin-top:28px}
  .hero-grid .frame{order:-1}
  .hero-grid .lede{margin-bottom:22px}
  .hero .btn{width:auto;height:48px;padding:0 22px;font-size:13px}
  /* partner marks four to a row */
  .brandbar ul{grid-template-columns:repeat(4,minmax(0,1fr))}
  .brandbar li{height:64px}
  .brandbar li:nth-child(4n+1){box-shadow:none}
  .brandbar li:nth-child(n+5){border-top:1px solid var(--line)}
  .brandbar img{--k:1}
  /* the numbers as a scoreboard: the figures share one column, what each means sits beside it */
  .stats{grid-template-columns:max-content minmax(0,1fr);gap:0 20px;padding-top:0}
  .stat{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
  .stat b{font-size:clamp(36px,11vw,52px)}
  .stat p{margin-top:0;font-size:14px;max-width:none}
  /* the proof: one case per swipe, a slice of the next showing. The lead clip sits on top and the rest of its playlist
     as stills under it (they link out; only the lead one plays, see pages.js) */
  .cases{display:flex;gap:16px;align-items:flex-start;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);scrollbar-width:none}
  .cases::-webkit-scrollbar{display:none}
  .cases::after{content:"";flex:none;width:1px}
  .case{flex:0 0 min(86vw,560px);gap:16px;align-items:start;scroll-snap-align:start}
  .case > div:not([class]){order:2}
  .case .vids{order:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;overflow:visible}
  .case .vids > *{flex:none}
  .case .vids > :first-child{grid-column:1/-1}
  .case .vids > :not(:first-child) .yt-meta,.case .vids > :not(:first-child) .snd,.case .vids > :not(:first-child) .clip{display:none}
  .case .vids > :not(:first-child){opacity:.55;filter:grayscale(1)}
  .chan{margin-bottom:14px}
  .case .sum{margin-top:10px}
  .case-stats{margin-top:16px;padding-top:14px;gap:12px 28px}
}