/* ==========================================================================
   Mob Studios — Work
   Design tokens follow mobstudios.io: near-black, white type, video-first.
   Swap --font-display for self-hosted BDO Grotesk when you have the webfont.
   ========================================================================== */

:root{
  --bg:#080808;
  --surface:#121212;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --fg:#f4f2f0;
  --fg-dim:#8d8a87;
  --fg-faint:#5a5754;

  --font-display:'BDO Grotesk','Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --pad:clamp(18px,3.6vw,56px);
  --maxw:1680px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
html,body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:15px;line-height:1.55}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
::selection{background:var(--fg);color:var(--bg)}

::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#3d3d3d}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.h-display{font-family:var(--font-display);font-weight:500;letter-spacing:-.035em;line-height:.92}
.reg{font-size:.5em;vertical-align:super;letter-spacing:0}
.sep{font-style:normal;opacity:.42;margin:0 .45em;font-weight:400}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* page transition ------------------------------------------------------- */
@view-transition{navigation:auto}
body{animation:fadeIn .45s var(--ease-out) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.nav.solid{
  background:rgba(8,8,8,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.brand{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.02em}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:13px;color:var(--fg-dim);position:relative;padding:4px 0;transition:color .3s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--fg)}
.nav-links a:not(.nav-cta)::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav-cta{
  border:1px solid var(--line);border-radius:99px;padding:8px 16px;color:var(--fg);font-size:12px;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s;
}
.nav-cta:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
@media(max-width:720px){.nav-links{gap:16px}.nav-links a:not(.nav-cta){display:none}}

/* ==========================================================================
   DRAFT BANNER
   ========================================================================== */
.draft{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:#3a2a08;border-bottom:1px solid rgba(255,200,80,.22);
  color:#f0d79a;font-size:12px;letter-spacing:.01em;
  padding:9px var(--pad);text-align:center;line-height:1.4;
}
body.has-draft .nav{top:var(--draft-h)}
body.has-draft main{padding-top:var(--draft-h)}
:root{--draft-h:36px}
@media(max-width:600px){:root{--draft-h:52px}}

/* ==========================================================================
   INDEX HERO
   ========================================================================== */
.hero{padding-top:clamp(96px,14vh,150px);padding-bottom:clamp(8px,1.4vw,20px)}
.hero-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.hero h1{font-family:var(--font-display);font-weight:500;font-size:clamp(52px,12vw,190px);line-height:.85;letter-spacing:-.045em}
.hero h1 em{font-style:normal;color:var(--fg-faint)}
.count{font-family:var(--font-display);font-size:14px;color:var(--fg-dim);padding-bottom:.35em;font-variant-numeric:tabular-nums}
/* studio meta — sits at the foot of the index, above the CTA */
.studio-meta{border-top:1px solid var(--line);padding:clamp(34px,5vw,58px) 0 clamp(30px,4.5vw,52px)}
.studio-meta-in{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px)}
.studio-meta-in div{max-width:38ch}
.studio-meta-in p{font-size:14px;color:var(--fg-dim);margin-top:9px;line-height:1.6}
@media(max-width:820px){.studio-meta-in{grid-template-columns:1fr;gap:26px}}

/* filters --------------------------------------------------------------- */
.filters{
  position:sticky;top:0;z-index:40;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding:16px 0;margin-bottom:clamp(14px,2.4vw,26px);
  background:linear-gradient(to bottom,var(--bg) 62%,rgba(8,8,8,0));
}
.chip{
  font-size:12.5px;color:var(--fg-dim);font-family:var(--font-body);
  border:1px solid var(--line);border-radius:99px;padding:7px 15px;
  background:transparent;cursor:pointer;transition:all .32s var(--ease);
}
.chip:hover{color:var(--fg);border-color:rgba(255,255,255,.28)}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip sup{font-size:9px;opacity:.55;margin-left:5px}

/* ==========================================================================
   GRID
   ========================================================================== */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.5vw,22px);padding-bottom:clamp(60px,9vw,120px)}
.tile{grid-column:span 6;position:relative}
.tile[data-size="full"]{grid-column:span 12}
.tile[data-size="half"]{grid-column:span 6}
.tile[data-size="third"]{grid-column:span 4}
.tile[hidden]{display:none}

