/* Hero-only video: keep text on a stable dark field and preserve the existing layout. */
.hero--video .hero__media {inset:0;width:100%;height:100%;-webkit-mask-image:none;mask-image:none}
.hero--video .hero__media img,.hero--video .hero__media video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero--video .hero__media img {animation:none}
.hero--video .hero__media video {opacity:0;pointer-events:none}
.hero--video.hero-video-ready .hero__media video {opacity:1}
.hero--video::after {background:linear-gradient(90deg,rgba(4,24,39,.97) 0%,rgba(4,24,39,.91) 38%,rgba(4,24,39,.48) 65%,rgba(4,24,39,.24) 100%),linear-gradient(180deg,rgba(4,24,39,.82) 0%,rgba(4,24,39,0) 25%,rgba(4,24,39,0) 60%,var(--bg-deep));-webkit-mask-image:none;mask-image:none}
@media(max-width:700px){.hero--video::after {background:linear-gradient(180deg,rgba(4,24,39,.97) 0%,rgba(4,24,39,.92) 54%,rgba(4,24,39,.45) 80%,rgba(4,24,39,.30) 100%)}.hero--video .hero__media img {object-position:58% 50%}.hero--video .hero__media video {display:none}}
@media(prefers-reduced-motion:reduce){.hero--video .hero__media video {display:none}}
/* Controls occupy existing section padding; content and media geometry stay intact. */
.media-pause { position:absolute; right:var(--gutter); bottom:12px; z-index:3; min-height:32px; padding:4px 10px; border:1px solid #92a5b2; background:#041827; color:#fff; font-size:.8125rem; }
.media-pause[hidden] { display:none; }
.media-pause:focus-visible { outline:2px solid #fff; outline-offset:3px; }