/* ============ TOKENS ============ */
:root{
  /* Brand book, section 03. Linen is the default ground, tangelo leads, and
     one secondary joins per piece — never both. This site runs botticelli;
     forest is held for cold-month work. */
  --linen:#F9E8D4;   --tangelo:#D54C15;  --chocolate:#663924;
  --botticelli:#8DB6C7; --forest:#2C4034; --ink:#1C1512; --white:#FFFFFF;
  --gold:linear-gradient(135deg,#f6e3a6 0%,#d4ae52 22%,#8f6f28 44%,#f3dfa0 62%,#c9a048 82%,#7d5f20 100%);
  --chrome:linear-gradient(145deg,#fff 0%,#c9ced6 30%,#6f7781 52%,#eef1f5 68%,#9aa3ad 100%);

  /* aliases kept so existing rules keep reading naturally */
  --flash:var(--tangelo); --paper:var(--linen); --bone:var(--white);
  --sky:var(--botticelli); --cocoa:var(--chocolate);

  --fs-display:clamp(3.4rem,10.5vw,10.5rem);
  --fs-h1:clamp(2.6rem,7.6vw,7.6rem);
  --fs-h2:clamp(1.9rem,5vw,4.6rem);
  --fs-h3:clamp(1.3rem,2.3vw,2.2rem);
  --fs-body:clamp(1rem,1.05vw,1.15rem);

  --gutter:clamp(1.25rem,4vw,5rem);
  --max:1680px;
  --r-s:6px; --r-m:14px; --r-l:20px; --r-p:999px;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);
  --e-back:cubic-bezier(.34,1.56,.64,1);
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  margin:0;background:var(--ink);color:var(--ink);
  /* Body — Inter Regular. Sentence case, short sentences. */
  font:400 var(--fs-body)/1.55 Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,dl,dd,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--flash);color:var(--bone)}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:2px}
.skip{position:fixed;top:-100px;left:1rem;z-index:10001;background:var(--bone);color:var(--ink);
  padding:.75rem 1.25rem;border-radius:var(--r-p);transition:top .25s}
.skip:focus{top:1rem}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* type helpers */
.eyebrow{font:500 .82rem/1.45 Inter,sans-serif;letter-spacing:0;margin:0;opacity:.72}
.eyebrow span{opacity:.7}
.eyebrow--flash{color:var(--flash)}
.h2{font:900 var(--fs-h2)/.86 Poppins,sans-serif;letter-spacing:-.05em;
  display:flex;align-items:baseline;gap:.06em;flex-wrap:wrap}
.h2__star{width:.5em;height:.5em;flex:none;align-self:center;animation:spin 50s linear infinite;
  transform-origin:50% 50%}
.h2__star--lg{width:.62em;height:.62em}
.h2--sky{color:var(--sky)}
.h2--bone{color:var(--bone)}
@keyframes spin{to{transform:rotate(360deg)}}

/* split-text masks */
.sl{display:block;overflow:hidden}
.sl>i{display:block;font-style:normal;will-change:transform}
.sw{display:inline-block;white-space:nowrap}
.sc{display:inline-block;overflow:hidden;vertical-align:top}
.sc>i{display:inline-block;font-style:normal;will-change:transform}

/* ============ GRAIN ============ */
.grain{position:fixed;inset:-6%;z-index:9998;pointer-events:none;opacity:.055;
  mix-blend-mode:overlay;background:url("assets/img/grain.png") repeat;background-size:220px;
  animation:gr 8s steps(1) infinite}
@keyframes gr{0%{transform:translate(0,0)}10%{transform:translate(-4%,-4%)}20%{transform:translate(-8%,2%)}
30%{transform:translate(4%,-6%)}40%{transform:translate(-2%,6%)}50%{transform:translate(-6%,4%)}
60%{transform:translate(6%,0)}70%{transform:translate(0,6%)}80%{transform:translate(2%,-4%)}90%{transform:translate(-4%,2%)}}