.tile-media{
  position:relative;overflow:hidden;border-radius:6px;
  background:var(--surface);border:1px solid var(--line-soft);
  aspect-ratio:16/9;
}
.tile[data-size="full"] .tile-media{aspect-ratio:21/9}
.tile[data-size="third"] .tile-media{aspect-ratio:4/3}
.tile-media video,.tile-media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
  filter:saturate(.92) contrast(1.03);
  transition:transform 1.1s var(--ease-out),filter .6s var(--ease);
}
.tile-media video{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease),transform 1.1s var(--ease-out),filter .6s var(--ease)}
.tile-media video.ready{opacity:1}
.tile:hover .tile-media video,.tile:hover .tile-media img{transform:scale(1.06);filter:saturate(1.08) contrast(1.02) brightness(1.12)}

.tile-media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  opacity:.85;transition:opacity .5s var(--ease);
}
.tile:hover .tile-media::after{opacity:.5}

.tile-idx{position:absolute;top:14px;left:16px;z-index:3;font-family:var(--font-display);font-size:12px;color:rgba(255,255,255,.55);letter-spacing:.04em}
.tile-badge{position:absolute;top:12px;right:14px;z-index:3;display:flex;gap:6px}
.tile-badge span{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8);
  background:rgba(0,0,0,.4);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:4px 9px;
}
.tile-dur{position:absolute;bottom:14px;right:16px;z-index:3;font-size:11px;color:rgba(255,255,255,.7);letter-spacing:.06em;font-variant-numeric:tabular-nums}

.tile-info{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:14px 2px 0}
.tile-title{font-family:var(--font-display);font-weight:500;letter-spacing:-.025em;font-size:clamp(19px,2vw,30px);line-height:1.05}
.tile[data-size="third"] .tile-title{font-size:clamp(17px,1.5vw,21px)}
.tile-client{font-size:12.5px;color:var(--fg-dim);margin-top:5px}
.tile-year{font-size:12px;color:var(--fg-faint);font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:4px}

/* Every tile carries its title inside the frame, at the top. */
.tile .tile-info{
  position:absolute;z-index:4;left:0;right:0;top:0;
  padding:clamp(38px,3vw,54px) clamp(16px,1.4vw,26px) 0;
  pointer-events:none;
}
.tile[data-size="third"] .tile-info{padding-top:clamp(34px,2.4vw,44px)}
.tile .tile-title{
  text-shadow:0 1px 24px rgba(0,0,0,.45);
}
.tile .tile-client{color:rgba(255,255,255,.72)}
.tile .tile-year{color:rgba(255,255,255,.6)}

/* index shares the title's inset so the two line up on one edge */
.tile .tile-idx{left:clamp(18px,1.6vw,26px);top:clamp(16px,1.4vw,22px)}

/* tags drop to the bottom-left so the top stays clear for the title,
   and the runtime keeps the bottom-right corner to itself */
.tile .tile-badge{top:auto;bottom:14px;right:auto;left:clamp(18px,1.6vw,26px)}
.tile .tile-dur{right:clamp(18px,1.6vw,26px)}
/* a third-width tile is too narrow for more than one tag beside the runtime */
.tile[data-size="third"] .tile-badge span:nth-child(n+2){display:none}

/* the standing gradient is bottom-weighted; a full tile needs the top dark */
.tile .tile-media::after{
  background:
    linear-gradient(to bottom,rgba(0,0,0,.62),rgba(0,0,0,0) 42%),
    linear-gradient(to top,rgba(0,0,0,.34),rgba(0,0,0,0) 30%);
}

@media(max-width:960px){.tile[data-size="third"],.tile[data-size="half"]{grid-column:span 6}}
@media(max-width:680px){
  .tile,.tile[data-size="full"],.tile[data-size="half"],.tile[data-size="third"]{grid-column:span 12}
  .tile .tile-info{position:static;padding:14px 2px 0;pointer-events:auto}
  .tile .tile-title{text-shadow:none}
  .tile .tile-client{color:var(--fg-dim)}
  .tile .tile-year{color:var(--fg-faint)}
  .tile .tile-badge{top:12px;bottom:auto;left:auto;right:14px}
  /* a phone-width tile fits two tags, whatever the desktop size was */
  .tile[data-size="third"] .tile-badge span:nth-child(2){display:inline}
  .tile .tile-badge span:nth-child(n+3){display:none}
  .tile-media,.tile[data-size="full"] .tile-media,.tile[data-size="third"] .tile-media{aspect-ratio:16/10}
}

