/* LAVAH MEDIA — site styles v2 */
:root{
  --paper:#f2eee6;
  --paper-2:#e6e0d4;
  --ink:#171614;
  --ink-2:#4a4741;
  --blue:#1b4a63;      /* sea blue */
  --blue-deep:#153b50;
  --blue-tint:#a9c4d2;
  --terra:#b6573a;     /* terracotta */
  --terra-deep:#9a4730;
  --terra-tint:#ecc9b8;
  --night:#121211;
  --bg:var(--paper);
  --fg:var(--ink);
  --display:'Syne','Arial Black',Impact,sans-serif;
  --body:'Manrope','Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(20px,4.5vw,72px);
  --ease:cubic-bezier(.22,1,.36,1);
  --h1:clamp(46px,9.6vw,164px);
  --h2:clamp(40px,6.6vw,112px);
  --h3:clamp(20px,1.7vw,26px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.55;transition:background 1.2s var(--ease),color 1.2s var(--ease);overflow-x:hidden}
body[data-mood="film"]{--bg:var(--blue);--fg:var(--paper)}
body[data-mood="commercial"]{--bg:var(--terra);--fg:var(--paper)}
body[data-mood="dark"]{--bg:var(--night);--fg:var(--paper)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.07;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:.9;text-transform:uppercase;margin:0;text-wrap:balance}
h1{font-size:var(--h1)}h2{font-size:var(--h2)}h3{font-size:var(--h3);letter-spacing:-.01em;line-height:1.1}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;opacity:.7}
.wrap{padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.rule{border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.lede{font-size:clamp(16px,1.3vw,19px);line-height:1.6;max-width:46ch;margin:0;opacity:.88}
.statement{font-family:var(--display);font-weight:700;text-transform:none;letter-spacing:-.02em;line-height:1.08;font-size:clamp(24px,3.2vw,46px);max-width:24ch;margin:0}
.statement em{font-style:normal;color:var(--terra)}
body[data-mood="film"] .statement em{color:var(--blue-tint)}
@media (max-width:820px){.grid{grid-template-columns:1fr}.grid>*{grid-column:auto!important}}

/* ---------- cursor ---------- */
.cursor,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:difference}
.cursor{width:7px;height:7px;background:#fff}
.cursor-ring{width:34px;height:34px;border:1px solid #fff;transition:width .35s var(--ease),height .35s var(--ease)}
body.hover .cursor-ring{width:68px;height:68px}
.cursor-label{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#fff;mix-blend-mode:difference;opacity:0;transition:opacity .2s}
body.hover-play .cursor-label{opacity:1}
body.hover-play .cursor-ring{width:96px;height:96px}
@media (hover:none),(pointer:coarse){.cursor,.cursor-ring,.cursor-label{display:none}}

/* ---------- page curtain (nav transitions) ---------- */
.curtain{position:fixed;inset:0;z-index:8000;pointer-events:none;display:grid;grid-template-columns:repeat(5,1fr)}
.curtain i{display:block;background:var(--curtain,var(--blue));transform:scaleY(0);transform-origin:bottom}
.curtain.in i{animation:curtIn .55s var(--ease) forwards}
.curtain.out i{transform-origin:top;animation:curtOut .55s var(--ease) forwards}
.curtain i:nth-child(2){animation-delay:.05s}.curtain i:nth-child(3){animation-delay:.1s}.curtain i:nth-child(4){animation-delay:.15s}.curtain i:nth-child(5){animation-delay:.2s}
@keyframes curtIn{to{transform:scaleY(1)}}
@keyframes curtOut{from{transform:scaleY(1)}to{transform:scaleY(0)}}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:22px var(--gutter);mix-blend-mode:difference;color:#fff}
.nav .logo img{width:clamp(84px,8.5vw,118px);height:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(18px,3vw,40px)}
.nav li a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;position:relative;padding:6px 0}
.nav li a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:#fff;transition:right .4s var(--ease)}
.nav li a:hover::after{right:0}
@media (max-width:640px){.nav ul{gap:14px}.nav li a{font-size:10px;letter-spacing:.12em}.nav li:nth-child(3){display:none}}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#0d0d0c;color:#fff}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:heroZoom 14s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero-media .yt{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.hero-media.playing .yt{opacity:1}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.15) 70%,rgba(0,0,0,.6) 100%)}
.hero-body{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gutter) clamp(28px,5vh,56px)}
.hero h1{color:#fff;text-shadow:0 30px 90px rgba(0,0,0,.45)}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.hero h1 .l{display:inline-block;transform:translateY(110%);animation:rise 1.1s var(--ease) forwards}
@keyframes rise{to{transform:translateY(0)}}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(18px,3vh,32px);opacity:0;animation:fade 1s 1s ease forwards}
@keyframes fade{to{opacity:1}}
.hero-foot p{margin:0;max-width:46ch;font-size:clamp(14px,1.15vw,17px);line-height:1.5;color:rgba(255,255,255,.9)}
.sound{display:flex;align-items:center;gap:10px;background:none;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:999px;padding:10px 16px;font:700 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s;flex-shrink:0}
.sound:hover{background:#fff;color:#111}
.sound .bars{display:flex;gap:2px;align-items:flex-end;height:12px}
.sound .bars i{display:block;width:2px;height:4px;background:currentColor;transform-origin:bottom}
.sound.on .bars i{animation:eq .7s ease-in-out infinite alternate}
.sound .bars i:nth-child(2){animation-delay:.15s}.sound .bars i:nth-child(3){animation-delay:.3s}
@keyframes eq{to{height:12px}}
@media (max-width:640px){.hero-foot{flex-direction:column;align-items:flex-start}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;white-space:nowrap;padding:16px 0;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.marquee .track{display:inline-flex;animation:marq 40s linear infinite}
.marquee span{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(20px,2.6vw,34px);letter-spacing:-.02em;padding-right:1.2em}
.marquee span::after{content:"";display:inline-block;width:.35em;height:.35em;border-radius:50%;background:currentColor;vertical-align:middle;margin-left:1.2em;opacity:.55}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee:hover .track{animation-play-state:paused}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding-block:clamp(80px,13vh,170px)}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:end;margin-bottom:clamp(40px,7vh,88px)}
.sec-head>div:first-child{grid-column:span 8}
.sec-head>div:last-child{grid-column:9 / span 4}
.sec-head .eyebrow{display:block;margin-bottom:14px}
.sec-head h2{overflow-wrap:anywhere}
@media (max-width:820px){.sec-head{grid-template-columns:1fr}.sec-head>div{grid-column:auto!important}}

/* intro */
.intro .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(48px,8vh,96px);padding-top:28px}
.intro .facts div{display:flex;flex-direction:column;gap:8px}
.intro .facts b{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,52px);letter-spacing:-.03em;line-height:1}
.intro .facts span{font-size:14px;opacity:.75;max-width:26ch}
@media (max-width:820px){.intro .facts{grid-template-columns:1fr;gap:24px}}