/* ============ PRELOADER ============ */
.pre{position:fixed;inset:0;z-index:10000;pointer-events:none}
.pre__curtain{position:absolute;left:0;width:100%;height:50.5%;background:var(--ink)}
.pre__curtain--t{top:0}.pre__curtain--b{bottom:0}
.pre__inner{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1.25rem;z-index:1}
.pre__star{width:90px;transform:scale(0)}
.pre__num{font:500 .8rem/1 Inter,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--white);opacity:.6}
.pre.is-done{display:none}

/* ============ CURSOR ============ */
.cur{position:fixed;inset:0;z-index:9999;pointer-events:none;display:none}
.cur__dot,.cur__ring{position:absolute;top:0;left:0;border-radius:50%;will-change:transform}
.cur__dot{width:8px;height:8px;background:var(--bone);margin:-4px 0 0 -4px;mix-blend-mode:difference}
.cur__ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(255,253,246,.55);
  display:grid;place-content:center;transition:width .3s var(--e-out),height .3s var(--e-out),
  margin .3s var(--e-out),background-color .3s var(--e-out),border-color .3s var(--e-out)}
.cur__ring span{font:600 10px/1 Inter,sans-serif;letter-spacing:0;color:var(--ink);opacity:0;transition:opacity .2s}
.cur.is-link .cur__ring{width:82px;height:82px;margin:-41px 0 0 -41px}
.cur.is-link .cur__dot{opacity:0}
.cur.is-play .cur__ring{width:76px;height:76px;margin:-38px 0 0 -38px;background:var(--bone);border-color:var(--bone)}
.cur.is-play .cur__ring span{opacity:1}
.cur.is-play .cur__dot{opacity:0}
@media (pointer:fine){.cur{display:block}body.has-cur{cursor:none}body.has-cur a,body.has-cur button{cursor:none}}

/* ============ PROGRESS ============ */
.prog{position:fixed;top:0;left:0;width:2px;height:100vh;height:100svh;z-index:9000;background:rgba(255,253,246,.1)}
.prog i{display:block;width:100%;height:0;background:var(--flash);transform-origin:top}
.prog.is-light i{background:var(--bone)}

/* ============ NAV ============ */
.nav{position:fixed;top:clamp(.75rem,2vw,1.5rem);left:0;width:100%;z-index:8000;display:flex;justify-content:center;
  transition:transform .45s var(--e-out),opacity .3s}
