/*
 * Vision page — same scale-down pass as front-page.css/about.css.
 * Headings here use shared global classes (.page-hero-split,
 * .sticky-title, .mission-card, .section-head, .cta-inner, .faq-intro)
 * that other pages also use, so these overrides live here (loaded only
 * on this page via inc/enqueue/styles.php's slug matching) rather than
 * in global/sections.css, keeping the change page-scoped.
 */

.page-hero-split h1 {
    font-size: clamp(2.25rem, 3.4vw, 3.4rem);
}

.sticky-title h2,
.mission-card h2,
.section-head h2,
.cta-inner h2,
.faq-intro h2 {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
}

/* Eight-path pillar icons — same green-badge/white-icon treatment as the
   trust badges and project-scope cards on Urgent Help. Page-scoped since
   .icon-badge is a shared class used elsewhere with the lighter sage
   style. */
.pillar .icon-badge {
    background: var(--forest);
    color: white;
}

/* Mission/Vision cards — same reasoning as about.css: remove the fixed
   min-height so the card sizes to its actual content instead of forcing
   extra empty space, and tighten padding/paragraph spacing to match. */
.mission-card {
    min-height: 0;
    padding: clamp(20px, 3vw, 32px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* First (white "Mission") card gets a border matching the second
   ("Vision") card's navy background, so the two feel visually paired
   instead of the first one looking like it's missing an edge. */
.mission-card:first-child {
    border: 2px solid var(--navy);
}
.mission-card p:last-child {
    margin-top: 16px;
    font-size: 1rem;
}

/* Same zero-gap issue as home/about's .lead paragraphs. */
.section-head .lead {
    margin-top: 18px;
}