/* =========================================================
   Mishal Media Group — v2
   Type: Instrument Sans (regular weights, tight) + Instrument Serif italic for emphasis
   ========================================================= */
:root{
  --ink:#0c0c0c;
  --ink-2:#161616;
  --ink-3:#222;
  --bone:#f1eee8;
  --bone-2:#cfcbc2;
  --muted:#b3aea4;
  --muted-light:#6f6b63;
  --line:rgba(241,238,232,.14);
  --line-dark:rgba(12,12,12,.14);
  --signal:#ff5a1f;
  --sans:"Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gut:clamp(16px, 2.8vw, 44px);
  --ease:cubic-bezier(.65,0,.35,1);
  --out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:var(--bone);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--sans);font-size:17px;line-height:1.5;font-weight:400;background:var(--ink);overflow-x:hidden;font-feature-settings:"ss01","cv11"}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,video{display:block;max-width:100%}
ol,ul{list-style:none}
em{font-style:normal;color:var(--muted)}
.ai em,.caps em{color:var(--muted-light)}
sup{font-size:.28em;vertical-align:top;position:relative;top:.35em;margin-left:.15em;letter-spacing:0;font-weight:400;color:var(--muted)}
section{padding:clamp(88px,11vw,170px) var(--gut);position:relative}

/* label system: small tracked uppercase */
.lbl{font-family:var(--sans);font-size:11.5px;line-height:1.3;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}

/* display type */
.display{font-weight:400;font-size:clamp(44px,7.4vw,128px);line-height:.94;letter-spacing:-.045em}
.display em{}

/* section heads */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(40px,5vw,72px)}
.head--small{align-items:baseline;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:0}

/* pills */
.pill{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 20px;border-radius:999px;font-size:15px;font-weight:500;letter-spacing:-.01em;transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--out)}
.pill i{font-style:normal;transition:transform .5s var(--out)}
.pill:hover i{transform:translate(2px,-2px)}
.pill--light{background:var(--bone);color:var(--ink)}
.pill--light:hover{background:#fff}
.pill--dark{background:var(--ink);color:var(--bone)}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;align-items:flex-end;padding:var(--gut)}
.loader__inner{width:100%;display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--line);padding-top:16px}
.loader__name{font-size:clamp(20px,2vw,28px);letter-spacing:-.02em}
.loader__count{font-size:clamp(64px,10vw,160px);line-height:.8;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.no-js .loader{display:none}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:95;pointer-events:none}
.cursor__dot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--bone);mix-blend-mode:difference;transition:transform .45s var(--out),opacity .3s}
/* viewfinder: four corner brackets that close in around a play triangle */
.cursor__vf{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;display:grid;place-items:center;color:var(--bone);opacity:0;transform:scale(1.6) rotate(45deg);transition:opacity .3s var(--ease),transform .6s var(--out)}
.cursor__vf i{position:absolute;width:14px;height:14px;border:0 solid currentColor;transition:transform .6s var(--out)}
.cursor__vf i:nth-child(1){top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}
.cursor__vf i:nth-child(2){top:0;right:0;border-top-width:1.5px;border-right-width:1.5px}
.cursor__vf i:nth-child(3){bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px}
.cursor__vf i:nth-child(4){bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}
.cursor__vf svg{transform:translateX(1.5px) scale(.4);opacity:0;transition:transform .5s var(--out) .08s,opacity .3s .08s;filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}
.cursor.is-on .cursor__vf{opacity:1;transform:none}
.cursor.is-on .cursor__vf svg{transform:translateX(1.5px);opacity:1}
.cursor.is-on .cursor__dot{transform:scale(0)}
.cursor.is-down .cursor__vf i{transform:scale(.8)}
.cursor.is-hidden .cursor__dot{opacity:0}
@media (hover:none),(pointer:coarse){.cursor,.peek{display:none!important}}

/* ---------- hover preview (AI list) ---------- */
.peek{position:fixed;left:0;top:0;z-index:30;width:clamp(260px,24vw,380px);aspect-ratio:16/9;transition:aspect-ratio .4s var(--ease),width .4s var(--ease);pointer-events:none;will-change:transform}
.peek__in{width:100%;height:100%;border-radius:10px;overflow:hidden;background:var(--ink-2);opacity:0;transform:scale(.8) rotate(-4deg);transition:opacity .35s var(--ease),transform .7s var(--out)}
.peek video{width:100%;height:100%;object-fit:cover}
.peek.is-on .peek__in{opacity:1;transform:none}

/* ---------- nav: plain full-width bar, inverts over any background ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px var(--gut);
  color:var(--bone);text-shadow:0 1px 14px rgba(0,0,0,.28);transition:transform .7s var(--ease),color .4s var(--ease)}
.nav.on-light{color:var(--ink);text-shadow:none}
.menu-open .nav{color:var(--ink);text-shadow:none}
.nav.is-hidden{transform:translateY(-100%)}
.nav__logo{justify-self:start;font-size:16px;font-weight:500;letter-spacing:-.02em}
.nav__links{display:flex;gap:30px}
.nav__links a,.nav__cta,.nav__burger{font-size:15px;font-weight:400;letter-spacing:-.01em;position:relative}
.nav__links a::after,.nav__cta::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav__links a:hover::after,.nav__links a.is-current::after,.nav__cta:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{justify-self:end}
.nav__cta i{font-style:normal;display:inline-block;transition:transform .5s var(--out)}
.nav__cta:hover i{transform:translate(2px,-2px)}
.nav__burger{display:none;justify-self:end}
.nav__burger .close{display:none}
.menu-open .nav__burger .open{display:none}
.menu-open .nav__burger .close{display:inline}
.menu{position:fixed;inset:0;z-index:40;background:var(--bone);color:var(--ink);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--gut);padding-bottom:40px;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);visibility:hidden}
.menu a{display:block;font-size:clamp(44px,12vw,88px);line-height:1.02;letter-spacing:-.045em;border-bottom:1px solid var(--line-dark);padding:6px 0}
.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible}

/* ---------- hero ---------- */
.hero{isolation:isolate;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:120px;padding-bottom:var(--gut);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__video{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(12,12,12,.45) 0%,rgba(12,12,12,0) 18%,rgba(12,12,12,0) 45%,rgba(12,12,12,.82) 100%),
  rgba(12,12,12,.12)}
.hero__top{position:absolute;top:90px;left:var(--gut);right:var(--gut);display:grid;grid-template-columns:1fr 1fr 1fr;color:var(--bone-2)}
.hero__top span:nth-child(2){text-align:center}
.hero__top span:nth-child(3){text-align:right}
.hero__title{font-weight:400;font-size:clamp(46px,8.6vw,164px);line-height:.92;letter-spacing:-.05em}
.hero__title em{color:var(--bone-2)}
.line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line > span{display:inline-block}
.hero__foot{margin-top:clamp(24px,2.6vw,40px)}
.hero__foot p{max-width:460px;font-size:17px;color:var(--bone-2);line-height:1.45}
.reel{display:flex;align-items:center;gap:14px;text-align:left}
.reel__icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:11px;border:1px solid rgba(241,238,232,.4);transition:background .4s var(--ease),color .4s var(--ease),transform .5s var(--out)}
.reel b{display:block;font-weight:500;font-size:16px;letter-spacing:-.01em}
.reel small{display:block;font-size:12px;color:var(--bone-2);font-variant-numeric:tabular-nums}
.reel:hover .reel__icon{background:var(--bone);color:var(--ink);transform:scale(1.06)}

