/* ============================================================
   Secondary Header — lightweight page-header component
   Eyebrow + heading + body, centered, flat dark surface. A
   lighter alternative to the full .hero (image/video background,
   left-aligned, CTA — see hero.md) for pages that want a designed
   header without a background image, and more presence than the
   plain native .sp-page-title. Opt-in per page, not a replacement
   for either — see secondary-header.md.

   Design lifted from mission-vision.css's .mv-block/.mv-mission
   (2026-08-18) — the oversized ghost numeral (.mv-index) is
   deliberately NOT carried over: it read as a sequence marker
   across the Purpose page's mission/vision/values blocks, which
   doesn't apply to a single standalone header.
   ============================================================ */

.secondary-header {
    padding: 5.5rem 0;
    background: var(--surface, #1c1c1c);
}

.secondary-header-heading {
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    max-width: 30ch;
    margin: 0 auto 1.25rem;
    color: var(--text, #ffffff);
    text-shadow: 1px 1px 1px var(--black, #000000);
}

.secondary-header-body {
    font-family: var(--font-body, "Inter", sans-serif);
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 62ch;
    margin: 0 auto;
    color: var(--text-muted, #a0a0a0);
}

@media (max-width: 575px) {
    .secondary-header {
        padding: 3.5rem 0;
    }
}