/* A full-width photograph fading into the page on both sides and below. */
.hero.container { width: 100%; max-width: none; margin: 0; min-height: 548px; background: var(--bg); isolation: isolate; }
.hero > img { right: 0; top: 0; height: 100%; width: auto; max-width: none; opacity: 1;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 29%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent, #000 29%, #000 86%, transparent 100%);
}
.hero::after { z-index: 2; background:
    linear-gradient(180deg, #0b0d1a99, #0b0d1a00 10%),
    linear-gradient(0deg, var(--bg), #0b0d1a00 23%),
    linear-gradient(90deg, #0b0d1ab8, #0b0d1a99 23%, #0b0d1a19 52%, #0b0d1a00 74%);
}
.hero-copy { z-index: 3; width: calc(100% - clamp(32px, 6vw, 112px)); max-width: 1536px; margin: 0 auto; padding: 102px 0 125px; }
.hero h1 { font-size: clamp(2.8rem, 4.6vw, 4.4rem); max-width: 760px; }
.hero-benefits { z-index: 3; left: max(calc((100% - 1536px) / 2), clamp(16px, 3vw, 56px)); bottom: 36px; gap: 32px; }
.hero-atmosphere { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; contain: strict; }
.hero-smoke { --smoke-opacity: 1; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease-out; }
.hero-atmosphere.is-rendered .hero-smoke { opacity: var(--smoke-opacity); animation: hero-smoke-arrive 1.4s ease-out both; }
@keyframes hero-smoke-arrive { from { opacity: .2; } to { opacity: var(--smoke-opacity); } }
.hero-haze { position: absolute; inset: -8%; background:
    radial-gradient(ellipse at 58% 40%, #966ad333, transparent 36%),
    radial-gradient(ellipse at 81% 52%, #9561d53a, transparent 31%),
    radial-gradient(ellipse at 44% 68%, #8462b323, transparent 33%);
    opacity: 1; transition: opacity 1.4s ease-out;
}
.hero-atmosphere.is-rendered .hero-haze { opacity: 0; }
@media (min-width: 1700px) { .hero.container { min-height: 588px; } .hero-copy { padding-top: 112px; } }
@media (max-width: 1150px) { .hero.container { min-height: 529px; } .hero h1 { font-size: 3.6rem; } }
@media (max-width: 800px) {
    .hero.container { min-height: 474px; }
    .hero-copy { padding: 55px 0 108px; }
    .hero h1 { font-size: clamp(2.6rem, 6vw, 3.3rem); }
    .hero > img { right: -85px; height: 100%; opacity: .88; }
    .hero::after { background: linear-gradient(180deg, #0b0d1a, #0b0d1a00 11%), linear-gradient(0deg, var(--bg), #0b0d1a00 28%), linear-gradient(90deg, #0b0d1aca, #0b0d1a66 43%, #0b0d1a05 86%); }
    .hero-benefits { left: 3vw; right: 3vw; bottom: 30px; justify-content: space-between; gap: 15px; }
    .hero-smoke { --smoke-opacity: .85; }
}
@media (max-width: 520px) {
    .hero.container { min-height: 466px; }
    .hero-copy { width: calc(100% - 40px); padding: 51px 0 120px; }
    .hero h1 { font-size: clamp(2.35rem, 10.6vw, 3rem); }
    .hero p { font-size: .88rem; line-height: 1.6; max-width: 310px; }
    .hero > img { height: 100%; right: -72px; opacity: .85; }
    .hero::after { background: linear-gradient(180deg, #0b0d1a, #0b0d1a00 11%), linear-gradient(0deg, var(--bg) 3%, #0b0d1a00 46%), linear-gradient(90deg, #0b0d1abf, #0b0d1a7a 52%, #0b0d1a0d); }
    .hero-benefits { left: 20px; right: 20px; gap: 12px; bottom: 27px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-smoke, .hero-haze { transition: none; }
    .hero-atmosphere.is-rendered .hero-smoke { animation: none; }
}