*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #000; color: #fff; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
img { display: block; max-width: 100%; height: auto; }

.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; text-align: center; }
.hero__bg, .hero__bg img, .hero__video, .hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__bg img { object-fit: cover; }
.hero__video { opacity: 0; transition: opacity 1.2s; pointer-events: none; }
.hero__video.is-on { opacity: 1; }
.hero__video iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; transform: translate(-50%, -50%); border: 0; }
.hero__shade { background: rgba(0,0,0,.55); }
.hero__inner { position: relative; z-index: 2; padding: 0 16px; }
.hero__inner { max-width: 760px; }
.hero__logo { width: min(440px, 82vw); margin: 0 auto 1.4rem; }
.hero__title { margin: 0 0 .4em; font-size: clamp(1.05rem, 2.4vw, 1.4rem); font-weight: 600; line-height: 1.3; }
.hero__title span { display: inline-block; }
.hero__lead { margin: 0 0 1.6em; color: rgba(255,255,255,.85); font-size: clamp(.95rem, 2vw, 1.05rem); }

.btn { display: inline-flex; align-items: center; gap: .5em; padding: .6em 1.3em; color: #fff; border: 2px solid #fff; border-radius: 6px; background: rgba(0,0,0,.25); font-weight: 600; text-decoration: none; transition: background .2s, color .2s; }
.btn:hover { background: #fff; color: #000; }
.btn:focus-visible { outline: 3px solid #e57e25; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hero__video { transition: none; }
}