/* cursor ---------------------------------------------------------------- */
.cursor{
  position:fixed;top:0;left:0;z-index:200;pointer-events:none;
  width:78px;height:78px;border-radius:50%;
  background:var(--fg);color:var(--bg);
  display:grid;place-items:center;align-content:center;gap:6px;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  text-align:center;line-height:1.1;
  opacity:0;transition:opacity .3s,width .3s var(--ease),height .3s var(--ease);
}
.cursor.show{opacity:1}

/* The sound cursor. Silent film: a play triangle, because a click starts it
   with sound. Audible film: three bars pulsing, because a click stops them. */
.cursor-ico,.cursor-play{display:none}
.cursor-ico{align-items:flex-end;justify-content:center;gap:3px;height:13px}
.cursor-ico i{display:block;width:2.5px;height:4px;border-radius:1px;background:currentColor}
.cursor-play{
  width:0;height:0;margin-left:3px;
  border-left:12px solid currentColor;
  border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;
}
.cursor.audio{width:88px;height:88px}
.cursor.audio:not(.live) .cursor-play{display:block}
.cursor.audio.live .cursor-ico{display:flex}
.cursor.audio.live .cursor-ico i{animation:eq .9s ease-in-out infinite}
.cursor.audio.live .cursor-ico i:nth-child(2){animation-delay:.15s}
.cursor.audio.live .cursor-ico i:nth-child(3){animation-delay:.3s}

@media(max-width:680px),(hover:none){.cursor{display:none}}
@media(hover:hover){
  .tile{cursor:none}
  .case-film,.case-film .bg,.case-film .bg video,.case-film .bg img{cursor:none}
  .case-film .playbtn,.case-film .player-slot{cursor:auto}
}

/* supporting clips ------------------------------------------------------ */
.case-block{margin:clamp(38px,5vw,64px) 0 clamp(48px,7vw,90px)}
.case-block .eyebrow{display:block;margin-bottom:clamp(18px,2.4vw,30px)}
.block-media{
  position:relative;overflow:hidden;border-radius:6px;
  background:var(--surface);border:1px solid var(--line-soft);
}
.block-media video,.block-media img{width:100%;height:100%;object-fit:cover;display:block}
.block-media video{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)}
.block-media video.ready{opacity:1}
.block-full{aspect-ratio:16/9}
.block-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.5vw,22px)}
.block-pair .block-media{aspect-ratio:16/9}
.block-media figcaption{
  position:absolute;z-index:3;left:14px;bottom:12px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
  background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:5px 11px;
}
@media(max-width:680px){.block-pair{grid-template-columns:1fr}}

/* process / stills ------------------------------------------------------ */
.case-process{border-top:1px solid var(--line);padding:clamp(38px,5vw,64px) 0 0;margin:clamp(38px,5vw,64px) 0 clamp(48px,7vw,96px)}
.case-process .eyebrow{display:block;margin-bottom:clamp(22px,3vw,38px)}
.process-copy{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(24px,3.4vw,54px);margin-bottom:clamp(30px,4vw,54px);
}
.process-copy h2{
  font-family:var(--font-display);font-size:13px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-faint);margin-bottom:12px;
}
.process-copy p{color:var(--fg-dim);font-size:15.5px;line-height:1.72}

