/* Contiloe Pictures — the group's main site. Shares the Contiloe type system (Funnel Sans, Geist, Geist Mono), the grain,
   the cursor and the red with Contiloe AI Studios and Contiloe Studio; its own palette is cinema black and warm ivory. */
:root{
  --ink:#0b0a0a; --ink2:#151313; --ink3:#211e1d;
  --paper:#f3eee7; --paper2:#e8e1d6;
  --red:#d71f27; --red2:#b8161d; --hot:#ff5148; --gold:#c9a25a;
  --soft:#f4f1ec; --soft2:#ebe6de;
  --bg:#fff; --bg2:var(--soft); --fg:#141110; --mute:rgba(20,17,16,.7); --dim:rgba(20,17,16,.48); --line:rgba(20,17,16,.13);
  --accent:var(--red2);
  --sans:"Funnel Sans",system-ui,sans-serif; --body:"Geist",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
  --pad:clamp(16px,3.4vw,96px); --ease:cubic-bezier(.2,.7,.1,1); --expo:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:#fff;color:var(--fg);font-family:var(--body);font-weight:300;font-size:15px;line-height:1.6;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
em{font-style:italic}
ol,ul{list-style:none}
.wrap{padding-left:var(--pad);padding-right:var(--pad);width:100%}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:400}
h1,h2,h3,h4{font-family:var(--sans);font-weight:300;letter-spacing:-.035em}
section{position:relative}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--red);color:#fff}
.skip{position:fixed;left:12px;top:-60px;z-index:400;padding:10px 16px;border-radius:99px;background:#fff;color:#000;font-family:var(--mono);font-size:11px;text-transform:uppercase}
.skip:focus{top:12px}
.hp{position:absolute;left:-9999px}

/* grain + cursor (shared with the sister sites) */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,2%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}}
.cursor{position:fixed;left:0;top:0;z-index:350;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,opacity .3s}
.cursor span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#000;opacity:0;transition:opacity .2s}
.cursor.big{width:78px;height:78px;margin:-39px 0 0 -39px;mix-blend-mode:normal;background:var(--red)}
.cursor.big span{opacity:1;color:#fff}
.cursor.off{opacity:0}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- opening ident: the emblem draws itself, then CONTILOE rises into place ---------- */
.ident{position:fixed;inset:0;z-index:300;background:var(--ink);display:grid;place-items:center;align-content:center;gap:28px;cursor:pointer;
  clip-path:inset(0 0 0 0);transition:clip-path 1s var(--expo),visibility 1s}
.ident.done{clip-path:inset(0 0 100% 0);visibility:hidden}
.ident__mark{width:min(460px,72vw)}
.ident__svg{display:block;width:100%;height:auto;overflow:visible}
.ident__emblem path{fill:transparent;stroke-width:1.6;stroke-dasharray:var(--l,600);stroke-dashoffset:var(--l,600);
  animation:draw 1.15s cubic-bezier(.6,.05,.25,1) forwards,fillin .45s ease forwards;animation-delay:calc(var(--i,0) * 14ms),calc(1.05s + var(--i,0) * 6ms)}
.ident__emblem .r{stroke:#ff2a22;--f:#e00607}
.ident__emblem .w{stroke:#fff;--f:#fff}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{fill:var(--f);stroke-width:0}}
.ident__name{opacity:0;transform:translateY(26px);animation:rise .9s var(--expo) 1.3s forwards}
@keyframes rise{to{opacity:1;transform:none}}
.ident__sub{color:rgba(255,255,255,.55);letter-spacing:.32em;opacity:0;animation:rise .8s var(--expo) 1.7s forwards;transform:translateY(10px)}
.ident:not(.run) *{animation-play-state:paused}

/* ---------- header ---------- */
.nav{--nf:#fff;--nd:rgba(255,255,255,.78);--ns:rgba(255,255,255,.22);--ni:#141110;position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:18px;padding:14px var(--pad);color:var(--nf);
  transition:background .5s,padding .5s,transform .6s var(--expo),backdrop-filter .5s}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(20,17,16,.08);opacity:0;transition:opacity .5s}
.nav.scrolled,.top-light .nav{--nf:#141110;--nd:rgba(20,17,16,.66);--ns:rgba(20,17,16,.18);--ni:#fff}
body.menu-open .nav{--nf:#fff;--nd:rgba(255,255,255,.78);--ns:rgba(255,255,255,.22);--ni:#141110}
.nav__logo .lg-light{display:none}
.nav.scrolled .lg-dark,.top-light .nav .lg-dark{display:none}
.nav.scrolled .lg-light,.top-light .nav .lg-light{display:block}
body.menu-open .nav .lg-dark{display:block}
body.menu-open .nav .lg-light{display:none}
.nav.scrolled{background:rgba(255,255,255,.84);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);padding-top:9px;padding-bottom:9px}
.nav.scrolled::after{opacity:1}
.nav.away{transform:translateY(-110%)}
body.menu-open .nav{transform:none;background:transparent;backdrop-filter:none}
.nav__logo img{height:clamp(44px,3.9vw,62px);width:auto;transition:height .5s var(--expo)}
.nav.scrolled .nav__logo img{height:clamp(38px,3.2vw,50px)}
.nav__links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav__link{position:relative;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:9px 13px;color:var(--nd);transition:color .3s;display:inline-flex;align-items:center;gap:5px}
.nav__link::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1px;background:var(--hot);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav__link:hover,.nav__link[aria-current]{color:var(--nf)}
.nav__link:hover::after,.nav__link[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav__link--ext::after{right:28px}
.nav__sep{width:1px;height:16px;background:var(--ns);margin:0 8px}
.ext{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .35s var(--ease)}
a:hover>.ext,a:hover .ext{transform:translate(2px,-2px)}
.nav__cta{margin-left:10px;padding:11px 18px;border-radius:99px;background:var(--red);color:#fff;font-size:10.5px;letter-spacing:.1em;transition:background .3s,color .3s;white-space:nowrap}
.nav__cta:hover,.nav__cta[aria-current]{background:var(--nf);color:var(--ni)}
.nav__burger{display:none;align-items:center;gap:10px;padding:8px 4px 8px 10px;position:relative;z-index:2}
.nav__burger i{display:grid;gap:6px;width:24px}
.nav__burger b{display:block;height:1.5px;background:currentColor;transition:transform .45s var(--ease)}
body.menu-open .nav__burger b:first-child{transform:translateY(3.75px) rotate(45deg)}
body.menu-open .nav__burger b:last-child{transform:translateY(-3.75px) rotate(-45deg)}
@media (max-width:1160px){.nav__links{display:none}.nav__burger{display:flex}.nav__cta{margin-left:auto}}
@media (max-width:480px){.nav__cta{padding:10px 13px;font-size:10px}.nav__burger span{display:none}}

/* menu: full-screen */
.menu{position:fixed;inset:0;z-index:99;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:110px 0 70px;overflow:auto;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--expo);visibility:hidden}
body.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible}
body.menu-open{overflow:hidden}
.menu::before{content:"";position:absolute;right:-12vw;bottom:-18vh;width:70vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(215,31,39,.28),transparent 62%);pointer-events:none}
.menu__in{position:relative;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(30px,6vw,120px);align-items:end}
.menu__list li{border-bottom:1px solid rgba(255,255,255,.12);overflow:hidden}
.menu__list a{display:flex;align-items:baseline;gap:20px;padding:6px 0;font-family:var(--sans);font-weight:300;font-size:clamp(32px,min(6vw,8.4vh),84px);letter-spacing:-.045em;line-height:1.08;
  transform:translateY(105%);transition:transform .8s var(--expo),color .3s;transition-delay:calc(var(--i,0) * 50ms)}
body.menu-open .menu__list a{transform:none}
.menu__list a:hover,.menu__list a[aria-current]{color:var(--hot)}
.menu__list a span{transition:transform .5s var(--ease)}
.menu__list a:hover span{transform:translateX(14px)}
.menu__list i{font-family:var(--mono);font-style:normal;font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.06em}
.menu__side{display:grid;gap:12px;opacity:0;transform:translateY(20px);transition:opacity .6s .3s,transform .8s var(--expo) .3s}
body.menu-open .menu__side{opacity:1;transform:none}
.menu__label{color:rgba(255,255,255,.45);margin-top:14px}
.menu__fam{display:block;padding:16px 18px;border:1px solid rgba(255,255,255,.14);border-radius:8px;transition:border-color .3s,background .3s}
.menu__fam:hover{border-color:var(--red);background:rgba(215,31,39,.1)}
.menu__fam b{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:400;font-size:20px;letter-spacing:-.02em}
.menu__fam small{display:block;color:rgba(255,255,255,.6);font-size:13px;margin-top:2px}
.menu__contact{font-family:var(--sans);font-size:18px;line-height:1.5}
.menu__contact a:hover{color:var(--hot)}
.menu__foot{position:absolute;bottom:22px;color:rgba(255,255,255,.4)}
@media (max-width:860px){.menu{justify-content:flex-start}.menu__in{grid-template-columns:1fr;align-items:start}.menu__foot{position:static;margin-top:30px}}

/* ---------- shared type + blocks ---------- */
.sec{padding:clamp(72px,13vh,170px) 0;background:var(--bg);color:var(--fg)}
.sec--ink,.bill,.menu,.sheet__panel,.spinbox,.lightbox,.gp{--bg:var(--ink);--bg2:var(--ink2);--fg:#f6f2ec;--mute:rgba(246,242,236,.72);--dim:rgba(246,242,236,.48);--line:rgba(246,242,236,.14);--accent:var(--hot)}
.sec--paper{--bg:#fff;--bg2:var(--soft);--fg:#141110;--mute:rgba(20,17,16,.72);--dim:rgba(20,17,16,.5);--line:rgba(20,17,16,.14);--accent:var(--red2)}
.sec--red{--bg:var(--red);--bg2:rgba(0,0,0,.14);--fg:#fff;--mute:rgba(255,255,255,.86);--dim:rgba(255,255,255,.66);--line:rgba(255,255,255,.3);--accent:#fff}
.sec--soft{--bg:var(--soft);--bg2:var(--soft2);--fg:#141110;--mute:rgba(20,17,16,.72);--dim:rgba(20,17,16,.5);--line:rgba(20,17,16,.14);--accent:var(--red2)}
.sec--paper ::selection,.sec--soft ::selection{background:var(--ink);color:#fff}
.sec--red ::selection{background:var(--ink);color:#fff}
.kicker{display:flex;align-items:center;gap:12px;color:var(--mute);margin-bottom:18px}
.rec{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red);animation:blink 1.2s steps(2) infinite;flex:none}
@keyframes blink{50%{opacity:.15}}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--fg);margin-bottom:20px}
.sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 60px;flex-wrap:wrap;margin-bottom:clamp(34px,6vh,70px)}
.sechead h2{font-size:clamp(34px,min(5vw,9vh),96px);line-height:1;letter-spacing:-.05em;max-width:15ch}
.sechead__aside{max-width:42ch;display:grid;gap:14px;justify-items:start}
.sechead__aside p{color:var(--mute);font-size:clamp(14px,1.05vw,17px)}
.more{display:inline-flex;align-items:center;gap:10px;color:var(--accent);position:relative;padding-bottom:3px}
.more::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(.3);transform-origin:left;transition:transform .5s var(--ease)}
.more:hover::after{transform:scaleX(1)}
.more span{transition:transform .4s var(--ease)}
.more:hover span{transform:translateX(4px)}
.statement{font-size:clamp(28px,min(4.1vw,7.4vh),74px);line-height:1.06;letter-spacing:-.045em;max-width:24ch}
.lede{font-family:var(--sans);font-size:clamp(19px,1.7vw,28px);line-height:1.3;letter-spacing:-.02em}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.split .w>span{display:inline-block;transform:translateY(108%);transition:transform 1.2s var(--expo)}
.split.in .w>span{transform:none}
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1.1s var(--expo)}
.reveal.in{opacity:1;transform:none}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:99px;font-size:10.5px;letter-spacing:.1em;background:var(--fg);color:var(--bg);transition:background .35s,color .35s,box-shadow .35s,transform .35s var(--ease);white-space:nowrap}
.btn svg{width:14px;height:14px;fill:currentColor}
.btn .ext{fill:none}
.btn:hover{transform:translateY(-2px)}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--fg);color:var(--bg)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--red);color:#fff}
.btn--line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btn--line:hover{background:var(--fg);color:var(--bg);box-shadow:inset 0 0 0 1px var(--fg)}
.arrow{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line);transition:background .3s,color .3s,box-shadow .3s}
.arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.arrow:hover{background:var(--red);color:#fff;box-shadow:none}
.play-badge{position:absolute;right:12px;bottom:12px;z-index:2;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:background .3s,transform .4s var(--ease)}
.play-badge svg{width:14px;height:14px;fill:#0d0d0d;margin-left:2px}
.has-video:hover .play-badge{background:var(--red);transform:scale(1.1)}
.has-video:hover .play-badge svg{fill:#fff}

/* silent Vimeo loops inside cards: cover the box whatever its shape */
.vloop{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .9s var(--ease);container-type:size}
.vloop.on{opacity:1}
.vloop iframe{position:absolute;top:50%;left:50%;width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);transform:translate(-50%,-50%) scale(var(--z,1));border:0}

/* ---------- Home: billboard ---------- */
.bill{height:100svh;min-height:620px;overflow:hidden;background:#000;color:#fff;display:flex;align-items:flex-end}
.bill__media{position:absolute;inset:0}
.bslide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease);container-type:size}
.bslide.on{opacity:1}
.bslide>img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 10s linear;filter:saturate(1.05)}
.bslide.on>img{transform:scale(1.02)}
.bslide .vloop iframe{width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw)}
.bill__shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 45%,rgba(0,0,0,.88) 88%,#000 100%),linear-gradient(90deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.2) 46%,rgba(0,0,0,0) 70%),radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.5))}
.bill::before,.bill::after{content:"";position:absolute;left:0;right:0;z-index:3;height:0;background:#000;transition:height 1.6s var(--expo) .2s;pointer-events:none}
.bill::before{top:0}.bill::after{bottom:0}
body.rolling .bill::before,body.rolling .bill::after{height:clamp(8px,2.6vh,28px)}
.bill__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:30px clamp(30px,5vw,90px);align-items:end;padding-bottom:clamp(70px,11vh,120px)}
.bill__title{font-size:clamp(46px,min(7.6vw,13.5vh),164px);line-height:.9;letter-spacing:-.06em;max-width:9.6em}
.bill__sub{max-width:52ch;color:rgba(255,255,255,.84);font-size:clamp(15px,1.15vw,18px);margin:clamp(18px,3vh,30px) 0 clamp(22px,3.4vh,34px)}
.bill__label{color:rgba(255,255,255,.55);margin-bottom:10px}
.bill__label b{display:none}
.bill__list{border-top:1px solid rgba(255,255,255,.2)}
.bill__list li{position:relative;border-bottom:1px solid rgba(255,255,255,.2)}
.bill__item{display:grid;grid-template-columns:28px 1fr auto;gap:2px 10px;align-items:baseline;width:100%;padding:12px 0;color:rgba(255,255,255,.55);transition:color .4s}
.bill__item:hover,.bill__list .on .bill__item{color:#fff}
.bill__item i{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.06em}
.bill__item b{font-family:var(--sans);font-weight:400;font-size:clamp(15px,1.15vw,18px);letter-spacing:-.015em;line-height:1.2}
.bill__item small{grid-column:2/-1;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.bill__watch{grid-row:1;grid-column:3;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--hot);opacity:0;transition:opacity .3s}
.bill__list .on .bill__watch{opacity:1}
.bill__prog{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left}
.bill__list .on .bill__prog{animation:prog var(--dur,8s) linear forwards}
.bill.paused .bill__list .on .bill__prog{animation-play-state:paused}
@keyframes prog{to{transform:none}}
.bill__scroll{position:absolute;z-index:4;left:50%;bottom:clamp(14px,3.4vh,34px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.6)}
.bill__scroll::after{content:"";width:1px;height:30px;background:linear-gradient(#fff,transparent);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:900px){
  .bill{min-height:560px}
  .bill__in{grid-template-columns:1fr;padding-bottom:80px}
  .bill__list{display:flex;gap:6px;border:0}
  .bill__list li{flex:1;border:0;height:18px}
  .bill__item{position:absolute;inset:0;padding:0;opacity:0}
  .bill__list li::before{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:rgba(255,255,255,.25)}
  .bill__prog{bottom:8px;height:2px}
  .bill__now{order:-1}
  .bill__label{display:flex;justify-content:space-between;gap:10px}
  .bill__label b{display:inline;font-weight:400;color:#fff}
  .bill__scroll{display:none}
}

/* ---------- Home: who we are + counters ---------- */
.intro__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,6vw,120px);margin-top:clamp(40px,7vh,80px)}
.intro__txt{display:grid;gap:18px;align-content:start;color:var(--mute);font-size:clamp(15px,1.08vw,18px)}
.intro__txt .more{justify-self:start;margin-top:8px}
/* headline left, intro + text right, starting level with the headline */
.overview{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,5vw,110px);align-items:start}
.overview .statement{max-width:20ch}
.overview__txt{display:grid;gap:16px;align-content:start;max-width:48ch;padding-top:clamp(14px,2vh,22px);border-top:1px solid var(--line);margin-top:clamp(6px,1vh,14px);color:var(--mute);font-size:clamp(15px,1.05vw,17px);line-height:1.7}
.overview__txt .lede{color:var(--fg);font-size:clamp(19px,1.5vw,25px);line-height:1.3;margin-bottom:6px}
.overview__txt .more{justify-self:start;margin-top:8px}
@media (max-width:900px){.overview{grid-template-columns:1fr}.overview__txt{max-width:60ch}}
.counters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(60px,11vh,130px);border-top:1px solid var(--line)}
.counter{padding:clamp(22px,4vh,40px) clamp(14px,2vw,30px) 0;border-left:1px solid var(--line)}
.counter:first-child{border-left:0;padding-left:0}
.counter__n{font-family:var(--sans);font-weight:300;font-size:clamp(48px,min(6.4vw,12vh),124px);letter-spacing:-.06em;line-height:.95;white-space:nowrap}
.counter__n span{color:var(--red)}
.counter__u{font-size:.32em;letter-spacing:-.02em;margin-left:.2em;color:var(--red)}
.counter .mono{color:var(--dim);margin-top:14px}
@media (max-width:900px){.intro__grid{grid-template-columns:1fr}.counters{grid-template-columns:1fr 1fr}.counter{border-left:0;padding-left:0;border-bottom:1px solid var(--line);padding-bottom:22px}.counter:nth-child(2n){padding-left:16px;border-left:1px solid var(--line)}}

