/* =========================================================
   Shared full-bleed image hero — .page-hero
   (About, RVIA, Expert Upfitter, Careers)

   The markup lives in ONE partial: includes/page-hero.php.
   This file is the ONE style source.

   These four pages used to render the legacy .header-title
   lockup: centered, uppercase, 5rem / 300 with a 2rem <span>
   under it, no eyebrow and no accent rule. This ports the
   home hero (src/styles/home-hero.css) onto them verbatim —
   left-anchored eyebrow / title / red rule / lead, the same
   fluid type ramp, the same two-gradient scrim — so every
   full-bleed hero on the site reads as one component.

   Every value below is deliberately the same as its
   .header--home counterpart. If home-hero.css changes, change
   this with it (they are twins, not a shared base: home also
   carries the video backdrop and CTA row, which no page here
   has).

   The .header base and the .*-img background classes stay in
   m072224.css — a page keeps `class="header <x>-img"` and only
   adds .page-hero, so the photo, the height and the fixed-nav
   overlay behave exactly as before.
   ========================================================= */

/* Doubled `.header.page-hero` (0,2,0) on purpose: the background classes it
   has to outrank — .team-header-img's `padding: 0`, and the height — are all
   (0,1,0), so a bare .page-hero would tie and lose on source order. */
.header.page-hero {
    /* The footer's gutter, matching .header--home so the hero type lines up
       with the bands below it. */
    padding: 1rem 6rem;
    /* The footer's measure, applied to the grid's single column so the lockup
       still stretches inside it: .footer-max caps content at 1600px and centres
       it in the gutter, and this reproduces both. (m072224.css sets
       `grid-template-columns: 1fr` on .header.) */
    grid-template-columns: min(1600px, 100%);
    justify-content: center;
    /* Height is deliberately NOT set: the plate takes the same .header rules
       home does (100vh, stepping to 100svh at the 700px breakpoint in
       m072224.css), so the two heroes stay identical at every width. */
}

/* The lockup sits on the photo with no panel — legibility comes from the
   scrim below plus per-element text-shadow, exactly as on home. z-index 2
   clears the .header::after scrim layer (z 1, declared in m072224.css).

   The measure is the footer's: .footer-max caps its content at 1600px and the
   footer's own side padding supplies the gutter, which .header.page-hero above
   already tracks step for step (6rem / 9rem / 2rem / 1.25rem). min() with 100%
   keeps the box inside that gutter at every width, so the responsive max-width
   steps this used to carry are no longer needed.

   It is comfortably wider than a hero title needs: the longest on the site,
   "Expert Upfitter Van Conversions", renders 13.17px per 1px of font-size in
   Work Sans 300 at the title's -0.052em, so ~1264px at the service ramp's 6rem
   cap. One line therefore holds from 1920px down to ~830px. Below that the
   ramp steps UP relative to the viewport (7.8vw at ≤820px) and the longest
   titles take two lines — the service hero's own behaviour, which is why it
   sets overflow-wrap: anywhere.

   .header-box in home-hero.css uses the same value, for the same reason. */
.page-hero__inner {
    position: relative;
    z-index: 2;

    align-self: center;

    /* The 1600px cap and its centring live on the grid COLUMN in
       .header.page-hero above, not here: auto inline margins on a grid item
       switch off `stretch`, which shrink-wraps the lockup to its text and
       throws the whole left edge inward (it landed 260px off the footer). */
    max-width: 100%;
}

/* Two gradients anchored where the content is: one across from the left so
   the type side is dense while the photo's subject stays clear, one up from
   the bottom. Identical to .header--home::after.

   The tint is NEUTRAL on purpose. This was rgba(6, 8, 10) — blue channel
   highest — which read as a cool cast over a desaturated photo. rgb(8, 8, 8)
   is the grey with the same relative luminance (0.00234 either way), so every
   alpha stop below is unchanged and the scrim is exactly as dark as before,
   just no longer blue. Keep R = G = B if you retune it.

   m072224.css already declares a bare `.header::after` (positioned, inset 0,
   z-index 1, no background) for exactly this, so only the gradients are set. */
.page-hero::after {
    background:
        linear-gradient(100deg,
            rgba(8, 8, 8, 0.88) 0%,
            rgba(8, 8, 8, 0.66) 30%,
            rgba(8, 8, 8, 0.28) 58%,
            rgba(8, 8, 8, 0) 80%),
        linear-gradient(to top,
            rgba(8, 8, 8, 0.55) 0%,
            rgba(8, 8, 8, 0) 45%);
    pointer-events: none;
}