/* choice */
.choice{display:grid;grid-template-columns:1fr 1fr;min-height:76vh}
.choice a{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,3.5vw,56px);color:#fff;isolation:isolate;min-height:380px}
.choice a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.06);transition:transform 1.6s var(--ease)}
.choice a::before{content:"";position:absolute;inset:0;z-index:-1}
.choice a.film::before{background:linear-gradient(180deg,rgba(27,74,99,.1),rgba(27,74,99,.88))}
.choice a.commercial::before{background:linear-gradient(180deg,rgba(182,87,58,.05),rgba(182,87,58,.88))}
.choice a:hover img{transform:scale(1)}
.choice a h2{font-size:clamp(44px,5.8vw,104px);margin:8px 0 12px}
.choice a p{margin:0;max-width:40ch;font-size:clamp(14px,1.05vw,16px);opacity:.92}
.choice a .arrow{position:absolute;top:clamp(24px,3.5vw,56px);right:clamp(24px,3.5vw,56px);width:54px;height:54px;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:grid;place-items:center;transition:transform .5s var(--ease),background .4s,color .4s}
.choice a:hover .arrow{transform:rotate(45deg);background:#fff;color:#111}
@media (max-width:820px){.choice{grid-template-columns:1fr}}

/* partners */
.partners{padding-block:clamp(44px,7vh,84px);overflow:hidden}
.partners .eyebrow{display:block;text-align:center;margin-bottom:30px}
.logos{display:flex;gap:clamp(44px,5.5vw,88px);width:max-content;animation:marq 70s linear infinite;align-items:center}
.logos img{height:clamp(38px,4.2vw,58px);width:auto;filter:grayscale(1) contrast(1.05);opacity:.72;transition:filter .4s,opacity .4s}
.logos img:hover{filter:none;opacity:1}
body[data-mood="film"] .logos img,body[data-mood="dark"] .logos img,body[data-mood="commercial"] .logos img{filter:grayscale(1) brightness(0) invert(1);opacity:.85}
.partners:hover .logos{animation-play-state:paused}

/* cols */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);padding-top:28px}
.cols h3{margin:10px 0 10px}
.cols p{margin:0;font-size:15px;line-height:1.6;opacity:.85;max-width:34ch}
@media (max-width:820px){.cols{grid-template-columns:1fr;gap:28px}}

