:root{
  --bg:#FAFAF8; --page:#F1EFE9; --card:#FFFFFF; --ink:#15161A; --soft:#62636A; --faint:#8C8B85;
  --blue:#2563EB; --pale:#E4EAF8; --rule:#E3DFD5;
  --sans:'Poppins','Helvetica Neue',Arial,sans-serif;
  --shadow:0 24px 60px rgba(21,22,26,.12),0 2px 6px rgba(21,22,26,.05);
  --vh:100dvh;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
a{color:inherit;text-decoration:none}
.wrap{max-width:1040px;margin:0 auto;padding:0 32px;width:100%}

/* floating bar: hidden over the film, fades in once it has scrolled away */
.pill{position:fixed;top:14px;left:50%;z-index:50;display:flex;align-items:center;gap:30px;padding:7px 10px 7px 14px;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.22)),rgba(250,250,248,.74);-webkit-backdrop-filter:blur(24px) saturate(1.6) brightness(1.15);backdrop-filter:blur(24px) saturate(1.6) brightness(1.15);border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(21,22,26,.04),0 0 0 .5px rgba(21,22,26,.08),0 10px 32px rgba(21,22,26,.08);opacity:0;pointer-events:none;transform:translate(-50%,-12px);transition:opacity .3s,transform .3s}
/* no backdrop blur: keep it readable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.pill{background:rgba(250,250,248,.94)}}
.pill.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.brand{display:flex;align-items:center;gap:9px}
.brand .x{font-size:13px;color:var(--faint)}
.brand .partner{width:auto;display:block;max-height:34px}
.nav{position:relative;display:flex;gap:4px;font-size:13.5px;font-weight:500;color:rgba(21,22,26,.72)}
.nav a{position:relative;z-index:1;padding:7px 12px;border-radius:99px;white-space:nowrap;transition:background .15s,color .25s cubic-bezier(.23,1,.32,1)}
.nav a:hover{color:var(--ink);background:rgba(21,22,26,.06)}
.nav a.on,.nav a.on:hover{color:#fff;background:none}
.nav .mark{position:absolute;top:0;bottom:0;left:0;border-radius:99px;background:rgba(21,22,26,.86);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);opacity:0;pointer-events:none;transition:transform .38s cubic-bezier(.23,1,.32,1),width .38s cubic-bezier(.23,1,.32,1),opacity .2s cubic-bezier(.23,1,.32,1)}
@media (prefers-reduced-motion:reduce){.nav .mark{transition:opacity .2s}}

/* ring with the rider (same skeleton as the site and trailer) */
.ring{position:relative;display:inline-block;flex:none}
.ring img,.ring svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.ring svg g{stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.ring svg .solid{fill:var(--ink);stroke:none}

/* sections */
.sec{padding:clamp(72px,11vh,128px) 0}
/* nav links land on the section title, not on the empty padding above it (html scroll-padding clears the pill) */
.sec{scroll-margin-top:calc(44px - clamp(72px,11vh,128px))}
.kicker{font-size:13px;font-weight:500;color:var(--blue);letter-spacing:.02em;margin:0 0 14px}

/* 1 · the film: autoplays silently, corner toggle for sound */
.hero{min-height:100dvh;display:flex;align-items:center;padding:28px 0}
.hero .wrap{max-width:none;display:flex;justify-content:center}
.film{position:relative;width:min(1280px,calc((100dvh - 56px) * 16 / 9),100%);border-radius:22px;overflow:hidden;background:#EDEBE5;box-shadow:var(--shadow);aspect-ratio:16/9}
.film video{width:100%;height:100%;display:block;object-fit:cover}
.prog{position:absolute;left:0;right:0;bottom:0;height:14px;cursor:pointer;z-index:3;touch-action:none}
.prog::before,.prog i{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;transition:height .15s}
.prog::before{background:rgba(21,22,26,.1)}
.prog i{background:var(--blue);transform:scaleX(0);transform-origin:left}
.prog:hover::before,.prog:hover i{height:6px}
.ctrls{position:absolute;right:16px;bottom:20px;z-index:4;display:flex;gap:8px}
.mute,.fs{width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;color:#fff;background:var(--blue);box-shadow:0 6px 18px rgba(37,99,235,.3);transition:background .2s,transform .2s}
.mute:hover,.fs:hover{background:#1D4FD8;transform:scale(1.05)}
.fs{background:none;box-shadow:none;color:var(--blue);width:34px;height:34px}
.fs svg{width:24px;height:24px;filter:drop-shadow(0 1px 3px rgba(255,255,255,.6))}
.fs:hover{background:none;color:#1D4FD8;transform:scale(1.12)}
.pp:hover{background:rgba(21,22,26,.74)}
.mute svg,.fs svg{width:19px;height:19px}
.fs .exit,:fullscreen .fs .enter{display:none}
.pp .play,.film.paused .pp .pause{display:none}
.film.paused .pp .play{display:block}
.pp{position:absolute;left:50%;top:50%;z-index:3;width:72px;height:72px;margin:-36px 0 0 -36px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;color:#fff;background:rgba(21,22,26,.62);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 .5px rgba(255,255,255,.12),0 10px 28px rgba(21,22,26,.25);opacity:0;transform:scale(.92);transition:opacity .2s,transform .2s}
.pp svg{width:26px;height:26px}
.pp .play{margin-left:3px}
.film:hover .pp,.film.paused .pp,.pp:focus-visible{opacity:1;transform:none}
.ctrls{opacity:0;transition:opacity .2s}
.film:hover .ctrls,.film.paused .ctrls,.ctrls:focus-within{opacity:1}
@media (hover:none){.ctrls{opacity:1}}
.film video{cursor:pointer}
:fullscreen .fs .exit{display:block}
.film:fullscreen{width:100vw;height:100vh;max-width:none;border-radius:0;background:#FAFAF8;display:flex;align-items:center}
.film:fullscreen video{height:auto;max-height:100vh;object-fit:contain}
.mute .on,.film.loud .mute .off{display:none}
.film.loud .mute .on{display:block}

/* 2 · case studies */
.camp,.sample{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:clamp(32px,5vw,72px);align-items:center;justify-content:space-between}
.camp>*,.sample>*{min-width:0}
.camp+.camp,.sample+.sample{margin-top:clamp(64px,10vh,112px)}
.work .kicker,.samples .kicker{margin-bottom:28px}
.work{padding:clamp(72px,11vh,128px) 0 0}
.work .kicker{margin:0}
/* same space above and below each case study, so the rule between two sits halfway */
.camp{padding:clamp(56px,8vh,80px) 0}
.camp:first-of-type{padding-top:clamp(32px,5vh,56px)}
.camp+.camp{margin-top:0;border-top:1px solid var(--rule)}
.title{display:flex;align-items:center;gap:14px}
.cover{width:56px;height:56px;border-radius:9px;object-fit:cover;flex:none;box-shadow:0 6px 18px rgba(21,22,26,.14)}
.title b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.title span{display:block;font-size:14px;color:var(--soft);margin-top:2px}
.lede strong{font-weight:500;color:var(--ink)}
.line strong{font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(37,99,235,.55);text-decoration-thickness:2px;text-underline-offset:.24em;text-decoration-skip-ink:auto}
.line strong.bl,.lede strong.bl{color:var(--blue)}
.line{font-size:clamp(20px,1.9vw,24px);line-height:1.45;color:var(--soft);margin:clamp(28px,5vh,40px) 0 0;max-width:22em;letter-spacing:-.01em}
.facts{list-style:none;padding:0;margin:clamp(28px,5vh,44px) 0 0;max-width:27em;border-top:1px solid var(--rule)}
.facts li{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.4;color:var(--soft)}
.facts span .pf{width:16px;height:16px;vertical-align:-3px;margin-right:7px}
.facts b{display:inline-flex;align-items:center;gap:2px;font-size:30px;line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--blue)}
.facts .to{font-style:normal;font-weight:400;font-size:.7em;color:var(--faint);margin:0 .22em}
.facts .up{width:.5em;height:.5em;margin:0 .14em 0 0;color:#16A34A}
.copies{margin-top:clamp(22px,4vh,32px)}
.copies p{margin:0 0 10px;font-size:15px;color:var(--soft)}
.copies p b{font-size:20px;font-weight:600;color:var(--blue);letter-spacing:-.02em;margin-right:4px}
.strip{display:flex;gap:10px}
.strip .cp{display:block;width:88px;aspect-ratio:9/16;border-radius:8px;overflow:hidden;background:#E6E3DB;box-shadow:0 4px 12px rgba(21,22,26,.12);transition:transform .2s}
.strip video{width:100%;height:100%;object-fit:cover;display:block}
.chart{position:relative;margin:clamp(24px,4vh,36px) 0 0;max-width:420px}
.chart svg{display:block;width:100%;height:110px;overflow:visible}
.chart .ln{fill:none;stroke:var(--blue);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.chart .area{fill:rgba(37,99,235,.08)}
.chart .mk{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:.35;vector-effect:non-scaling-stroke}
.mklabel{position:absolute;top:-4px;transform:translateX(-100%);padding-right:8px;font-size:12px;color:var(--soft);white-space:nowrap}
.chart figcaption{margin-top:8px;font-size:12.5px;color:var(--faint)}

/* three 9:16 tiles, sized so a row always fits on one screen */
.reel{--tile:min(176px,calc((100dvh - 170px) * 9 / 16));display:grid;grid-template-columns:repeat(3,var(--tile));gap:16px}
.clip{position:relative;display:block;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#E6E3DB center/cover;box-shadow:0 14px 34px rgba(21,22,26,.14);transition:transform .25s}
.clip:hover{transform:translateY(-4px)}
.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* username on hover, TikTok-style: avatar + bold handle, top-left */
.tt{position:absolute;z-index:2;left:10px;right:10px;top:10px;display:flex;align-items:center;gap:7px;min-width:0;color:#fff;font-family:'TikTok Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.4);opacity:0;transition:opacity .2s}
.clip:hover .tt{opacity:1}
/* a soft shade from the top edge comes in with the handle, so it reads over bright footage */
.clip:not(.made):not(.ph)::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:40%;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.3) 40%,rgba(0,0,0,.1) 75%,rgba(0,0,0,0) 100%);opacity:0;transition:opacity .2s;pointer-events:none}
.clip:not(.made):not(.ph):hover::before{opacity:1}
.tt img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none;border:1.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.tt b{font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.38));pointer-events:none;z-index:1}
.clip.ph::after{display:none}
.plays{position:absolute;z-index:2;left:11px;bottom:11px;display:flex;align-items:center;gap:4px;color:#fff;font-family:'TikTok Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:13.5px;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.plays svg{width:13px;height:13px}

/* 3 · about */
.about{background:var(--page)}
.about .lede{margin:0;font-size:clamp(22px,2.2vw,30px);line-height:1.4;color:var(--soft);max-width:28em;letter-spacing:-.01em}
.shead .lede{margin:0;font-size:clamp(20px,2vw,26px);line-height:1.4;color:var(--ink);max-width:28em;letter-spacing:-.01em}
.astats{display:grid;grid-template-columns:repeat(3,minmax(0,260px));gap:24px;margin:clamp(28px,5vh,48px) 0 0}
.astats div{display:flex;flex-direction:column;border-top:1.5px solid var(--ink);padding-top:16px}
.astats b{font-size:clamp(28px,3vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.astats span{font-size:14px;color:var(--soft);margin-top:4px}
.marks{display:flex;flex-wrap:wrap;gap:24px 64px;margin-top:clamp(28px,5vh,52px);align-items:center}
.marks>div{display:flex;align-items:center;gap:22px}
.marks span{font-size:13px;color:var(--faint);white-space:nowrap}
.logos{display:flex;align-items:center;gap:34px}
.logos img{height:30px;width:auto;display:block}
.logos img[src$="sony.svg"]{height:15px}.logos img[src$="wmg.svg"]{height:36px}.logos img[src$="umg.svg"]{height:34px}
.logos.pf{gap:18px}
.logos.pf img{height:26px}

/* 4 · proposed campaigns */
.sample h3{font-size:clamp(30px,3.4vw,44px);line-height:1.06;font-weight:600;letter-spacing:-.03em;margin:0 0 12px}
.sample p{margin:0;color:var(--soft);font-size:16px;max-width:26em}
.clip.made{padding:0;border:0;font:inherit;cursor:pointer;text-align:left}
.clip.made::after{display:none}
.clip.made .spk{position:absolute;right:10px;bottom:10px;z-index:2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.4);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:.85;transition:opacity .2s,background .2s}
.clip.made .spk svg{width:16px;height:16px;grid-area:1/1}
.clip.made .spk .on,.clip.made.loud .spk .off{display:none}
.clip.made.loud .spk .on{display:block}
.clip.made.loud .spk{background:var(--blue);opacity:1}
.clip.made:hover .spk{opacity:1}
.sample .by{display:block;font-size:14px;font-weight:600;color:var(--soft);margin-bottom:6px}
.clip.ph{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:16px;background:repeating-linear-gradient(135deg,#F1EFE9 0 10px,#ECE9E2 10px 20px);box-shadow:none;border:1px dashed #D6D2C7}
.clip.ph:hover{transform:none}
.clip.ph span{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.clip.ph i{font-style:normal;font-size:12px;color:var(--faint)}


/* entrance */
.rise{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}
.camp .reel.rise,.sample .reel.rise{transition-delay:.1s}

/* 5 · footer */
.foot{padding:0 0 calc(40px + env(safe-area-inset-bottom))}
.foot-in{border-top:1px solid var(--rule);padding-top:32px;display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap}
.foot-r{display:flex;align-items:center;gap:28px;font-size:14px}
.foot .mail{font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(37,99,235,.4);text-decoration-thickness:1.5px;text-underline-offset:.24em;transition:text-decoration-color .15s}
.foot .mail:hover{text-decoration-color:var(--blue)}
.foot .top{color:var(--faint);transition:color .15s}
.foot .top:hover{color:var(--ink)}

/* desktop: the floating bar sits a little lower off the top edge; jumps clear it by the same amount */
@media (min-width:901px){
  .pill{top:24px}
  html{scroll-padding-top:82px}
}

/* phones: normal scrolling, stacked layouts */
@media (max-width:900px){
  .sec{padding:64px 0}
  .sec{scroll-margin-top:-20px}
  .work{padding-bottom:0}
  .nav{display:none}
  .hero{min-height:0;padding:16px 0 0}
  .wrap{padding:0 20px}
  .film{border-radius:14px;width:100%}
  .ctrls{right:10px;bottom:14px}
  .mute,.fs{width:36px;height:36px}
    .camp,.sample{grid-template-columns:1fr;gap:28px}
  .reel{grid-template-columns:repeat(3,1fr);gap:10px}
  .astats{grid-template-columns:1fr 1fr}
  .marks>div{flex-wrap:wrap}
  .logos{flex-wrap:wrap;gap:16px 22px}
    .camp{padding:48px 0}
  .cover{width:48px;height:48px}
  .facts li{grid-template-columns:128px 1fr}
  .facts b{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}