/* =====================================================================
   Hero
   Dark, cinematic panel — sets the premium tone before the page drops
   into the lighter sections below. Gradient is static for this phase;
   Phase 5 may add a subtle animated shift on top of it.
   ===================================================================== */

.hero {
    position: relative;
    background: linear-gradient(160deg, #0B2344 0%, #0e2c56 55%, #0B2344 100%);
    color: var(--color-white);
}

/* ---- Background photo + scrim -----------------------------------------
   Full-bleed hero photo at its natural aspect ratio — no fixed height,
   no object-fit: cover. Those were cropping content the client wants
   fully visible (ceiling lighting arc, full home-theater screen, full
   scene composition), so the image now just renders at width: 100%,
   height: auto and dictates its own rendered height at every
   breakpoint via its intrinsic 1630x865 ratio (width/height attributes
   on the <img> give the browser that ratio before it even loads, so
   there's no layout shift).

   sliderimg1.png ships with a fake nav bar baked into the top ~100px —
   hero-bg.jpg is the pre-cropped version with that band removed. The
   .site-header is a solid fixed bar now (not the old transparent-
   over-hero treatment), so it fully covers that top band regardless;
   the cropped image is still used so nothing baked-in peeks out from
   under the header at wider breakpoints where it renders shorter.

   The top scrim remains too, sized in a fixed pixel value (not a % of
   the image's own height) so it consistently softens the join under
   the fixed-height header regardless of how tall the image itself
   renders at a given breakpoint — the header's solid #001130 and the
   hero's own dark gradient are close in tone already, and the scrim's
   fade bridges the rest. There's no bottom fade any more — the stats
   no longer sit on the photo (see .hero__stats-wrap below), so
   there's no seam to blend and the image is free to just end at its
   natural height. */

.hero__bg {
    position: relative;
}

.hero__bg img {
    display: block;
    width: 100%;
    height: auto;
}

.hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 35, 68, 0.6) 0px, rgba(11, 35, 68, 0) 140px);
}

/* ---- Stats strip -------------------------------------------------------
   Sits below the photo, in normal flow, on .hero's own plain gradient —
   not overlaid on the image. With the image now rendering at its full
   natural height (short on mobile, quite tall on wide desktops
   depending on viewport width), there's no fixed "safe zone" left to
   overlay text against, so keeping the stats legible independent of
   whatever the photo looks like at any given width was more reliable
   than chasing a scrim that would have to adapt to a wildly variable
   image height. */

.hero__stats-wrap {
    position: relative;
    padding-block: var(--space-2xl) var(--space-3xl);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: radial-gradient(60% 140% at 50% 0%, rgba(0, 141, 255, 0.06), transparent 70%);
}

.hero__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl) 0;
}

.hero__stat {
    text-align: center;
    padding-inline: var(--space-md);
}

/* Divider rhythm: on the 2-col mobile grid, a vertical line splits the
   pair in each row and a horizontal line splits the two rows — same
   idea as the desktop single-row dividers below, just adapted to a
   2x2 layout. Each breakpoint owns its own border rules outright
   (rather than one ruleset overriding the other) to avoid a
   specificity fight between the nth-child selectors. */
@media (max-width: 639px) {
    .hero__stat:nth-child(even) {
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    .hero__stat:nth-child(n+3) {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: var(--space-xl);
    }
}

@media (min-width: 640px) {
    .hero__stats {
        grid-template-columns: repeat(4, 1fr);
    }

    .hero__stat:not(:first-child) {
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }
}

.hero__stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--color-accent);
}

.hero__stat-icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

.hero__stat-value {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    color: var(--color-white);
}

.hero__stat-label {
    display: block;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-top: var(--space-xs);
}