/* ============================================================
   EVEREST ENTERTAINMENT — v2
   SOLTERA-inspired: clean, minimal, monochrome, editorial.
   One font (Albert Sans) + Mukta for Devanagari.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* SOLTERA monochrome palette */
  --white:#FCFDFB;      /* page bg            */
  --sand:#F4F4F4;       /* light card / panel */
  --silver:#B3B3B3;
  --gunsmoke:#858585;
  --mist:#474546;
  --black:#0D0C0A;      /* smoky black        */

  /* Everest cobalt — used ONLY on interactive states so the page
     reads monochrome. Set to var(--black) for pure grayscale.    */
  --accent:#0A23BB;

  --bg:var(--white);
  --fg:var(--black);
  --muted:#727272;
  --line:rgba(13,12,10,.12);
  --line-strong:rgba(13,12,10,.22);

  --maxw:1480px;
  --pad:clamp(18px,4.2vw,68px);
  --r:22px;            /* card radius        */
  --r-lg:30px;
  --r-sm:14px;

  --ease:cubic-bezier(.22,.61,.36,1);

  --sp-section:clamp(72px,11vw,168px);

  font-family:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg);color:var(--fg);
  font-size:clamp(1rem,.55vw + .9rem,1.1rem);
  line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- LAYOUT ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sp-section)}
.section--tight{padding-block:clamp(44px,6vw,84px)}
.bg-sand{background:var(--sand)}
.bg-black{background:var(--black);color:var(--white)}
.center{text-align:center}
.mt-s{margin-top:clamp(10px,1vw,16px)}
.mt-m{margin-top:clamp(18px,2vw,28px)}
.mt-l{margin-top:clamp(30px,3.4vw,52px)}
.mt-xl{margin-top:clamp(44px,5vw,84px)}
.maxw-sm{max-width:48ch}.maxw-md{max-width:62ch}
.grid{display:grid;gap:clamp(14px,1.6vw,26px)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}

/* ---------- TYPOGRAPHY ---------- */
.display,.d-huge,.d-1,.d-2{
  font-weight:900;line-height:.92;letter-spacing:-.02em;
  text-transform:uppercase;text-wrap:balance;
}
.d-huge{font-size:clamp(2.6rem,11vw,11.5rem);line-height:.86;letter-spacing:-.03em}
.d-1{font-size:clamp(2rem,5.6vw,5.2rem)}
.d-2{font-size:clamp(1.7rem,3.6vw,3.2rem);line-height:.96}
.statement{
  font-size:clamp(1.45rem,2.9vw,2.7rem);
  font-weight:500;line-height:1.12;letter-spacing:-.015em;text-wrap:balance;
}
.lead{font-size:clamp(1.05rem,.8vw + .9rem,1.4rem);line-height:1.45;font-weight:400}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.deva{font-family:"Mukta","Albert Sans",sans-serif}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg);
}
.eyebrow svg{width:1.1em;height:1.1em;flex:none}
.eyebrow--mute{color:var(--muted)}

/* asterisk/peak glyph used as section marker */
.mark-glyph{width:1em;height:1em;display:inline-block;vertical-align:-.12em}

/* ---------- BRAND ---------- */
.brand{display:inline-flex;align-items:center;gap:11px;color:inherit}
.brand__mark{width:34px;height:34px;flex:none}
.brand__wm{display:flex;flex-direction:column;line-height:.95}
.brand__name{font-weight:800;font-size:1.16rem;letter-spacing:.02em}
.brand__sub{font-size:.5rem;letter-spacing:.42em;font-weight:600;opacity:.7;text-transform:uppercase}

