/* ==========================================================================
   Goals page — vision, mission, commitments and core values.
   Ruled blocks rather than cards, matching the schedule language used on the
   service pages. Section headers come from `.section-head` in the design
   system (`.goals-intro` and `.values-header` are aliases of it).
   ========================================================================== */

.hero-goals {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(360px, 48vh, 480px);
    padding-block: calc(var(--header-h) + var(--space-16)) var(--space-16);
    background-color: var(--ink);
    background-image: linear-gradient(rgba(10, 12, 16, 0.68), rgba(10, 12, 16, 0.8)),
                      url("../images/Team/V1 (12).jpg");
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
}

.hero-goals .hero-content {
    max-width: 720px;
    padding-inline: var(--gutter);
}

.hero-goals h1 {
    margin-bottom: var(--space-4);
    color: #fff;
}

.hero-goals .tagline {
    margin-bottom: 0;
    max-width: none;
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--text-md);
}

/* Vision & mission ----------------------------------------------------------
   An editorial masthead over two ruled columns. The masthead and the columns
   share one two-track grid, so "Our Goals" sits above Vision and the
   standfirst sits above Mission rather than on a grid of their own. Every
   rule here is a hairline; the brand red appears only as a short tick at the
   start of a rule and in the two glyphs.
   ---------------------------------------------------------------------------- */

.goals-section {
    /* Tighter than the page default: the hero sits directly above, and the
       commitments block below supplies its own leading space. */
    padding-block: clamp(52px, 5.5vw, 84px);
}

.goals-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Shared by the masthead and the two columns below it. */
.goals-section .goals-intro,
.vision-mission-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 4vw, 64px);
}

/* The section rule replaces the design system's 2px band with a hairline,
   so the accent registers as a seam rather than a stripe. */
.goals-section .goals-intro {
    row-gap: var(--space-4);
    align-items: baseline;
    margin-bottom: clamp(36px, 3.6vw, 52px);
    padding-top: var(--space-8);
    border-top: 1px solid rgba(220, 38, 38, 0.45);
}

.goals-section .goals-intro > h2 {
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

.goals-section .goals-intro > p {
    /* No measure cap: every text block fills its own track, so the
       standfirst and the Mission column share one right edge. */
    max-width: none;
    padding-bottom: 0;
    color: var(--muted);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
}

/* Two ruled columns. The accent is a short tick at the head of each rule. */
.vision-card,
.mission-card {
    position: relative;
    display: block;
    padding: var(--space-6) 0 0;
    background: none;
    border: none;
    border-top: 1px solid var(--line);
    border-radius: 0;
}

.vision-card::before,
.mission-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 44px;
    height: 2px;
    background-color: var(--primary-color);
}

/* Sized to the glyph and flush left, so the icon, title and body all start
   on the same edge as the rule above them. */
.goals-section .card-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: auto;
    margin-bottom: var(--space-4);
    border: none;
    background: none;
    color: var(--primary-color);
    font-size: 1.125rem;
    line-height: 1;
}

.vision-card h3,
.mission-card h3 {
    margin-bottom: var(--space-3);
    color: var(--ink);
    font-size: var(--h3);
    font-weight: 600;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

.vision-card p,
.mission-card p {
    margin-bottom: 0;
    max-width: none;
    color: var(--body);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

/* Commitments --------------------------------------------------------------- */

.commitments-section {
    padding-block: 0 var(--section-y);
}

/* The commitments block has no standfirst, so it uses the plain left-aligned
   title rather than the two-column masthead. */
.commitments-section .section-title {
    margin-bottom: var(--space-10);
}

.commitments-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 64px);
}

.commitment-card {
    padding: var(--space-6) 0 0;
    background: none;
    border: none;
    border-top: 1px solid var(--line);
    border-radius: 0;
}

.commitment-card h3 {
    margin-bottom: var(--space-3);
    font-size: var(--text-lg);
    color: var(--ink);
}

.commitment-card p {
    max-width: 62ch;
    color: var(--body);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

/* Core values --------------------------------------------------------------- */

.values-section {
    padding-block: var(--section-y);
    background-color: var(--surface-subtle);
    border-block: 1px solid var(--line);
}

.values-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 48px);
}

.value-card {
    padding: var(--space-6) 0 0;
    text-align: left;
    background: none;
    border: none;
    border-top: 1px solid var(--line-strong);
    border-radius: 0;
}

/* One accent for every value icon — no arbitrary per-card colours. */
.value-icon,
.value-card:nth-child(2) .value-icon,
.value-card:nth-child(3) .value-icon,
.value-card:nth-child(4) .value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 0 var(--space-4);
    border: none;
    border-radius: 0;
    background: none;
    color: var(--primary-color);
    font-size: 1rem;
}

.value-card h3 {
    margin-bottom: var(--space-2);
    font-size: var(--text-lg);
    color: var(--ink);
}

.value-card p {
    color: var(--muted);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

/* Closing call to action ----------------------------------------------------
   A light band rather than a dark one. The photograph that used to sit here
   was behind an 86% scrim and read as texture at best; a light ground cannot
   carry it without washing the type out, so the band is now flat with a
   hairline at each edge.
   -------------------------------------------------------------------------- */

.call-to-action {
    padding-block: clamp(56px, 7vw, 104px);
    background-color: var(--surface-sunken);
    color: var(--body);
    text-align: center;
}

.cta-container {
    max-width: 640px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.cta-container h2 {
    margin-bottom: var(--space-4);
    color: var(--ink);
}

.cta-container p {
    margin-bottom: var(--space-8);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
}

@media (max-width: 991px) {
    .values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--space-8);
    }
}

/* The masthead stacks before the columns do: the standfirst needs a full
   measure well before two 1fr tracks become uncomfortable. */
@media (max-width: 860px) {
    .goals-section .goals-intro {
        grid-template-columns: 1fr;
        align-items: start;
        padding-top: var(--space-6);
    }

    .goals-section .goals-intro > p { max-width: 62ch; }
}

@media (max-width: 700px) {
    .hero-goals {
        min-height: 260px;
    }

    .vision-mission-container,
    .commitments-container,
    .values-grid {
        grid-template-columns: 1fr;
        row-gap: var(--space-8);
    }

    /* Stacked, the two blocks need more air between them than they do
       side by side, so the ticks read as separate headings. */
    .vision-mission-container { row-gap: var(--space-10); }
}