.nav.is-hid{transform:translateY(-160%);opacity:0}
.nav__pill{position:relative;display:flex;align-items:center;gap:clamp(.9rem,2vw,1.75rem);
  padding:.7rem clamp(1.1rem,2.4vw,1.6rem);border-radius:var(--r-p);
  background:rgba(18,13,10,.34);border:1px solid rgba(255,253,246,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav__a{position:relative;text-decoration:none;font:500 .82rem/1 Outfit,sans-serif;letter-spacing:-.01em;
  color:var(--bone);opacity:.6;transition:opacity .3s;white-space:nowrap}
.nav__a.is-on,.nav__a:hover{opacity:1}
.nav__dot{position:absolute;left:0;top:50%;width:5px;height:5px;border-radius:50%;background:var(--chrome);
  transform:translate(-10px,-50%);opacity:0;transition:transform .5s var(--e-out),opacity .3s;pointer-events:none}
.nav.is-dark .nav__pill{background:rgba(246,234,220,.5);border-color:rgba(18,13,10,.14)}
.nav.is-dark .nav__a{color:var(--ink)}
.navface{position:fixed;z-index:8001;width:120px;height:120px;object-fit:cover;border-radius:var(--r-m);
  pointer-events:none;opacity:0;transform:scale(.8) rotate(-4deg);transition:opacity .3s,transform .4s var(--e-back);
  box-shadow:0 18px 50px rgba(0,0,0,.4)}
.navface.is-on{opacity:1;transform:scale(1) rotate(-4deg)}

/* ============ BUTTONS ============ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;isolation:isolate;
  padding:1.05rem 2.2rem;border-radius:var(--r-p);text-decoration:none;overflow:hidden;
  font:500 .95rem/1 Outfit,sans-serif;letter-spacing:-.01em;border:1px solid currentColor;will-change:transform}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  transform:scale(0);transform-origin:var(--ox,50%) var(--oy,50%);transition:transform .45s var(--e-out)}
.btn:hover::before{transform:scale(1.6)}
.btn--ghost{color:var(--bone)}
.btn--ghost::before{background:var(--bone)}
.btn--ghost:hover{color:var(--flash)}
.btn--fill{color:var(--cocoa);background:var(--sky);border-color:var(--sky)}
.btn--fill::before{background:var(--chrome)}
.btn--ghost2{color:var(--paper)}
.btn--ghost2::before{background:var(--paper)}
.btn--ghost2:hover{color:var(--cocoa)}

/* ============ 02 HERO ============ */
.hero{position:relative;min-height:100svh;background:var(--flash);color:var(--bone);
  display:flex;flex-direction:column;padding:clamp(4.25rem,6vh,5.25rem) var(--gutter) clamp(1.75rem,4vh,3rem);overflow:hidden}
.hero__stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;
  margin-block:clamp(.4rem,1.2vh,1rem)}
.hero__frame{position:relative;margin:0;aspect-ratio:4/5;height:min(64svh,700px);border-radius:var(--r-s);
  overflow:hidden;box-shadow:0 34px 90px rgba(0,0,0,.3);will-change:transform;z-index:2}
.hero__frame img,.hero__frame video{width:100%;height:100%;object-fit:cover}
/* The poster IS frame zero of the clip, so the swap is invisible without any
   transition — no fade needed, and none wanted. */
.hero__v{position:absolute;inset:0;opacity:0}
.hero__v.is-on{opacity:1}
.hero__rule{position:absolute;inset:10px;border:1px solid rgba(255,253,246,.42);border-radius:3px;pointer-events:none;z-index:3}
.hero__h{font:900 var(--fs-display)/.84 Poppins,sans-serif;letter-spacing:-.05em;
  margin-top:-.26em;position:relative;z-index:4;pointer-events:none;text-align:center}
.hero__h .l,.hero__h .r{display:inline-block}
.hero__sub{margin-top:1.1rem;font-size:clamp(1rem,1.5vw,1.3rem);opacity:.88;text-align:center;max-width:34ch;margin-inline:auto}
.scrollcue{position:absolute;left:50%;bottom:clamp(.9rem,2.5vh,1.75rem);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.45rem;z-index:5;transition:opacity .4s}
.scrollcue.is-gone{opacity:0}
.scrollcue i{width:1px;height:42px;background:rgba(255,253,246,.4);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;left:-1px;width:3px;height:9px;background:var(--bone);
  border-radius:2px;animation:cue 2s var(--e-io) infinite}
@keyframes cue{0%{top:-9px}60%,100%{top:42px}}
.scrollcue span{font:500 .72rem/1 Inter,sans-serif;letter-spacing:0;opacity:.6}

.star{position:absolute;pointer-events:none;will-change:transform;filter:drop-shadow(0 6px 18px rgba(0,0,0,.26))}
.star--a{top:6%;right:9%;width:clamp(72px,10vw,168px);animation:spin 60s linear infinite}
.star--b{top:14%;left:10%;width:clamp(42px,5.5vw,92px);animation:spin 42s linear infinite reverse}
.star--c{bottom:14%;left:13%;width:clamp(48px,6.5vw,110px);animation:spin 90s linear infinite}
.star--d{bottom:24%;right:16%;width:clamp(34px,4.2vw,72px);animation:spin 54s linear infinite reverse}

/* ============ 02B SHOWREEL ============ */
.reel{position:relative;background:var(--ink);padding:clamp(1.4rem,3.2vh,2.4rem) 0;overflow:hidden}
.reel__track{display:flex;overflow:hidden}
.reel__row{display:flex;flex:none;gap:clamp(.5rem,1vw,.9rem);padding-right:clamp(.5rem,1vw,.9rem);will-change:transform}
.reel__c{position:relative;flex:none;width:clamp(104px,11vw,178px);aspect-ratio:9/16;border-radius:var(--r-m);
  overflow:hidden;background:#000;cursor:pointer;transition:transform .45s var(--e-out)}
.reel__c img,.reel__c video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel__c video{opacity:0;transition:opacity .6s var(--e-out)}
.reel__c video.is-on{opacity:1}
.reel__c:hover{transform:translateY(-7px) scale(1.04)}
.reel__c::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,253,246,.14)}