/* ---------- BUTTONS / PILLS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:16px;
  background:var(--black);color:var(--white);
  border-radius:999px;padding:7px 7px 7px 26px;
  font-weight:600;font-size:.98rem;letter-spacing:.01em;
  transition:background .35s var(--ease),transform .35s var(--ease),color .35s var(--ease);
  white-space:nowrap;
}
.btn__ico{
  width:40px;height:40px;border-radius:50%;
  background:var(--white);color:var(--black);
  display:grid;place-items:center;flex:none;
  transition:transform .4s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
.btn__ico svg{width:18px;height:18px}
.btn:hover{background:var(--accent)}
.btn:hover .btn__ico{transform:rotate(45deg)}
.btn--lg{font-size:1.05rem;padding:9px 9px 9px 30px}
.btn--lg .btn__ico{width:46px;height:46px}
.btn--ghost{background:transparent;color:var(--fg);border:1px solid var(--line-strong);padding:13px 30px}
.btn--ghost:hover{background:var(--black);color:var(--white);border-color:var(--black)}
.btn--invert{background:var(--white);color:var(--black)}
.btn--invert .btn__ico{background:var(--black);color:var(--white)}
.btn--invert:hover{background:var(--accent);color:#fff}

/* text link with arrow */
.tlink{display:inline-flex;align-items:center;gap:.5em;font-weight:600;position:relative}
.tlink svg{width:1em;height:1em;transition:transform .35s var(--ease)}
.tlink::after{content:"";position:absolute;left:0;right:1.4em;bottom:-2px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.tlink:hover::after{transform:scaleX(1)}
.tlink:hover svg{transform:translate(3px,-3px)}

/* ---------- NAV (A24-shaped: burger+MENU · centred logo · contact icon) ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  min-height:clamp(72px,7.4vw,100px);
  padding:0 var(--pad);
  color:var(--white);
  transition:transform .5s var(--ease),background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease);
}
.nav.scrolled{background:rgba(252,253,251,.88);backdrop-filter:blur(14px);color:var(--black);box-shadow:0 1px 0 var(--line)}
.nav.hide{transform:translateY(-115%)}
body.menu-open .nav{transform:none}

/* left cluster — burger + MENU word */
.nav__menu-btn{display:inline-flex;align-items:center;gap:12px;padding:10px 4px 10px 0;color:inherit;position:relative;z-index:2}
.nav__burger{display:block;width:22px;height:12px;position:relative;flex:none}
.nav__burger span{position:absolute;left:0;width:22px;height:1.6px;background:currentColor;transition:transform .4s var(--ease),opacity .3s var(--ease)}
.nav__burger span:first-child{top:1px}
.nav__burger span:last-child{top:9px}
.nav__menu-word{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
body.menu-open .nav__burger span:first-child{transform:translateY(4px) rotate(45deg)}
body.menu-open .nav__burger span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* centred logo — pinned to the VIEWPORT centre, not flex-distributed */
.nav__logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:block;line-height:0}
.nav__logo-img{height:clamp(30px,3vw,38px);width:auto;transition:opacity .4s var(--ease)}
.nav__logo-img--color{position:absolute;left:0;top:0;height:100%;width:auto;opacity:0}
.nav.scrolled .nav__logo-img--white{opacity:0}
.nav.scrolled .nav__logo-img--color{opacity:1}

/* right cluster — one envelope icon */
.nav__contact{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;color:inherit;position:relative;z-index:2;transition:opacity .3s}
.nav__contact svg{width:22px;height:22px}
.nav__contact:hover{opacity:.62}

/* while the left panel is open the left cluster sits on white — force it dark */
body.menu-open .nav__menu-btn{color:var(--black)}
@media(max-width:600px){
  .nav__menu-word{display:none}
  body.menu-open .nav__contact{color:var(--black)}
  body.menu-open .nav__logo-img--white{opacity:0}
  body.menu-open .nav__logo-img--color{opacity:1}
}

/* ---------- LEFT-SIDE NAVIGATION PANEL ---------- */
body.menu-open{overflow:hidden}
.menu{position:fixed;inset:0;z-index:55}
.menu[hidden]{display:none}
.menu__scrim{position:absolute;inset:0;background:rgba(13,12,10,.46);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .5s var(--ease)}
.menu.is-open .menu__scrim{opacity:1}
.menu__panel{position:absolute;inset:0 auto 0 0;width:min(560px,46vw);
  background:var(--white);color:var(--black);
  transform:translateX(-101%);transition:transform .55s var(--ease);
  overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 0 80px -20px rgba(13,12,10,.4)}
.menu.is-open .menu__panel{transform:none}
.menu__inner{min-height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(26px,3.4vw,44px);
  padding:clamp(112px,11vw,146px) var(--pad) clamp(24px,2.6vw,38px)}
.menu__nav{display:flex;flex-direction:column;gap:clamp(18px,2vw,28px)}
.menu__label{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gunsmoke);margin-bottom:.6em}
.menu__list{list-style:none;display:flex;flex-direction:column}
.menu__item{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.menu.is-open .menu__item{opacity:1;transform:none;transition-delay:calc(140ms + var(--i) * 34ms)}
.menu__link{display:inline-block;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.16;
  font-size:clamp(1.2rem,1.9vw,1.8rem);transition:color .3s var(--ease),opacity .3s var(--ease)}
.menu__link:hover{color:var(--accent)}
.menu__link.is-current{opacity:.4}
.menu__foot{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  border-top:1px solid var(--line);padding-top:clamp(18px,2vw,26px);color:var(--muted);font-size:.9rem}
.menu__foot a:hover{color:var(--accent)}
.menu__social{display:inline-flex;gap:16px;font-weight:600}
@media(max-width:760px){
  .menu__panel{width:100%;box-shadow:none}
  .menu__scrim{display:none}
}
@media (prefers-reduced-motion:reduce){
  .menu__scrim,.menu__panel,.menu__item{transition:none}
  .menu__item{opacity:1;transform:none}
}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;
  padding:118px var(--pad) clamp(26px,3vw,46px);color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
@media(max-width:700px){.hero__bg img{object-position:50% 32%}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(13,12,10,.32) 0%,rgba(13,12,10,.06) 30%,rgba(13,12,10,.04) 50%,rgba(13,12,10,.46) 74%,rgba(13,12,10,.82) 100%)}
.hero__word{font-weight:700;font-size:clamp(3.4rem,15.5vw,16rem);line-height:.9;letter-spacing:-.01em;
  text-align:center;width:100%;mix-blend-mode:plus-lighter;color:rgba(255,255,255,.96)}
/* The slides and the scroll cue are absolutely positioned, so this is the only
   in-flow child — `space-between` alone would pin it to the TOP of the hero,
   where the scrim is deliberately clear. Push it down explicitly so the title
   always sits over the dense end of the gradient. */
.hero__bottom{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,48px);
  align-items:end;margin-top:auto}
.hero__intro{max-width:46ch}
.hero__head{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.92;
  font-size:clamp(2.1rem,6.4vw,5.4rem);margin-top:.35em;margin-bottom:clamp(40px,7vh,104px)}