.stills{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.5vw,22px)}
.stills figure{position:relative;overflow:hidden;border-radius:6px;background:var(--surface);border:1px solid var(--line-soft);aspect-ratio:16/9}
.stills img{width:100%;height:100%;object-fit:cover;filter:saturate(.95)}
.stills figcaption{
  position:absolute;left:12px;bottom:11px;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.45);backdrop-filter:blur(8px);border-radius:99px;padding:5px 10px;
}
@media(max-width:860px){.stills{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.stills{grid-template-columns:1fr}}

/* the client's own post ------------------------------------------------- */
.case-post{margin-bottom:clamp(48px,7vw,96px)}
.case-post .eyebrow{display:block;margin-bottom:clamp(18px,2.4vw,28px)}

/* The client's post: a screenshot of the real thing, linking out to it.
   No third-party embed script, so nothing is requested from x.com at all and
   the engagement counts stay exactly as captured. */
.post-embed{position:relative;max-width:560px;margin:0 auto}
.post-facade{
  display:block;width:100%;padding:0;position:relative;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);
  transition:border-color .35s var(--ease),transform .35s var(--ease-out);
}
.post-facade:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.post-facade img{display:block;width:100%;height:auto}

.post-load{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;
  padding:7px 13px;border-radius:99px;
  border:1px solid var(--line);color:var(--fg-dim);
  font-family:var(--font-body);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.post-load em{font-style:normal}
.post-load svg{width:11px;height:11px}
.post-load:hover{color:var(--fg);border-color:rgba(255,255,255,.34)}

.post-meta{
  display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;
  max-width:560px;margin:18px auto 0;font-size:12.5px;color:var(--fg-dim);
}
.post-meta a{color:var(--fg-dim);text-decoration:none;border-bottom:1px solid var(--line);transition:color .3s var(--ease)}
.post-meta a:hover{color:var(--fg);border-bottom-color:rgba(255,255,255,.4)}

.post-card{
  display:flex;align-items:center;gap:clamp(14px,2vw,24px);
  border:1px solid var(--line);border-radius:8px;
  padding:clamp(18px,2.2vw,28px) clamp(18px,2.4vw,30px);
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease-out);
}
.post-card:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.03);transform:translateY(-2px)}
.post-card.is-empty{border-style:dashed;opacity:.5;pointer-events:none}
.post-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;border-radius:50%;background:rgba(255,255,255,.07);color:var(--fg)}
.post-body{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-width:0}
.post-body strong{font-family:var(--font-display);font-weight:500;font-size:clamp(16px,1.6vw,21px);letter-spacing:-.02em}
.post-body em{font-style:normal;font-size:13px;color:var(--fg-dim)}
.post-go{
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);
  transition:color .3s var(--ease);
}
.post-card:hover .post-go{color:var(--fg)}
.post-card:hover .post-go svg{transform:translateX(3px)}
.post-go svg{transition:transform .35s var(--ease-out)}
@media(max-width:640px){
  .post-card{flex-wrap:wrap}
  .post-go{width:100%;justify-content:flex-start}
}

/* sound toggle ---------------------------------------------------------- */
.sound-toggle{
  position:fixed;right:var(--pad);bottom:22px;z-index:85;
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 15px 9px 13px;border-radius:99px;cursor:pointer;
  font-family:var(--font-body);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-dim);
  background:rgba(8,8,8,.72);border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.sound-toggle:hover{color:var(--fg);border-color:rgba(255,255,255,.28)}
.sound-toggle[aria-pressed="true"]{color:var(--fg);border-color:rgba(255,255,255,.34)}

.sound-bars{display:flex;align-items:flex-end;gap:2px;height:12px}
.sound-bars i{
  display:block;width:2px;height:3px;border-radius:1px;
  background:currentColor;opacity:.55;
  transition:opacity .3s var(--ease);
}
.sound-toggle[aria-pressed="true"] .sound-bars i{
  opacity:1;animation:eq .9s ease-in-out infinite;
}
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(2){animation-delay:.15s}
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(3){animation-delay:.3s}
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}

@media(max-width:680px){.sound-toggle{display:none}}

/* reveal ---------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv.in{opacity:1;transform:none}

/* ==========================================================================
   CASE PAGE
   ========================================================================== */
/* the name first — big, quiet, no footage competing with it */
/* the back link tucks up under the word mark; the title block keeps its own
   breathing room below it, set by .backlink-top's margin */