/* ============ 03 TICKER ============ */
.ticker{position:relative;background:var(--ink);color:var(--white);padding:1.6rem 0 1.9rem;overflow:hidden}
.ticker__lab{font:500 .82rem/1 Inter,sans-serif;letter-spacing:0;opacity:.6;
  color:var(--flash);padding-inline:var(--gutter);margin-bottom:1.1rem}
.mq{display:flex;overflow:hidden;white-space:nowrap}
.mq__row{display:flex;flex:none;will-change:transform}
.mq b{font:900 clamp(1.1rem,2.1vw,2rem)/1 Poppins,sans-serif;letter-spacing:-.03em;
  padding-inline:.5em;transition:color .35s}
.mq b:hover{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.mq img.sep{width:clamp(13px,1.5vw,22px);align-self:center;flex:none;opacity:.9}

/* ============ 04 MISSION ============ */
.mission{position:relative;background:var(--paper);color:var(--cocoa);
  padding:clamp(6rem,16vh,13rem) 0;overflow:hidden}
.mission__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.1;
  filter:grayscale(.78) contrast(1.08);will-change:transform}
.mission .wrap{position:relative;z-index:1}
.mission__t{margin-top:1.8rem;font:800 var(--fs-h2)/1.04 Inter,sans-serif;letter-spacing:-.035em;max-width:19ch}
.mission__t span.w{display:inline-block;opacity:.12;transition:none}
.mission__t em{font-style:normal}
.mission__k{margin-top:2.1rem;font-size:clamp(1.05rem,1.6vw,1.4rem);line-height:1.45;
  opacity:0;max-width:40ch;color:var(--chocolate)}
.star--drift{top:62%;left:4%;width:clamp(46px,7vw,110px);animation:spin 70s linear infinite}

/* ============ 05 SERVICES ============ */
.svc{background:var(--sky);color:var(--cocoa);padding:clamp(4.5rem,12vh,9rem) 0 clamp(2rem,6vh,5rem);overflow:hidden}
.svc__defs{position:absolute;width:0;height:0;pointer-events:none}
.svc__head{margin-bottom:clamp(3rem,9vh,7rem)}
.svc__head .h2{margin-top:1rem;max-width:14ch}

.pan{max-width:var(--max);margin:0 auto clamp(4rem,12vh,10rem);padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,5vw,5rem);align-items:center}
.pan--rev .pan__star{order:2}

/* The work sits in its native 9:16, which is the shape it was shot in. The
   chrome star is the hero object beside it: big, turning, overlapping the
   corner. Masking video into the star sliced faces on its points. */
.pan__star{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center}
.pan__clip{position:relative;width:62%;aspect-ratio:9/16;border-radius:var(--r-m);overflow:hidden;
  background:var(--cocoa);box-shadow:0 34px 80px rgba(40,22,12,.34);z-index:1}