/* ---------- statement ---------- */
.statement{display:grid;grid-template-columns:minmax(140px,1fr) 4fr;gap:32px;align-items:start}
.statement .lbl{padding-top:.9em}
.statement h2{font-weight:400;font-size:clamp(28px,3.7vw,60px);line-height:1.08;letter-spacing:-.035em;max-width:1200px;text-indent:clamp(0px,8vw,140px)}
.split .w{display:inline-block;opacity:.2;text-indent:0}

/* ---------- featured ---------- */
.feature{padding:0;height:220vh}
.feature__pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.feature__frame{position:relative;width:100%;height:100%;clip-path:inset(16% 22% round 14px);cursor:none;outline:none}
.feature__frame video{width:100%;height:100%;object-fit:cover}
.feature__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(12,12,12,.7));pointer-events:none}
.feature__cap{position:absolute;left:var(--gut);right:var(--gut);bottom:var(--gut);z-index:1;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;color:var(--bone)}
.feature__cap .lbl{color:var(--bone-2)}
.feature__cap .lbl:last-child{text-align:right}
.feature__cap h3{font-weight:400;font-size:clamp(28px,3.4vw,56px);letter-spacing:-.035em;line-height:1;text-align:center}
.feature__cap h3 em{display:block;color:var(--bone-2)}

/* ---------- work ---------- */
.filters{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;padding:4px;border:1px solid var(--line);border-radius:999px}
.filters button{height:34px;padding:0 14px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--bone-2);transition:background .3s,color .3s}
.filters button:hover{color:var(--bone)}
.filters button.is-active{background:var(--bone);color:var(--ink)}
.work__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(14px,1.8vw,26px);row-gap:clamp(48px,6vw,96px)}
.case{grid-column:var(--col,span 6);margin-top:var(--drop,0);cursor:none;outline:none}
.case.is-hidden{display:none}
.work__grid.is-filtered .case{grid-column:span 6;margin-top:0}
.case__media{position:relative;overflow:hidden;border-radius:6px;background:var(--ink-2)}
.case__poster,.case__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case__media video{opacity:0;transition:opacity .5s var(--ease)}
.case.is-playing .case__media video.is-ready{opacity:1}
.case__poster{transition:transform 1.4s var(--out)}
.case:hover .case__poster{transform:scale(1.04)}
.case__chip{position:absolute;top:12px;left:12px;z-index:2;height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(20,20,20,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);color:var(--bone)}
.case__chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--signal);margin-right:7px}
.case__info{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 16px;padding-top:16px;border-top:1px solid transparent}
.case__info h3{font-weight:500;font-size:clamp(19px,1.5vw,24px);letter-spacing:-.025em;line-height:1.1}
.case__info .t{font-size:clamp(19px,1.5vw,24px);color:var(--bone-2);letter-spacing:-.01em;line-height:1.1;grid-column:1}
.case__info .lbl{grid-column:2;grid-row:1;text-align:right;font-variant-numeric:tabular-nums}
.case__info .cat{grid-column:2;grid-row:1;text-align:right}

/* ---------- roster: one big flowing line of names ---------- */
.roster{padding-top:clamp(40px,6vw,100px)}
.roster > .lbl{margin-bottom:28px}
.roster__flow{font-size:clamp(38px,6.2vw,108px);line-height:1.04;letter-spacing:-.045em;max-width:16ch;max-width:none}
.roster__flow .nm{transition:color .45s var(--ease);cursor:default;white-space:nowrap}
.roster__flow .sep{color:var(--muted);transition:color .45s var(--ease)}
.roster__flow:hover .nm,.roster__flow:hover .sep{color:rgba(241,238,232,.16)}
.roster__flow .nm:hover{color:var(--bone)}

