/* Static-page hero — SHARED component (first consumer: Developments
   listing). Figma reads (About frame 38:1227, verified 2026-07-28):
     38:1551 band 1920×499 directly below the 82px header
     38:1553 scrim rgba(50,56,59,0.5) — --vl-ink at 50%
     38:1561 title Omnes Regular 90px white centred, <strong> = SemiBold
             (--vl-text-hero exact; line-height 1 per sitewide rule)
     38:1525 subtitle Omnes Regular 24px/28px (1.1667), white, centred,
             max-width 750px; title top 158px into the band, subtitle 286
   Responsive: no non-desktop frame — band height and title top scale with
   the hero token steps; derived, flag for live review. */

.vl-page-hero {
    position: relative;
    height: 499px; /* node 38:1551 */
    overflow: hidden;
}

.vl-page-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vl-page-hero__scrim {
    position: absolute;
    inset: 0;
    background: rgba(50, 56, 59, 0.5); /* node 38:1553 — ink at 50% */
}

.vl-page-hero__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* TRUE vertical centring (Liam live review 2026-07-28) — replaces the
       original `padding-top: 158px` node read. That literal only LOOKED
       right on the About frame because that hero has BOTH a title and a
       subtitle: block y240–424 (184px tall) inside a band at y82–581, i.e.
       158px above and 157px below — dead centre by coincidence of content.
       The Developments hero has no subtitle, so its ~90px block sat high
       with ~250px beneath it, and shorter bands at tablet/mobile made it
       worse. Centring reproduces the About frame EXACTLY (its block is
       centred to within 0.5px) and stays correct for any combination of
       title, subtitle and wrapped lines at any band height. */
    justify-content: center;
    height: 100%;
    padding-block: 30px; /* breathing room before a very tall block would
                             meet the band's overflow: hidden */
    padding-inline: var(--vl-edge);
    text-align: center;
}

.vl-page-hero__title {
    margin: 0;
    /* One consistent cap for EVERY page using this hero (Liam, 2026-07-29).
       The frames each constrain their own title differently — Contact's box
       (39:1955) is 838×190, i.e. deliberately wrapped to two lines, while
       About's (38:1561) is 700 wide on one line — but per-page hardcoding
       would silently become wrong the moment a title is reworded, and we
       can't know future copy. 1000px is deliberately more generous than any
       frame's own box while still narrower than the 1600px container, and it
       does NOT cost us the designed look: the Contact title needs ~1120px to
       fit on one line, so it still wraps to two at this cap.
       No responsive override needed — 1000px exceeds every tablet/mobile
       viewport, so --vl-edge padding takes over below it and the type token
       shrinks independently. Subtitle keeps its own narrower 750px node read
       (38:1525), which preserves the title/subtitle hierarchy. */
    max-width: 1000px;
    color: var(--vl-white);
    font-size: var(--vl-text-hero); /* 90px, node-exact */
    font-weight: var(--vl-weight-regular); /* node: base Regular… */
    line-height: 1; /* sitewide big-heading rule (Liam, 2026-07-23) */
}

.vl-page-hero__title strong {
    font-weight: var(--vl-weight-semibold); /* …authored emphasis SemiBold (node span) */
}

.vl-page-hero__subtitle {
    margin: 38px 0 0; /* node: subtitle top 368 − title bottom ≈330 (90px line at 240); nearest whole read */
    max-width: 750px; /* node 38:1525 */
    color: var(--vl-white);
    font-size: 24px; /* node-exact; no token matches (nearest --vl-text-card-title if promoted later) */
    font-weight: var(--vl-weight-regular);
    line-height: 1.1667; /* node 28/24, unitless */
}

/* ── Tablet + mobile — derived (no frame): the band shortens with the type
   scale. No content padding to scale any more — the block centres itself at
   whatever the band height is (see .vl-page-hero__content). */
@media (max-width: 1024px) {
    .vl-page-hero {
        height: 420px;
    }
}

@media (max-width: 767px) {
    .vl-page-hero {
        height: 340px;
    }

    .vl-page-hero__subtitle {
        font-size: 20px;
        margin-top: 24px;
    }
}