.pan__media{position:absolute;inset:0}
.pan__media img,.pan__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pan__media video{opacity:0;transition:opacity .7s var(--e-out)}
.pan__media video.is-on{opacity:1}
.pan__clip::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,253,246,.26)}
/* the motif, turning slowly behind and across the work */
.pan__chrome{position:absolute;width:56%;height:56%;object-fit:contain;pointer-events:none;
  /* clears the subject's face: it breaks the corner, it doesn't sit on them */
  top:-9%;right:1%;z-index:2;
  filter:drop-shadow(0 20px 44px rgba(40,22,12,.45))}
.pan--rev .pan__chrome{right:auto;left:1%}

.pan__n{display:block;font:500 .85rem/1 Inter,sans-serif;letter-spacing:0;color:var(--tangelo)}
.pan__h{margin:.6rem 0 1.1rem;font:900 clamp(2.4rem,6.4vw,6.4rem)/.88 Poppins,sans-serif;letter-spacing:-.05em}
.pan__d{font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1.35;max-width:26ch}
.pan__l{margin-top:1.7rem;max-width:34ch;display:grid;gap:.72rem}
.pan__l li{position:relative;padding-left:2.4rem;font-size:1rem;line-height:1.35;opacity:.84}
.pan__l li::before{content:"";position:absolute;left:0;top:-.14em;width:1.65em;height:1.65em;
  background:url("assets/img/star-gold-sm.png") center/contain no-repeat}

@media (max-width:860px){
  .pan,.pan--rev{grid-template-columns:1fr;gap:1.5rem}
  .pan--rev .pan__star{order:0}
  .pan__star{width:min(78vw,420px);margin-inline:auto}
  .pan__h{margin-top:.4rem}
}

/* ============ 06/10 SCENES ============ */
.scene{background:var(--ink);height:100svh}
.scene__pin{position:relative;height:100svh;overflow:hidden;display:grid;place-items:center}
.scene__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene__pin::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(18,13,10,.78) 0%,rgba(18,13,10,.52) 45%,rgba(18,13,10,.72) 100%)}
.scene__cap{position:relative;z-index:2;text-align:center;padding-inline:var(--gutter)}
.scene__cap p{font:900 var(--fs-h1)/.9 Poppins,sans-serif;letter-spacing:-.05em;color:var(--bone)}

/* ---- scene 02: held still ---- */
.scene__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  filter:saturate(.88) contrast(1.05);will-change:transform}
.scene--still .scene__pin::after{
  background:radial-gradient(ellipse at 50% 50%,rgba(18,13,10,.66) 0%,rgba(18,13,10,.5) 45%,rgba(18,13,10,.78) 100%)}
/* centred and large: it is the held shot of the whole site, it should own the frame */
.scene--still .scene__cap{position:relative;text-align:center;max-width:none;z-index:2;
  padding-inline:var(--gutter);text-shadow:0 8px 54px rgba(18,13,10,.95)}
.scene--still .scene__cap p{font-size:clamp(2.6rem,8.2vw,8.2rem)}
@media (max-width:640px){
  .scene__img{object-position:50% 42%}
}

/* ============ 07 STORY ============ */
.story{position:relative;background:var(--paper);color:var(--cocoa);padding:clamp(5rem,13vh,10rem) 0 clamp(4rem,10vh,8rem)}
.story .h2{margin-bottom:clamp(3rem,8vh,6rem)}
.story__line{position:absolute;left:calc(var(--gutter) / 2);top:18%;bottom:8%;width:1px;background:rgba(91,55,33,.16)}
.story__line i{display:block;width:100%;height:0;background:var(--flash)}
.beat{max-width:var(--max);margin:0 auto clamp(4rem,11vh,9rem);padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,.48fr);gap:clamp(1.5rem,5vw,5rem);align-items:center}
.beat--rev>.beat__f{order:2}
.beat__f{margin:0;overflow:hidden;border-radius:var(--r-m);clip-path:inset(0 0 100% 0)}
.beat__f img{width:100%;aspect-ratio:4/5;object-fit:cover;transform:scale(1.15);will-change:transform}
.beat__t p:last-child{margin-top:.9rem;font-size:clamp(1.05rem,1.8vw,1.55rem);line-height:1.38;max-width:34ch}
.quote{max-width:var(--max);margin:0 auto clamp(4rem,11vh,9rem);padding:clamp(2.5rem,7vw,6rem) var(--gutter);
  background:var(--cocoa);border-radius:var(--r-l)}
