.hero-film-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 19px; padding: 9px 15px; border: 1px solid #ffffff45; border-radius: 30px; background: #08171d80; color: #fff; font: 500 11px var(--body); letter-spacing: .2px; transition: border-color .2s, background .2s; }
.hero-film-link > span:first-child { color: #ff5860; font-size: 10px; }
.hero-film-link:hover { border-color: #f1565d; background: #132730; }
.film-duration { color: #bac7cd; padding-left: 10px; border-left: 1px solid #ffffff30; font-size: 10px; }
.promo-section { display: grid; grid-template-columns: .75fr 1.5fr; gap: 6%; align-items: center; background: radial-gradient(ellipse at 75% 40%, #1b3443 0, #0b1c24 57%, #08171d 100%); }
.promo-section[hidden], .hero-film-link[hidden], .promo-play[hidden], .promo-error[hidden] { display: none; }
.promo-copy h2 { font-size: clamp(43px, 4.4vw, 67px); }
.promo-copy > p { color: #b1bfc5; font-size: 13px; line-height: 1.9; max-width: 300px; margin: 24px 0; }
.promo-note { display: block; color: #899fa9; font-size: 10px; margin-top: 30px; }
.promo-player-wrap { min-width: 0; }
.promo-frame { position: relative; aspect-ratio: 16 / 9; background: #08171d; border: 1px solid #ffffff2b; border-radius: 5px; box-shadow: 0 24px 70px #0005; overflow: hidden; }
.promo-frame video { display: block; width: 100%; height: 100%; object-fit: contain; }
.promo-frame video:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.promo-play { position: absolute; inset: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 15px; border: 0; background: linear-gradient(transparent 35%, #07172028); color: white; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-shadow: 0 2px 10px #000; }
.promo-play-icon { display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid #ffffff80; border-radius: 50%; background: #112932b8; backdrop-filter: blur(8px); font-size: 17px; padding-left: 3px; transition: background .2s, transform .2s; }
.promo-play small { display: block; color: #c9d6db; text-align: left; font-size: 10px; letter-spacing: .6px; margin-top: 5px; }
.promo-play:hover .promo-play-icon { background: #dc3039; transform: scale(1.07); }
.promo-play:focus-visible { outline-offset: -5px; }
.promo-under { display: flex; justify-content: space-between; gap: 15px; padding: 15px 0; font-size: 8px; letter-spacing: 1.3px; color: #acbec7; border-bottom: 1px solid #ffffff20; }
.promo-transcript { color: #94aab5; font-size: 10px; margin-top: 12px; }
.promo-transcript summary { width: fit-content; cursor: pointer; }
.promo-transcript p { font-size: 12px; line-height: 1.8; padding-top: 12px; max-width: 650px; }
.promo-error { font-size: 12px; color: #e7b6b8; margin-top: 12px; }
.promo-error a { text-decoration: underline; }
@media (max-width: 900px) { .promo-section { grid-template-columns: 1fr; gap: 30px; } .promo-copy > p { max-width: 450px; } .promo-note { margin-top: 20px; } }
@media (max-width: 600px) { .hero-film-link { margin-top: 13px; min-height: 36px; } .promo-section { padding-top: 60px; padding-bottom: 60px; } .promo-copy h2 { font-size: 51px; } .promo-play-icon { width: 48px; height: 48px; font-size: 14px; } .promo-under { font-size: 7px; letter-spacing: .5px; } }
@media (prefers-reduced-motion: reduce) { .hero-film-link, .promo-play-icon { transition: none; } }