/* Careers' photo carries a baked ~59% black wash in its background-image
   (.team-header-img, m072224.css) from the days when it was the only scrim.
   Stacked under the gradient above it crushed the shop floor to near-black,
   so the hero takes the plate clean and lets the shared scrim do the work.
   The class itself is left intact in m072224.css — careers.php is its only
   caller now that careers-apply.php runs the image-less split lockup. */
.header.page-hero.team-header-img {
    background-image: url(/assets/images/careers_banner.jpg);
}

/* ---- Type: the .header-box ramp from home-hero.css ---- */

/* Restates size / weight / colour / tracking against the global `p` in
   m072224.css (1.1rem / 2rem line-height / .05rem tracking). */
.page-hero__eyebrow {
    margin: 0 0 0.85rem;

    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(0.95rem, 0.75rem + 0.5vw, 1.2rem);
    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 against the global h1 in m072224.css, which is 4rem / 200 /
   uppercase / var(--c4). */
.page-hero__title {
    position: relative;
    margin: 0;
    padding-bottom: clamp(0.9rem, 1.35vw, 1.15rem);

    color: #ffffff;
    /* The service hero's title ramp verbatim (.service-hero__title,
       header-hero.css) — size, line-height and tracking are tuned together
       there, so all three are copied as a unit, along with its 820 / 640 /
       420px steps below. */
    font-size: clamp(3rem, 5.5vw, 6rem);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.052em;
    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 .header--home .header-box h1::after,
   .service-hero__title::after and .vcb__title::after — geometry, gradient
   fade and glow all matched. Left-anchored, so it starts at the title's
   first letter. */
.page-hero__title::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));
}

.page-hero__lead {
    margin: 1.1rem 0 0;
    max-width: 44ch;

    color: #d2d4da;
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
    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);
}

/* Small qualifying line between the lead and the CTA ($pageHero['note']) —
   e.g. an "Applying for: <role>" qualifier. Quieter than the lead, with the
   value itself picked out in white. */