.hero__cards{display:grid;grid-template-columns:1fr;gap:14px;align-items:stretch;max-width:440px;margin-left:auto}
.stat-card{background:rgba(252,253,251,.92);backdrop-filter:blur(8px);color:var(--black);border-radius:var(--r);
  padding:clamp(16px,1.4vw,22px);display:flex;flex-direction:column;gap:8px;min-height:158px}
.stat-card__big{font-weight:800;font-size:clamp(1.3rem,1.7vw,1.7rem);text-transform:uppercase;letter-spacing:-.01em;line-height:1.02}
.stat-card__txt{color:var(--muted);font-size:.92rem;margin-top:auto}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);opacity:.85;display:flex;flex-direction:column;align-items:center;gap:11px}
.scroll-cue__logo{width:46px;height:46px;border:2px solid currentColor;border-radius:50%;display:grid;place-items:center;flex:none}
.scroll-cue__logo svg{width:22px;height:auto;transform:translateY(1px)}
.scroll-cue__txt{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}
.scroll-cue::after{content:"";width:1px;height:34px;background:currentColor;animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ---------- BIG-TYPE EDITORIAL BREAK ---------- */
.editorial{position:relative;text-align:center}
.editorial__labels{position:absolute;inset:0;pointer-events:none}
.editorial__label{position:absolute;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.editorial__head{font-weight:900;text-transform:uppercase;letter-spacing:-.025em;line-height:.92;
  font-size:clamp(2.4rem,9vw,8.2rem)}
.editorial__head .chip{display:inline-block;vertical-align:middle;width:clamp(80px,11vw,168px);height:clamp(42px,5.4vw,82px);
  border-radius:10px;overflow:hidden;margin-inline:.1em}
.editorial__head .chip img{width:100%;height:100%}
.editorial__head .paren{font-weight:400}

/* ---------- SPLIT IMAGE CARDS ---------- */
.imgsplit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,22px)}
.imgsplit__card{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;background:var(--sand)}
.imgsplit__card img{width:100%;height:100%;transition:transform 1.1s var(--ease)}
.imgsplit__card:hover img{transform:scale(1.05)}
.imgsplit__logo{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.imgsplit__logo .brand__name{font-size:clamp(1.6rem,3.4vw,3rem);font-weight:700;letter-spacing:.04em;display:flex;align-items:center;gap:.4em}
.imgsplit__logo .brand__mark{width:clamp(34px,4vw,58px);height:auto}
.imgsplit__mark{width:clamp(70px,9vw,150px);height:auto;color:#fff}

/* ---------- STATEMENT + intro split ---------- */
.lead-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(22px,4vw,90px);align-items:start}
@media(max-width:860px){.lead-split{grid-template-columns:1fr}}

/* ---------- DIVISIONS / FEATURE CARDS ---------- */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.5vw,22px)}
.feat-card{background:var(--sand);border-radius:var(--r);padding:clamp(16px,1.5vw,22px);
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;transition:background .4s var(--ease)}
.feat-card:hover{background:#ededed}
.feat-card__img{width:clamp(120px,12vw,168px);aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:#e3e3e3}
.feat-card__img img{width:100%;height:100%;transition:transform 1s var(--ease)}
.feat-card:hover .feat-card__img img{transform:scale(1.06)}
.feat-card__big{font-weight:800;font-size:clamp(1.7rem,2.4vw,2.6rem);text-transform:uppercase;letter-spacing:-.02em;line-height:1}
.feat-card__lbl{font-weight:700;font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.feat-card__txt{color:var(--muted);font-size:.92rem;margin-top:10px}

/* small icon feature card (durability / reliable tech) */
.minicard{background:var(--sand);border-radius:var(--r);padding:clamp(18px,1.6vw,26px);display:flex;flex-direction:column;gap:14px;min-height:200px}
.minicard__ico{width:46px;height:46px;border-radius:50%;background:var(--white);display:grid;place-items:center}
.minicard__ico svg{width:22px;height:22px}
.minicard h3{font-weight:700;font-size:1.15rem;letter-spacing:.02em;text-transform:uppercase;margin-top:auto}
.minicard p{color:var(--muted);font-size:.9rem}

/* progress meter */
.meter{display:flex;align-items:center;gap:14px;margin-top:18px;color:var(--gunsmoke);font-size:.8rem;font-weight:600}
.meter__bar{flex:1;height:1.5px;background:var(--line-strong);position:relative}
.meter__bar::before{content:"";position:absolute;left:0;top:0;height:100%;width:var(--p,30%);background:var(--black)}

/* image card with quote */
.quotecard{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:clamp(280px,34vw,440px)}
.quotecard img{position:absolute;inset:0;width:100%;height:100%}
.quotecard__in{position:absolute;inset:auto 0 0 0;padding:clamp(18px,2vw,30px);color:#fff;
  background:linear-gradient(transparent,rgba(13,12,10,.6))}
.quotecard__q{font-size:clamp(1rem,1.3vw,1.3rem);font-weight:500;max-width:46ch;line-height:1.3}

/* ---------- DIVISIONS list (numbered, like SOLTERA product rows) ---------- */
.divrow{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,48px);align-items:center;
  padding:clamp(22px,2.6vw,40px) 0;border-top:1px solid var(--line);transition:padding .4s var(--ease)}
.divlist a:last-child .divrow{border-bottom:1px solid var(--line)}
.divrow__no{font-weight:700;color:var(--gunsmoke);font-size:.95rem}
.divrow__title{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.7rem,4.4vw,3.6rem);line-height:.95}
.divrow__meta{color:var(--muted);max-width:42ch;font-size:.98rem}
.divrow__ar{width:54px;height:54px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;transition:.4s var(--ease)}
.divrow__ar svg{width:20px;height:20px;transition:transform .4s var(--ease)}
.divlist a:hover .divrow__title{color:var(--accent)}
.divlist a:hover .divrow__ar{background:var(--black);border-color:var(--black);color:#fff}
.divlist a:hover .divrow__ar svg{transform:rotate(45deg)}
@media(max-width:760px){.divrow{grid-template-columns:1fr auto;gap:6px 16px}
  .divrow__no{grid-row:1}.divrow__meta{grid-column:1/-1}}

/* ---------- STATS ROW ---------- */
.statsrow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px);border-top:1px solid var(--line);padding-top:clamp(26px,3vw,44px)}
.statsrow__no{font-weight:900;font-size:clamp(2.4rem,5vw,4.6rem);letter-spacing:-.03em;line-height:1}
.statsrow__lbl{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;font-weight:600;margin-top:6px}