/* film list */
.films{list-style:none;margin:clamp(56px,9vh,110px) 0 0;padding:0;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.films li{border-bottom:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.films a{display:grid;grid-template-columns:3ch 1fr auto;gap:24px;align-items:center;padding:clamp(18px,2.8vh,30px) 0;transition:padding-left .5s var(--ease)}
.films a:hover{padding-left:20px}
.films .idx{font-size:11px;letter-spacing:.16em;opacity:.55;font-variant-numeric:tabular-nums}
.films .title{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(24px,3.4vw,52px);line-height:.95}
.films .meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.7;text-align:right;white-space:nowrap}
.films .meta b{display:block;opacity:1}
.films .thumb{display:none}
.peek{position:fixed;z-index:40;width:clamp(260px,26vw,420px);aspect-ratio:16/9;pointer-events:none;overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.9) rotate(-2deg);transition:opacity .35s,transform .5s var(--ease);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.peek.show{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-2deg)}
.peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.peek img.on{opacity:1}
@media (hover:none),(max-width:820px){
  .peek{display:none}
  .films a{grid-template-columns:1fr;gap:12px}
  .films .thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;order:-1}
  .films .meta{text-align:left}.films .idx{display:none}.films a:hover{padding-left:0}
}
/* film extras: reach + festivals */
.reach{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(56px,9vh,110px);padding-top:28px}
.reach>div{grid-column:span 6}
.reach .eyebrow{display:block;margin-bottom:16px}
.reach ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 12px}
.reach li{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(16px,1.5vw,22px);padding:10px 16px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:999px;transition:background .3s,color .3s}
.reach li:hover{background:var(--paper);color:var(--blue)}
.reach .laurels{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center}
.reach .laurels img{height:64px;width:auto;opacity:.9}
.reach .note{font-size:13px;opacity:.65;margin:12px 0 0}
@media (max-width:820px){.reach>div{grid-column:span 12}}

