/* ==========================================================================
   Hero (home)
   ========================================================================== */
.hero {
    position: relative; min-height: 50vh;
    display: flex; align-items: center;
    overflow: hidden;
    background: var(--bg-deep);
}
.hero__media {
    position: absolute; inset: 0; z-index: 0;
}
.hero__media img, .hero__media video {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.04);
    animation: heroZoom 20s var(--ease) infinite alternate;
}
/* The video sits above the poster but is transparent until it's buffered and
   playing (main.js adds .is-playing), so the poster is what paints first. */
.hero__video, .page-hero__video { opacity: 0; transition: opacity .8s var(--ease); }
.hero__video.is-playing, .page-hero__video.is-playing { opacity: 1; }
@keyframes heroZoom {
    from { transform: scale(1.04); }
    to { transform: scale(1.12); }
}
.hero__media::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(11, 61, 46, 0.35), transparent 60%),
        linear-gradient(180deg, rgba(20,18,15,.45) 0%, rgba(20,18,15,.78) 100%);
}
.hero__content { position: relative; z-index: 2; padding: 72px 0 64px; max-width: 780px; margin: 0 auto; text-align: center; }
.hero h1 {
    font-size: clamp(2.4rem, 5.5vw, 4.25rem);
    line-height: 1.02; margin-bottom: 24px;
}
.hero h1 em {
    font-style: normal; color: var(--gold);
    font-weight: 700;
}
.hero__sub {
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    color: var(--text-muted);
    max-width: 52ch; margin-bottom: 36px;
    margin-left: auto; margin-right: auto;
    text-wrap: balance;
}
.hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 720px) {
    /* Immersive but not cavernous; svh keeps it stable as the URL bar shows/
       hides. align-items:center (on .hero) vertically centres the content. */
    .hero { min-height: 70vh; min-height: 70svh; }
    /* One tidy column: title, sub and buttons share the same width frame so
       their edges line up, instead of a loose centred cluster. */
    .hero__content { padding: 36px 0; }
    .hero h1 {
        font-size: clamp(2.1rem, 9vw, 3rem); line-height: 1.06; margin-bottom: 14px;
        letter-spacing: -.01em;
    }
    .hero__sub {
        font-size: 1rem; line-height: 1.55;
        max-width: 22rem; margin-bottom: 26px;
    }
    .hero__ctas {
        flex-direction: column; align-items: stretch; gap: 10px;
        max-width: 22rem; margin-left: auto; margin-right: auto;
    }
    .hero__ctas .btn { justify-content: center; width: 100%; padding: 15px 24px; }
    /* Frosted-glass secondary CTA: legible over any video frame. */
    .hero__ctas .btn--ghost {
        background: rgba(16, 19, 15, .26);
        -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
        border-color: rgba(255, 255, 255, .5); color: #fff;
    }
}

.hero__scroll {
    position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%);
    z-index: 3; color: var(--text-muted); font-size: .75rem;
    letter-spacing: .3em; text-transform: uppercase;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.hero__scroll::after {
    content: ''; width: 1px; height: 40px; background: var(--gold);
    animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%, 100% { transform: scaleY(.4); opacity: .4; transform-origin: top; }
    50% { transform: scaleY(1); opacity: 1; }
}


/* ==========================================================================
   Page hero (interior)
   ========================================================================== */
.page-hero {
    position: relative;
    padding: 140px 0 80px;
    background: var(--bg-deep);
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
/* Compact variant — a shorter band (e.g. the contact page). */
.page-hero--sm { padding: 112px 0 52px; }
.page-hero__media {
    position: absolute; inset: 0; z-index: 0;
}
.page-hero__media img,
.page-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(11, 61, 46, 0.45), transparent 60%),
        linear-gradient(180deg, rgba(14,17,22,.55) 0%, rgba(14,17,22,.85) 100%);
}
.page-hero__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; text-align: center; }
.page-hero__inner .lede { margin-left: auto; margin-right: auto; max-width: 48ch; }
.page-hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 16px; }
.page-hero h1 em { font-style: normal; color: var(--gold); }

/* Desktop: give interior heroes real vertical presence so a minimal-content hero
   (e.g. the simulators "Two ways to play") reads as immersive, not a thin band.
   Content is centred within the min-height; the compact --sm variant opts out. */
@media (min-width: 1025px) {
    .page-hero:not(.page-hero--sm) {
        display: flex; align-items: center;
        min-height: clamp(460px, 52vh, 600px);
    }
    .page-hero:not(.page-hero--sm) .page-hero__inner { width: 100%; }
}

/* Tablet: the base padding (140/80) is a desktop scale — trim it so interior
   heroes aren't unnecessarily tall, and hold the lede to a comfortable measure. */
@media (min-width: 721px) and (max-width: 1024px) {
    .page-hero { padding: 118px 0 64px; }
    .page-hero--sm { padding: 100px 0 48px; }
    .page-hero h1 { font-size: clamp(2.6rem, 4.6vw, 3.4rem); }
    .page-hero__inner .lede { max-width: 44ch; }
}

@media (max-width: 720px) {
    .page-hero { padding: 100px 0 56px; }
    .page-hero--sm { padding: 84px 0 40px; }
    .page-hero h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
    .page-hero__inner .lede { max-width: 38ch; }
}


/* ==========================================================================
   Video hero variant (simulators): portrait clip on phones
   ==========================================================================
   On phones the simulators hero swaps to a 9:16 clip shot in the cabin (see
   the <source media> attributes in simulators.html). To let that footage read
   as footage rather than a cropped strip, the hero grows to most of the
   viewport and the copy drops to the bottom edge, leaving the upper two
   thirds of the frame clear. The overlay is re-weighted to match: a light
   scrim at the top for the transparent header, almost clear through the
   middle, and heavy at the bottom where the text sits. Tablets and desktop
   are untouched and keep the landscape clip and the standard interior hero. */
@media (max-width: 720px) {
    .page-hero--video {
        display: flex; flex-direction: column; justify-content: flex-end;
        /* svh keeps the height stable as the mobile URL bar shows/hides. */
        min-height: 74vh; min-height: 74svh;
        padding: 100px 0 44px;
    }
    .page-hero--video .page-hero__inner { width: 100%; }
    /* Favour the upper part of the frame: the clip's subjects (the lit cabin
       front, then the simulator screen) sit above centre. */
    .page-hero--video .page-hero__media img,
    .page-hero--video .page-hero__media video { object-position: center 38%; }
    .page-hero--video .page-hero__media::after {
        background: linear-gradient(180deg,
            rgba(10, 21, 16, .55) 0%,
            rgba(10, 21, 16, .08) 26%,
            rgba(10, 21, 16, .14) 46%,
            rgba(10, 21, 16, .5) 62%,
            rgba(10, 21, 16, .8) 80%,
            rgba(10, 21, 16, .94) 100%);
    }
    /* Copy sits directly over moving footage, so give it a soft lift. */
    .page-hero--video h1,
    .page-hero--video .lede { text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
    .page-hero--video h1 { margin-bottom: 12px; }
    .page-hero--video .lede { color: rgba(244, 241, 234, .82); }
}