.hero { background: #000; overflow: hidden; }
.hero::before { display: none; }
.hero-media { position: absolute; inset: 0 max(0px, calc((100% - 1440px) / 2)) 0 auto; width: 58%; max-width: 840px; pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 14%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask-composite: intersect; }
.motion-poster, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video { opacity: 0; transition: opacity .35s ease; }
.hero-media.video-ready .hero-video { opacity: 1; }
.hero-content { position: relative; z-index: 1; }
.hero-content > * { max-width: 440px; }
.hero h1 { color: var(--gold); }
.hero h1 > span { color: #f7f7f8; }
.hero-description { max-width: 380px; }
.motion-toggle { position: absolute; right: max(28px, calc((100% - 1184px) / 2)); bottom: 24px; z-index: 2; color: var(--gold); background: #1c1d20; border-color: #d7b67555; }
.motion-toggle:hover { background: #303136; border-color: var(--gold); }
.motion-toggle svg { width: 18px; height: 18px; }
@media (min-width: 641px) and (max-width: 960px) {
    .hero-content > * { max-width: 320px; }
    .hero-media { width: 55%; }
    .hero h1 { font-size: 44px; }
    .hero h1 > span { font-size: 28px; }
}
@media (max-width: 640px) {
    .hero-media { inset: auto 0 0; width: 100%; height: 240px; mask-image: linear-gradient(180deg, transparent, #000 12%, #000 90%, transparent); }
    .hero-content { min-height: 560px; padding-bottom: 240px; }
    .hero-content > * { max-width: 100%; }
    .hero-description { max-width: 310px; }
    .motion-toggle { right: 20px; bottom: 18px; width: 44px; height: 44px; }
}
@media (max-width: 640px) and (max-height: 740px) {
    .hero-media { height: 230px; }
    .hero-content { min-height: 520px; padding-bottom: 230px; }
}
@media (max-width: 640px) and (max-height: 620px) {
    .hero-content { min-height: calc(100svh - 150px); padding-bottom: 190px; }
    .hero-media { height: 210px; }
}
@media (prefers-reduced-motion: reduce) { .hero-video { transition: none; } }