/* ---------- Home: flagship productions (pinned horizontal gallery on desktop) ---------- */
.flag{padding:0}
.flag__pin{position:sticky;top:0;height:100svh;min-height:640px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:clamp(80px,11vh,110px) 0 clamp(26px,4vh,44px)}
.flag .sechead{margin-bottom:clamp(20px,3.6vh,44px)}
.flag__track{display:flex;gap:clamp(14px,1.6vw,28px);padding:0 var(--pad);will-change:transform}
.fcard{flex:none;width:min(40vw,calc((100svh - 360px) * 16 / 9));min-width:280px;cursor:pointer}
.fcard__media{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#111;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.fcard__media>img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--expo),filter .6s}
.fcard:hover .fcard__media>img{transform:scale(1.05)}
.fcard__no{position:absolute;left:14px;top:12px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.fcard__meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:16px;border-bottom:1px solid var(--line);padding-bottom:14px}
.fcard__meta h3{font-size:clamp(20px,1.8vw,30px);line-height:1.1;letter-spacing:-.03em}
.fcard__meta p{color:var(--dim);white-space:nowrap}
.fcard__g{color:var(--accent)!important;margin-top:4px;white-space:normal!important}
.flag__foot{display:flex;align-items:center;gap:20px;margin-top:clamp(18px,3.4vh,36px)}
.flag__count{color:var(--dim);min-width:60px}
.flag__bar,.tl__bar{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.flag__bar i,.tl__bar i{position:absolute;inset:0;background:var(--hot);transform-origin:left;transform:scaleX(0)}
.flag__arrows{display:flex;gap:8px}
.flag.free .flag__pin{position:static;height:auto;min-height:0}
.flag.free .flag__track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;scroll-padding:0 var(--pad)}
.flag.free .flag__track::-webkit-scrollbar{display:none}
.flag.free .fcard{width:min(82vw,560px);scroll-snap-align:start}
.flag.free{padding:clamp(72px,12vh,140px) 0}

/* ---------- Home: genre index ---------- */
.gindex{border-top:1px solid var(--line);counter-reset:g}
.gindex li{border-bottom:1px solid var(--line)}
.gindex a{display:grid;grid-template-columns:60px minmax(0,1.3fr) minmax(0,1fr) 120px;align-items:center;gap:20px;padding:clamp(14px,2.4vh,24px) 0;transition:color .4s}
.gindex .mono{color:var(--dim)}
.gindex b{font-family:var(--sans);font-weight:300;font-size:clamp(32px,min(4.8vw,8vh),92px);letter-spacing:-.05em;line-height:1;transition:transform .6s var(--expo),color .4s}
.gindex p{color:var(--mute);font-size:14px;max-width:38ch}
.gindex .gindex__n{text-align:right;color:var(--dim);display:flex;justify-content:flex-end;align-items:center;gap:10px}
.gindex .gindex__n svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .4s var(--ease)}
.gindex:hover a{color:var(--dim)}
.gindex:hover b{color:color-mix(in srgb,var(--fg) 26%,transparent)}
.gindex a:hover{color:var(--fg)}
.gindex a:hover b{color:var(--red);transform:translateX(18px)}
.gindex a:hover .gindex__n svg{transform:translateX(6px)}
@media (max-width:900px){.gindex a{grid-template-columns:36px 1fr auto}.gindex p{display:none}}
.peek{position:fixed;left:0;top:0;z-index:60;width:clamp(240px,22vw,380px);aspect-ratio:16/10;border-radius:6px;overflow:hidden;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%) scale(.85);transition:opacity .35s,transform .5s var(--expo);box-shadow:0 30px 70px rgba(0,0,0,.35)}
.peek img{width:100%;height:100%;object-fit:cover}
.peek.on{opacity:1}
@media (hover:none),(pointer:coarse){.peek{display:none}}