/* ---------- AI studio (light) ---------- */
.ai,.caps{background:var(--bone);color:var(--ink)}
.ai .lbl,.caps .lbl{color:var(--muted-light)}
.caps{border-radius:20px 20px 0 0;margin-top:clamp(40px,6vw,100px)}
.ai{padding-top:clamp(40px,6vw,80px)}
.ai__intro{border-top:1px solid var(--line-dark);padding-top:clamp(56px,7vw,110px)}
.ai__intro{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;margin-bottom:clamp(56px,8vw,120px)}
.ai__intro .lbl{grid-column:1/-1}
.ai__intro .display{grid-column:1/-1;max-width:14ch}
.ai__intro .lede{grid-column:2;font-size:clamp(18px,1.5vw,22px);line-height:1.42;letter-spacing:-.01em;max-width:520px}
.svcs{border-top:1px solid var(--line-dark)}
.svc{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--line-dark);cursor:default;transition:color .4s var(--ease)}
.svc h3{font-weight:400;font-size:clamp(26px,2.8vw,46px);line-height:1;letter-spacing:-.04em;transition:transform .6s var(--out)}
.svc p{font-size:16px;line-height:1.45;color:#45423c;max-width:460px}
.svc__tags{text-align:right}
.svcs:hover .svc{color:rgba(12,12,12,.2)}
.svcs:hover .svc p{color:rgba(12,12,12,.2)}
.svcs .svc:hover{color:var(--ink)}
.svcs .svc:hover p{color:#45423c}
.svc:hover h3{transform:translateX(14px)}
.process{margin-top:clamp(72px,9vw,140px)}
.process > .lbl{margin-bottom:24px}
.process ol{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.process li{padding:4px 20px 0 0;border-top:1px solid var(--ink);display:flex;flex-direction:column;gap:6px}
.process b{font-weight:500;font-size:22px;letter-spacing:-.03em;margin-top:24px}
.process li > span:last-child{color:#5c5951;font-size:15px;line-height:1.4;max-width:220px}

/* ---------- capabilities ---------- */


.caps .display{max-width:12ch}
.caps__list{border-top:1px solid var(--line-dark)}
.cap{border-bottom:1px solid var(--line-dark)}
.cap summary{list-style:none;display:grid;grid-template-columns:1fr 28px;align-items:center;gap:24px;padding:26px 0;cursor:pointer}
.cap summary::-webkit-details-marker{display:none}
.cap summary h3{font-weight:400;font-size:clamp(26px,3.4vw,54px);letter-spacing:-.04em;line-height:1;transition:transform .6s var(--out)}
.cap summary:hover h3{transform:translateX(12px)}
.cap summary i{position:relative;width:28px;height:28px}
.cap summary i::before,.cap summary i::after{content:"";position:absolute;left:4px;right:4px;top:13.5px;height:1.5px;background:currentColor;transition:transform .5s var(--ease)}
.cap summary i::after{transform:rotate(90deg)}
.cap[open] summary i::after{transform:rotate(0)}
.cap__body{padding:0 52px 32px 0;max-width:900px}
.cap__body p{font-size:clamp(17px,1.4vw,21px);line-height:1.45;color:#45423c;letter-spacing:-.01em}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr;gap:clamp(56px,7vw,110px)}
.about__text{display:grid;grid-template-columns:minmax(140px,1fr) 4fr;gap:32px}
.about__text .lbl{padding-top:.8em}
.about__big{font-size:clamp(26px,3.1vw,50px);line-height:1.12;letter-spacing:-.035em;max-width:1100px}
.about__big em{color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.stat{padding:22px 24px 0 0;display:flex;flex-direction:column;gap:18px}
.stat + .stat{padding-left:24px;border-left:1px solid var(--line)}
.stat b{font-weight:400;font-size:clamp(80px,11vw,190px);line-height:.82;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.stat b em{font-size:.5em;color:var(--muted);vertical-align:top;margin-left:.04em}

/* ---------- CTA ---------- */
.cta{border-top:1px solid var(--line)}
.cta > .lbl{margin-bottom:28px}
.cta__big{display:block;font-weight:400;font-size:clamp(48px,9.6vw,184px);line-height:.92;letter-spacing:-.05em;width:fit-content}
.cta__big em{color:var(--muted);transition:color .5s var(--ease)}
.cta__big:hover em{color:var(--bone)}
.cta__row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:clamp(36px,4vw,56px)}

/* ---------- footer ---------- */
.foot{padding:clamp(56px,6vw,90px) var(--gut) 20px;border-top:1px solid var(--line)}
.foot__row{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:32px}
.foot__row .lbl{margin-bottom:12px}
.foot__row p{font-size:15px;line-height:1.55;color:var(--bone-2)}
.foot__row a{transition:color .3s}
.foot__row a:hover{color:var(--bone)}
.foot__top{align-self:start}
.foot__word{margin-top:clamp(56px,7vw,110px);overflow:hidden;line-height:.8}
.foot__word > span{display:inline-block;font-weight:500;letter-spacing:-.055em;white-space:nowrap;font-size:13.6vw;color:var(--bone)}
.foot__legal{display:flex;justify-content:space-between;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:99;background:rgba(12,12,12,.96);display:flex;flex-direction:column;justify-content:center;gap:14px;padding:var(--gut);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.lightbox.is-open{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.lightbox__bar{width:min(1400px,100%,calc((100svh - 130px) * var(--ar,1.7778)));margin:0 auto;display:flex;justify-content:space-between;align-items:baseline}
.lightbox__title{font-size:clamp(18px,1.6vw,24px);letter-spacing:-.02em}
.lightbox__close{color:var(--bone-2);display:flex;gap:8px;align-items:center}
.lightbox__close:hover{color:var(--bone)}
.lightbox__close i{font-style:normal;font-size:13px}
.lightbox__frame{width:min(1400px,100%,calc((100svh - 130px) * var(--ar,1.7778)));aspect-ratio:var(--ar,1.7778);margin:0 auto;background:#000;border-radius:8px;overflow:hidden;transform:translateY(24px);transition:transform .8s var(--out)}
.lightbox.is-open .lightbox__frame{transform:none}
.lightbox video{width:100%;height:100%;object-fit:contain}

/* focus */
:focus-visible{outline:2px solid var(--bone);outline-offset:4px;border-radius:6px}
.ai :focus-visible,.caps :focus-visible{outline-color:var(--ink)}
.case:focus-visible .case__media{outline:2px solid var(--bone);outline-offset:6px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .svc{grid-template-columns:1fr;row-gap:12px}
  .svc p{grid-column:1}
  .svc__tags{text-align:left}
  .process ol{grid-template-columns:repeat(3,1fr);row-gap:36px}
}
@media (max-width:760px){
  body{font-size:16px}
  .hero__top{grid-template-columns:1fr 1fr;top:84px}
  .hero__top span:nth-child(2){display:none}
  .hero__foot{grid-template-columns:1fr;gap:22px}
  .head{flex-direction:column;align-items:flex-start;gap:20px}
  .filters{justify-content:flex-start;border:0;padding:0}
  .filters button{border:1px solid var(--line)}
  .filters button.is-active{border-color:var(--bone)}
  .statement,.about__text{grid-template-columns:1fr;gap:18px}
  .statement h2{text-indent:0}
  .feature{height:160vh}
  .feature__frame{clip-path:inset(18% 6% round 12px)}
  .feature__cap{grid-template-columns:1fr;text-align:left;gap:8px}
  .feature__cap h3{text-align:left}
  .feature__cap .lbl:last-child{text-align:left}
  .work__grid{grid-template-columns:1fr;row-gap:44px}
  .case,.work__grid.is-filtered .case{grid-column:1/-1;margin-top:0}
  .case.is-playing .case__media video.is-ready{opacity:1}
  .caps{border-radius:14px 14px 0 0}
  .ai__intro{grid-template-columns:1fr}
  .ai__intro .lede{grid-column:1}
  .process ol{grid-template-columns:1fr 1fr}
  .cap summary{grid-template-columns:1fr 24px;gap:12px}
  .cap__body{padding:0 0 26px 0}
  .stats{grid-template-columns:1fr}
  .stat + .stat{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:24px}
  .cta__row{flex-direction:column;align-items:flex-start}
  .foot__row{grid-template-columns:1fr 1fr}
  .foot__legal{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .feature{height:auto}
  .feature__pin{position:relative;height:80vh}
  .feature__frame{clip-path:none}
}

/* nav collapses to name + Menu */
@media (max-width:860px){
  .nav{grid-template-columns:1fr auto}
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
}
.cap__link{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;white-space:nowrap}

/* =========================================================
   INTERACTIONS
   ========================================================= */
/* rolling text */
.roll{display:inline-flex;overflow:hidden;height:1.3em;line-height:1.3;vertical-align:-.28em}
.roll .ch{display:inline-block;white-space:pre;text-shadow:0 1.3em currentColor;transition:transform .6s var(--out);transition-delay:calc(var(--i) * 12ms)}
a:hover .roll .ch,button:hover .roll .ch,.case:hover .roll .ch{transform:translateY(-1.3em)}
.nav__links a:hover:not(.is-current)::after,.nav__cta:hover::after{transform:scaleX(0)}

/* buttons: a soft press */
.pill,.nav__cta,.filters button{will-change:transform}
.pill:active{transform:scale(.97)}

/* sliding filter pill */
.filters{position:relative}
.filters__ind{position:absolute;left:0;top:0;border-radius:999px;background:var(--bone);pointer-events:none;transition:transform .65s var(--out),width .65s var(--out),height .65s var(--out)}
.filters button{position:relative;z-index:1;transition:color .45s var(--ease)}
.filters button.is-active{background:transparent;color:var(--ink)}

/* masked word reveals */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.wi{display:inline-block;will-change:transform}

/* letters for proximity lift */
.lt{display:inline-block;will-change:transform}
.cta__big{overflow:hidden;padding-top:.12em}
.foot__word{padding-top:.2em}

/* accordion */
.cap__body{overflow:hidden}
.cap.is-closing summary i::after{transform:rotate(90deg)}
.cap summary{transition:color .4s var(--ease)}
.caps__list:hover .cap summary{color:rgba(12,12,12,.35)}
.caps__list .cap summary:hover,.caps__list .cap[open] summary{color:var(--ink)}

/* cursor ring over clickable things */
.cursor.is-link .cursor__dot{opacity:0}

/* work tiles: lift the caption a touch */
.case__info{transition:transform .6s var(--out)}
.case:hover .case__info{transform:translateY(-3px)}

/* =========================================================
   WORK AS PARTNERSHIPS + CLIENT PAGE
   ========================================================= */
.work .head{align-items:flex-end}
.head__line{max-width:420px;color:var(--bone-2);font-size:17px;line-height:1.45;letter-spacing:-.01em}
.case__info{display:block}
.case__info h3{margin-bottom:6px}
.case__info p{color:var(--muted);font-size:15px;line-height:1.45;max-width:46ch}

/* contact: a plain underlined link, no pill */
.cta__mail{display:inline-flex;align-items:baseline;gap:10px;font-size:clamp(20px,2vw,30px);letter-spacing:-.02em;padding-bottom:6px;background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;transition:background-size .6s var(--ease)}
.cta__mail:hover{background-size:0 1px;background-position:right bottom}
.cta__mail i{font-style:normal;transition:transform .5s var(--out)}
.cta__mail:hover i{transform:translate(3px,-3px)}

/* cursor: play for single films, plus for clients with several brands */
.cursor__vf svg{grid-area:1/1}
.cursor__vf .ic-open{display:none}
.cursor.is-group .cursor__vf .ic-play{display:none}
.cursor.is-group .cursor__vf .ic-open{display:block}

/* client page */
html.cv-lock{overflow:hidden}
.cv{position:fixed;inset:0;z-index:90;background:var(--ink);color:var(--bone);overflow-y:auto;overscroll-behavior:contain;
  clip-path:inset(100% 0 0 0);visibility:hidden;transition:clip-path .9s var(--ease),visibility 0s .9s}
.cv.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .9s var(--ease)}
.cv__bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:22px var(--gut);
  background:linear-gradient(180deg,var(--ink) 40%,rgba(12,12,12,0))}
.cv__name{font-size:16px;font-weight:500;letter-spacing:-.02em}
.cv__close{font-size:15px;display:inline-flex;gap:8px;align-items:center}
.cv__close i{font-style:normal;font-size:12px;transition:transform .5s var(--out)}
.cv__close:hover i{transform:rotate(90deg)}
.cv__body{padding:clamp(40px,8vw,120px) var(--gut) clamp(80px,10vw,160px)}
.cv__head{margin-bottom:clamp(64px,9vw,140px);max-width:1100px}
.cv__title{font-weight:400;font-size:clamp(56px,11vw,190px);line-height:.9;letter-spacing:-.055em}
.cv__line{margin-top:24px;font-size:clamp(20px,2vw,30px);line-height:1.25;letter-spacing:-.025em;color:var(--bone-2);max-width:30ch}
.cv__brand{display:grid;grid-template-columns:minmax(160px,1fr) 3fr;gap:24px 40px;padding:28px 0 clamp(56px,7vw,100px);border-top:1px solid var(--line)}
.cv__brandname h3{font-weight:400;font-size:clamp(26px,2.6vw,42px);letter-spacing:-.04em;line-height:1}
.cv__brandname p{margin-top:8px;color:var(--muted);font-size:15px}
.cv__films{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px);align-items:start}
.cv__film:only-child{grid-column:1 / -1}
.cv__film{position:relative;border-radius:6px;overflow:hidden;background:var(--ink-2);cursor:none;outline:none}
.cv__film img{width:100%;height:auto;transition:transform 1.4s var(--out)}
.cv__film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease)}
.cv__film.is-playing video.is-ready{opacity:1}
.cv__film:hover img{transform:scale(1.03)}
.cv__film:focus-visible{outline:2px solid var(--bone);outline-offset:6px}
@media (max-width:760px){
  .cv__brand{grid-template-columns:1fr}
  .cv__films{grid-template-columns:1fr}
  .head__line{max-width:none}
}

/* =========================================================
   WORK v3: featured pairs (Instrument), client index (Locomotive),
   brand-coloured case pages (BASIC), next client (Locomotive / Clay)
   ========================================================= */
/* featured captions: small client, bigger outcome headline */
.case__info h3{font-size:14px;font-weight:500;letter-spacing:0;color:var(--bone-2);margin-bottom:8px}
.case__info p{font-size:clamp(19px,1.6vw,26px);line-height:1.2;letter-spacing:-.025em;color:var(--bone);max-width:30ch}
.case:hover .case__info{transform:none}

/* client index */
.index{padding-top:clamp(40px,6vw,100px)}
.index__head{margin-bottom:28px}
.index__title{font-weight:400;font-size:clamp(40px,5.6vw,96px);line-height:.95;letter-spacing:-.05em;margin-bottom:clamp(32px,4vw,56px)}
.index__cols,.idx__btn{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,2fr) 32px;gap:24px;align-items:baseline}
.idx{border-bottom:1px solid var(--line)}
.idx__row{border-top:1px solid var(--line)}
.idx__btn{width:100%;padding:24px 0;text-align:left;transition:color .45s var(--ease)}
.idx__name{font-size:clamp(26px,3vw,48px);line-height:1;letter-spacing:-.04em;transition:transform .7s var(--out)}
.idx__sector,.idx__brands{font-size:15px;color:var(--muted);line-height:1.4}
.idx__plus{position:relative;width:24px;height:24px;justify-self:end;align-self:center}
.idx__plus::before,.idx__plus::after{content:"";position:absolute;left:3px;right:3px;top:11.5px;height:1.5px;background:currentColor;transition:transform .5s var(--ease)}
.idx__plus::after{transform:rotate(90deg)}
.idx__row.is-open .idx__plus::after{transform:rotate(0)}
.idx:hover .idx__btn{color:rgba(241,238,232,.55)}
.idx .idx__row:hover .idx__btn,.idx .idx__row.is-open .idx__btn{color:var(--bone)}
.idx__row:hover .idx__name,.idx__row.is-open .idx__name{transform:translateX(12px)}
.idx__panel{height:0;overflow:hidden}
.idx__inner{padding:6px 0 40px}
.idx__films{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start}
.idx__film{cursor:none;outline:none}
.idx__thumb{position:relative;border-radius:6px;overflow:hidden;background:var(--ink-2)}
.idx__thumb img{width:100%;height:auto;transition:transform 1.2s var(--out)}
.idx__thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease)}
.idx__film.is-playing video.is-ready{opacity:1}
.idx__film:hover img{transform:scale(1.04)}
.idx__film figcaption{margin-top:10px;font-size:14px;color:var(--bone-2)}
.idx__film:focus-visible .idx__thumb{outline:2px solid var(--bone);outline-offset:4px}
.idx__open{display:inline-flex;gap:8px;margin-top:28px;font-size:16px;padding-bottom:4px;background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;transition:background-size .6s var(--ease)}
.idx__open:hover{background-size:0 1px;background-position:right bottom}
.idx__open i{font-style:normal}

/* case page: brand colour */
.cv{background:var(--cv-bg,var(--ink));transition:clip-path .9s var(--ease),visibility 0s .9s,background-color .6s var(--ease)}
.cv.is-open{transition:clip-path .9s var(--ease),background-color .6s var(--ease)}
.cv__bar{background:linear-gradient(180deg,var(--cv-bg,var(--ink)) 40%,transparent)}
.cv .lbl{color:rgba(241,238,232,.72)}
.cv__head{margin-bottom:clamp(40px,5vw,72px)}
.cv__head .lbl{margin-bottom:18px}
.cv__title{font-size:clamp(64px,13vw,230px)}
.cv__hero{margin:0 calc(var(--gut) * -1) clamp(72px,9vw,140px);cursor:none;outline:none;background:rgba(0,0,0,.18)}
.cv__hero video{display:block;width:100%;height:auto;max-height:90vh;object-fit:contain;margin:0 auto}
.cv__overview{display:grid;grid-template-columns:1.25fr 1fr;gap:40px clamp(40px,7vw,120px);margin-bottom:clamp(88px,11vw,170px)}
.cv__headline{font-size:clamp(28px,3.3vw,54px);line-height:1.08;letter-spacing:-.035em}
.cv__services{list-style:none;margin-top:36px}
.cv__services li{font-size:12px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;line-height:2;color:rgba(241,238,232,.88)}
.cv__text .lbl{margin-bottom:12px}
.cv__text p:not(.lbl){font-size:18px;line-height:1.55;color:rgba(241,238,232,.85);max-width:52ch}
.cv__text p + .lbl{margin-top:32px}
.cv__brand{border-top-color:rgba(241,238,232,.18)}
.cv__films{grid-template-columns:repeat(12,minmax(0,1fr))}
.cv__film{grid-column:span 7}
.cv__film:nth-child(2n){grid-column:span 5;margin-top:clamp(0px,8vw,120px)}
.cv__film:only-child{grid-column:1 / -1;margin-top:0}
.cv__reveal{opacity:0;transform:translateY(60px);transition:opacity 1s var(--out),transform 1.3s var(--out)}
.cv__reveal.is-in{opacity:1;transform:none}
.cv__next{display:block;margin-top:clamp(40px,6vw,90px);padding-top:28px;border-top:1px solid rgba(241,238,232,.18)}
.cv__nexttitle{display:block;font-size:clamp(56px,11vw,190px);line-height:.9;letter-spacing:-.055em;margin:18px 0 36px;transition:transform .9s var(--out)}
.cv__next:hover .cv__nexttitle{transform:translateX(24px)}
.cv__nextimg{display:block;height:46vh;border-radius:8px;overflow:hidden}
.cv__nextimg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s var(--out)}
.cv__next:hover .cv__nextimg img{transform:scale(1)}

@media (max-width:860px){
  .index__cols{display:none}
  .idx__btn{grid-template-columns:1fr 24px;row-gap:6px}
  .idx__name,.idx__sector,.idx__brands{grid-column:1}
  .idx__plus{grid-column:2;grid-row:1}
  .idx__films{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cv__overview{grid-template-columns:1fr}
  .cv__film,.cv__film:nth-child(2n){grid-column:1 / -1;margin-top:0}
  .cv__nextimg{height:30vh}
}
.idx__thumb img:not([src]){aspect-ratio:16/9}

/* =========================================================
   CLIENT STRIP: names (or logos) gliding past, pause on hover
   ========================================================= */
.strip{padding:clamp(28px,4vw,56px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(20px,3vw,48px)}
.strip__lbl{padding-left:var(--gut);white-space:nowrap}
.strip__view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.strip__track{display:flex;width:max-content;list-style:none;animation:strip var(--dur,40s) linear infinite}
.strip__item{display:flex;align-items:center;padding:0 clamp(28px,3.4vw,60px);height:64px}
.strip__item span{font-size:clamp(18px,1.7vw,26px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:rgba(241,238,232,.7);transition:color .5s var(--ease)}
.strip__item img{height:30px;width:auto;max-width:none;filter:brightness(0) invert(.92);opacity:.78;transition:opacity .5s var(--ease)}
.strip__item:hover span{color:var(--bone)}
.strip__item:hover img{opacity:1}
@keyframes strip{to{transform:translateX(-50%)}}
@media (max-width:760px){
  .strip{grid-template-columns:1fr;gap:16px}
  .strip__item{height:40px}
}
@media (prefers-reduced-motion:reduce){
  .strip__track{animation:none;flex-wrap:wrap;width:auto}
  .strip__item[aria-hidden="true"]{display:none}
}

/* nav: soft fade behind it once past the hero, so it never sits on body text */
.nav::before{content:"";position:absolute;inset:0 0 -28px 0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(12,12,12,.92),rgba(12,12,12,.6) 55%,rgba(12,12,12,0));opacity:0;transition:opacity .5s var(--ease)}
.nav.is-solid::before{opacity:1}
.nav.on-light::before{background:linear-gradient(180deg,rgba(241,238,232,.95),rgba(241,238,232,.65) 55%,rgba(241,238,232,0))}
.menu-open .nav::before{opacity:0}
.index__head{margin-bottom:20px}

/* =========================================================
   TYPE SCALE v2: clear levels, smaller descriptions, more air
   display  > title  > heading > lead > body > small > label
   ========================================================= */
:root{
  --fs-hero:clamp(44px,7vw,132px);
  --fs-display:clamp(36px,5vw,84px);
  --fs-title:clamp(22px,2.2vw,34px);
  --fs-lead:clamp(18px,1.6vw,24px);
  --fs-body:15px;
  --fs-small:13px;
  --space-section:clamp(110px,14vw,220px);
}
body{font-size:var(--fs-body)}
section{padding-top:var(--space-section);padding-bottom:var(--space-section)}

/* hero */
.hero{padding-bottom:clamp(28px,4vw,56px)}
.hero__title{font-size:var(--fs-hero)}
.hero__foot{margin-top:clamp(20px,2vw,32px)}
.hero__foot p{font-size:var(--fs-body);max-width:380px;line-height:1.55}

/* section display headings */
.display{font-size:var(--fs-display);line-height:.98}
.head{margin-bottom:clamp(56px,7vw,110px)}
.head__line{font-size:var(--fs-body);max-width:340px;line-height:1.55}

/* statement: a lead paragraph, not a poster */
.statement h2{font-size:clamp(22px,2.5vw,40px);line-height:1.18;letter-spacing:-.025em;max-width:30ch;text-indent:0}

/* client strip */
.strip{padding-top:clamp(32px,4vw,52px);padding-bottom:clamp(32px,4vw,52px)}

/* featured work captions: client tiny, headline modest */
.case__info{padding-top:14px}
.case__info h3{font-size:var(--fs-small)}
.case__info p{font-size:clamp(16px,1.2vw,19px);line-height:1.35;max-width:34ch;color:var(--bone-2)}
.work__grid{row-gap:clamp(64px,8vw,130px)}

/* client index rows */
.index{padding-top:clamp(60px,7vw,110px)}
.idx__btn{padding:20px 0}
.idx__name{font-size:var(--fs-title)}
.idx__sector,.idx__brands{font-size:var(--fs-small)}

/* capabilities */
.caps .head{padding-top:clamp(70px,9vw,140px)}
.cap summary{padding:22px 0}
.cap summary h3{font-size:var(--fs-title)}
.cap__body p{font-size:var(--fs-body);line-height:1.55;max-width:56ch}
.cap__body{padding-bottom:28px}

/* AI studio */
.ai__intro{gap:22px 40px;margin-bottom:clamp(64px,8vw,120px)}
.ai__intro .lede{font-size:var(--fs-body);line-height:1.6;max-width:420px}
.svc{padding:24px 0;gap:16px 40px}
.svc h3{font-size:var(--fs-title)}
.svc p{font-size:var(--fs-body);max-width:46ch}

/* about */
.about{gap:clamp(70px,9vw,140px)}
.about__big{font-size:clamp(20px,2.2vw,34px);line-height:1.22;max-width:34ch}
.stat b{font-size:clamp(56px,7vw,120px)}
.stat sup,.stat b em{font-size:.5em}

/* contact */
.cta__big{font-size:clamp(40px,7vw,128px)}
.cta__mail{font-size:clamp(17px,1.4vw,22px)}

/* footer */
.foot__row p{font-size:var(--fs-small);line-height:1.7}

/* featured film caption */
.feature__cap h3{font-size:var(--fs-title)}

/* ---------- case page ---------- */
.cv__title{font-size:clamp(56px,10vw,180px)}
.cv__head{margin-bottom:clamp(36px,4vw,60px)}
.cv__overview{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px 24px;margin-bottom:clamp(100px,12vw,180px)}
.cv__headline{grid-column:1 / span 8;font-size:clamp(22px,2.4vw,38px);line-height:1.15;letter-spacing:-.03em}
.cv__about{grid-column:1 / span 6;font-size:var(--fs-body);line-height:1.65;color:rgba(241,238,232,.82);max-width:56ch}
/* spec sheet: like the credits block on a film slate */
.cv__spec{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,3vw,48px);border-top:1px solid rgba(241,238,232,.2)}
.cv__spec > div{padding:16px 20px 0 0}
.cv__spec > div + div{padding-left:20px;border-left:1px solid rgba(241,238,232,.12)}
.cv__spec dt{font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:rgba(241,238,232,.6);margin-bottom:10px}
.cv__spec dd{font-size:var(--fs-small);line-height:1.75;color:var(--bone)}
.cv__brandname h3{font-size:var(--fs-title)}
.cv__brand{padding-bottom:clamp(64px,8vw,120px)}
.cv__nexttitle{font-size:clamp(48px,8vw,140px)}

@media (max-width:760px){
  .cv__headline,.cv__about{grid-column:1 / -1}
  .cv__spec{grid-template-columns:1fr}
  .cv__spec > div + div{padding-left:0;border-left:0;border-top:1px solid rgba(241,238,232,.12);margin-top:14px}
}

/* ---------- featured reel: curved neighbours + sound ---------- */
.feature__frame{overflow:hidden}
.feature__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature__pin{perspective:1400px}
.fside{position:absolute;top:50%;z-index:3;width:clamp(200px,28vw,460px);aspect-ratio:16/9;padding:0;border:0;background:#000;border-radius:14px;overflow:hidden;cursor:pointer;
  opacity:0;pointer-events:none;filter:blur(3px) brightness(.72) saturate(1.1);box-shadow:0 30px 80px rgba(0,0,0,.55);transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter .6s var(--ease)}
.fside video{width:100%;height:100%;object-fit:cover;display:block}
.fside--prev{left:0;transform:translate(-62%,-50%) rotateY(48deg) scale(.9);transform-origin:left center}
.fside--next{right:0;transform:translate(62%,-50%) rotateY(-48deg) scale(.9);transform-origin:right center}
.is-reel .fside{opacity:1;pointer-events:auto}
.is-reel .fside--prev{transform:translate(-38%,-50%) rotateY(38deg)}
.is-reel .fside--next{transform:translate(38%,-50%) rotateY(-38deg)}
.is-reel .fside:hover{filter:blur(1px) brightness(.85)}
.is-reel .fside--prev:hover{transform:translate(-30%,-50%) rotateY(26deg)}
.is-reel .fside--next:hover{transform:translate(30%,-50%) rotateY(-26deg)}
.fsound{position:absolute;z-index:4;right:var(--gut);bottom:calc(var(--gut) + 56px);width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(241,238,232,.35);border-radius:50%;
  background:rgba(12,12,12,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--bone);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .6s var(--ease),border-color .3s}
.is-reel .fsound{opacity:1;pointer-events:auto}
.fsound:hover{border-color:var(--bone)}
.fsound .fsound__on{display:none}
.fsound.is-on .fsound__on{display:block}
.fsound.is-on .fsound__off{display:none}
@media (max-width:760px){
  .fside{width:34vw;top:auto;bottom:16%}
  .is-reel .fside--prev{transform:translate(-30%,0) rotateY(30deg)}
  .is-reel .fside--next{transform:translate(30%,0) rotateY(-30deg)}
}

.feature__frame{cursor:auto}
.feature__frame .feature__cap{pointer-events:none}
/* nav CTA: a quiet line that stretches toward the words */
.nav__cta{display:inline-flex;align-items:center;gap:10px;font-weight:500}
.nav__cta::after{left:28px}
.nav__dash{display:block;width:18px;height:1px;background:currentColor;transition:width .6s var(--ease)}
.nav__cta:hover .nav__dash{width:34px}

/* receding stack behind the inset featured frame */
.feature__frame{z-index:2}
.fstack{position:absolute;inset:0;z-index:1;pointer-events:none;transform-style:preserve-3d}
.fcard{--w:calc(24vw * (1 - var(--d) * .18));position:absolute;top:50%;left:50%;width:var(--w);aspect-ratio:16/9;padding:0;border:0;border-radius:12px;overflow:hidden;background:#000;cursor:pointer;pointer-events:auto;
  transform:translate(calc(-50% + var(--s) * (24vw + var(--d) * 8vw)), -50%) rotateY(calc(var(--s) * -1 * (12deg + var(--d) * 7deg)));
  filter:blur(calc(var(--d) * 1.6px)) brightness(calc(.78 - var(--d) * .14));transition:filter .5s var(--ease);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.fcard img{width:100%;height:100%;object-fit:cover;display:block}
.fcard:hover{filter:blur(0) brightness(1)}
@media (max-width:760px){.fstack{display:none}}
/* lens-focus opener */
.loader{background:transparent;align-items:center;justify-content:center;pointer-events:none}
.loader__inner{border:0;width:auto;overflow:hidden;padding:0}
.loader__count{display:none}
.loader__name{display:block;font-size:clamp(24px,2.6vw,42px);font-weight:600}
.hero__title .hw{display:inline-block}
.hero__title .hw-em{color:#8f8a82}
.hero__video{will-change:filter,transform}
/* featured v3: a straight filmstrip either side of the inset frame, then a slim rail at full bleed */
.fside{display:none}
.fcard{--w:21vw;width:var(--w);border-radius:10px;box-shadow:none;
  transform:translate(calc(-50% + var(--s) * (28vw + 1.6vw + var(--w) / 2 + (var(--d) - 1) * (var(--w) + 1.6vw))), -50%);
  filter:brightness(.42) saturate(.85);transition:filter .5s var(--ease),transform .9s var(--ease)}
.fcard:hover{filter:brightness(1) saturate(1)}
.frail{position:absolute;z-index:4;left:50%;bottom:calc(var(--gut) + 64px);transform:translate(-50%,16px);display:flex;gap:10px;opacity:0;pointer-events:none;transition:opacity .7s var(--ease),transform .9s var(--ease)}
.is-reel .frail{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.frail button{position:relative;width:clamp(64px,6.4vw,110px);aspect-ratio:16/9;padding:0;border:0;border-radius:6px;overflow:hidden;background:#000;cursor:pointer;opacity:.5;transition:opacity .4s var(--ease),width .6s var(--ease)}
.frail button img{width:100%;height:100%;object-fit:cover;display:block}
.frail button span{position:absolute;left:0;right:0;bottom:calc(100% + 8px);font-size:12px;color:var(--bone);text-align:center;white-space:nowrap;opacity:0;transition:opacity .3s}
.frail button{overflow:visible}
.frail button img{border-radius:6px}
.frail button:hover,.frail button.is-on{opacity:1}
.frail button:hover span{opacity:1}
.frail button.is-on{width:clamp(96px,9.6vw,160px)}
.frail button.is-on::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;background:var(--bone)}
@media (max-width:760px){.frail{bottom:calc(var(--gut) + 90px)}.frail button{width:48px}.frail button.is-on{width:72px}}
/* featured v4: minimal line index, nothing covers the film */
.frail{gap:6px;bottom:calc(var(--gut) + 58px)}
.frail button{width:22px;height:20px;aspect-ratio:auto;border-radius:0;background:none;opacity:1}
.frail button img{display:none}
.frail button::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(241,238,232,.35);transition:background .4s var(--ease)}
.frail button:hover::before{background:rgba(241,238,232,.8)}
.frail button.is-on{width:48px}
.frail button.is-on::before{background:var(--bone)}
.frail button.is-on::after{display:none}
.frail button span{bottom:calc(100% + 2px);font-size:11px;letter-spacing:.04em;text-shadow:0 1px 8px rgba(0,0,0,.6)}
@media (max-width:760px){.frail button{width:16px}.frail button.is-on{width:32px}}

.fsound{border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;opacity:0;filter:drop-shadow(0 1px 6px rgba(0,0,0,.5))}
.is-reel .fsound{opacity:.75}
.is-reel .fsound:hover{opacity:1}

/* ---------- capabilities v2: list + following film frame ---------- */
.caps__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,90px);align-items:start}
.caps__media{position:sticky;top:14vh;aspect-ratio:4/5;max-height:72vh;width:100%;overflow:hidden;background:#d9d4cb}
.caps__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s var(--ease),transform 1.6s var(--out)}
.caps__media video.is-on{opacity:1;transform:scale(1)}
.cap summary h3{font-size:clamp(26px,2.9vw,48px)}
.cap[open] summary h3{transform:translateX(0)}
.cap__body p{color:#4a463f}
@media (max-width:900px){.caps__body{grid-template-columns:1fr}.caps__media{position:relative;top:0;aspect-ratio:16/10;order:-1}}

/* ---------- AI studio v2: ink sweep rows ---------- */
.svc{position:relative;isolation:isolate;padding-left:0;padding-right:0;transition:padding .7s var(--out),color .5s var(--ease)}
.svc::before{content:"";position:absolute;inset:0 calc(-1 * var(--gut));z-index:-1;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.svcs .svc:hover{color:var(--bone);padding-left:clamp(12px,1.6vw,28px)}
.svcs .svc:hover p{color:rgba(241,238,232,.72)}
.svc:hover::before{transform:scaleX(1)}
.svc__media{position:absolute;right:0;top:50%;width:clamp(120px,13vw,220px);aspect-ratio:16/10;overflow:hidden;transform:translateY(-50%);clip-path:inset(0 0 0 100%);transition:clip-path .9s var(--ease);pointer-events:none}
.svc__media video{width:100%;height:100%;object-fit:cover;display:block}
.svc:hover .svc__media{clip-path:inset(0 0 0 0)}
.svc p{padding-right:clamp(130px,14vw,240px)}
@media (hover:none),(max-width:760px){.svc__media{display:none}.svc p{padding-right:0}}
/* featured v5: dots that open into a film peek */
.frail{gap:14px;align-items:flex-end}
.frail button,.frail button.is-on{width:auto;height:auto;overflow:visible}
.frail button::before{position:static;display:block;width:7px;height:7px;border-radius:50%;background:rgba(241,238,232,.4);transition:transform .5s var(--out),background .4s}
.frail button:hover::before{transform:scale(1.5);background:var(--bone)}
.frail button.is-on::before{background:var(--bone);transform:scale(1.5)}
.frail button img{display:block;position:absolute;left:50%;bottom:calc(100% + 14px);width:clamp(140px,12vw,200px);aspect-ratio:16/9;object-fit:cover;border-radius:4px;
  transform:translateX(-50%) translateY(8px);clip-path:inset(100% 0 0 0);transition:clip-path .6s var(--ease),transform .6s var(--out);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.frail button:hover img{clip-path:inset(0 0 0 0);transform:translateX(-50%) translateY(0)}
.frail button span{bottom:auto;top:calc(100% + 10px);left:50%;right:auto;transform:translateX(-50%)}
/* sound: four hairline bars, flat when muted, breathing when on */
.fsound{width:auto;height:auto;display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.fsound__bars{display:flex;align-items:flex-end;gap:2px;height:14px}
.fsound__bars i{display:block;width:1.5px;height:3px;background:currentColor;transition:height .4s var(--ease)}
.fsound.is-on .fsound__bars i{animation:eq 1.1s ease-in-out infinite}
.fsound.is-on .fsound__bars i:nth-child(2){animation-delay:-.4s}
.fsound.is-on .fsound__bars i:nth-child(3){animation-delay:-.7s}
.fsound.is-on .fsound__bars i:nth-child(4){animation-delay:-.2s}
@keyframes eq{0%,100%{height:3px}50%{height:14px}}
.fsound .fsound__txt::after{content:" off";opacity:.6}
.fsound.is-on .fsound__txt::after{content:" on"}
/* capabilities v3: typographic, the hovered row becomes a live ticker */
.caps__body{display:block}
.caps__media{display:none}
.cap summary{position:relative;overflow:hidden}
.cap summary h3{transition:transform .7s var(--out),opacity .5s var(--ease)}
.cap__ticker{position:absolute;inset:0 40px 0 0;display:flex;align-items:center;overflow:hidden;pointer-events:none;
  clip-path:inset(0 100% 0 0);transition:clip-path .8s var(--ease)}
.cap__run{display:flex;gap:0;white-space:nowrap;animation:capRun 18s linear infinite;animation-play-state:paused}
.cap__run span{font-size:clamp(26px,2.9vw,48px);letter-spacing:-.04em;line-height:1;padding-right:.9em;color:var(--ink)}
.cap__run span::after{content:"";display:inline-block;width:.18em;height:.18em;border-radius:50%;background:#b45a2c;margin-left:.9em;vertical-align:middle}
@keyframes capRun{to{transform:translateX(-50%)}}
@media (hover:hover){
  .cap summary:hover .cap__ticker{clip-path:inset(0 0 0 0)}
  .cap summary:hover .cap__run{animation-play-state:running}
  .cap summary:hover h3{transform:translateY(-120%);opacity:0}
}

/* opener v3: hairline, letterbox, full frame */
.loader{background:none;display:block;padding:0}
.ap{position:absolute;left:0;right:0;height:50.5%;background:var(--ink)}
.ap--t{top:0}.ap--b{bottom:0}
.ap__line{position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:rgba(241,238,232,.8);transform-origin:center}
html.is-locked,html.is-locked body{overflow:hidden;height:100%}
/* featured caption v2: brand left, dots centre, sector right */
.fcap__name{font-size:clamp(18px,1.6vw,26px);letter-spacing:-.025em;color:var(--bone)}
.fcap__dots{display:flex;justify-content:center;pointer-events:auto}
.feature__frame .feature__cap{pointer-events:none}
.feature__cap .frail{position:static;transform:none;opacity:1;pointer-events:auto;bottom:auto;left:auto}
.feature__cap .frail button span{display:none}
.fsound{bottom:var(--gut);right:auto;left:50%;transform:translate(-50%,calc(-100% - 22px))}
.fsound{left:auto;right:var(--gut);transform:none;bottom:calc(var(--gut) + 44px)}
/* client index: every thumbnail the same 4:3 frame */
.idx__thumb{aspect-ratio:4/3}
.idx__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.idx__thumb img:not([src]){aspect-ratio:auto}

.fsound__bars{height:18px;gap:3px}
.fsound__bars i{width:2px;height:6px}
@keyframes eq{0%,100%{height:5px}50%{height:18px}}
.is-reel .fsound{opacity:.9}

/* capabilities ticker v2: slow, always drifting, crossfades in place */
.cap__run{animation:capRun 48s linear infinite;animation-play-state:running}
.cap__ticker{clip-path:none;opacity:0;transition:opacity .9s var(--ease)}
.cap summary h3{transition:opacity .9s var(--ease)}
@media (hover:hover){
  .cap summary:hover .cap__ticker{opacity:1}
  .cap summary:hover h3{transform:none;opacity:0}
}
.caps__list:hover .cap summary{color:inherit}

/* AI studio v3: dark stage with a film that follows the service in view */
.ai{position:relative;background:var(--ink);color:var(--bone);overflow:clip;isolation:isolate}
.ai__stage{position:sticky;top:0;height:100vh;margin-bottom:-100vh;z-index:-1;overflow:hidden}
.ai__stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1.2s var(--ease),transform 2.4s var(--out)}
.ai__stage video.is-on{opacity:.55;transform:scale(1)}
.ai__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,12,12,.85) 0%,rgba(12,12,12,.35) 60%,rgba(12,12,12,.2) 100%)}
.ai .lbl{color:rgba(241,238,232,.7)}
.ai .display em{color:rgba(241,238,232,.55)}
.ai .lede{color:rgba(241,238,232,.78)}
.svcs{border-top:1px solid rgba(241,238,232,.18)}
.svc{border-bottom:1px solid rgba(241,238,232,.18);padding:clamp(34px,5vh,60px) 0;color:rgba(241,238,232,.32);transition:color .7s var(--ease)}
.svc::before,.svc__media{display:none}
.svc p{padding-right:0;color:inherit;transition:color .7s var(--ease)}
.svc h3{transition:transform .9s var(--out)}
.svc.is-on{color:var(--bone)}
.svc.is-on p{color:rgba(241,238,232,.78)}
.svc.is-on h3{transform:translateX(clamp(10px,1.4vw,24px))}
.svcs:hover .svc,.svcs:hover .svc p,.svcs .svc:hover,.svcs .svc:hover p{color:inherit;padding-left:0}
.svcs .svc.is-on p{color:rgba(241,238,232,.78)}

.ai__stage{margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut))}
.ai__stage video.is-on{opacity:.72}

/* simplify: capabilities = plain accordion, AI studio = calm list */
.cap__ticker{display:none!important}
.cap summary:hover h3,.cap summary h3{opacity:1!important;transform:none!important}
.caps__list:hover .cap summary{color:inherit}
.ai__stage{display:none}
.ai{background:var(--ink);color:var(--bone)}
.svc{color:var(--bone);padding:clamp(26px,3.4vw,40px) 0;transition:none}
.svc p,.svcs .svc.is-on p{color:rgba(241,238,232,.62)}
.svc.is-on h3,.svc h3{transform:none}
.svcs:hover .svc,.svcs:hover .svc p{color:inherit}
.svcs:hover .svc p{color:rgba(241,238,232,.62)}

/* opener v4: the name rises letter by letter over the blurred reel, then dissolves as the reel focuses */
.loader{background:none;display:grid;place-items:center;padding:0}
.op{text-align:center}
.op__name{display:inline-block;font-size:clamp(34px,5.6vw,96px);font-weight:500;letter-spacing:-.045em;line-height:1;color:var(--bone);white-space:nowrap;will-change:letter-spacing,opacity,filter}
.op__m{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.op__c{display:inline-block}
.op__sp{display:inline-block;width:.26em}

/* capabilities v4: closed by default, hover slides a still in beside the title */
.cap summary{grid-template-columns:auto auto 1fr 28px;justify-items:start}
.cap summary i{grid-column:4}
.cap__img{display:block;width:0;aspect-ratio:4/3;height:clamp(40px,4.4vw,72px);width:0;overflow:hidden;transition:width .45s var(--out)}
.cap__img img{height:100%;width:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.cap summary h3{transition:color .3s var(--ease),transform .45s var(--out)!important}
@media (hover:hover){
  .caps__list:hover .cap summary{color:rgba(12,12,12,.28)}
  .caps__list .cap summary:hover,.caps__list .cap[open] summary{color:var(--ink)}
  .cap summary:hover .cap__img{width:calc(clamp(40px,4.4vw,72px) * 4 / 3)}
  .cap summary:hover h3{transform:translateX(0)!important}
}
.cap summary{column-gap:clamp(12px,1.4vw,22px)}

/* AI studio v5: big rows, hover focuses one, cursor preview follows */
.svc h3{font-size:clamp(30px,3.8vw,64px)}
.svc p{max-width:420px}
@media (hover:hover){
  .svcs:hover .svc{color:rgba(241,238,232,.22)}
  .svcs:hover .svc p{color:rgba(241,238,232,.22)}
  .svcs .svc:hover{color:var(--bone)}
  .svcs .svc:hover p{color:rgba(241,238,232,.7)}
  .svc{transition:color .3s var(--ease)}
  .svc p{transition:color .3s var(--ease)}
  .svc h3{transition:transform .45s var(--out)}
  .svcs .svc:hover h3{transform:translateX(clamp(8px,1vw,18px))}
}

/* opener name: smaller and lighter */
.op__name{font-size:clamp(18px,2vw,30px);font-weight:400;letter-spacing:.02em}
.op__sp{width:.32em}