/* ---------- FILM POSTERS ---------- */
.posters{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,20px)}
/* .poster is 3/4 and the official card art is 3/4 — an exact fit, so `cover`
   crops nothing. It is declared anyway so a stray off-ratio legacy poster
   crops centred instead of stretching. */
.poster{position:relative;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:3/4;background:var(--sand);display:block}
.poster img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform 1s var(--ease)}
.poster:hover img{transform:scale(1.06)}
.poster__tag{position:absolute;top:12px;left:12px;background:rgba(252,253,251,.92);color:var(--black);font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px}
.poster__meta{position:absolute;inset:auto 0 0 0;padding:14px;color:#fff;background:linear-gradient(transparent,rgba(13,12,10,.78));display:flex;flex-direction:column;gap:2px}
.poster__title{font-weight:700;font-size:1.02rem;line-height:1.1}
.poster__sub{font-size:.78rem;opacity:.82}
.poster--more{display:flex;flex-direction:column;justify-content:space-between;background:var(--black);color:#fff;padding:18px}
.poster--more .poster__big{font-weight:900;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.02em}
.poster--more .tlink{margin-top:auto}

/* filter pills */
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{border:1px solid var(--line-strong);border-radius:999px;padding:9px 20px;font-size:.9rem;font-weight:600;transition:.3s var(--ease)}
.pill:hover{border-color:var(--black)}
.pill.is-active{background:var(--black);color:#fff;border-color:var(--black)}

/* ---------- MARQUEE ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:clamp(16px,1.8vw,28px);white-space:nowrap}
.marquee__track{display:inline-flex;gap:0;animation:marq 26s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(1.3rem,3vw,2.6rem);padding-inline:.5em;display:inline-flex;align-items:center;gap:.5em}
.marquee .dot{color:var(--accent);font-size:.5em;transform:translateY(-.1em)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- DEVICE MOCKUP PANELS ---------- */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px)}
.panel{background:var(--sand);border-radius:var(--r-lg);padding:clamp(26px,3.4vw,60px);display:flex;flex-direction:column;align-items:center;gap:24px}
.panel__media{width:100%;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:16/10;box-shadow:0 30px 60px -30px rgba(13,12,10,.45)}
.panel__media img{width:100%;height:100%}

/* ---------- CONTACT / CTA ---------- */
.cta{background:var(--black);color:#fff;border-radius:var(--r-lg);padding:clamp(34px,5vw,84px);position:relative;overflow:hidden}
.cta__mtn{position:absolute;right:0;bottom:0;width:min(46%,520px);color:rgba(255,255,255,.06)}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--silver);font-weight:600}
.field input,.field select,.field textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:13px 16px;color:#fff;transition:border .3s}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.42)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#fff}
.field select option{color:#000}
.field textarea{min-height:120px;resize:vertical}

/* ---------- FOOTER ---------- */
.footer{background:var(--black);color:var(--white);padding-top:clamp(56px,7vw,100px);overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,48px)}
.footer h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silver);font-weight:600;margin-bottom:1.1em}
.footer a:not(.brand):not(.tlink){color:rgba(255,255,255,.78);line-height:2.1;transition:color .3s}
.footer a:not(.brand):not(.tlink):hover{color:#fff}
.footer .brand__sub{opacity:.6}
.socials{display:flex;gap:12px}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;transition:.3s}
.socials a:hover{background:#fff;color:var(--black)}
.socials svg{width:19px;height:19px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.14);
  margin-top:clamp(40px,5vw,72px);padding-block:24px;color:var(--silver);font-size:.86rem}
.foot-word{font-weight:900;font-size:clamp(4rem,23vw,24rem);line-height:.8;letter-spacing:-.04em;text-align:center;
  color:rgba(255,255,255,.05);padding-bottom:.04em;user-select:none}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}
.reveal[data-delay="4"]{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.line-mask{display:block;overflow:hidden}
.line-mask>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.is-in .line-mask>span,.line-mask.is-in>span{transform:none}

/* ---------- PAGE HERO (inner pages) ---------- */
.phero{position:relative;padding:clamp(140px,16vh,210px) var(--pad) clamp(56px,7vw,104px);color:#fff;overflow:hidden}
.phero__bg{position:absolute;inset:0;z-index:-2}
.phero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
/* Page heroes now sit on clean film stills, which are far brighter than the
   old hand-graded crops. The ramp never drops below .44 behind the headline
   and holds ~.60 behind the standfirst: measured on a pure-white still that is
   3.5:1 for the display type and 4.6:1 for the body copy, so the treatment
   survives a daylight frame without turning into a black box. */
.phero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(13,12,10,.6) 0%,rgba(13,12,10,.44) 34%,
    rgba(13,12,10,.6) 70%,rgba(13,12,10,.78) 100%)}