/* ---------- firsts (red) ---------- */
.firsts__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr);gap:clamp(14px,1.6vw,24px);align-items:stretch}
.first{border-top:1px solid var(--line);padding-top:22px}
.first__no{color:var(--dim)}
.first h3{font-size:clamp(22px,2vw,32px);line-height:1.08;margin:clamp(30px,6vh,70px) 0 14px;max-width:14ch}
.first p{color:var(--mute);font-size:14px;max-width:34ch}
.first em{color:#fff}
.first--reel{position:relative;border:0;padding:0;border-radius:8px;overflow:hidden;min-height:260px;background:#000;display:flex;align-items:flex-end;color:#fff;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.first--reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8;transition:transform 1.2s var(--expo),opacity .4s}
.first--reel:hover img{transform:scale(1.06);opacity:1}
.first--reel::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent 60%)}
.first__play{position:absolute;z-index:1;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:#fff;display:grid;place-items:center;transition:transform .4s var(--ease),background .3s}
.first__play svg{width:20px;height:20px;fill:var(--ink);margin-left:3px}
.first--reel:hover .first__play{transform:scale(1.1);background:var(--ink)}
.first--reel:hover .first__play svg{fill:#fff}
.first--reel .mono{position:relative;z-index:1;padding:18px}
@media (max-width:1000px){.firsts__grid{grid-template-columns:1fr 1fr}.first--reel{grid-column:1/-1;aspect-ratio:2.2;min-height:0;width:100%}}
@media (max-width:600px){.firsts__grid{grid-template-columns:1fr}.first h3{margin-top:24px}.first--reel{aspect-ratio:16/10}}

/* ---------- timeline ---------- */
.tl{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:0 var(--pad);scroll-padding:0 var(--pad);cursor:grab}
.tl.drag{cursor:grabbing;scroll-snap-type:none}
.tl::-webkit-scrollbar{display:none}
.tl__item{flex:none;width:clamp(260px,26vw,420px);scroll-snap-align:start;padding-right:clamp(20px,2.4vw,40px);position:relative;user-select:none}
.tl__item .tl__yr{font-family:var(--sans);font-weight:300;font-size:clamp(64px,8vw,150px);letter-spacing:-.06em;line-height:.9;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--fg) 35%,transparent);transition:color .5s,-webkit-text-stroke-color .5s}
.tl__item:hover .tl__yr,.tl__item.on .tl__yr{color:var(--fg);-webkit-text-stroke-color:transparent}
.tl__line{position:relative;height:1px;background:var(--line);margin:22px 0 24px}
.tl__line::before{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 5px rgba(255,81,72,.16)}
.tl__item h3{font-size:clamp(20px,1.7vw,28px);line-height:1.1;margin-bottom:10px}
.tl__item p{color:var(--mute);font-size:14px;max-width:34ch}
.tl__img{margin-top:22px;width:clamp(110px,9vw,150px);aspect-ratio:2/3;border-radius:4px;overflow:hidden;background:var(--bg2)}
.tl__img--wide{width:clamp(180px,15vw,250px);aspect-ratio:16/9}
.tl__img img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.tl__nav{display:flex;align-items:center;gap:20px;margin-top:clamp(28px,5vh,50px)}

