.film-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(235px,34%); align-items:center; gap:clamp(24px,5vw,76px); padding:clamp(38px,6vw,82px) clamp(0px,2vw,30px); }
.film-intro { max-width:650px; }
.film-intro h1 { font-size:clamp(40px,5vw,80px); line-height:1.02; letter-spacing:-.055em; max-width:12ch; }
.film-intro .lede { max-width:36ch; font-size:clamp(18px,1.65vw,25px); }
.film-intro .note { margin-top:18px; }
.film-intro .hero-actions a:not(.btn), .direction-plan a { text-underline-offset:4px; }
.film-preview { margin:0; width:min(100%,330px); justify-self:center; }
.film-preview video { width:100%; aspect-ratio:9/16; display:block; border-radius:12px; background:#1b1a17; }
.film-preview figcaption { display:grid; gap:2px; margin:10px 0 0; }
.film-preview figcaption span { font-size:13px; color:#aaa69e; }
.product-intro, .direction-plan { padding:36px 0 28px; border-top:1px solid var(--line); }
.product-intro p,.direction-plan p { max-width:62ch; color:#b6b2aa; }
.case-film h2 { font-size:22px; margin-top:32px; }
.case-film blockquote { margin:18px 0; font:italic clamp(21px,2.1vw,31px)/1.28 Georgia,serif; color:#dfc2a1; }
.time-mark { background:transparent; border:1px solid #6d665a; border-radius:6px; color:#e8c49e; cursor:pointer; padding:2px 8px; margin-right:4px; }
.direction-plan ol { padding:0; list-style:none; max-width:75ch; }
.direction-plan li { display:grid; grid-template-columns:4.5em 1fr; padding:12px 0; border-bottom:1px solid var(--line); }
@media(max-width:720px) {
 .film-hero { grid-template-columns:1fr; gap:24px; padding:32px 0; }
 .film-preview { width:min(100%,290px); }
 .film-intro .hero-actions { margin-top:18px; }
}