.phero .container{text-shadow:0 1px 26px rgba(13,12,10,.4)}
.phero .container{position:relative}
.crumbs{display:flex;align-items:center;gap:10px;font-size:.84rem;color:rgba(255,255,255,.74);font-weight:500}
.crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.crumbs span.sep{opacity:.5}

/* ---------- ACCORDION ---------- */
.acc__item{border-top:1px solid var(--line)}
.acc__item:last-child{border-bottom:1px solid var(--line)}
.acc__head{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;text-align:left;
  padding:clamp(18px,2vw,28px) 0;font-weight:600;font-size:clamp(1.05rem,1.6vw,1.4rem);letter-spacing:-.01em}
.acc__icon{position:relative;width:20px;height:20px;flex:none}
.acc__icon::before,.acc__icon::after{content:"";position:absolute;background:currentColor;transition:transform .35s var(--ease)}
.acc__icon::before{top:9px;left:0;width:20px;height:2px}
.acc__icon::after{top:0;left:9px;width:2px;height:20px}
.acc__item.is-open .acc__icon::after{transform:scaleY(0)}
.acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.acc__item.is-open .acc__body{grid-template-rows:1fr}
.acc__body>div{overflow:hidden}
.acc__body p{color:var(--muted);padding-bottom:clamp(16px,2vw,26px);max-width:64ch}

/* ---------- MEDIA + TAGS ---------- */
.media{border-radius:var(--r-lg);overflow:hidden;background:var(--sand)}
.media--tall{aspect-ratio:4/5}
.media--wide{aspect-ratio:16/10}
.media img{width:100%;height:100%;transition:transform 1.1s var(--ease)}
.media:hover img{transform:scale(1.04)}
.tag{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line-strong);
  border-radius:999px;padding:12px 22px;font-weight:600;font-size:.92rem;transition:.3s var(--ease)}
.tag:hover{background:var(--black);color:#fff;border-color:var(--black)}
.hr{border:none;border-top:1px solid var(--line)}
.quote-blk{font-weight:600;font-size:clamp(1.3rem,2.4vw,2.2rem);line-height:1.18;letter-spacing:-.015em;text-wrap:balance}

/* capability list (division offerings / how it works) */
.caps{margin-top:clamp(22px,3vw,44px)}
.cap{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(18px,3vw,48px);row-gap:4px;
  padding:clamp(20px,2.4vw,36px) 0;border-top:1px solid var(--line)}
.cap:last-child{border-bottom:1px solid var(--line)}
.cap__no{grid-row:span 2;font-weight:700;color:var(--gunsmoke);font-size:.95rem;padding-top:.35em}
.cap h3{font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.2rem,2.2vw,1.9rem);line-height:1}
.cap p{color:var(--muted);max-width:56ch}
@media(max-width:560px){.cap{grid-template-columns:1fr}.cap__no{grid-row:auto}}
.mx-auto{margin-inline:auto}
.split-media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,72px);align-items:center}
.split-media--rev .split-media__txt{order:2}
@media(max-width:860px){.split-media{grid-template-columns:1fr}.split-media--rev .split-media__txt{order:0}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:920px){
  .hero__bottom{grid-template-columns:1fr;gap:26px}
  .hero__cards{max-width:none;margin-left:0}
  .scroll-cue{display:none}
  .feat-grid{grid-template-columns:1fr}
  .panels{grid-template-columns:1fr}
  .imgsplit{grid-template-columns:1fr}
  .cols-4{grid-template-columns:repeat(2,1fr)}
  .statsrow{grid-template-columns:repeat(2,1fr);gap:26px 16px}
}
@media(max-width:680px){
  .posters{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .editorial__head .chip{display:none}
  .editorial__labels{display:none}
  .stat-card{min-height:auto}
  .stat-card__txt{margin-top:10px}
}
@media(max-width:460px){
  .foot-grid{grid-template-columns:1fr}
  .cols-2{grid-template-columns:1fr}
}

/* ============================================================
   SHARED COMPONENTS (v2.1) — built for the page agents.
   All composed from the tokens above. See scratchpad/CONTRACT.md.
   ============================================================ */

/* ---------- HERO CAROUSEL (cross-dissolve + scale drift) ---------- */
.heroslides{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--black)}
.heroslide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
/* One 16:9 textless master per slide, no wide/tall pair. Portrait phones crop
   hard on the horizontal axis, so the focal point is biased upward — faces sit
   in the top third of a 16:9 frame and must survive a 375px viewport. A slide
   can override with data-focus="50% 20%". */
.heroslide img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  transform:scale(1.06);transition:transform 7s linear}
/* PORTRAIT PHONES — the stills are wide ensemble compositions, so filling a
   9:19.5 viewport with a 16:9 master would show barely a quarter of the frame
   and reliably decapitate someone. Instead the still keeps a generous band at
   the top of the hero and the title sits beneath it on the black base: roughly
   45% of the original width stays visible instead of 26%, and the type is on
   solid black rather than fighting the image.
   NB: .heroslides sits at z-index:-2, so a background on .hero itself would
   paint OVER it. The black base is the one already on .heroslides; only the
   image height is constrained. */
