/*
|--------------------------------------------------------------------------
| Home page — hero box over the video backdrop
|--------------------------------------------------------------------------
| Replaces the legacy .header-box rules in m072224.css (and their two
| responsive steps). index.php was their only user — .header-box appears on
| no other page — so nothing there needed keeping.
|
| What changed and why:
|
|   - The panel was `background: var(--c5)`, which resolves to a flat 50%
|     black, with `border-radius: var(--border-r)` (3px). Against a page whose
|     every other surface is now a 1rem glass card, it read as a plain box cut
|     out of the video. It now uses the same recipe as .hc-card / .creds-card:
|     hairline border, soft gradient, 1rem radius — but with a much darker
|     tint, because unlike those it sits over moving footage and has to carry
|     text legibility on its own.
|   - The h1 took the global uppercase 5rem. The rest of the page moved to
|     sentence case at a light weight, and the service hero
|     (.service-hero__title, header-hero.css) is the pattern for a page-top
|     title, so this follows it: fluid size, tight tracking, and the same red
|     accent rule underneath.
|   - "Rugged. Modular. Serviceable." was the first line of a two-line
|     paragraph. It is a tagline, not a sentence, so it is now the eyebrow
|     above the title — same copy, real hierarchy. No new words.
|
| The header itself keeps `padding-left: 6vw` from m072224.css for every other
| page that uses .header; .header--home overrides it to the footer's 6rem
| gutter so the hero box lines up with every band below it.
|
| CTAs are deliberately untouched — they keep the shared .tv-cta recipe and
| their existing markup.
*/

.header--home {
    padding: 1rem 6rem;
}

/* No panel — the type sits directly on the footage. Legibility comes from the
   full-bleed scrim on .header--home::after below plus per-element text-shadow,
   rather than from a box around the text.

   m072224.css already declares a bare `.header::after` (positioned, inset 0,
   z-index 1, no background) for exactly this kind of layer, so the scrim only
   has to supply the gradients. The box sits at z-index 2, above it. */
.header--home .header-box {
    position: relative;
    z-index: 2;
    align-self: center;

    max-width: 46rem;
    padding: 0;

    border: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Two gradients, both anchored where the content is: one across from the left
   so the type side is dense while the van on the right stays clear, one up
   from the bottom so the CTAs keep contrast over the brightest part of the
   road. Deliberately scoped to --home; every other page's .header::after is
   left as the empty layer it is. */
.header--home::after {
    background:
        linear-gradient(100deg,
            rgba(6, 8, 10, 0.88) 0%,
            rgba(6, 8, 10, 0.66) 30%,
            rgba(6, 8, 10, 0.28) 58%,
            rgba(6, 8, 10, 0) 80%),
        linear-gradient(to top,
            rgba(6, 8, 10, 0.55) 0%,
            rgba(6, 8, 10, 0) 45%);
    pointer-events: none;
}

/* Was the first line of the paragraph.
   Each text element carries its own shadow now that there is no panel behind
   it — same token the service hero uses on its title. */
.header-box__eyebrow {
    margin: 0 0 0.85rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* Restates size / weight / colour / tracking against the global h1 in
   m072224.css, which is 4rem / 200 / uppercase. */
.header--home .header-box h1 {
    position: relative;
    margin: 0;
    padding-bottom: clamp(0.9rem, 1.35vw, 1.15rem);

    color: #ffffff;
    font-size: clamp(2.4rem, 5vw, 4.25rem);
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: -0.04em;
    text-transform: none;
    text-wrap: balance;

    text-shadow: var(--theme-shadow-title, 0 10px 28px rgba(0, 0, 0, 0.28));
}

/* Same accent rule as .service-hero__title::after (header-hero.css) and
   .vcb__title::after — geometry, gradient fade and glow all matched. The
   theme tokens resolve because theme-dark.css is loaded sitewide from
   head.php; literal fallbacks keep it a red rule if that ever moves. */
.header--home .header-box h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;

    width: clamp(6rem, 10vw, 9rem);
    height: 0.24rem;

    border-radius: var(--theme-radius-pill, 999px);

    background: linear-gradient(90deg,
            var(--theme-accent, #aa0000) 0%,
            var(--theme-accent-deep, #8f0000) 58%,
            transparent 100%);

    box-shadow: 0 10px 24px var(--theme-accent-box-24, rgba(170, 0, 0, 0.24));
}

.header--home .header-box p {
    margin: 1.1rem 0 0;
    max-width: 44ch;

    color: #d2d4da;
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.01em;
    text-wrap: pretty;

    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* .tv-cta-row (cta.css) supplies display:flex + the top margin; this only adds
   the gap and the wrap. Below 600px m072224.css gives every button in
   .header-box `width: 100%`, and the wrap is what turns that into two stacked
   full-width pills instead of two squeezed onto one line.
   (Moved here from home-contact.css, which is where it used to live.) */
.header-box__actions {
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.6rem;
}

/* ── Side padding tracks footer.css step for step ── */
@media only screen and (min-width: 1600px) {
    .header--home {
        padding-right: 9rem;
        padding-left: 9rem;
    }
}

@media only screen and (max-width: 1200px) {
    .header--home {
        padding-right: 2rem;
        padding-left: 2rem;
    }

    .header--home .header-box {
        max-width: 40rem;
    }
}

@media only screen and (max-width: 700px) {
    .header--home {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .header--home .header-box {
        max-width: 100%;
    }

    .header-box__eyebrow {
        letter-spacing: 0.14em;
    }
}

@media only screen and (max-width: 640px) {
    .header--home .header-box h1::after {
        width: 6.5rem;
        height: 0.2rem;
    }
}

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