/* hero */
.film-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding-bottom:40px}
.film-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 38%;opacity:.85}
.film-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(6,11,18,.92) 0%,rgba(6,11,18,.55) 45%,rgba(6,11,18,.15) 75%),
  linear-gradient(180deg,rgba(6,11,18,.2) 0%,rgba(6,11,18,.1) 50%,rgba(6,11,18,.95) 88%,var(--bg) 100%)}
.film-hero-copy{position:relative;z-index:1;padding-top:clamp(110px,16vh,180px);padding-bottom:110px}
.film-hero h1{font-size:clamp(40px,8vw,100px);max-width:none;margin:22px 0 22px;letter-spacing:-.045em;line-height:.98;text-wrap:balance}
.film-hero .lead{font-size:clamp(17px,1.9vw,21px);max-width:600px;color:#d9e3ec;margin-bottom:32px;line-height:1.55}
.film-hero .cta{justify-content:flex-start}
.btn.glass{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);backdrop-filter:blur(8px)}
.btn.glass:hover{background:rgba(255,255,255,.12)}
.hero-strip{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hero-strip img{border-radius:12px;border:1px solid rgba(255,255,255,.08);aspect-ratio:16/9;object-fit:cover;width:100%;box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
@media (max-width:760px){.hero-strip{grid-template-columns:repeat(2,1fr)}.hero-strip img:nth-child(n+3){display:none}}

/* film */
.film-intro{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.film-intro h2{max-width:16ch}
.film-intro .sub{margin-bottom:22px}
.film-still{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line2)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}
.gallery img{border-radius:10px;border:1px solid var(--line);aspect-ratio:16/9;object-fit:cover;width:100%}
@media (max-width:860px){.film-intro{grid-template-columns:1fr}.gallery{grid-template-columns:repeat(2,1fr)}}

/* shorts */
.shorts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.shorts img{border-radius:14px;border:1px solid var(--line2);aspect-ratio:9/16;object-fit:cover;width:100%}
.shorts img:nth-child(2){transform:translateY(-24px)}
@media (max-width:520px){.shorts img:nth-child(2){transform:none}}

/* hero note */
.hero-note{margin-top:18px;font-size:14.5px;color:#aebccb}
.hero-note a{color:#d6e6f5;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(214,230,245,.35)}

/* workflow */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:f}
@media (max-width:1000px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.flow{grid-template-columns:minmax(0,1fr)}}
.flow-step{background:linear-gradient(180deg,var(--panel),#0b1420);border:1px solid var(--line);border-radius:16px;padding:14px 14px 22px;display:flex;flex-direction:column}
.flow-step h3{font-size:19px;margin:6px 4px 8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.flow-step p{font-size:15px;margin:0 4px;color:var(--soft)}
.flow-n{font:700 12.5px/1 var(--mono);color:var(--accent);letter-spacing:.08em;margin:16px 4px 0}
.flow-media{aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#050a10}
.flow-media img{width:100%;height:100%;object-fit:cover}
.flow-media.tall img{object-position:center 30%}
.flow-media.ui img{object-position:0 0}
.flow-step.live{border-color:rgba(90,174,255,.45);background:linear-gradient(180deg,#0f2034,#0b1624);box-shadow:0 30px 80px -40px rgba(47,127,214,.6)}
.live-tag{font:650 11.5px/1 var(--font);letter-spacing:.04em;padding:5px 8px;border-radius:999px;background:rgba(69,209,154,.12);color:var(--ok);border:1px solid rgba(69,209,154,.35)}

/* pillars under the film */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px;padding-top:32px;border-top:1px solid var(--line)}
.pillars h3{font-size:16px;margin-bottom:6px}
.pillars p{font-size:15px;margin:0}
@media (max-width:760px){.pillars{grid-template-columns:1fr;gap:18px}}
.flow-media.zoom-post img{transform:scale(2.1);transform-origin:44% 30%}
.flow-media.zoom-queue img{transform:scale(2.1);transform-origin:30% 26%}
@media (max-width:480px){.film-hero .cta .btn{flex:1 1 100%}.film-hero h1{font-size:42px}}