.hero { position: relative; min-height: 480px; height: min(660px, calc(54svh + 60px)); isolation: isolate; background: var(--surface); }
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-image { object-fit: cover; object-position: 65% 38%; }
@media (min-width: 601px) { .hero-image--mobile { display: none; } }
@media (max-width: 600px) { .hero-image--desktop { display: none; } }
.hero-shade { background: none; }
.hero-layout { position: relative; height: 100%; min-height: inherit; display: flex; flex-direction: column; justify-content: center; padding-top: 110px; padding-bottom: 80px; }
.hero-copy { max-width: 650px; }
.hero h1 { font-size: clamp(48px, 4.8vw, 70px); font-weight: 500; line-height: 1.14; letter-spacing: -.04em; }
.hero h1 span { color: var(--gold-light); }
.hero-copy > p { margin-top: 22px; font-size: 15px; color: var(--muted); line-height: 1.85; }
@media (max-width: 1050px) {
    .hero-image { object-position: 61% center; }
    .hero h1 { font-size: clamp(48px, 5.2vw, 68px); }
}
@media (max-width: 600px) {
    .hero { height: clamp(380px, 54svh, 460px); min-height: 0; max-height: none; }
    .hero-image { object-position: center; height: 100%; object-fit: cover; }
    .hero-layout { justify-content: flex-end; padding-top: 120px; padding-bottom: 58px; }
    .hero h1 { font-size: clamp(36px, 10.4vw, 54px); line-height: 1.16; }
    .hero-copy > p { margin-top: 14px; font-size: 13px; line-height: 1.75; }
}
.hero--media .hero-shade { background: linear-gradient(90deg, var(--media-shade) 0%, color-mix(in srgb, var(--media-shade) 68%, transparent) 42%, color-mix(in srgb, var(--media-shade) 20%, transparent) 100%); }
.hero--media h1, .hero--media h1 span, .hero--media .hero-copy > p { color: var(--media-ink); }
.hero--media .hero-copy h1::after { content: ''; display: block; width: min(240px, 42%); height: 2px; margin-top: 26px; background: linear-gradient(90deg, var(--gold), var(--media-ink), transparent); }
@media (max-width: 360px) { .hero h1 { font-size: 39px; } }
@media (max-width: 600px) and (max-height: 700px) {
    .hero h1 { font-size: 36px; }
    .hero-copy > p { margin-top: 18px; }
    .hero-layout { padding-bottom: 66px; }
}
@media (min-width: 601px) {
    .home-intro--desktop-video { position: relative; isolation: isolate; overflow: clip; border-radius: 0 0 50% 50% / 0 0 64px 64px; background: var(--surface); }
    .home-intro--desktop-video::before { content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 42% 4%, color-mix(in srgb, var(--media-ink) 22%, transparent), transparent 26%), radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--surface-raised) 35%, transparent), transparent 46%); }
    .home-intro--desktop-video .hero { position: static; isolation: auto; background: transparent; }
    .home-intro--desktop-video .hero-image,
    .home-intro--desktop-video .hero-shade { pointer-events: none; }
    .home-intro--desktop-video .quick-access { padding-bottom: 80px; }
}
@media (max-width: 600px) {
    .home-intro--mobile-video { position: relative; isolation: isolate; overflow: clip; border-radius: 0 0 50% 50% / 0 0 28px 28px; background: var(--surface); }
    .home-intro--mobile-video::before { content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 42% 4%, color-mix(in srgb, var(--media-ink) 22%, transparent), transparent 26%), radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--surface-raised) 35%, transparent), transparent 46%); }
    .home-intro--mobile-video .hero { position: static; isolation: auto; background: transparent; }
    .home-intro--mobile-video .hero-image,
    .home-intro--mobile-video .hero-shade { pointer-events: none; }
    .home-intro--mobile-video .quick-access { padding-bottom: 44px; }
}
.hero-layout { z-index: 1; }
.home-intro {
    --hero-mist: linear-gradient(0deg, var(--surface), transparent 24%);
}
#main-content {
    background: var(--surface);
}
.hero--media .hero-shade {
    background: var(--hero-mist), linear-gradient(90deg, var(--media-shade), color-mix(in srgb, var(--media-shade) 48%, transparent) 48%, transparent 85%);
}
.hero--media .hero-shade::before {
    content: '';
    position: absolute;
    width: 70%;
    height: 360px;
    top: -280px;
    left: -8%;
    border-bottom: 1px solid color-mix(in srgb, var(--media-ink) 65%, transparent);
    border-radius: 50%;
    transform: rotate(-18deg);
    box-shadow: 0 24px 70px color-mix(in srgb, var(--surface-raised) 35%, transparent);
    pointer-events: none;
}
.home-intro + .about {
    border-top: 0;
    padding-top: clamp(40px, 4vw, 64px);
}
.hero:not(.hero--media) .hero-shade { background: none; }
@media (max-width: 600px) {
    .hero--media .hero-shade::before { content: none; }
    .hero--media .hero-shade { background: var(--hero-mist), linear-gradient(0deg, var(--media-shade) 0%, color-mix(in srgb, var(--media-shade) 60%, transparent) 45%, color-mix(in srgb, var(--media-shade) 35%, transparent) 100%); }
    .hero--media .hero-copy h1::after { width: 120px; margin-top: 16px; }
}