/* ---------- logo marquees ---------- */
.marquee{overflow:hidden;padding:16px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:clamp(14px,1.4vw,22px);width:max-content;animation:mq var(--dur,40s) linear infinite}
.marquee--rev .marquee__track{animation-direction:reverse}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.logo-tile{height:clamp(110px,10vw,150px);width:clamp(200px,19vw,290px);flex:none;border-radius:10px;display:grid;place-items:center;padding:clamp(12px,1.2vw,18px);box-shadow:0 12px 32px rgba(20,17,16,.1),inset 0 0 0 1px var(--line);transition:transform .5s var(--ease),box-shadow .5s}
.logo-tile.wide{width:clamp(420px,40vw,620px)}
.logo-tile img{max-width:100%;max-height:clamp(84px,8vw,116px);width:auto;height:auto;object-fit:contain}
.logo-tile:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(20,17,16,.16),inset 0 0 0 1px var(--line)}
.nets__names{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(30px,5vh,50px)}
.nets__names li{padding:8px 14px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);color:var(--mute)}

/* ---------- the group: three panels ---------- */
.group{display:flex;gap:12px;height:clamp(460px,72vh,700px)}
.gp{position:relative;flex:1;overflow:hidden;border-radius:10px;color:#fff;background:#000;transition:flex 1s var(--expo);min-width:0}
.gp.is-on{flex:2.3}
.gp__bg{position:absolute;inset:0}
.gp__bg img{width:100%;height:100%;object-fit:cover;opacity:.62;transform:scale(1.06);transition:transform 1.6s var(--expo),opacity .6s}
.gp.is-on .gp__bg img{transform:scale(1);opacity:.78}
.gp::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.92) 8%,rgba(0,0,0,.2) 60%,rgba(0,0,0,.35))}
.gp__in{position:absolute;z-index:1;inset:0;padding:clamp(20px,2.4vw,38px);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:8px}
.gp__logo{height:clamp(54px,5vw,84px);width:auto;margin-bottom:auto;filter:drop-shadow(0 6px 20px rgba(0,0,0,.5))}
.gp__in .mono{color:rgba(255,255,255,.7)}
.gp h3{font-size:clamp(24px,2.6vw,46px);line-height:1;letter-spacing:-.04em;transition:font-size .6s var(--expo)}
.gp:not(.is-on) h3{font-size:clamp(22px,1.9vw,32px)}
.gp__txt{max-width:40ch;color:rgba(255,255,255,.82);font-size:14px;max-height:0;opacity:0;overflow:hidden;transition:max-height .8s var(--expo),opacity .5s}
.gp.is-on .gp__txt{max-height:120px;opacity:1}
.gp__go{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:9px 14px;border-radius:99px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);transition:background .3s,color .3s}
.gp:hover .gp__go{background:var(--red)}
.gp:first-child .gp__go{background:var(--red)}
@media (max-width:900px){.group{flex-direction:column;height:auto}.gp,.gp.is-on{flex:none;height:clamp(300px,60vw,420px)}.gp__txt{max-height:120px;opacity:1}.gp h3{white-space:normal}}

/* ---------- founder ---------- */
.founder{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,6vw,110px);align-items:center}
.founder__img{border-radius:8px;overflow:hidden;aspect-ratio:1.68;background:var(--bg2)}
.founder__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.05)}
.founder__q{font-family:var(--sans);font-weight:300;font-size:clamp(26px,2.9vw,50px);line-height:1.08;letter-spacing:-.04em;margin-bottom:26px;max-width:18ch}
.founder__name{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:18px}
.founder__name b{font-family:var(--sans);font-weight:400;font-size:20px}
.founder__name .mono{color:var(--accent)}
.founder__txt>p:not(.eyebrow):not(.founder__name):not(.lede){color:var(--mute);max-width:52ch;margin-bottom:22px}
@media (max-width:900px){.founder{grid-template-columns:1fr}}