@media (max-width:700px) and (orientation:portrait){
  .heroslide img{height:66svh;object-position:50% 30%}
  .hero::after{background:linear-gradient(180deg,
    rgba(13,12,10,.34) 0%,rgba(13,12,10,.05) 26%,
    rgba(13,12,10,.35) 56%,rgba(13,12,10,.92) 66%,rgba(13,12,10,1) 72%)}
}
.heroslide.is-active{opacity:1;z-index:1}
.heroslide.is-active img{transform:scale(1)}
/* title-only treatment over the still — no poster art */
.hero__film{display:flex;flex-direction:column;gap:.5em}
.hero__filmtitle{font-weight:900;text-transform:uppercase;letter-spacing:-.025em;line-height:.92;
  font-size:clamp(2.1rem,6.4vw,5.4rem);text-wrap:balance;transition:opacity .5s var(--ease);
  text-shadow:0 2px 40px rgba(13,12,10,.55)}
.hero__filmmeta{display:inline-flex;align-items:center;gap:.8em;font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.hero__is-swapping .hero__filmtitle,.hero__is-swapping .hero__filmmeta{opacity:0}
.hero__ctrls{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(18px,2vw,28px)}
.hero__ar{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.4);color:#fff;
  display:grid;place-items:center;flex:none;transition:.35s var(--ease)}
.hero__ar svg{width:19px;height:19px}
.hero__ar:hover{background:#fff;color:var(--black);border-color:#fff}
.hero__count{font-size:.78rem;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.8)}
@media (prefers-reduced-motion:reduce){
  .heroslide,.heroslide img{transition:none}
  .heroslide img{transform:none}
}

/* ---------- FILM STILL CARD (16:9, title-only overlay) ----------
   Feed this ONLY window.ART[slug].still — the clean, textless master. The
   aspect matches the art exactly (16/9), so nothing is cropped. The title is
   set by us in .still__title; never point .still at ART[slug].key, whose
   title lockup is baked into the pixels and would read twice. For key art use
   .still--bare, which drops the scrim and the overlay entirely. */
.stills{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,24px)}
.stills--3{grid-template-columns:repeat(3,1fr)}
.still{position:relative;display:block;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:16/9;background:var(--sand)}
.still img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.still:hover img{transform:scale(1.05)}
/* Scrim, not a box: fully clear across the top two-fifths of the frame so the
   still reads as an image, ramping to .88 under the type. Measured against a
   pure-white still the title clears 5.3:1 and the meta line 4.8:1, so the
   treatment holds on bright daylight frames as well as dark ones. */
.still::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(13,12,10,0) 0%,
    rgba(13,12,10,.06) 38%,
    rgba(13,12,10,.55) 68%,
    rgba(13,12,10,.88) 100%)}
.still__in{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(16px,1.8vw,28px);color:#fff;
  display:flex;flex-direction:column;gap:.35em;text-shadow:0 1px 20px rgba(13,12,10,.5)}
.still__title{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.98;
  font-size:clamp(1.15rem,2.1vw,2rem);text-wrap:balance}
.still__meta{font-size:.74rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;opacity:.86}
.still--lg{aspect-ratio:21/9}
/* Key art (title already in the image): no scrim, no overlay type. */
.still--bare::after{display:none}
.still--bare .still__in{display:none}
@media(max-width:760px){.stills,.stills--3{grid-template-columns:1fr}}

/* ---------- DENSE POSTER GRID (150+ titles) ---------- */
.posters--dense{grid-template-columns:repeat(auto-fill,minmax(clamp(128px,13.5vw,186px),1fr));gap:clamp(10px,1.1vw,16px)}
.posters--dense .poster__meta{padding:10px}
.posters--dense .poster__title{font-size:.88rem}
.posters--dense .poster__sub{font-size:.7rem}
.posters--dense .poster__tag{top:8px;left:8px;font-size:.66rem;padding:3px 8px}
@media(max-width:680px){.posters--dense{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}}

/* ---------- FILTER BAR ---------- */
.filterbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 26px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:clamp(14px,1.6vw,22px)}
.filterbar__lbl{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gunsmoke);flex:none}
.filterbar .pills{flex:1}
.filterbar__count{font-size:.86rem;color:var(--muted);flex:none}
.searchnote{display:none;color:var(--muted);font-size:.92rem}

/* ---------- GROUPED CREDITS (Presents / Co-Presents) ---------- */
.prodgroup{margin-top:clamp(36px,4.4vw,68px)}
.prodgroup__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;
  border-bottom:1px solid var(--line);padding-bottom:clamp(12px,1.4vw,18px)}
.prodgroup__lbl{font-weight:900;text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(1.2rem,2.2vw,1.9rem);line-height:1}
.prodgroup__note{color:var(--muted);font-size:.92rem;max-width:56ch}
.prodgroup__body{margin-top:clamp(20px,2.4vw,34px)}
.prodgroup__empty{color:var(--muted);font-size:.98rem;max-width:60ch;
  border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:clamp(18px,2vw,28px)}

