/* Shared centred section intro — Figma 38:1587/38:1593, 38:1621,
   39:2917/40:3118. Spec §5.

   Pixel reads:
     heading  70px (--vl-text-display), line-height 1 (sitewide big-heading
              rule; nodes read leading-[75px]). NO letter-spacing — the three
              centred headings carry none, unlike the four feature-row
              headings which read −1.75px. That difference is in the frame and
              is preserved deliberately.
     lead     24/28 (--vl-text-card-title), max-width 750px, centred
     heading → lead gap: 25px (Liam live review 2026-07-30 — settles spec
              §17.2's flag; the two frames disagreed at 11px/24px and the
              spec's 20px compromise was provisional).
     lead → following content: 70px, consistent across both frames and the
              same value gallery-carousel.css uses for heading → grid. */

.vl-secintro {
    margin-bottom: 70px; /* node: lead bottom → cards/tiles/steps top */
    text-align: center;
}

.vl-secintro__heading {
    margin: 0 0 25px; /* Liam, 2026-07-30 (was the spec's provisional 20) */
    color: var(--vl-black);
    font-size: var(--vl-text-display);
    font-weight: var(--vl-weight-regular);
    line-height: 1;
}

.vl-secintro__heading strong {
    font-weight: var(--vl-weight-semibold);
}

.vl-secintro__lead {
    max-width: 750px;
    margin: 0 auto;
    color: var(--vl-black);
    font-size: var(--vl-text-card-title);
    font-weight: var(--vl-weight-regular);
    line-height: 1.1667; /* node ratio 28/24, UNITLESS so the mobile token step
                            scales it — --vl-text-card-title goes 24→20px at
                            ≤767, where a fixed 28px would read 1.4 instead of
                            the designed 1.167. Same convention and reasoning as
                            hero-page.css:87, plot-intro.css:89 and
                            contact.css:549. */
}

.vl-secintro--cream-on-dark .vl-secintro__heading,
.vl-secintro--cream-on-dark .vl-secintro__lead {
    color: var(--vl-cream);
}

/* Tablet keeps the 70px intro→content rhythm (Liam, 2026-07-30 — the 4e
   build's 50px-at-≤1024 was an invention; gallery-carousel.css and
   card-development.css both hold their 70 at tablet and step only on
   mobile). */
@media (max-width: 767px) {
    .vl-secintro {
        margin-bottom: 50px;
    }
}