.case-head{padding:clamp(32px,3vh,40px) 0 clamp(26px,3.6vw,44px)}
/* the way back to the grid, level with where the eye lands after the logo */
.backlink-top{display:flex;width:max-content;margin-top:0;margin-bottom:clamp(34px,5.2vh,60px)}
.case-head .eyebrow{display:block}
.case-head h1{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(44px,9vw,140px);line-height:.9;letter-spacing:-.042em;
  margin-top:14px;
}
.case-lead{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(20px,2.4vw,32px);line-height:1.26;letter-spacing:-.022em;
  color:var(--fg);margin-top:clamp(20px,2.6vw,34px);max-width:40ch;
}
.case-subtitle{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(18px,2.2vw,30px);letter-spacing:-.02em;
  color:var(--fg-dim);margin-top:14px;max-width:30ch;
}
/* a plain-language line under the project name: what the thing physically is,
   set quieter than the name so it reads as a caption rather than a claim */
.case-descriptor{
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-faint);margin-top:12px;max-width:64ch;
}

/* the craft, in the viewer's words: small pills under the project name */
.case-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.case-tags li{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-dim);
  border:1px solid var(--line);border-radius:99px;padding:6px 13px;
}

/* then the film */
.case-film{
  position:relative;overflow:hidden;border-radius:8px;
  background:var(--surface);border:1px solid var(--line-soft);
  aspect-ratio:16/9;margin-bottom:clamp(30px,4vw,52px);
}
.case-film .bg,.case-film .bg video,.case-film .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-film .bg video,.case-film .bg img{filter:brightness(.82) saturate(.94)}
.case-film .bg video{opacity:0;transition:opacity .6s var(--ease)}
.case-film .bg video.ready{opacity:1}

.playbtn{
  position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(88px,9vw,120px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-family:var(--font-body);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  transition:transform .5s var(--ease-out),background .4s,border-color .4s,opacity .3s;
}
.playbtn small{font-size:10px;letter-spacing:.06em;opacity:.62;text-transform:none;font-variant-numeric:tabular-nums}
.playbtn:hover{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,255,255,.17);border-color:#fff}
/* The slot sits above the play button so the real player covers the loop once
   it loads. While it is still empty it must not swallow the click that would
   fill it, or the play button is decorative. */
.player-slot{position:absolute;inset:0;z-index:6;pointer-events:none}
.player-slot:not(:empty){pointer-events:auto}
.player-slot iframe,.player-slot video{width:100%;height:100%;border:0;display:block;object-fit:contain;background:#000}

.meta-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,34px);border-bottom:1px solid var(--line);padding:clamp(30px,4.5vw,54px) 0}
.meta-strip .m span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:9px}
/* the whole strip is secondary information, so every value sits at the same
   quiet weight as the client note rather than competing with the headline */
.meta-strip .m p{font-size:14.5px;line-height:1.5;color:var(--fg-dim)}
/* a prose cell needs two columns and a little more air than a one-word fact */
.meta-strip .m-wide{grid-column:span 2}
.meta-strip .m-wide p{line-height:1.62;max-width:52ch}
@media(max-width:760px){.meta-strip{grid-template-columns:repeat(2,1fr);gap:24px}}

.case-body{display:grid;grid-template-columns:1fr 2fr;gap:clamp(24px,5vw,90px);padding:clamp(48px,7vw,110px) 0}
.case-body .lead{font-family:var(--font-display);font-weight:400;font-size:clamp(21px,2.5vw,34px);line-height:1.22;letter-spacing:-.022em}
.case-body .cols p{color:var(--fg-dim);font-size:15.5px;line-height:1.72;margin-bottom:18px;max-width:62ch}
.case-body .cols h2{font-family:var(--font-display);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);margin:36px 0 12px}
.case-body .cols h2:first-child{margin-top:0}
@media(max-width:860px){.case-body{grid-template-columns:1fr}}

/* the stills section brings its own top margin and rule, so this one only
   needs enough room to finish the stats, not a second full gap */
.case-results{border-top:1px solid var(--line);padding:clamp(38px,5vw,64px) 0 0;margin-bottom:clamp(24px,3vw,44px)}
.case-results .eyebrow{display:block;margin-bottom:clamp(18px,2.4vw,30px)}
.results-lead{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(19px,2.2vw,30px);line-height:1.28;letter-spacing:-.02em;
  max-width:44ch;margin-bottom:clamp(30px,4vw,54px);
}
/* auto-fit so three stats sit three up and four sit four up, with no orphan
   dangling on a second row */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:clamp(14px,2.4vw,30px)}