.quote p{font:900 clamp(1.8rem,5.2vw,5rem)/.96 Poppins,sans-serif;letter-spacing:-.05em;color:var(--sky);max-width:16ch}

/* ============ 08 PROCESS ============ */
.proc{background:var(--paper);color:var(--cocoa);padding:0 0 clamp(5rem,12vh,9rem)}
.proc__g{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(1.75rem,4vw,4rem);
  padding-top:clamp(2rem,5vh,3.5rem)}
.proc__g>div+div{padding-left:clamp(1.25rem,3vw,3rem)}
.proc__l{margin-top:1.5rem}
.proc__l dt{font:800 1.08rem/1.2 Inter,sans-serif;letter-spacing:-.02em;margin-top:1.3rem}
.proc__l dd{margin:.3rem 0 0;font-size:.95rem;opacity:.74;max-width:40ch}
/* same gold star bullet as the service deliverables, so the two sections rhyme */
.proc__u{margin-top:1.5rem;display:grid;gap:.72rem}
.proc__u li{position:relative;padding-left:2.4rem;font-size:1rem;line-height:1.35;opacity:.84}
.proc__u li::before{content:"";position:absolute;left:0;top:-.14em;width:1.65em;height:1.65em;
  background:url("assets/img/star-gold-sm.png") center/contain no-repeat}

/* ============ 09 WORK ============ */
.work{background:var(--flash);color:var(--bone);padding:clamp(4.5rem,12vh,9rem) 0 clamp(4rem,10vh,8rem);overflow:hidden}
.work .h2{margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.work__g{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.85rem,1.6vw,1.5rem)}
.wc{position:relative;will-change:transform}
.wc__lab{font:900 clamp(.95rem,1.5vw,1.5rem)/1 Poppins,sans-serif;letter-spacing:-.04em;
  margin-bottom:.6rem;display:block}
.wc:nth-child(4n+1) .wc__lab{color:var(--sky)}
.wc:nth-child(4n+2) .wc__lab{color:var(--cocoa)}
.wc:nth-child(4n+3) .wc__lab{color:var(--bone)}
.wc:nth-child(4n+4) .wc__lab{color:var(--paper)}
.wc__m{position:relative;aspect-ratio:9/16;border-radius:var(--r-m);overflow:hidden;background:rgba(0,0,0,.2);
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out)}
.wc__m img,.wc__m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.92);transition:filter .5s var(--e-out),opacity .45s}
.wc__m video{opacity:0}
.wc.is-play .wc__m{transform:translateY(-8px) scale(1.03);box-shadow:0 30px 60px rgba(0,0,0,.3)}
.wc.is-play .wc__m img{opacity:0}
.wc.is-play .wc__m video{opacity:1}
.wc.is-play .wc__m img,.wc.is-play .wc__m video{filter:saturate(1)}
.more{display:inline-flex;align-items:center;gap:.5rem;margin-top:clamp(2rem,5vh,3.5rem);
  text-decoration:none;font:500 1.05rem/1 Outfit,sans-serif;position:relative;padding-bottom:.35rem}
.more::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform-origin:right;transition:transform .3s var(--e-io)}
.more:hover::after{transform:scaleX(0)}
.more span{transition:transform .3s var(--e-out)}
.more:hover span{transform:translateX(5px)}