/* ---------- call to action (red) ---------- */
.cta__in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:30px clamp(30px,6vw,110px);align-items:end}
.cta__title{font-size:clamp(38px,min(6vw,10vh),118px);line-height:.98;letter-spacing:-.055em}
.cta__title span{color:var(--ink)}
.cta__side{display:grid;gap:24px}
.cta__side p{color:var(--mute);max-width:44ch;font-size:16px}
.cta .btn--line:hover{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
@media (max-width:900px){.cta__in{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{background:#fff;color:var(--fg);overflow:hidden;position:relative;border-top:1px solid var(--line)}
.foot__family{display:grid;grid-template-columns:200px 1fr;gap:24px;padding-top:clamp(56px,9vh,90px)}
.foot__label{color:var(--dim);padding-top:16px}
.foot__family ul{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.foot__family a{display:block;padding:18px 20px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s,background .3s}
.foot__family a:hover{box-shadow:inset 0 0 0 1px var(--red);background:rgba(215,31,39,.08)}
.foot__family b{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:400;font-size:19px;letter-spacing:-.02em}
.foot__family small{display:block;color:var(--dim);font-size:13px;margin-top:4px}
@media (max-width:900px){.foot__family{grid-template-columns:1fr}.foot__family ul{grid-template-columns:1fr}}
.foot__word{font-family:var(--sans);font-weight:500;font-size:21.5vw;line-height:.8;letter-spacing:-.07em;text-align:center;margin-top:clamp(50px,9vh,100px);color:transparent;-webkit-text-stroke:1px rgba(20,17,16,.14);
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),var(--red) 0,var(--red) var(--r,9vw),transparent calc(var(--r,9vw) + .1vw));-webkit-background-clip:text;background-clip:text;user-select:none;white-space:nowrap}
@media (hover:none),(pointer:coarse){.foot__word{--r:12vw}}
.foot__bottom{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:24px;padding-top:40px;padding-bottom:40px;border-top:1px solid var(--line);margin-top:12px}
.foot__brand img{height:52px;width:auto;margin-bottom:14px}
.foot__brand p{color:var(--mute);max-width:32ch}
.foot__bottom ul:not(.social){display:grid;gap:9px;align-content:start}
.foot__bottom a{color:var(--mute);transition:color .3s}
.foot__bottom a:hover{color:var(--fg)}
.foot__copy{color:var(--dim);text-align:right;line-height:1.8}
@media (max-width:860px){.foot__bottom{grid-template-columns:1fr 1fr}.foot__brand,.foot__copy{grid-column:1/-1}.foot__copy{text-align:left}}
.social{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.social a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 11px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);color:var(--fg);transition:background .3s,color .3s,box-shadow .3s}
.social svg{width:16px;height:16px;fill:currentColor}
.social a:hover{background:var(--fg);color:var(--bg);box-shadow:none}
.social .mono{font-size:10px}

/* ---------- lightbox / reel player ---------- */
.lightbox{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.94);display:grid;place-items:center;padding:clamp(56px,8vh,90px) var(--pad) 40px;color:#fff;animation:fade .35s}
.lightbox[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.lightbox::before{content:"";position:absolute;inset:-40px;background:var(--reel-bg,none) center/cover;filter:blur(44px) brightness(.32) saturate(1.2);transform:scale(1.1)}
.lightbox figure{position:relative;width:min(1240px,100%);display:flex;flex-direction:column;align-items:center}
.lightbox img{max-height:72vh;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox figcaption{margin-top:20px;font-family:var(--sans);font-size:clamp(22px,2.6vw,40px);letter-spacing:-.03em;text-align:center}
.lightbox figcaption small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--hot);text-transform:uppercase}
.lb__video{width:100%;aspect-ratio:16/9;max-height:78vh;border:0;border-radius:8px;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb__soon{display:block;margin-top:10px;font-style:normal;color:rgba(255,255,255,.55);font-size:11px}
.lightbox__x{position:absolute;z-index:2;top:18px;right:var(--pad);padding:9px 15px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.lightbox__x:hover{background:#fff;color:#000}

/* ---------- show sheet (side panel) ---------- */
.sheet{position:fixed;inset:0;z-index:200;display:flex;justify-content:flex-end}
.sheet[hidden]{display:none}
.sheet__scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .5s}
.sheet.open .sheet__scrim{opacity:1}
.sheet__panel{position:relative;width:min(760px,100%);height:100%;overflow-y:auto;overscroll-behavior:contain;background:var(--ink2);color:var(--fg);transform:translateX(100%);transition:transform .7s var(--expo);box-shadow:-30px 0 80px rgba(0,0,0,.5)}
.sheet.open .sheet__panel{transform:none}
.sheet__x{position:sticky;top:0;z-index:3;float:right;margin:16px 16px -60px 0;padding:9px 15px;border-radius:99px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);color:#fff}
.sheet__x:hover{background:#fff;color:#000}
.sheet__media{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.sheet__media>img{width:100%;height:100%;object-fit:cover}
.sheet__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--ink2),transparent 45%);pointer-events:none}
.sheet__play{position:absolute;z-index:2;left:clamp(22px,4vw,48px);bottom:clamp(18px,3vw,30px);display:inline-flex;align-items:center;gap:12px;color:#fff}
.sheet__play i{width:58px;height:58px;border-radius:50%;background:var(--red);display:grid;place-items:center;transition:transform .4s var(--ease),background .3s}
.sheet__play svg{width:18px;height:18px;fill:#fff;margin-left:3px}
.sheet__play:hover i{transform:scale(1.08);background:#fff}
.sheet__play:hover svg{fill:var(--ink)}
.sheet__body{padding:clamp(18px,3vw,30px) clamp(22px,4vw,48px) 60px}
.sheet__meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--dim)}
.sheet__meta span:first-child{color:var(--hot)}
.sheet__body h2{font-size:clamp(32px,4.2vw,60px);line-height:1;letter-spacing:-.05em;margin:14px 0 16px}
.sheet__note{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:99px;background:rgba(201,162,90,.14);color:var(--gold);font-size:13px;margin-bottom:22px}
.sheet__note::before{content:"★";font-size:11px}
.sheet__story{color:var(--mute);font-size:16px;line-height:1.7;max-width:62ch}
.sheet__credits{display:grid;grid-template-columns:150px 1fr;gap:10px 20px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line);font-size:14px}
.sheet__credits dt{color:var(--dim)}
.sheet__credits dd{color:var(--mute)}
.sheet__extra{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.sheet__more{margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.sheet__more>p{color:var(--dim);margin-bottom:14px}
.sheet__more ul{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sheet__more button{display:block;width:100%}
.sheet__more img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;transition:opacity .3s}
.sheet__more button:hover img{opacity:.7}
.sheet__more b{display:block;font-family:var(--sans);font-weight:400;font-size:14px;line-height:1.25;margin-top:8px}
@media (max-width:600px){.sheet__more ul{grid-template-columns:1fr 1fr}.sheet__credits{grid-template-columns:1fr;gap:2px}.sheet__credits dd{margin-bottom:8px}}

/* ---------- inner pages: header ---------- */
.phead{display:flex;flex-direction:column;background:#fff;color:var(--fg);padding:clamp(130px,20vh,210px) 0 clamp(30px,5vh,60px)}
.phead__bg{order:2;position:relative;margin:clamp(36px,6vh,70px) var(--pad) 0;aspect-ratio:21/8;border-radius:10px;overflow:hidden;background:var(--soft)}
.phead__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.phead__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.25),transparent 50%);pointer-events:none}
@keyframes kb{to{transform:scale(1.18) translate(-2%,1%)}}
.phead__in{position:relative;z-index:1}
.phead__title{font-size:clamp(50px,min(9vw,15vh),190px);line-height:.9;letter-spacing:-.065em;max-width:12ch}
.phead__sub{max-width:56ch;color:var(--mute);font-size:clamp(15px,1.2vw,19px);margin-top:clamp(20px,3.4vh,34px)}
.phead .btns{margin-top:30px}
.phead__split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:40px clamp(30px,6vw,110px);align-items:end}
.p-about .phead__title{font-size:clamp(48px,min(8.4vw,15vh),170px);max-width:none}
/* About header: description left, four figures in a row right, under a full-width title */
.phead__row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:30px clamp(30px,5vw,100px);align-items:end;margin-top:clamp(26px,4.5vh,50px);padding-top:clamp(20px,3vh,30px);border-top:1px solid var(--line)}
.phead__row .phead__sub{margin-top:0}
.pstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.pstats div{display:flex;flex-direction:column;justify-content:space-between;padding:0 clamp(12px,1.4vw,24px);border-left:1px solid var(--line)}
.pstats dt{white-space:nowrap}
.pstats div:first-child{padding-left:0;border-left:0}
.pstats dt{color:var(--dim)}
@media (max-width:1200px){.pstats{grid-template-columns:1fr 1fr;gap:22px 0}.pstats div:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:900px){.phead__row{grid-template-columns:1fr}}
.pstats dd{font-family:var(--sans);font-size:clamp(30px,3.2vw,54px);letter-spacing:-.05em;line-height:1.05;margin-top:8px;white-space:nowrap}
@media (max-width:900px){.phead__split{grid-template-columns:1fr}}
.phead--404{min-height:100svh}
@media (max-width:700px){.phead__bg{aspect-ratio:16/10}}

/* ---------- Shows page ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(30px,5vh,50px)}
.filters button{padding:10px 16px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);color:var(--mute);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;transition:background .3s,color .3s,box-shadow .3s}
.filters button:hover{color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.filters button[aria-selected=true]{background:var(--red);color:#fff;box-shadow:none}
.filters sup{margin-left:5px;opacity:.65;font-size:9px}
.sgrid{display:grid;grid-auto-flow:dense;align-items:start;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,4vh,46px) clamp(12px,1.4vw,22px)}
.scard{cursor:pointer;animation:pin .7s var(--expo) both}
@keyframes pin{from{opacity:0;transform:translateY(24px)}}
.scard__media{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#111}
.scard__media>img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--expo)}
.scard:hover .scard__media>img{transform:scale(1.06)}
.scard__meta{display:flex;justify-content:space-between;gap:14px;align-items:baseline;margin-top:14px}
.scard h3{font-size:clamp(18px,1.5vw,24px);line-height:1.15}
.scard p{color:var(--dim);white-space:nowrap}
.scard .scard__g{color:var(--accent);margin-top:6px}
.scard--wide{grid-column:span 2;grid-row:span 2}
.scard--wide h3{font-size:clamp(24px,2.2vw,36px)}
@media (max-width:1000px){.sgrid{grid-template-columns:1fr 1fr}.scard--wide{grid-row:auto}}
@media (max-width:620px){.sgrid{grid-template-columns:1fr}.scard--wide{grid-column:auto;grid-row:auto}}
.sgrid__empty{color:var(--dim);grid-column:1/-1}
.alist{border-top:1px solid var(--line)}
.arow{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr) 44px;gap:16px;align-items:center;width:100%;padding:16px 0;border-bottom:1px solid var(--line);transition:color .3s,padding .5s var(--expo);animation:pin .6s var(--expo) both}
.arow b{font-family:var(--sans);font-weight:300;font-size:clamp(18px,1.7vw,28px);letter-spacing:-.025em;line-height:1.15}
.arow .mono{color:var(--dim)}
.arow__p{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;justify-self:end;box-shadow:inset 0 0 0 1px var(--line);transition:background .3s,box-shadow .3s}
.arow__p svg{width:12px;height:12px;fill:currentColor;margin-left:2px}
.arow:hover{padding-left:14px;color:var(--accent)}
.arow:hover .arow__p{background:var(--red);box-shadow:none;color:#fff}
.arow:not(.has-video){cursor:default}
@media (max-width:700px){.arow{grid-template-columns:1fr 36px}.arow .arow__g{display:none}.arow .arow__ch{grid-row:2;grid-column:1;margin-top:-10px}}
.alist__more{margin:30px auto 0;display:flex}

/* ---------- Films page ---------- */
.frows{display:grid;gap:clamp(60px,12vh,140px)}
.frow{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:center}
.frow:nth-child(even) .frow__media{order:2}
.frow__media{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:16/9;background:#111;cursor:pointer}
.frow__media>img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--expo)}
.frow__media:hover>img{transform:scale(1.04)}
.frow__media>.frow__poster{position:absolute;z-index:2;left:18px;bottom:18px;width:clamp(80px,9vw,130px);height:auto;transform:none!important;border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.frow__txt>.mono{color:var(--dim)}
.frow__txt h3{font-size:clamp(32px,3.8vw,68px);line-height:1;letter-spacing:-.05em;margin:12px 0 18px}
.frow__txt>p:not(.mono){color:var(--mute);max-width:52ch}
.frow .sheet__note{margin-bottom:18px}
.frow .sheet__credits{margin-top:22px}
.frow .btns{margin-top:28px}
@media (max-width:900px){.frow{grid-template-columns:1fr}.frow:nth-child(even) .frow__media{order:0}}
.tvf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.tvf__card{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;background:var(--bg2);text-align:left}
.tvf__media{position:relative;aspect-ratio:16/9;background:var(--ink);overflow:hidden}
.tvf__media img{width:100%;height:100%;object-fit:cover}
.tvf__type{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;font-family:var(--sans);font-size:clamp(24px,2.4vw,40px);letter-spacing:-.04em;line-height:1;color:#fff;background:radial-gradient(120% 120% at 0 0,rgba(215,31,39,.45),transparent 60%),var(--ink)}
.tvf__body{padding:22px}
.tvf__body h3{font-size:24px;line-height:1.1;margin-bottom:10px}
.tvf__body p{color:var(--mute);font-size:14px}
.tvf__card.has-video{cursor:pointer}
@media (max-width:900px){.tvf{grid-template-columns:1fr}}
.posters{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;padding:4px var(--pad) 10px;scroll-snap-type:x proximity;scrollbar-width:none;scroll-padding:0 var(--pad)}
.posters::-webkit-scrollbar{display:none}
.poster{flex:none;width:clamp(170px,16vw,250px);scroll-snap-align:start;cursor:pointer}
.poster__img{position:relative;aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:var(--bg2);box-shadow:0 20px 40px rgba(0,0,0,.35)}
.poster__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--expo)}
.poster:hover .poster__img img{transform:scale(1.05)}
.poster b{display:block;font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.2;margin-top:12px}
.poster small{display:block;color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.posters--light .poster__img{box-shadow:0 20px 40px rgba(20,17,16,.18)}
.poster:not(.has-video){cursor:default}

/* ---------- Showreel page ---------- */
.reel{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(260px,1fr);gap:clamp(16px,2vw,30px);align-items:stretch}
.reel__stage{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;color:#fff;display:block;width:100%}
.reel__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 16s ease-in-out infinite alternate;transition:opacity .5s}
.reel__stage img.swap{opacity:0}
.reel__stage::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 60%),linear-gradient(90deg,rgba(0,0,0,.5),transparent 55%)}
.reel__stage::after{content:"";position:absolute;inset:16px;z-index:1;pointer-events:none;opacity:.7;background-repeat:no-repeat;
  background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
  background-size:20px 1px,1px 20px,20px 1px,1px 20px,20px 1px,1px 20px,20px 1px,1px 20px;
  background-position:top left,top left,top right,top right,bottom left,bottom left,bottom right,bottom right}