.stat{border-top:1px solid var(--line);padding-top:20px}
.stat b{display:block;font-family:var(--font-display);font-weight:500;font-size:clamp(32px,5vw,68px);letter-spacing:-.04em;line-height:1}
.stat span{display:block;font-size:12.5px;color:var(--fg-dim);margin-top:10px;max-width:26ch}
@media(max-width:700px){.stats{grid-template-columns:1fr}}

.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.5vw,22px);padding-bottom:clamp(60px,8vw,110px)}
.gallery figure{position:relative;overflow:hidden;border-radius:6px;background:var(--surface);border:1px solid var(--line-soft)}
.gallery video,.gallery img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) brightness(1.06)}
.gallery video{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)}
.gallery video.ready{opacity:1}
.g-full{grid-column:span 12;aspect-ratio:21/9}
.g-half{grid-column:span 6;aspect-ratio:16/9}
.g-third{grid-column:span 4;aspect-ratio:4/5}
.gallery figcaption{
  position:absolute;left:14px;bottom:12px;z-index:3;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);
  background:rgba(0,0,0,.45);backdrop-filter:blur(8px);border-radius:99px;padding:5px 11px;
}
@media(max-width:760px){.g-half,.g-third{grid-column:span 12;aspect-ratio:16/9}}

.next{border-top:1px solid var(--line);padding:clamp(40px,6vw,80px) 0 clamp(70px,10vw,130px)}
.next-link{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.next .eyebrow{margin-bottom:14px;display:block}
.next h2{font-family:var(--font-display);font-weight:500;letter-spacing:-.04em;font-size:clamp(34px,7vw,104px);line-height:.92;transition:opacity .4s var(--ease)}
.next-link:hover h2{opacity:.55}
.next .thumb{width:clamp(120px,17vw,260px);aspect-ratio:16/10;border-radius:5px;overflow:hidden;border:1px solid var(--line-soft)}
.next .thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.9)}
.backlink{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--fg-dim);margin-top:clamp(40px,6vh,72px);transition:color .3s var(--ease)}
.backlink:hover{color:var(--fg)}
.backlink svg{transition:transform .4s var(--ease-out)}
.backlink:hover svg{transform:translateX(-4px)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{border-top:1px solid var(--line);padding:clamp(40px,5.5vw,72px) 0 clamp(30px,4vw,48px)}
.foot-cta{display:flex;justify-content:flex-start;align-items:flex-end;gap:clamp(24px,3.4vw,52px);flex-wrap:wrap}
.foot-cta h2{flex:0 1 auto}
.foot h2{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,5.5vw,74px);letter-spacing:-.04em;line-height:.95}

.btn-cta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--fg);color:var(--bg);
  border-radius:99px;padding:14px 26px;
  font-size:13px;letter-spacing:.02em;font-weight:500;
  transition:opacity .3s var(--ease),transform .35s var(--ease-out);
}
.btn-cta:hover{opacity:.86;transform:translateY(-2px)}
.btn-cta svg{transition:transform .35s var(--ease-out)}
.btn-cta:hover svg{transform:translateX(3px)}

.foot-base{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:clamp(38px,5vw,64px);padding-top:22px;
}
.tagline{font-family:var(--font-display);font-size:clamp(15px,1.5vw,19px);letter-spacing:-.015em;color:var(--fg)}
.socials{display:flex;gap:8px}
.soc{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);color:var(--fg-dim);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.soc:hover{color:var(--bg);background:var(--fg);border-color:var(--fg)}
.foot .mail{font-size:14px;color:var(--fg-dim);border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .3s,border-color .3s}
.foot .mail:hover{color:var(--fg);border-color:var(--fg)}
.foot-legal{display:block;font-size:11.5px;color:var(--fg-faint);margin-top:22px}
@media(max-width:640px){.foot-base{flex-direction:column;align-items:flex-start;gap:18px}}

/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .tile-media video,.gallery video,.case-hero .bg video{display:none}
  .rv{opacity:1;transform:none}
}