.page-hero__note {
    margin: 0.9rem 0 0;
    max-width: 44ch;

    color: var(--theme-text-soft, #989ba3);
    font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1.05rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;

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

.page-hero__note strong {
    color: var(--theme-text-strong, #ffffff);
    font-weight: 600;
}

/* CTA row under the lead (the "Learn More" scroll cue, see
   $pageHero['scroll_to']). .tv-cta-row in cta.css supplies display:flex + the
   top margin; this only adds the gap and the wrap, same as
   .header-box__actions on home. */
.page-hero__actions {
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.6rem;
}

/* ---- Caps display treatment ($pageHero['caps']) ----
   The home hero's display line verbatim (.header-box__tagline, home-hero.css),
   for a hero whose title is a short poster line rather than a sentence. Only
   two things change: the case, and the tracking — caps cannot carry the
   lowercase ramp's -0.052em, because with no ascenders or descenders to
   separate them the letterforms close up and the word reads as one shape. Home
   relaxes every step by the same amount, and so do the steps at the foot of
   this file.

   (0,2,0) on purpose: the title's own responsive steps below are (0,1,0), so
   this has to outrank them at every width rather than tie on source order. */
.page-hero--caps .page-hero__title {
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* ---- Entrance ($pageHero['animate']) ----
   The home hero's choreography, ported the way the type was: the eyebrow fades
   up, the title's words rise one after another from behind their own masks, the
   accent rule wipes out from the left, then the lead, the note and the CTA
   settle in. The title carries the move; everything else only gets out of its
   way.

   The two rules that make this safe to ship are home-hero.css's, and they hold
   here for the same reasons — read the long note over its own entrance block:

   ① No element carries a hidden state of its own. The hidden state exists ONLY
      inside each animation's `from` keyframe, held there by
      `animation-fill-mode: both`, so anything that stops the animation lands on
      the element's finished styles. Text can never be left invisible.
   ② Only `transform` and `opacity` animate, so the sequence stays on the
      compositor.

   Timings are one scale: 0.11s between beats, one 0.22/1/0.36/1 curve (the
   announcement bar's --anno-ease), the whole thing over in ~1.3s. Keyframes are
   named for this file rather than shared with home-hero.css, which never loads
   on the same page. */
.page-hero--animated .page-hero__word {
    display: inline-block;
    overflow: hidden;

    /* The clip box needs slack the line box does not: at line-height 1.02 the
       inline box is shorter than the capitals, so a flush `overflow: hidden`
       shaves the tops of the letters. The padding buys that slack; the matching
       negative margin hands it straight back, so the MARGIN box — which is what
       the line box measures — stays exactly the size it was. */
    padding: 0.16em 0.04em 0.12em;
    margin: -0.16em -0.04em -0.12em;

    /* An inline-block with clipped overflow takes its bottom margin edge as its
       baseline, which would ride the words up off the line. Aligning by the top
       edge instead keeps every word, and every line, on one grid. */
    vertical-align: top;
}

.page-hero--animated .page-hero__word-in {
    display: inline-block;
    animation: page-hero-word-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i, 0) * 0.11s + 0.18s);

    /* Not redundant with the title's own #ffffff, and not inherited: a legacy
       global `* { color: var(--c3) }` sets a colour on every bare <span>
       directly, so the words render #b6b6b6 grey against a white title unless
       this restates it. home-hero.css carries the same line on
       .header-box__word-in for the same reason (see also the notes in
       cta.css). */
    color: #ffffff;
}

/* 110%, not 100%: the extra tenth covers the padding slack above, so a word is
   fully clear of its mask before it starts to travel. */
@keyframes page-hero-word-rise {
    from {
        transform: translate3d(0, 110%, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.page-hero--animated .page-hero__eyebrow {
    animation: page-hero-lift 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

/* The rule wipes from the left edge the title is anchored to, arriving as the
   last word lands. scaleX only — the gradient and glow are painted once. */
.page-hero--animated .page-hero__title::after {
    transform-origin: 0 50%;
    animation: page-hero-wipe 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.62s both;
}

.page-hero--animated .page-hero__lead {
    animation: page-hero-lift 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.78s both;
}

.page-hero--animated .page-hero__note {
    animation: page-hero-lift 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.84s both;
}

.page-hero--animated .page-hero__actions {
    animation: page-hero-lift 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both;
}

@keyframes page-hero-lift {
    from {
        opacity: 0;
        transform: translate3d(0, 0.9rem, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes page-hero-wipe {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

/* Where that CTA lands. The navbar is fixed, so without an offset the first
   heading of the content tucks underneath it. Same recipe as the models
   lineup's deep-link offset in models-bg.css. */
.page-hero__target {
    scroll-margin-top: calc(var(--nav-h, 3.3rem) + 1rem);
}

/* The jump is animated rather than instant. models-bg.css declares this same
   guarded rule for the lineup logos, but it only ships on the models pages —
   restate it so the Company heroes get it too. Honouring
   prefers-reduced-motion is why it is a media query and not a bare rule. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

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

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

/* ── Title steps: .service-hero__title's own 820 / 640 / 420px breakpoints ── */
@media only screen and (max-width: 820px) {
    .page-hero__title {
        font-size: clamp(2.25rem, 7.8vw, 3.7rem);
        line-height: 1.04;
        letter-spacing: -0.044em;
    }

    /* Caps stay relaxed at every step — home-hero.css's own value. */
    .page-hero--caps .page-hero__title {
        letter-spacing: -0.018em;
    }
}

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

    .page-hero__eyebrow {
        letter-spacing: 0.14em;
    }
}

@media only screen and (max-width: 640px) {
    .page-hero__title {
        font-size: clamp(2rem, 8.8vw, 3rem);
        line-height: 1.06;
        letter-spacing: -0.038em;
    }

    .page-hero--caps .page-hero__title {
        letter-spacing: -0.015em;
    }

    .page-hero__title::after {
        width: 6.5rem;
        height: 0.2rem;
    }
}

@media only screen and (max-width: 420px) {
    .page-hero__title {
        font-size: clamp(1.85rem, 9.6vw, 2.45rem);
        line-height: 1.08;
        letter-spacing: -0.032em;
    }

    .page-hero--caps .page-hero__title {
        letter-spacing: -0.012em;
    }
}

/* Everything the entrance drives. `animation: none` is all that is needed:
   with the hidden state living only in the keyframes (see the note above),
   dropping the animation lands each element on its finished styles. Matches the
   reduced-motion block at the foot of home-hero.css. */
@media (prefers-reduced-motion: reduce) {
    .page-hero--animated .page-hero__word-in,
    .page-hero--animated .page-hero__eyebrow,
    .page-hero--animated .page-hero__title::after,
    .page-hero--animated .page-hero__lead,
    .page-hero--animated .page-hero__note,
    .page-hero--animated .page-hero__actions {
        animation: none;
    }
}