/* ---------- LOGO MARQUEE ---------- */
.marquee--logos{padding-block:clamp(18px,2vw,32px)}
.marquee--logos .marquee__track{gap:clamp(28px,4vw,64px);align-items:center;animation-duration:44s}
.logo-chip{display:inline-flex;align-items:center;flex:none;padding:0}
.logo-chip img{height:clamp(30px,3.2vw,46px);width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .4s var(--ease),opacity .4s var(--ease)}
.logo-chip:hover img{filter:none;opacity:1}
.marquee--logos:hover .marquee__track{animation-play-state:paused}

/* ---------- CHANNEL CARDS ---------- */
.chans{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,20px)}
.chan{background:var(--sand);border-radius:var(--r);padding:clamp(18px,1.7vw,26px);
  display:flex;flex-direction:column;gap:12px;min-height:220px;transition:background .4s var(--ease)}
.chan:hover{background:#ededed}
.chan__logo{width:56px;height:56px;border-radius:14px;overflow:hidden;background:var(--white);flex:none;display:grid;place-items:center}
.chan__logo img{width:100%;height:100%;object-fit:contain}
.chan__name{font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:1.02rem;line-height:1.1;margin-top:4px}
.chan__txt{color:var(--muted);font-size:.9rem}
.chan__link{margin-top:auto;display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.88rem}
.chan__link svg{width:1em;height:1em;transition:transform .35s var(--ease)}
.chan:hover .chan__link{color:var(--accent)}
.chan:hover .chan__link svg{transform:translate(3px,-3px)}
@media(max-width:920px){.chans{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.chans{grid-template-columns:1fr}}

/* ---------- PARTNER ROW (distribution / broadcast) ---------- */
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.partner{background:var(--white);padding:clamp(20px,2.2vw,34px);display:flex;flex-direction:column;gap:6px;
  min-height:clamp(118px,12vw,160px);transition:background .35s var(--ease)}
.partner:hover{background:var(--sand)}
.partner__name{font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.05}
.partner__role{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gunsmoke)}
.partner__logo{height:clamp(26px,2.6vw,36px);width:auto;object-fit:contain;margin-bottom:4px}
.bg-sand .partner{background:var(--sand)}
.bg-sand .partner:hover{background:var(--white)}

/* ---------- TRACK / JUKEBOX LIST ---------- */
.tracklist{margin-top:clamp(22px,2.8vw,40px)}
.track{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;column-gap:clamp(14px,2vw,30px);row-gap:4px;
  padding:clamp(14px,1.7vw,24px) 0;border-top:1px solid var(--line)}
.track:last-child{border-bottom:1px solid var(--line)}
.track__no{font-weight:700;color:var(--gunsmoke);font-size:.9rem}
.track__art{width:clamp(46px,5vw,64px);aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--sand);flex:none}
.track__art img{width:100%;height:100%;object-fit:cover}
.track__title{font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1rem,1.6vw,1.3rem);line-height:1.1}
.track__meta{color:var(--muted);font-size:.86rem;grid-column:3;margin-top:2px}
.track__tag{justify-self:end;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gunsmoke);white-space:nowrap}
.track:hover .track__title{color:var(--accent)}
@media(max-width:640px){
  .track{grid-template-columns:auto 1fr;row-gap:6px}
  .track__no{display:none}
  .track__meta{grid-column:2}
  .track__tag{grid-column:2;justify-self:start}
}

/* ---------- PERSON BLOCK (founder) ---------- */
.person{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,72px);align-items:start}
.person__media{border-radius:var(--r-lg);overflow:hidden;background:var(--sand);aspect-ratio:4/5}
.person__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.person__media:hover img{transform:scale(1.03)}
.person__name{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.5rem,3vw,2.6rem);line-height:1}
.person__role{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gunsmoke);margin-top:.7em}
.person__bio p+p{margin-top:1em;color:var(--muted)}
@media(max-width:860px){.person{grid-template-columns:1fr}}

/* ---------- DARK EDITORIAL BAND ("Our Journey") ----------
   ONE font size throughout. Emphasis comes from weight / colour /
   rules only — never from a size change. */
.journey{background:var(--black);color:var(--white)}
.journey__grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(26px,4vw,86px);align-items:start}
.journey__aside{position:sticky;top:clamp(96px,10vw,128px)}
.journey__body{font-size:clamp(1.05rem,.55vw + .92rem,1.32rem);line-height:1.62}
.journey__body p{color:rgba(255,255,255,.72);font-weight:400}
.journey__body p+p{margin-top:1.15em}
.journey__body p.is-intro{color:var(--white);font-weight:700}
.journey__body strong,.journey__body b{color:var(--white);font-weight:700;font-size:inherit}
.journey__body em{font-style:normal;color:var(--white);font-weight:600}
.journey__body .journey__mark{color:var(--white);font-weight:700;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.5)}
.journey__rule{border:none;border-top:1px solid rgba(255,255,255,.16);margin-block:clamp(24px,3vw,42px)}
.journey__body .journey__pull{border-left:2px solid var(--white);padding-left:clamp(16px,1.6vw,26px);
  color:var(--white);font-weight:600;font-size:inherit}
.journey .eyebrow{color:rgba(255,255,255,.72)}
@media(max-width:860px){.journey__grid{grid-template-columns:1fr}.journey__aside{position:static}}

/* ---------- REROUTE CTA BAND ---------- */
.reroute{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 40px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:clamp(30px,4vw,60px)}
.reroute__txt{max-width:52ch}
.reroute__head{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.98;
  font-size:clamp(1.5rem,3.4vw,2.8rem);text-wrap:balance}