.reel__hud{position:absolute;z-index:2;top:30px;left:34px;right:34px;display:flex;gap:14px;align-items:center;color:rgba(255,255,255,.8)}
.reel__hud span:last-child{margin-left:auto}
.reel__info{position:absolute;z-index:2;left:34px;right:34px;bottom:30px;display:grid;justify-items:start;gap:8px}
.reel__info .mono{color:var(--hot)}
.reel__info b{font-family:var(--sans);font-weight:300;font-size:clamp(28px,3.4vw,58px);letter-spacing:-.045em;line-height:1}
.reel__txt{max-width:48ch;color:rgba(255,255,255,.8)}
.reel__play{display:inline-flex;align-items:center;gap:12px;margin-top:10px}
.reel__play svg{width:52px;height:52px;padding:16px;border-radius:50%;background:#fff;fill:#000;transition:transform .4s var(--ease),background .3s,fill .3s}
.reel__stage:hover .reel__play svg{transform:scale(1.08);background:var(--red);fill:#fff}
.reel__list{display:grid;gap:8px;align-content:start}
.reel__tab{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:8px;border-radius:8px;opacity:.55;transition:opacity .4s,background .4s;position:relative;overflow:hidden}
.reel__tab img{width:clamp(96px,8vw,140px);aspect-ratio:16/9;object-fit:cover;border-radius:4px}
.reel__tab b{display:block;font-family:var(--sans);font-weight:400;font-size:clamp(15px,1.2vw,19px);letter-spacing:-.015em;line-height:1.2}
.reel__tab small{display:block;margin-top:5px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.reel__tab:hover{opacity:.85}
.reel__tab[aria-selected=true]{opacity:1;background:color-mix(in srgb,var(--fg) 7%,transparent)}
.reel__tab i{position:absolute;left:8px;right:8px;bottom:0;height:2px;background:var(--hot);transform:scaleX(0);transform-origin:left}
.reel__tab[aria-selected=true] i{animation:prog 7s linear forwards}
@media (max-width:900px){.reel{grid-template-columns:1fr}.reel__hud{top:16px;left:18px;right:18px}.reel__info{left:18px;right:18px;bottom:16px}.reel__txt{display:none}}
.vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vh,40px) clamp(12px,1.4vw,22px)}
.vcard{display:block;width:100%;cursor:pointer}
.vcard__media{display:block;position:relative;aspect-ratio:2.33;border-radius:6px;overflow:hidden;background:var(--bg2)}
.vgrid--two .vcard__media{aspect-ratio:16/9}
.vcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--expo)}
.vcard:hover .vcard__media img{transform:scale(1.05)}
.vcard__meta{display:flex;justify-content:space-between;gap:12px;margin-top:12px;align-items:baseline}
.vcard b{font-family:var(--sans);font-weight:400;font-size:clamp(17px,1.4vw,22px);letter-spacing:-.02em}
.vcard .mono{color:var(--dim)}
@media (max-width:700px){.vgrid{grid-template-columns:1fr}}

/* ---------- About page ---------- */
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,26px)}
.svc__card{display:grid;align-content:start;gap:12px}
.svc__img{aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#111;margin-bottom:10px}
.svc__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--expo)}
.svc__card:hover .svc__img img{transform:scale(1.05)}
.svc__card>.mono{color:var(--hot)}
.svc__card h3{font-size:clamp(24px,2.2vw,36px);line-height:1.05}
.svc__card>p:not(.mono){color:var(--mute);font-size:14.5px}
.svc__card em{color:var(--fg)}
.svc__card .more{justify-self:start;margin-top:6px}
@media (max-width:900px){.svc{grid-template-columns:1fr}}
.founder__h{font-size:clamp(44px,6vw,110px);line-height:.92;letter-spacing:-.06em}
.founder__role{color:var(--accent);margin:16px 0 26px}
.story{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(60px,11vh,120px);border-top:1px solid var(--line)}
.story li{padding:22px clamp(14px,1.8vw,28px) 30px 0;border-bottom:1px solid var(--line)}
.story li:not(:nth-child(4n+1)){padding-left:clamp(14px,1.8vw,28px);border-left:1px solid var(--line)}
.story .mono{color:var(--accent)}
.story h3{font-size:clamp(19px,1.5vw,24px);line-height:1.15;margin:14px 0 10px}
.story p{color:var(--mute);font-size:14px}
@media (max-width:1000px){.story{grid-template-columns:1fr 1fr}.story li:not(:nth-child(4n+1)){padding-left:0;border-left:0}.story li:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}}
@media (max-width:600px){.story{grid-template-columns:1fr}.story li:nth-child(even){padding-left:0;border-left:0}}

/* ---------- Contact page ---------- */
.contact-top{padding-top:clamp(130px,20vh,220px)}
.contact__h{font-size:clamp(46px,min(8vw,13vh),170px);line-height:.9;letter-spacing:-.065em;max-width:11ch;margin-bottom:clamp(40px,8vh,90px)}
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(36px,6vw,110px)}
.addr{display:grid;gap:18px;margin-top:34px}
.addr dt{color:var(--dim);margin-bottom:4px}
.addr dd{color:var(--mute);max-width:42ch}
.addr a:hover{color:var(--accent)}
.form{display:grid;gap:22px;align-content:start}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.form label>span{display:block;color:var(--dim);margin-bottom:8px}
.form input:not([type=hidden]),.form textarea,.form select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--fg);font:inherit;font-size:17px;padding:10px 0;outline:none;transition:border-color .3s;border-radius:0;resize:vertical}
.form select{appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141110' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 2px center/16px no-repeat;padding-right:28px}
.form select option{background:var(--bg);color:var(--fg)}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--hot)}
.form .bad{border-color:var(--hot)!important}
.form .btn{justify-self:start;margin-top:6px}
.form__note{color:var(--dim);font-size:13px}
.form__note a{text-decoration:underline;text-underline-offset:3px}
.form__ok{color:var(--hot)}
.form__err{color:var(--hot)}
@media (max-width:860px){.contact__grid,.form__row{grid-template-columns:1fr}}
.offices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,26px)}
.office{display:grid;align-content:start;gap:10px}
.office .map,.office__img{aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--bg2);margin-bottom:12px}
.office__img img{width:100%;height:100%;object-fit:cover}
.office>.mono{color:var(--accent)}
.office h3{font-size:clamp(24px,2vw,32px);line-height:1.05}
.office>p:not(.mono){color:var(--mute);font-size:14.5px;max-width:40ch}
.office .more{justify-self:start;margin-top:4px}
.map{position:relative}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map__load{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:8px;text-align:center;padding:20px;color:var(--fg);
  background:radial-gradient(circle at 30% 30%,rgba(215,31,39,.12),transparent 60%),repeating-linear-gradient(0deg,transparent 0 23px,rgba(20,17,16,.06) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(20,17,16,.06) 23px 24px),var(--paper2)}