/* ============ VIDEO LIGHTBOX ============ */
.lb{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:clamp(1rem,4vh,3rem);
  background:rgba(10,7,5,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0}
.lb[hidden]{display:none}
.lb__f{margin:0;display:flex;flex-direction:column;align-items:center;gap:.9rem;max-height:100%}
.lb__v{max-height:min(82svh,900px);max-width:min(92vw,520px);width:auto;border-radius:var(--r-m);
  background:#000;box-shadow:0 40px 110px rgba(0,0,0,.6)}
.lb__c{display:flex;align-items:center;gap:1.1rem;color:var(--bone);
  font:500 .85rem/1 Inter,sans-serif;letter-spacing:0}
.lb__m{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--bone);opacity:.6;
  border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity .25s}
.lb__m:hover{opacity:1}
.lb__x{position:absolute;top:clamp(.9rem,3vh,2rem);right:clamp(.9rem,3vw,2rem);z-index:1;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,253,246,.3);color:var(--bone);
  display:grid;place-items:center;font-size:15px;transition:background-color .3s,color .3s,transform .3s}
.lb__x:hover{background:var(--bone);color:var(--ink);transform:rotate(90deg)}
body.lb-open{overflow:hidden}

/* the work card gains an affordance now that it is clickable */
.wc__play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none;opacity:0;
  transition:opacity .35s var(--e-out)}
.wc__play i{width:58px;height:58px;border-radius:50%;background:rgba(255,253,246,.92);
  display:grid;place-items:center;transform:scale(.8);transition:transform .35s var(--e-back)}
.wc__play i::after{content:"";border-left:14px solid var(--ink);border-block:9px solid transparent;margin-left:4px}
.wc:hover .wc__play,.wc:focus-visible .wc__play{opacity:1}
.wc:hover .wc__play i{transform:scale(1)}
.wc__m{cursor:pointer}
/* photo-only cards have nothing to open */
.wc.is-still .wc__play{display:none}
.wc.is-still .wc__m{cursor:default}

/* ============ 11 CTA ============ */
.cta{position:relative;background:var(--cocoa);color:var(--paper);min-height:100svh;display:flex;align-items:center;
  padding:clamp(5rem,12vh,9rem) var(--gutter);overflow:hidden}
.cta__g{max-width:var(--max);margin-inline:auto;width:100%;display:grid;
  grid-template-columns:1.25fr .75fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.cta__h{font:900 clamp(2.6rem,9vw,9rem)/.86 Poppins,sans-serif;letter-spacing:-.05em;color:var(--sky)}
.cta__sub{margin-top:1.6rem;max-width:44ch;font-size:clamp(1rem,1.3vw,1.18rem);opacity:.84}
.cta__btns{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

/* Social marks: outlined to match the ghost button, filling on hover like the
   rest of the site's links. Sized to a 48px tap target. */
.social{position:relative;z-index:2;display:flex;gap:.7rem;margin-top:1.2rem}
.social a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(246,234,220,.42);color:var(--paper);
  transition:background-color .35s var(--e-out),color .35s var(--e-out),
             border-color .35s var(--e-out),transform .35s var(--e-back)}
.social svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7}
.social svg .dot{fill:currentColor;stroke:none}
.social svg .fill{fill:currentColor;stroke:none}
.social a:hover,.social a:focus-visible{background:var(--paper);color:var(--cocoa);
  border-color:var(--paper);transform:translateY(-3px)}
.cta__r{position:relative}
.cta__fig{overflow:hidden;border-radius:var(--r-m)}
.cta__fig img{width:100%;aspect-ratio:3/4;object-fit:cover}
.cta__pola{position:absolute;left:-14%;top:6%;width:clamp(78px,8.5vw,128px);aspect-ratio:3/4;object-fit:cover;
  border-radius:var(--r-s);transform:rotate(-4deg);box-shadow:0 18px 46px rgba(0,0,0,.4);z-index:3}