.reroute__sub{color:var(--muted);margin-top:.6em}
.bg-black .reroute,.journey .reroute{border-color:rgba(255,255,255,.16)}
.bg-black .reroute__sub,.journey .reroute__sub{color:rgba(255,255,255,.7)}

/* ---------- 16:9 VIDEO / EMBED FRAME ---------- */
.ratio-vid{aspect-ratio:16/9}
.ratio-vid iframe,.ratio-vid video{width:100%;height:100%;border:0;display:block}

/* ---------- FILM DETAIL MODAL ---------- */
body.modal-open{overflow:hidden}
.fmodal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(16px,3vw,48px);
  background:rgba(13,12,10,.62);backdrop-filter:blur(4px);opacity:0;transition:opacity .38s var(--ease)}
.fmodal[hidden]{display:none}
.fmodal.is-open{opacity:1}
.fmodal__card{position:relative;background:var(--white);color:var(--black);border-radius:var(--r-lg);
  width:min(880px,100%);max-height:min(86vh,900px);overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(26px,3.4vw,52px);transform:translateY(18px) scale(.985);
  transition:transform .45s var(--ease);box-shadow:0 50px 100px -40px rgba(13,12,10,.6)}
.fmodal.is-open .fmodal__card{transform:none}
.fmodal__close{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-strong);display:grid;place-items:center;transition:.3s var(--ease);z-index:3}
.fmodal__close:hover{background:var(--black);border-color:var(--black);color:#fff}
.fmodal__close span{position:relative;display:block;width:16px;height:16px}
.fmodal__close span::before,.fmodal__close span::after{content:"";position:absolute;top:7px;left:0;width:16px;height:1.8px;background:currentColor}
.fmodal__close span::before{transform:rotate(45deg)}
.fmodal__close span::after{transform:rotate(-45deg)}
.fmodal__body--split{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(20px,2.6vw,40px);align-items:start}
.fmodal__poster{border-radius:var(--r-sm);overflow:hidden;background:var(--sand);aspect-ratio:3/4}
.fmodal__poster img{width:100%;height:100%;object-fit:cover}
.fmodal__title{padding-right:52px}
.fmodal__deva{color:var(--gunsmoke);font-size:1.05rem;margin-top:.4em}
/* Honest empty state for the artwork titles that carry no credit record. */
.fmodal__soon{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gunsmoke);padding-top:clamp(10px,1.1vw,15px);border-top:1px solid var(--line)}
.fmodal__credits{display:grid;gap:0}
.fmodal__credit{display:grid;grid-template-columns:minmax(96px,.28fr) 1fr;gap:6px clamp(14px,2vw,28px);
  padding-block:clamp(10px,1.1vw,15px);border-top:1px solid var(--line)}
.fmodal__credit:last-child{border-bottom:1px solid var(--line)}
.fmodal__credit dt{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gunsmoke)}
.fmodal__credit dd{color:var(--fg);font-size:.98rem}
@media(max-width:640px){
  .fmodal__body--split{grid-template-columns:1fr}
  .fmodal__poster{max-width:200px}
  .fmodal__credit{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .fmodal,.fmodal__card{transition:none}
  .fmodal__card{transform:none}
}

/* ---------- A24-STYLE SLATE HERO ----------
   The homepage hero is the slate itself: a stacked list of film titles in
   large light-weight type over a full-bleed textless still. Hovering or
   focusing a title swaps the backdrop; it auto-advances otherwise.
   Reference: a24films.com. */
.hero24{position:relative;height:100svh;min-height:600px;background:var(--black);color:var(--white);overflow:hidden}
.hero24__bgs,.hero24__bgs img{position:absolute;inset:0}
.hero24__bgs img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 1.1s var(--ease)}
.hero24__bgs img.is-active{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .hero24__bgs img.is-active{animation:hero24drift 7s var(--ease) forwards}
  @keyframes hero24drift{from{transform:scale(1.045)}to{transform:scale(1)}}
}
.hero24__scrim{position:absolute;inset:0;background:
  linear-gradient(75deg,rgba(13,12,10,.74) 0%,rgba(13,12,10,.30) 46%,rgba(13,12,10,0) 72%),
  linear-gradient(to top,rgba(13,12,10,.50),transparent 42%)}
.hero24__list{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(30px,7vh,76px);z-index:2;
  display:flex;flex-direction:column;align-items:flex-start}
.hero24__film{display:inline-flex;align-items:baseline;gap:.5em;color:var(--white);opacity:.4;
  transition:opacity .45s var(--ease)}
.hero24__film.is-active{opacity:1}
@media (hover:hover){.hero24__film:hover{opacity:1}}
.hero24__t{font-weight:500;font-size:clamp(1.5rem,4.6vw,4.05rem);line-height:1.16;letter-spacing:-.02em;text-wrap:balance}
.hero24__y{font-size:clamp(.66rem,1vw,.84rem);font-weight:600;letter-spacing:.1em;opacity:.75;transform:translateY(-.95em)}
.hero24__down{position:absolute;right:var(--pad);bottom:clamp(30px,7vh,68px);z-index:2;color:var(--white);opacity:.85;
  transition:transform .4s var(--ease)}
.hero24__down:hover{transform:translateY(4px)}
.hero24__down svg{width:20px;height:36px}
@media (max-width:640px){
  .hero24__list{bottom:clamp(64px,12vh,96px)}
  .hero24__down{bottom:24px}
}