/* big stills band (film) */
.stills{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);margin-top:clamp(56px,9vh,110px)}
.stills figure{margin:0;overflow:hidden;position:relative}
.stills img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.stills figure:hover img{transform:scale(1.04)}
.stills .s1{grid-column:span 7;aspect-ratio:16/9}
.stills .s2{grid-column:span 5;aspect-ratio:4/3;align-self:end}
.stills figcaption{position:absolute;left:16px;bottom:14px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
@media (max-width:820px){.stills .s1,.stills .s2{grid-column:span 12}}

/* ---------- bridge: circular wipe between film and commercial ---------- */
.bridge{position:relative;height:220vh}
.bridge .stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.bridge .layer{position:absolute;inset:0}
.bridge .layer img{width:100%;height:100%;object-fit:cover}
.bridge .layer.b{clip-path:circle(0% at 50% 50%);will-change:clip-path}
.bridge .layer.b::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(182,87,58,.55))}
.bridge .layer.a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(27,74,99,.6))}
.bridge .copy{position:relative;z-index:2;text-align:center;color:#fff;padding:0 var(--gutter);width:100%}
.bridge .copy h2{font-size:clamp(32px,6vw,104px);max-width:14ch;margin:0 auto;text-shadow:0 20px 60px rgba(0,0,0,.4)}
.bridge .copy .line{display:block;overflow:hidden}
.bridge .copy .line span{display:block;transition:transform .9s var(--ease),opacity .9s}
.bridge .copy .l2 span{transform:translateY(110%);opacity:0}
.bridge.flip .copy .l1 span{transform:translateY(-110%);opacity:0}
.bridge.flip .copy .l2 span{transform:none;opacity:1}
.bridge .copy .l1,.bridge .copy .l2{position:relative}
.bridge .copy .l2{margin-top:-1em}
@media (max-width:820px){.bridge{height:180vh}}

/* ---------- commercial: stacked service cards ---------- */
.stack{margin-top:clamp(40px,6vh,72px)}
.card{position:sticky;top:clamp(80px,12vh,120px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px);background:var(--paper);color:var(--ink);padding:clamp(20px,2.6vw,36px);margin-bottom:clamp(16px,3vh,32px);box-shadow:0 -10px 40px rgba(0,0,0,.12);transform-origin:top center;will-change:transform}
.card:nth-child(2){top:calc(clamp(80px,12vh,120px) + 24px)}
.card:nth-child(3){top:calc(clamp(80px,12vh,120px) + 48px)}
.card .pic{grid-column:span 7;overflow:hidden;aspect-ratio:16/10}
.card .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.card:hover .pic img{transform:scale(1.04)}
.card .txt{grid-column:span 5;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.card .txt .eyebrow{color:var(--terra)}
.card h3{font-size:clamp(26px,3vw,44px);letter-spacing:-.02em;line-height:1;margin:10px 0 0}
.card p{margin:0;font-size:15px;line-height:1.6;opacity:.85;max-width:38ch}
.card ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.card li{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:8px 12px;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:999px}
@media (max-width:820px){.card{position:relative;top:auto!important;grid-template-columns:1fr}.card .pic,.card .txt{grid-column:auto}}
.services{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:clamp(40px,6vh,72px);padding-top:28px}
.services span{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(15px,1.4vw,21px);padding:10px 16px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:999px}
.reel{margin-top:clamp(48px,7vh,88px);position:relative;aspect-ratio:16/9;max-height:78vh;overflow:hidden;background:#111;cursor:pointer;isolation:isolate}
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8;transition:transform 1.6s var(--ease),opacity .6s}
.reel:hover img{transform:scale(1.03);opacity:.95}
.reel .play{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.reel .play span{width:clamp(76px,9vw,130px);height:clamp(76px,9vw,130px);border-radius:50%;border:1px solid rgba(255,255,255,.7);display:grid;place-items:center;backdrop-filter:blur(6px);transition:transform .5s var(--ease),background .4s}
.reel:hover .play span{transform:scale(1.08);background:rgba(255,255,255,.14)}
.reel .cap{position:absolute;left:clamp(18px,3vw,40px);bottom:clamp(18px,3vw,40px);color:#fff}
.reel .cap b{display:block;font-family:var(--display);font-size:clamp(20px,2.6vw,40px);text-transform:uppercase;letter-spacing:-.02em;line-height:1}

/* ---------- about ---------- */
.founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:clamp(48px,7vh,96px);padding-top:32px}
.founder h3{font-size:clamp(26px,2.8vw,42px);margin:10px 0 6px}
.founder .eyebrow{display:block;margin-bottom:12px}
.founder p{margin:0;max-width:46ch;font-size:15px;line-height:1.65;opacity:.85}
.founder .initials{font-family:var(--display);font-weight:800;font-size:clamp(56px,7vw,110px);line-height:1;letter-spacing:-.05em;color:inherit}
@media (max-width:820px){.founders{grid-template-columns:1fr}}
.strip{margin-top:clamp(56px,9vh,110px);display:flex;gap:clamp(12px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;-webkit-overflow-scrolling:touch;cursor:grab}
.strip figure{margin:0;flex:0 0 clamp(260px,30vw,480px);scroll-snap-align:start}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover}
.strip figcaption{margin-top:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.65}
.strip::-webkit-scrollbar{height:3px}.strip::-webkit-scrollbar-thumb{background:color-mix(in srgb,currentColor 35%,transparent)}
.strip-head{display:flex;justify-content:space-between;align-items:end;margin-top:clamp(56px,9vh,110px)}
.strip-head+.strip{margin-top:20px}

/* ---------- contact ---------- */
.contact{padding-block:clamp(80px,14vh,180px) clamp(40px,6vh,64px)}
.contact h2{font-size:clamp(40px,8.6vw,150px);overflow-wrap:anywhere}
.contact h2 a{position:relative;display:inline-block}
.contact h2 a::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:.06em;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.contact h2 a:hover::after{transform:scaleX(1)}
.contact-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(48px,7vh,96px);padding-top:32px}
.contact-grid>div{grid-column:span 3}
.contact-grid .eyebrow{display:block;margin-bottom:10px}
.contact-grid a,.contact-grid p{font-size:clamp(15px,1.2vw,19px);margin:0;font-weight:600;display:block}
.contact-grid a{border-bottom:1px solid transparent;transition:border-color .3s;width:max-content;max-width:100%}
.contact-grid a:hover{border-color:currentColor}
.contact-grid a+a{margin-top:8px}
@media (max-width:820px){.contact-grid>div{grid-column:span 6}}
@media (max-width:480px){.contact-grid>div{grid-column:span 12}}
footer{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:36px var(--gutter) 28px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.65}
.big-logo{padding:clamp(24px,4vh,48px) var(--gutter) 0}
.big-logo img{width:100%;height:auto}
@media (max-width:640px){footer{flex-direction:column;align-items:flex-start}}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:9500;background:rgba(10,10,10,.96);display:grid;place-items:center;padding:var(--gutter);opacity:0;pointer-events:none;transition:opacity .4s}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox .frame{width:min(1200px,100%);aspect-ratio:16/9;background:#000;transform:scale(.96);transition:transform .5s var(--ease)}
.lightbox.open .frame{transform:scale(1)}
.lightbox iframe{width:100%;height:100%;border:0;display:block}
.lightbox .close{position:absolute;top:24px;right:var(--gutter);background:none;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:999px;padding:10px 16px;font:700 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.lightbox .close:hover{background:#fff;color:#111}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}
.mask{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease)}
.mask.in{clip-path:inset(0 0 0 0)}
.no-js .rv,.no-js .mask{opacity:1;transform:none;clip-path:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .hero h1 .l{transform:none}.hero-foot{opacity:1}.rv,.mask{opacity:1;transform:none;clip-path:none}
  .marquee .track,.logos{animation:none}
  .bridge .layer.b{clip-path:none}
}

/* ---------- v3 additions ---------- */
p,li,figcaption,.lede,.statement{text-wrap:pretty}
.partners{background:var(--paper);color:var(--ink)}
body[data-mood="film"] .logos img,body[data-mood="dark"] .logos img,body[data-mood="commercial"] .logos img{filter:grayscale(1) contrast(1.05);opacity:.72}
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.7);color:#fff;border-radius:999px;padding:14px 22px;font:700 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;transition:background .3s,color .3s,transform .4s var(--ease)}
.btn:hover{background:#fff;color:#111;transform:translateY(-2px)}
.btn-ink{border-color:var(--paper);color:var(--paper)}
.btn-ink:hover{background:var(--paper);color:var(--terra)}
.hero-cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.cta-row{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;margin-top:clamp(56px,9vh,110px);padding-top:32px;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.cta-row .statement{max-width:26ch;font-size:clamp(22px,2.6vw,38px)}
.reach>div{grid-column:span 12}
.reach .laurels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 16px}
.laurel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.laurel .wreath{display:flex;align-items:center;justify-content:center;gap:4px;height:110px}
.laurel .wreath img{height:100px;width:auto;opacity:.95}
.laurel .wreath img.r{transform:scaleX(-1)}
.laurel .wreath b{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:12px;line-height:1.15;letter-spacing:.02em;max-width:9ch;text-wrap:balance}
.laurel .award{font-size:12px;opacity:.75;max-width:20ch}
.contact h2{font-size:clamp(36px,7vw,124px)}
:root{--h2:clamp(40px,6vw,104px)}
@media (max-width:820px){.reach .laurels{grid-template-columns:repeat(2,minmax(0,1fr))}.laurel .wreath{height:96px}.laurel .wreath img{height:86px}}
.reach .laurels li,.reach .laurels li:hover{border:0;padding:0;border-radius:0;background:none;color:inherit;font:inherit;letter-spacing:0;text-transform:none}
/* ---------- v4 ---------- */
[data-fit]{white-space:nowrap}
.sec-head .lede{max-width:52ch}
#film .sec-head>div:first-child{grid-column:span 12}
.opener{position:relative;height:88vh;min-height:520px;overflow:hidden;isolation:isolate}
.opener img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.06);transition:transform 6s var(--ease)}
.opener.in img{transform:scale(1)}
.opener::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,74,99,.1) 0%,rgba(0,0,0,0) 40%,rgba(27,74,99,.75) 100%)}
.opener-body{position:absolute;inset:auto 0 0 0;z-index:2;color:#fff;padding-bottom:clamp(28px,5vh,56px)}
.opener-body .eyebrow{display:block;margin-bottom:12px;opacity:.9}
.opener-body h2{font-size:clamp(64px,14vw,240px);text-shadow:0 30px 90px rgba(0,0,0,.45)}
.reach .laurels{grid-template-columns:repeat(4,minmax(0,1fr))}
/* ---------- v5 ---------- */
.sec-head h2{overflow-wrap:normal}
.stills{grid-template-columns:repeat(3,minmax(0,1fr))}
.stills figure{aspect-ratio:16/9;grid-column:auto!important;align-self:auto!important}
@media (max-width:820px){.stills{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.stills{grid-template-columns:1fr}}
.reel{max-width:1180px;margin-left:auto;margin-right:auto}
.hero-foot p{max-width:60ch}
.intro .facts span{max-width:30ch}
.laurel .wreath b{font-size:11px;max-width:8.5ch}
.laurel .wreath{gap:2px}
/* ---------- v6 ---------- */
:root{--body:'Instrument Sans','Helvetica Neue',Arial,sans-serif}
body{font-size:17px;letter-spacing:.005em}
.hero-body{align-items:flex-start;text-align:left}
.hero h1{text-align:left;font-size:clamp(20px,3.2vw,54px)}
.hero-foot{flex-direction:column;align-items:flex-start;gap:22px}
.hero-foot p{max-width:58ch;text-wrap:balance;font-size:clamp(15px,1.25vw,19px);line-height:1.55}
.hero-cta{justify-content:flex-start}
.lede{font-size:clamp(16px,1.25vw,19px)}
.services{justify-content:center}
.cta-row{margin-top:clamp(40px,7vh,90px)}
.laurel .wreath b{font-size:7px;max-width:90px;letter-spacing:.01em;line-height:1.2;overflow:visible;display:block;word-break:normal;overflow-wrap:normal;hyphens:none;white-space:normal;text-wrap:auto}
.laurel .wreath{gap:1px;height:auto;min-height:100px}
.laurel .wreath img{height:90px;flex-shrink:0}
.strip img{object-position:50% 30%}
.card p,.cols p,.founder p{font-size:16px}
.reach .laurels{margin-top:4px}
.btn-ink{border-color:currentColor;color:inherit}
.btn-ink:hover{background:currentColor}
.btn-ink:hover span{color:var(--bg)}
/* v7: founder styling */
.founder-label{color:inherit!important;opacity:1!important}
.founder h3{color:inherit}
.founder h3 .fn,.founder h3 .ln{display:block}
@media (max-width:820px){.laurel .wreath b{font-size:7px;max-width:80px}.laurel .wreath{min-height:86px}.laurel .wreath img{height:78px}}