.map__load .mono{color:var(--dim)}
.map__load b{font-family:var(--sans);font-weight:400;font-size:20px;letter-spacing:-.02em}
.map__load small{color:var(--dim)}
.map__load:hover b{color:var(--red2)}
.map--photo .map__load{color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.25)),url(/assets/img/office.webp) center/cover}
.map--photo .map__load .mono,.map--photo .map__load small{color:rgba(255,255,255,.75)}
.map--photo .map__load b{padding:12px 20px;border-radius:99px;background:var(--red);font-size:16px;transition:background .3s,color .3s}
.map--photo .map__load:hover b{background:#fff;color:var(--ink)}
@media (max-width:900px){.offices{grid-template-columns:1fr}}

/* ---------- documents (policies, privacy) ---------- */
.doc__grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(30px,6vw,110px)}
.doc__toc{position:sticky;top:110px;align-self:start;display:grid;gap:10px;color:var(--dim)}
.doc__toc a:hover{color:var(--red2)}
.doc__body{max-width:76ch;color:var(--mute);font-size:16px;line-height:1.75}
.doc__body h2{color:var(--fg);font-size:clamp(30px,3.4vw,52px);line-height:1.05;letter-spacing:-.045em;margin:0 0 26px;scroll-margin-top:110px}
.doc__body h2:not(:first-child){margin-top:70px;padding-top:40px;border-top:1px solid var(--line)}
.doc__body h3{color:var(--fg);font-size:clamp(22px,1.9vw,28px);line-height:1.15;margin:42px 0 14px;scroll-margin-top:110px}
.doc__body h4{color:var(--fg);font-family:var(--sans);font-weight:400;font-size:18px;margin:26px 0 8px}
.doc__body p+p{margin-top:14px}
.doc__body b{color:var(--fg);font-weight:400}
.doc__body a:not(.btn){color:var(--red2);text-decoration:underline;text-underline-offset:3px}
.doc__body ul{display:grid;gap:10px;margin:14px 0}
.doc__body ul li{padding-left:22px;position:relative}
.doc__body ul li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:1px;background:var(--red)}
.doc__roman{display:grid;gap:12px;margin:18px 0}
.doc__roman li{display:grid;grid-template-columns:52px 1fr;gap:10px}
.doc__roman .mono{color:var(--red2);padding-top:5px}
.doc__card{padding:20px 22px;border-radius:8px;background:var(--bg2)}
@media (max-width:860px){.doc__grid{grid-template-columns:1fr}.doc__toc{position:static;display:flex;flex-wrap:wrap;gap:8px 16px}}

/* =====================================================================================
   INTERACTION LAYER (assets/fx.js + interactive parts of main.js)
   ===================================================================================== */
/* scroll progress line */
.progress{position:fixed;left:0;right:0;top:0;z-index:110;height:2px;pointer-events:none}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--hot));transform-origin:left;transform:scaleX(0);box-shadow:0 0 12px rgba(255,81,72,.6)}

/* magnetic buttons ease back when the pointer leaves */
.btn,.arrow,.nav__cta,.spin{transition:background .35s,color .35s,box-shadow .35s,transform .5s var(--expo)}
.mag{transition:background .35s,color .35s,box-shadow .35s,transform .12s linear!important}

/* tilting cards + a light that follows the pointer */
.fcard__media,.scard__media,.poster__img,.svc__img,.tvf__card,.vcard__media,.first--reel,.frow__media,.gp,.reel__stage,.office__img{transform:perspective(1000px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .7s var(--expo),flex 1s var(--expo),opacity 1s var(--ease)}
.tilting{transition:transform .15s linear,flex 1s var(--expo)!important}
.fcard__media::after,.scard__media::after,.poster__img::after,.svc__img::after,.tvf__card::after,.vcard__media::after,.frow__media::after,.office__img::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),transparent 45%)}
.tilting::after{opacity:1}
.svc__img,.tvf__card,.office__img{position:relative}

/* the pointer's glow on dark and red blocks */
.sec--ink,.sec--red,.foot{isolation:isolate}
@media (hover:hover) and (pointer:fine){
  .sec--ink::after,.sec--red::after,.foot::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s;
    background:radial-gradient(600px circle at var(--glx,50%) var(--gly,50%),rgba(215,31,39,.13),transparent 60%)}
  .sec--red::after{background:radial-gradient(600px circle at var(--glx,50%) var(--gly,50%),rgba(255,255,255,.12),transparent 60%)}
  .sec--ink:hover::after,.sec--red:hover::after,.foot:hover::after{opacity:1}
}

/* pictures wipe open */
.wipe{clip-path:inset(0 0 100% 0 round 8px);transition:clip-path 1.3s var(--expo),transform .7s var(--expo)}
.wipe.wiped{clip-path:inset(0 0 0 0 round 8px)}
.phead__bg.wipe{clip-path:inset(0 100% 0 0 round 10px);transition:clip-path 1.8s var(--expo)}
.phead__bg.wipe.wiped{clip-path:inset(0 0 0 0 round 10px)}

/* page headers and the opening scene move with the pointer (fx.js) */
.bill__media,.phead__bg{will-change:transform}

/* genre ribbon (Home) */
.ribbon{position:relative;overflow:hidden;background:#fff;padding:clamp(10px,2vh,24px) 0 clamp(40px,7vh,80px);border-bottom:1px solid rgba(20,17,16,.1)}
.ribbon__track{display:flex;align-items:center;gap:clamp(20px,3vw,50px);width:max-content;will-change:transform}
.ribbon span{font-family:var(--sans);font-weight:300;font-size:clamp(56px,10vw,180px);letter-spacing:-.06em;line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(20,17,16,.32)}
.ribbon span.is-red{color:var(--red);-webkit-text-stroke:0}
.ribbon i{font-style:normal;color:var(--red);font-size:clamp(20px,2.4vw,40px)}

/* spin the reel */
.spin{display:inline-flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);color:var(--fg);font-size:10.5px;letter-spacing:.1em;white-space:nowrap}
.spin svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .9s var(--expo)}
.spin:hover{background:var(--red);color:#fff;box-shadow:none}
.spin:hover svg{transform:rotate(180deg)}
.flag__foot .spin{margin-left:6px}
@media (max-width:620px){.flag__foot{flex-wrap:wrap}.flag__foot .spin{order:3;margin:6px 0 0}}
.spinbox{position:fixed;inset:0;z-index:240;display:grid;place-items:center;background:rgba(0,0,0,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .4s}
.spinbox.on{opacity:1}
.spinbox__frame{position:relative;width:min(560px,86vw);aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12);transform:scale(.92);transition:transform .6s var(--expo)}
.spinbox.on .spinbox__frame{transform:none}
.spinbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(1.5px) brightness(.8);transform:translateY(-3%) scale(1.08)}
.spinbox.flip img{transform:translateY(3%) scale(1.08)}
.spinbox.land img{filter:none;transform:none;transition:transform .6s var(--expo),filter .4s}
.spinbox__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 55%)}
.spinbox p{position:absolute;z-index:1;left:22px;bottom:58px;color:var(--hot)}
.spinbox b{position:absolute;z-index:1;left:22px;right:22px;bottom:20px;font-family:var(--sans);font-weight:300;font-size:clamp(22px,3vw,34px);letter-spacing:-.03em;line-height:1.1;color:#fff}
.spinbox__sprockets{position:absolute;z-index:2;left:0;right:0;top:0;height:14px;background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,255,255,.75) 10px 22px,transparent 22px 32px);mask:linear-gradient(transparent 4px,#000 4px,#000 10px,transparent 10px);-webkit-mask:linear-gradient(transparent 4px,#000 4px,#000 10px,transparent 10px)}
.spinbox.land .spinbox__frame{box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 2px var(--red)}

/* Shows: search, sort, surprise */
.finder{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px}
.search{flex:1;min-width:240px;display:flex;align-items:center;gap:12px;padding:0 16px;height:54px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s,background .3s}
.search:focus-within{box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb,var(--fg) 3%,transparent)}
.search svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--dim);stroke-width:1.8;stroke-linecap:round}
.search input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--fg);font:inherit;font-size:16px}
.search input::placeholder{color:var(--dim)}
.search input::-webkit-search-cancel-button{opacity:.6}
.sec--ink .search input::-webkit-search-cancel-button{filter:invert(1)}
.search kbd{padding:3px 8px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--line);color:var(--dim);font-size:10px}
@media (hover:none){.search kbd{display:none}}
.sort{display:flex;padding:4px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line)}
.sort button{padding:11px 16px;border-radius:99px;color:var(--mute);font-size:10.5px;letter-spacing:.08em;transition:background .3s,color .3s}
.sort button[aria-pressed=true]{background:var(--fg);color:var(--bg)}
.finder__count{color:var(--accent);min-height:16px;margin-bottom:18px}
@media (max-width:700px){.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--pad)) 30px;padding:0 var(--pad)}.filters::-webkit-scrollbar{display:none}.filters button{flex:none}}