.cta__c{position:relative;z-index:2;display:flex;flex-direction:column;gap:.3rem;margin-top:1.5rem;
  font:500 .9rem/1.65 Inter,sans-serif;letter-spacing:0;font-style:normal}
.cta__c a{text-decoration:none;opacity:.78;transition:opacity .25s}
.cta__c a:hover{opacity:1}
.star--cta1{right:-3%;bottom:-5%;width:clamp(90px,14vw,230px);animation:spin 80s linear infinite;opacity:.9}

/* ============ 12 FOOTER ============ */
.foot{background:var(--ink);color:var(--bone);padding:clamp(2.5rem,6vh,4.5rem) 0 2rem;overflow:hidden}
.mq--out b{color:transparent;-webkit-text-stroke:1px rgba(255,253,246,.5);
  /* outlined type needs positive tracking: at this size the strokes of adjacent
     letters collide and the word turns to mush */
  font-size:clamp(3rem,11vw,11rem);letter-spacing:.005em;text-transform:lowercase;
  background:none;padding-inline:.06em}
.mq--out b:hover{-webkit-text-stroke-color:var(--flash)}
.foot__b{max-width:var(--max);margin:clamp(2rem,5vh,3.5rem) auto 0;padding-inline:var(--gutter);
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
  border-top:1px solid rgba(255,253,246,.14);padding-top:1.5rem}
.foot__s{display:flex;gap:1.5rem}
.foot__s a,.foot__top{font:500 .85rem/1 Inter,sans-serif;letter-spacing:0;
  text-decoration:none;opacity:.75;transition:opacity .25s}
.foot__s a:hover,.foot__top:hover{opacity:1;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.foot__m{font:500 .8rem/1 Inter,sans-serif;letter-spacing:0;opacity:.5;
  font-variant-numeric:tabular-nums}

.ns{display:none;padding-inline:var(--gutter);font:500 clamp(1rem,1.6vw,1.4rem)/1.5 Outfit,sans-serif;max-width:60ch}
.ns--brands{color:var(--bone);padding-block:.5rem}
.ns a{color:inherit}

/* ============ TABLET ============ */
@media (max-width:1024px){
  .work__g{grid-template-columns:repeat(3,1fr)}
  .proc__g{grid-template-columns:1fr 1fr}
  .proc__g>div:nth-child(3){grid-column:1/-1;padding-left:0;padding-top:1.75rem}
  .cta__g{grid-template-columns:1fr .8fr}
}

/* ============ MOBILE ============ */
@media (max-width:640px){
  .hero{padding-top:4.5rem;padding-bottom:4rem}
  .hero__frame{height:min(46svh,440px)}
  .hero__h{margin-top:-.16em;letter-spacing:-.04em}
  .hero__sub{margin-top:.85rem;font-size:.95rem}
  /* no room for the second frame at this width — it reads as a crop, not a shoot */
  /* one live clip only on a phone: three would be unreadable and three
     decoders would stutter */
  .star--a{width:58px;right:2%}.star--c{display:none}
  .beat,.beat--rev{grid-template-columns:1fr;gap:1.25rem}
  .beat--rev>.beat__f{order:0}
  .story__line{display:none}
  .work__g{grid-template-columns:repeat(2,1fr)}
  .proc__g{grid-template-columns:1fr}
  .proc__g>div+div{padding-left:0;padding-top:1.75rem}
  .cta__g{grid-template-columns:1fr}
  .cta__r{max-width:320px}
  .cta__pola{left:auto;right:-8%;bottom:22%}
  .foot__b{flex-direction:column;align-items:flex-start}
  .grain{opacity:.04;animation:none}
  .navface{display:none}
  .reel__c{width:92px}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .grain{animation:none}
  .cur{display:none!important}
  body.has-cur{cursor:auto}
  .beat__f{clip-path:none}
  .beat__f img{transform:none}
  .mission__t span.w{opacity:1!important}
  .mission__k{opacity:1!important}
}