/* show panel: previous / next */
.sheet__nav{position:sticky;top:0;z-index:3;float:left;display:flex;align-items:center;gap:4px;margin:16px 0 -60px 16px;padding:4px;border-radius:99px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);color:#fff}
.sheet__nav span{padding:0 8px;font-size:10px;color:rgba(255,255,255,.75)}
.sheet__nav button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:15px;transition:background .3s,color .3s}
.sheet__nav button:hover{background:#fff;color:#000}
.sheet__panel.slide-l>*:not(.sheet__x):not(.sheet__nav){animation:slideL .6s var(--expo)}
.sheet__panel.slide-r>*:not(.sheet__x):not(.sheet__nav){animation:slideR .6s var(--expo)}
@keyframes slideL{from{opacity:0;transform:translateX(60px)}}
@keyframes slideR{from{opacity:0;transform:translateX(-60px)}}

/* timeline: decade chips + the highlighted item */
.tl__decades{display:flex;flex-wrap:wrap;gap:8px;margin:-10px 0 clamp(26px,4vh,40px)}
.tl__decades button{padding:9px 15px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);color:var(--mute);font-size:10.5px;transition:background .3s,color .3s,box-shadow .3s}
.tl__decades button:hover{color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.tl__decades button[aria-pressed=true]{background:var(--red);color:#fff;box-shadow:none}
.tl__item{opacity:.5;transition:opacity .6s}
.tl__item.on,.tl__item:hover{opacity:1}
.tl__item.on .tl__line::before{animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,81,72,.5)}100%{box-shadow:0 0 0 14px rgba(255,81,72,0)}}
.tl__img{transition:transform .8s var(--expo)}
.tl__item.on .tl__img{transform:translateY(-6px)}

/* genre index: a small picture in each row on touch screens */
.gindex__thumb{display:none}
@media (hover:none),(pointer:coarse){
  .gindex b{display:flex;align-items:center;gap:14px}
  .gindex__thumb{display:block;order:-1;flex:none;width:clamp(54px,14vw,90px);aspect-ratio:4/3;border-radius:4px;overflow:hidden}
  .gindex__thumb img{width:100%;height:100%;object-fit:cover}
}

@media (prefers-reduced-motion:reduce){.ribbon__track{transform:none!important}.wipe{clip-path:none!important}}

/* ---------- moving rows (Home flagship + posters, international work) ---------- */
.flagrow{padding-bottom:clamp(56px,9vh,110px)}
.ticker{position:relative;overflow:hidden;padding:8px 0 6px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.ticker.drag{cursor:grabbing}
.ticker+.ticker{margin-top:clamp(26px,4.5vh,48px)}
.ticker__track{display:flex;align-items:flex-start;gap:clamp(14px,1.4vw,24px);width:max-content;will-change:transform}
.ticker img{-webkit-user-drag:none;pointer-events:none}
.ticker__track>*{flex:none;transition:opacity .4s,transform .6s var(--expo)}
@media (hover:hover) and (pointer:fine){.ticker:not(.drag):hover .ticker__track>*:not(:hover){opacity:.42}}
.ticker .fcard{width:clamp(290px,33vw,600px)}
.ticker .fcard__media{box-shadow:0 22px 50px rgba(20,17,16,.22)}
.ticker--posters .poster{width:clamp(150px,13vw,230px);cursor:pointer}
.ticker--posters .poster__img{box-shadow:0 18px 40px rgba(20,17,16,.2)}
.ticker .poster figcaption{opacity:0;transform:translateY(-4px);transition:opacity .35s,transform .5s var(--expo)}
.ticker .poster:hover figcaption{opacity:1;transform:none}
@media (hover:none){.ticker .poster figcaption{opacity:1;transform:none}}
.ticker .poster b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticker__nav{position:absolute;left:0;right:0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(8px,1.4vw,24px);pointer-events:none}
.ticker__arrow{pointer-events:auto;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.94);color:var(--ink);
  box-shadow:0 10px 26px rgba(0,0,0,.22);opacity:.88;touch-action:none;transition:opacity .3s,transform .3s var(--ease),background .3s,color .3s}
.ticker__arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ticker__arrow:hover{opacity:1;background:var(--red);color:#fff;transform:scale(1.08)}
.ticker__arrow:active{transform:scale(.94)}
@media (hover:none){.ticker__arrow{width:40px;height:40px;opacity:.95}}
.flagrow__foot{display:flex;justify-content:center;margin-top:clamp(30px,5vh,50px)}

/* ---------- website assistant (assets/chat.js), dark to match the site ---------- */
.chat{--chat-gap:clamp(14px,2vw,24px);position:fixed;right:var(--chat-gap);bottom:var(--chat-gap);z-index:120;font-family:var(--body);cursor:auto;
  --bg:var(--ink2);--bg2:var(--ink3);--fg:#f6f2ec;--dim:rgba(246,242,236,.5);--line:rgba(246,242,236,.14);color:var(--fg)}
.chat__launch{display:flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 16px;border-radius:99px;background:var(--red);color:#fff;box-shadow:0 12px 34px rgba(0,0,0,.4);transition:background .3s,color .3s,transform .4s var(--ease)}
.chat__launch:hover{background:#fff;color:var(--ink);transform:translateY(-2px)}
.chat__launch svg{width:22px;height:22px;fill:currentColor}
.chat__launch-label{font-size:11px;letter-spacing:.08em}
.chat--open .chat__launch{display:none}
body.menu-open .chat,body:has(.sheet:not([hidden])) .chat,body:has(.lightbox:not([hidden])) .chat{display:none}
.chat__panel{width:min(390px,calc(100vw - 2 * var(--chat-gap)));height:min(580px,calc(100dvh - 2 * var(--chat-gap)));display:flex;flex-direction:column;background:var(--bg);color:var(--fg);border-radius:14px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 0 1px var(--line);animation:chatIn .35s var(--ease)}
@keyframes chatIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.chat__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 18px 16px 20px;background:var(--red);color:#fff}
.chat__title{font-family:var(--sans);font-weight:400;font-size:21px;line-height:1.1;letter-spacing:-.02em}
.chat__sub{color:rgba(255,255,255,.75);margin-top:6px;font-size:10px}
.chat__x{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.18);transition:background .3s}
.chat__x:hover{background:var(--ink)}
.chat__x svg,.chat__send svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat__log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px 8px;display:flex;flex-direction:column;gap:10px}
.chat__msg{max-width:88%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.chat__msg--bot{align-self:flex-start;background:var(--bg2);border-bottom-left-radius:4px}
.chat__msg--user{align-self:flex-end;background:#f6f2ec;color:var(--ink);border-bottom-right-radius:4px}
.chat__msg a{color:var(--hot);text-decoration:underline;text-underline-offset:2px}
.chat__msg strong{font-weight:500}
.chat__msg ul{margin:6px 0 6px 18px;list-style:disc}
.chat__msg li{margin:2px 0}
.chat__typing{display:flex;gap:5px;padding:14px 16px}
.chat__typing i{width:6px;height:6px;border-radius:50%;background:var(--dim);animation:chatDot 1s infinite}
.chat__typing i:nth-child(2){animation-delay:.15s}.chat__typing i:nth-child(3){animation-delay:.3s}
@keyframes chatDot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.chat__chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
.chat__chip{padding:8px 12px;border:1px solid var(--line);border-radius:99px;font-size:10px;letter-spacing:.06em;text-align:left;transition:background .3s,color .3s,border-color .3s}
.chat__chip:hover{background:var(--red);color:#fff;border-color:var(--red)}
.chat__form{display:flex;gap:8px;padding:10px 12px 8px;border-top:1px solid var(--line)}
.chat__input{flex:1;min-width:0;height:44px;padding:0 16px;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--fg);font:inherit;font-size:16px;outline:none;transition:border-color .3s}
.chat__input::placeholder{color:var(--dim)}
.chat__input:focus{border-color:var(--hot)}
.chat__send{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;transition:background .3s,color .3s}
.chat__send:hover{background:#fff;color:var(--ink)}
.chat__note{padding:0 16px 12px;color:var(--dim);font-size:9px;text-align:center}
.chat__note a{text-decoration:underline}
@media (max-width:560px){
  .chat__launch{height:48px;padding:0 16px 0 14px}
  .chat--open{left:0;right:0;bottom:0}
  .chat__panel{width:100%;height:min(88dvh,640px);border-radius:16px 16px 0 0}
}

@media (prefers-reduced-motion:reduce){
  .chat__panel{animation:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .marquee__track{animation:none}.marquee{overflow-x:auto}
}

.sec--ink .form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f2ec' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}