/* ==========================================================================
   Base design tokens
   ========================================================================== */
:root {
    --color-primary: #163a5c;
    --color-primary-dark: #0e2740;
    --color-accent: #7f1d2b;
    --color-accent-dark: #611420;
    /* Lighter red used only for the hero call to action, where the button sits
       on the maroon wash and needs to step clear of it. */
    --color-accent-bright: #c0392b;
    --color-text: #1a1a1a;
    --color-bg: #ffffff;
    --color-bg-alt: #f4f7f8;
    --color-page-bg: #f0f2f5;
    --color-border: #d5dde0;
    --color-focus: #ffbf47;
    --color-muted: #56656e;
    --color-surface: #fbfcfd;
    --font-base: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-heading: "Newsreader", Georgia, "Times New Roman", serif;
    --font-ui: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-size-base: 17px;
    --max-width: 1240px;
    --radius: 6px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(16, 36, 56, 0.06), 0 2px 6px rgba(16, 36, 56, 0.04);
    --shadow-md: 0 4px 12px rgba(16, 36, 56, 0.08), 0 12px 28px rgba(16, 36, 56, 0.06);
    --shadow-lg: 0 20px 60px rgba(16, 36, 56, 0.12);
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* High contrast theme.
   Every colour variable declared in :root must be overridden here. Five were
   missing, and because body draws its background from --color-page-bg rather
   than --color-bg, the page kept its light grey background while the text
   turned white: a contrast ratio of 1.12:1, effectively invisible. */
html.high-contrast {
    --color-primary: #ffffff;
    --color-accent-bright: #ffe600;
    --color-primary-dark: #000000;
    --color-accent: #ffe600;
    --color-accent-dark: #000000;
    --color-text: #ffffff;
    --color-bg: #000000;
    --color-bg-alt: #000000;
    --color-page-bg: #000000;
    --color-surface: #000000;
    --color-muted: #e6e6e6;
    --color-border: #ffffff;
}


html.high-contrast .media-frame::after { display: none; }
html.high-contrast .media-frame img { filter: none; }

/* ==========================================================================
   Reset & Base
   ========================================================================== */
* { box-sizing: border-box; }

html {
    font-size: var(--font-size-base);
    /* Anchor jumps land instantly. Animated scrolling was being cancelled
       part-way by images settling, which left in-page links doing nothing at
       all, and forced smooth scrolling is a known vestibular trigger. */
    scroll-behavior: auto;
}

body {
    margin: 0;
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--color-page-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
    transition: color var(--transition);
}
html.high-contrast a {
    color: var(--color-accent);
    text-decoration: underline;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-primary-dark);
    margin-top: 0;
}
html.high-contrast h1,
html.high-contrast h2,
html.high-contrast h3,
html.high-contrast h4 {
    color: var(--color-text);
}

/* Visually hidden */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link */
/* Hidden until a keyboard user tabs to it. The offset is translateY(-100%),
   not a fixed pixel value: the link's height follows the root font size, and a
   hard-coded -60px left a few pixels of navy showing below the top of the page
   at any font size above 16px. */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    background: var(--color-primary-dark);
    color: #fff;
    padding: 1rem 1.5rem;
    z-index: 1000;
    transition: transform 0.2s ease-in-out;
}
.skip-link:focus {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .skip-link {
        transition: none;
    }
}

/* Focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

/* ==========================================================================
   Accessibility Toolbar
   ========================================================================== */
.a11y-toolbar {
    background: var(--color-primary-dark);
    color: #fff;
    font-size: 0.9rem;
}
.a11y-toolbar__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0.4rem 1.5rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.a11y-toolbar__btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all var(--transition);
}
.a11y-toolbar__btn:hover {
    background: rgba(255,255,255,0.1);
}
.a11y-toolbar__btn[aria-pressed="true"] {
    background: #fff;
    color: var(--color-primary-dark);
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}
.site-header__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0.65rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1.5rem;
}
.site-header__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--color-primary-dark);
    flex-shrink: 0;
}
.site-header__mark {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
}
.site-header__wordmark {
    font-family: var(--font-ui);
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    white-space: nowrap;
}
.site-header__wordmark span {
    display: block;
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.8rem;
    font-size: 1.2rem;
    cursor: pointer;
    order: 2;
    transition: all var(--transition);
}
.nav-toggle:hover {
    background: var(--color-bg-alt);
}

.primary-nav {
    order: 3;
    flex-grow: 1;
}
.primary-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
.primary-nav a {
    font-family: var(--font-ui);
    text-decoration: none;
    font-weight: 600;
    padding: 0.4rem 0.1rem;
    color: var(--color-primary);
    text-transform: uppercase;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
    position: relative;
    transition: color var(--transition);
}
.primary-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width var(--transition);
}
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after {
    width: 100%;
}
.primary-nav a.is-current {
    color: var(--color-accent);
}
.primary-nav a.is-current::after {
    width: 100%;
}

.nav-cta-btn {
    background: var(--color-accent) !important;
    color: #fff !important;
    padding: 0.62rem 1.25rem !important;
    border-radius: var(--radius-pill) !important;
    text-transform: uppercase;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    transition: all var(--transition) !important;
}
.nav-cta-btn::after {
    display: none !important;
}
.nav-cta-btn:hover {
    background: var(--color-accent-dark) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Mobile nav */
@media (max-width: 1100px) {
    .nav-toggle {
        display: inline-block;
    }
    .site-header__inner { flex-wrap: wrap; }
    .primary-nav {
        display: none;
        width: 100%;
        order: 4;
        margin-top: 0.5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--color-border);
    }
    .primary-nav ul { flex-wrap: wrap; }
    .primary-nav.is-open {
        display: block;
        animation: slideDown 0.3s ease;
    }
    .primary-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .primary-nav a {
        padding: 0.6rem 0;
        display: block;
    }
    .primary-nav a::after {
        bottom: 0;
    }
    .nav-cta-btn {
        text-align: center;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Messages
   ========================================================================== */
.messages {
    max-width: var(--max-width);
    margin: 1rem auto;
    padding: 0 1.5rem;
}
.messages__item {
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    border: 1px solid var(--color-border);
    animation: slideIn 0.3s ease;
}
.messages__item--success {
    background: #e6f4ea;
    border-color: #34a853;
}
.messages__item--error {
    background: #fce8e6;
    border-color: #d93025;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Layout Helpers
   ========================================================================== */
main {
    min-height: 60vh;
}
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 3.5rem 1.5rem;
}
.section-alt {
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* Eyebrow */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.eyebrow::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--color-accent);
    display: inline-block;
}

/* Section heading */
.section-heading {
    text-align: center;
    margin-bottom: 2.5rem;
    padding: 0 1rem;
}
.section-heading h2 {
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
}
.section-heading h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 2px;
    background: var(--color-accent);
}
.section-heading p {
    color: var(--color-muted);
    max-width: 60ch;
    margin: 1.1rem auto 0;
    line-height: 1.7;
}

/* Grid */
.grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* Cards */
.card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
    transform: translateY(-3px);
    border-color: #c2ced4;
    box-shadow: var(--shadow-md);
}
.card h3 {
    margin-top: 0;
}
.card__body {
    padding: 1.6rem 1.6rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex-grow: 1;
}
.card__body p {
    color: var(--color-muted);
    line-height: 1.65;
    margin: 0;
}
.card__body h3 a {
    color: var(--color-primary-dark);
    text-decoration: none;
    transition: color var(--transition);
}
.card__body h3 a:hover {
    color: var(--color-accent);
}
.card__meta {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.card__link {
    margin-top: auto;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all var(--transition);
}
.card__link:hover {
    gap: 0.75rem;
}
.card__link:hover,
.card__link:focus-visible {
    text-decoration: underline;
}

@media (pointer: coarse) {
    /* On touch screens these "Learn more" links were only ~24px tall, below
       the 44px target that is comfortable for a fingertip. The extra height is
       padding, so the text position barely moves. */
    .card__link {
        min-height: 44px;
        align-items: center;
    }
}

/* Buttons */
.btn {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-ui);
    text-decoration: none;
    padding: 0.75rem 1.7rem;
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-accent);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all var(--transition);
}
.btn:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-secondary:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.btn-primary {
    display: inline-block;
    padding: 0.78rem 1.9rem;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-weight: 600;
    transition: all var(--transition);
    border: 2px solid var(--color-primary);
    cursor: pointer;
}
.btn-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Forms
   ========================================================================== */
form p {
    margin-bottom: 1.1rem;
}
label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
input,
textarea,
select {
    width: 100%;
    /* Without this an input keeps its default ~20-character intrinsic width as
       a minimum, which pushed the contact card past the edge of a 320px
       screen however narrow its container got. */
    min-width: 0;
    padding: 0.65rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color var(--transition);
}
input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary);
    outline: none;
}
fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
}
legend {
    font-weight: 700;
    padding: 0 0.5rem;
}
.errorlist {
    list-style: none;
    padding: 0;
    color: #b3261e;
    font-weight: 600;
    margin: 0.25rem 0;
}
.helptext {
    font-size: 0.9rem;
    color: #555;
}
html.high-contrast .helptext {
    color: #ddd;
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
    align-items: start;
    margin-top: 2.5rem;
}
@media (max-width: 800px) {
    /* minmax(0, 1fr), not 1fr: a plain 1fr track has an implicit auto minimum,
       so one long unbreakable string (the office email) stretched the column
       wider than the screen. */
    .contact-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}
.contact-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 2rem;
}
.contact-card h2 {
    margin-top: 0;
}
@media (max-width: 480px) {
    /* 2rem each side leaves too little room for the form on a small phone. */
    .contact-card,
    .contact-info {
        padding: 1.25rem;
    }
}
.contact-card__submit {
    width: 100%;
    margin-top: 0.5rem;
}
.contact-info {
    background: var(--color-primary);
    color: var(--color-bg);
    border-radius: var(--radius);
    padding: 2rem;
}
.contact-info h2 {
    margin-top: 0;
    color: var(--color-bg);
}
.contact-info__lead {
    opacity: 0.85;
    margin-bottom: 1.75rem;
}
.contact-info a {
    color: var(--color-bg);
    /* Addresses like ncdliberia.gol@gmail.com are a single 200px-wide "word";
       allow them to break so they fit a narrow phone. */
    overflow-wrap: anywhere;
}
.contact-info__item {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    margin-bottom: 1.4rem;
}
.contact-info__item p {
    margin: 0.15rem 0 0;
}
.contact-info__icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
}
.contact-info__icon svg {
    width: 100%;
    height: 100%;
}
.contact-info__label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}
.contact-info__social {
    margin-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    padding-top: 1.5rem;
}
.contact-info__social ul {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0 0;
    display: flex;
    gap: 0.75rem;
}
.contact-info__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-pill);
    transition: all var(--transition);
}
.contact-info__social a svg {
    width: 20px;
    height: 20px;
}
.contact-info__social a:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   HERO BANNER
   ========================================================================== */
.hero-banner {
    background:
        radial-gradient(120% 90% at 12% 0%, rgba(127, 29, 43, 0.45) 0%, rgba(127, 29, 43, 0) 55%),
        linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: #fff;
    overflow: hidden;
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
}

/* Thin accent rule along the foot of the hero */
.hero-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--color-accent);
}

.hero-banner__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-height: 560px;
}

.hero-banner__content {
    padding: 4rem 3rem 4rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    position: relative;
    animation: fadeInUp 0.8s ease;
}

.hero-banner__content .eyebrow {
    color: rgba(255,255,255,0.8);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
}
.hero-banner__content .eyebrow::before {
    background: rgba(255,255,255,0.6);
    width: 24px;
}

.hero-banner h1 {
    color: #fff;
    font-size: 3.8rem;
    font-weight: 700;
    margin: 0.5rem 0 1rem;
    line-height: 1.1;
    animation: fadeInUp 0.8s ease 0.1s both;
    max-width: 600px;
}

.hero-banner__lead {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 520px;
    opacity: 0.9;
    animation: fadeInUp 0.8s ease 0.2s both;
    color: rgba(255,255,255,0.85);
}

.hero-banner__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease 0.3s both;
}

.hero-banner .btn {
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 0.8rem 2.2rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    transition: all var(--transition);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    backdrop-filter: blur(10px);
}

.hero-banner .btn:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.6);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.hero-banner .btn-navy {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.hero-banner .btn-navy:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.hero-banner__media {
    position: relative;
    height: 100%;
    min-height: 560px;
    overflow: hidden;
}

.hero-banner__media .media-frame--hero {
    position: absolute;
    inset: 0;
    border-radius: 0 !important;
    overflow: hidden;
    background: none !important;
}

.hero-banner__media .media-frame--hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.hero-banner__media .media-frame--hero::after {
    display: none !important;
}

.hero-banner__media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Hero Responsive */
@media (max-width: 1024px) {
    .hero-banner h1 {
        font-size: 3rem;
    }
    .hero-banner__content {
        padding: 3rem 2rem;
    }
}

@media (max-width: 860px) {
    .hero-banner__inner {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .hero-banner {
        min-height: auto;
    }
    .hero-banner__media {
        min-height: 300px;
        order: -1;
    }
    .hero-banner__media .media-frame--hero {
        position: relative;
        min-height: 300px;
    }
    .hero-banner__content {
        padding: 2.5rem 1.5rem;
    }
    .hero-banner h1 {
        font-size: 2.5rem;
        max-width: 100%;
    }
    .hero-banner__lead {
        font-size: 1rem;
        max-width: 100%;
    }
    .hero-banner__actions {
        flex-direction: row;
        width: 100%;
    }
    .hero-banner__actions .btn {
        flex: 1;
        text-align: center;
        padding: 0.7rem 1.5rem;
        font-size: 0.75rem;
    }
    .hero-banner__media::after {
        background: linear-gradient(0deg, 
            rgba(10,26,46,0.4) 0%, 
            rgba(10,26,46,0) 60%
        );
    }
}

@media (max-width: 480px) {
    .hero-banner h1 {
        font-size: 2rem;
    }
    .hero-banner__content {
        padding: 2rem 1rem;
    }
    .hero-banner__media {
        min-height: 200px;
    }
    .hero-banner__media .media-frame--hero {
        min-height: 200px;
    }
    .hero-banner__actions {
        flex-direction: column;
    }
    .hero-banner__actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   Media Frame
   ========================================================================== */
.media-frame {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
}
.media-frame img {
    transition: transform 0.5s ease;
}
.media-frame:hover img {
    transform: scale(1.05);
}
.media-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    mix-blend-mode: multiply;
    opacity: 0.15;
    pointer-events: none;
}
.media-frame--tall img {
    aspect-ratio: 4/5;
    object-fit: cover;
}
.media-frame--wide img {
    aspect-ratio: 16/9;
    object-fit: cover;
}
.media-frame--square img {
    aspect-ratio: 1/1;
    object-fit: cover;
}
.media-frame--illustration::after {
    display: none;
}
.media-frame--illustration img {
    filter: none;
}

/* ==========================================================================
   Highlights gallery (filterable)
   ========================================================================== */
.highlights-filters {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}
.highlights-filters__btn {
    display: inline-block;
    padding: 0.45rem 1.2rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-primary);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}
.highlights-filters__btn:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-alt);
}
.highlights-filters__btn[aria-pressed="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 260px));
    justify-content: center;
    gap: 1.25rem;
}
.highlights-grid figure {
    margin: 0;
}
.highlights-grid .media-frame {
    width: 100%;
}
.highlights-grid .media-frame img {
    width: 100%;
}
.highlights-grid figure[hidden] {
    display: none;
}
.highlights-grid figcaption {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: var(--color-text);
    opacity: 0.85;
}

/* ==========================================================================
   President Section
   ========================================================================== */
.president-section {
    padding: 80px 20px;
    background: var(--color-page-bg);
}
.president-card {
    max-width: var(--max-width);
    margin: 0 auto;
    background: var(--color-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--transition);
}
.president-card:hover {
    box-shadow: var(--shadow-lg);
}
.president-content {
    display: grid;
    grid-template-columns: 380px 1fr;
    align-items: stretch;
}
.president-photo {
    height: 100%;
    overflow: hidden;
}
.president-photo img {
    width: 100%;
    height: 100%;
    min-height: 450px;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.president-card:hover .president-photo img {
    transform: scale(1.03);
}
.no-picture-placeholder {
    min-height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-bg-alt);
    color: #999;
    font-size: 5rem;
}

.president-text {
    padding: 50px 60px 50px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.section-badge {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    padding: 6px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    align-self: flex-start;
}
.president-text h2 {
    font-size: 2.2rem;
    color: var(--color-primary-dark);
    margin-bottom: 4px;
}
.president-text h4 {
    color: #777;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 20px;
}
.president-text p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
    flex-grow: 1;
}
.btn-message {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: 600;
    transition: all var(--transition);
    align-self: flex-start;
}
.btn-message:hover {
    background: var(--color-primary-dark);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}
.btn-message i {
    transition: transform var(--transition);
}
.btn-message:hover i {
    transform: translateX(5px);
}

@media (max-width: 900px) {
    .president-content {
        grid-template-columns: 1fr;
    }
    .president-photo img,
    .no-picture-placeholder {
        min-height: 300px;
    }
    .president-text {
        padding: 30px 25px;
    }
    .president-text h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .president-section {
        padding: 40px 10px;
    }
    .president-text {
        padding: 20px 15px;
    }
    .president-text h2 {
        font-size: 1.5rem;
    }
    .president-text p {
        font-size: 0.95rem;
    }
}

/* ==========================================================================
   What We Do - FIXED
   ========================================================================== */
.what-we-do {
    background: var(--color-primary-dark);
    color: #fff;
    padding: 80px 0;
}

.what-we-do__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    gap: 4rem;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

/* Left Column */
.what-we-do__col:first-child h2 {
    color: #fff;
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    position: relative;
}

.what-we-do__col:first-child h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--color-accent);
    border-radius: 2px;
}

.what-we-do__intro {
    color: rgba(255,255,255,0.7);
    font-size: 1rem;
    line-height: 1.8;
    margin-top: 1.5rem;
    max-width: 500px;
}

.what-we-do__list {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
}

.what-we-do__list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.what-we-do__list li:first-child {
    border-top: 1px solid rgba(255,255,255,0.08);
}

.what-we-do__check {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

.what-we-do__check svg {
    width: 14px;
    height: 14px;
    fill: #fff;
}

.what-we-do__list li span:last-child {
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Right Column */
.what-we-do__col:last-child {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.what-we-do__statements {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr 1fr;
}

.what-we-do__statements > div {
    background: rgba(255,255,255,0.05);
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all var(--transition);
}

.what-we-do__statements > div:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-2px);
}

.eyebrow--on-dark {
    color: var(--color-accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.eyebrow--on-dark::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--color-accent);
    display: inline-block;
}

.what-we-do__statements p {
    margin: 0.75rem 0 0;
    color: rgba(255,255,255,0.8);
    line-height: 1.7;
    font-size: 0.95rem;
}

/* Slider */
.what-we-do-slider {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    border-radius: var(--radius);
    background: rgba(0,0,0,0.2);
}

.what-we-do-slider p {
    display: none;
}

.who-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.who-slide.active {
    opacity: 1;
}

/* Learn more link */
.what-we-do .card__link--on-dark {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all var(--transition);
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

.what-we-do .card__link--on-dark:hover {
    color: #fff;
    gap: 0.75rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .what-we-do__inner {
        gap: 3rem;
    }
    
    .what-we-do__col:first-child h2 {
        font-size: 2.3rem;
    }
}

@media (max-width: 860px) {
    .what-we-do__inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .what-we-do__col:first-child h2 {
        font-size: 2rem;
    }
    
    .what-we-do__col:first-child h2::after {
        left: 0;
        transform: none;
    }
    
    .what-we-do__statements {
        grid-template-columns: 1fr;
    }
    
    .what-we-do-slider {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .what-we-do {
        padding: 40px 0;
    }
    
    .what-we-do__col:first-child h2 {
        font-size: 1.6rem;
    }
    
    .what-we-do__intro {
        font-size: 0.9rem;
    }
    
    .what-we-do__list li span:last-child {
        font-size: 0.9rem;
    }
    
    .what-we-do-slider {
        height: 160px;
    }
    
    .what-we-do__statements > div {
        padding: 1rem;
    }
}
/* ==========================================================================
   Impact Strip
   ========================================================================== */
.impact-strip {
    background: var(--color-primary-dark);
    color: #fff;
    padding: 40px 0;
}
.impact-strip .section-heading--on-dark {
    border-left-color: #fff;
}
.impact-strip .section-heading--on-dark h2 {
    color: #fff;
}
.impact-strip .section-heading--on-dark h2::after {
    background: var(--color-accent);
}
.impact-strip__grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}
.impact-stat {
    text-align: center;
    animation: fadeInUp 0.6s ease both;
}
.impact-stat:nth-child(1) { animation-delay: 0.1s; }
.impact-stat:nth-child(2) { animation-delay: 0.2s; }
.impact-stat:nth-child(3) { animation-delay: 0.3s; }
.impact-stat:nth-child(4) { animation-delay: 0.4s; }
.impact-stat__value {
    display: block;
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1.1;
}
html.high-contrast .impact-stat__value {
    color: #fff;
}
.impact-stat__label {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

@media (max-width: 480px) {
    .impact-stat__value {
        font-size: 2rem;
    }
}

/* ==========================================================================
   Team Section
   ========================================================================== */
.team-section {
    padding: 80px 0;
    background: var(--color-bg);
}
.team-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.team-card {
    background: var(--color-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    text-align: center;
}
.team-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}
.team-card img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.team-card:hover img {
    transform: scale(1.05);
}
.team-card > div {
    padding: 20px 20px 25px;
}
.team-card h3 {
    margin: 0 0 4px;
    color: var(--color-primary-dark);
    font-size: 1.1rem;
}
.team-card .position {
    color: #666;
    margin: 0;
    font-size: 0.9rem;
}
.team-footer {
    text-align: center;
    margin-top: 40px;
}
.team-footer .btn-primary {
    display: inline-block;
    padding: 12px 32px;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: 600;
    transition: all var(--transition);
}
.team-footer .btn-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

@media (max-width: 480px) {
    .team-section {
        padding: 40px 0;
    }
    .team-card img {
        height: 250px;
    }
}

/* ==========================================================================
   Donation Quicklinks
   ========================================================================== */
.donation-quicklinks {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.donation-quicklinks__card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    transition: all var(--transition);
}
.donation-quicklinks__card:hover {
    background: var(--color-accent-dark);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.donation-quicklinks__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border-radius: var(--radius);
}
.donation-quicklinks__icon svg {
    width: 26px;
    height: 26px;
    fill: #fff;
}

/* ==========================================================================
   Support Section
   ========================================================================== */
.support-section {
    padding: 80px 0;
    background: var(--color-bg-alt);
}
.support-banner {
    background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent));
    border-radius: var(--radius);
    padding: 3rem 2rem;
    margin-bottom: 40px;
    text-align: center;
}
.banner-content h2 {
    color: #fff;
    font-size: 2.3rem;
    margin-bottom: 10px;
}
.banner-content p {
    color: rgba(255,255,255,0.9);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
}

.payment-selector {
    margin-bottom: 35px;

}
.payment-selector h3 {
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 15px;
}
.payment-selector select {
    width: 100%;
    text-align: center;
    padding: 14px 18px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 900;
    background: #fff;
    cursor: pointer;
    color: var(--color-primary-dark);
    transition: border-color var(--transition);
}
.payment-selector select:focus {
    border-color: var(--color-primary);
    outline: none;
}

.payment-grid {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.payment-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 35px 25px;
    text-align: center;
    transition: all var(--transition);
}
.payment-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}
.payment-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.payment-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.payment-card h4 {
    margin-bottom: 10px;
    color: var(--color-primary-dark);
}
.payment-card p {
    color: #666;
    line-height: 1.6;
}
.donate-btn-wrapper {
    text-align: center;
    margin-top: 40px;
}
.donate-btn {
    display: inline-block;
    padding: 15px 50px;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    transition: all var(--transition);
    border: none;
    cursor: pointer;
}
.donate-btn:hover {
    background: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
    .support-section {
        padding: 40px 0;
    }
    .support-banner {
        padding: 2rem 1.5rem;
    }
    .banner-content h2 {
        font-size: 1.8rem;
    }
    .payment-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    .payment-selector select {
        max-width: 100%;
    }
    .donate-btn {
        width: 100%;
        max-width: 400px;
        text-align: center;
    }
}

/* ==========================================================================
   Resources Section - Sign Language Video Library
   ========================================================================== */
.section-resources {
    padding: 80px 0;
    background: linear-gradient(135deg, 
        var(--color-accent-dark) 0%,   
        var(--color-accent) 40%,        
        var(--color-primary) 70%,       
        var(--color-bg) 100%
    );
}

.section-resources .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section-resources .section-heading h2 {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}
.section-resources .section-heading h2::after {
    display: none;
}
.section-resources .section-heading p {
    color: rgba(255,255,255,0.85);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

.resource-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 2.5rem;
}

.resource-card {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: all var(--transition);
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    flex-direction: column;
}
.resource-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    border-color: rgba(255,255,255,0.4);
    background: #fff;
}

.resource-image {
    height: 200px;
    overflow: hidden;
    background: rgba(0,0,0,0.05);
}
.resource-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.resource-card:hover .resource-image img {
    transform: scale(1.03);
}

.resource-content {
    padding: 24px 24px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.resource-content h3 {
    margin-bottom: 10px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    line-height: 1.3;
}
.resource-content p {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 0.95rem;
    flex: 1;
}

.resource-content .btn-primary {
    align-self: flex-start;
}

.resource-actions {
    text-align: center;
    margin-top: 2.5rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.resource-actions .btn-donate {
    display: inline-block;
    padding: 12px 36px;
    background: var(--color-accent);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    transition: all var(--transition);
    border: none;
}
.resource-actions .btn-donate:hover {
    background: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.resource-actions .btn-learn {
    display: inline-block;
    padding: 12px 36px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    transition: all var(--transition);
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
}
.resource-actions .btn-learn:hover {
    border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.resource-actions .btn-learn::after {
    content: " >";
    display: inline-block;
}

@media (max-width: 1024px) {
    .resource-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .section-resources .section-heading h2 {
        font-size: 2rem;
    }
    .resource-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .resource-image {
        height: 160px;
    }
    .resource-content {
        padding: 18px 18px 22px;
    }
    .resource-content h3 {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .section-resources {
        padding: 40px 0;
    }
    .section-resources .section-heading h2 {
        font-size: 1.6rem;
    }
    .section-resources .section-heading p {
        font-size: 0.95rem;
    }
    .resource-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .resource-image {
        height: 180px;
    }
    .resource-actions {
        flex-direction: column;
        align-items: center;
    }
    .resource-actions .btn-donate,
    .resource-actions .btn-learn {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
    .resource-content .btn-primary {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    margin-top: 0;
}

/* Partners */
.site-footer__partners {
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 1.5rem 0;
}
.site-footer__partners-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}
.site-footer__partners-inner a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity var(--transition);
}
.site-footer__partners-inner img {
    max-height: 40px;
    width: auto;
    opacity: 0.6;
    transition: all var(--transition);
    filter: grayscale(100%);
}
.site-footer__partners-inner a:hover img {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* Main Footer */
.site-footer__main {
    background: var(--color-primary-dark);
    color: #fff;
    padding: 2.5rem 0 1.5rem;
}
.site-footer__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    gap: 2rem;
    grid-template-columns: 2fr 1fr;
    align-items: start;
}
.site-footer__col:first-child h2 {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}
.site-footer__col:first-child p {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 400px;
    margin: 0;
}
.site-footer__col:last-child h2 {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}
.site-footer__col:last-child p {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    line-height: 1.8;
    margin: 0.25rem 0;
}
.site-footer__col:last-child a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: color var(--transition);
}
.site-footer__col:last-child a:hover {
    color: #fff;
}

/* Utility Bar */
.site-footer__utility {
    background: var(--color-primary-dark);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 0.75rem 0;
}
.site-footer__utility-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.footer-quicklinks {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.footer-quicklinks a {
    color: rgba(255,255,255,0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: all var(--transition);
    border: 1px solid rgba(255,255,255,0.1);
}
.footer-quicklinks a:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.05);
    transform: translateY(-2px);
}
.footer-quicklinks svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.footer-donate-btn {
    background: var(--color-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: 0.7rem 2rem;
    border-radius: 6px;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    transition: all var(--transition);
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
.footer-donate-btn:hover {
    background: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(97,20,32,0.3);
}

.social-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}
.social-links li {
    display: inline-flex;
}
.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    transition: all var(--transition);
    color: rgba(255,255,255,0.6);
}
.social-links a:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.4);
    color: #fff;
    transform: translateY(-2px);
}
.social-links svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.site-footer__copyright {
    text-align: center;
    padding: 1rem;
    margin: 0;
    background: var(--color-primary-dark);
    border-top: 1px solid rgba(255,255,255,0.04);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.02em;
}

/* Footer Responsive */
@media (max-width: 768px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }
    .site-footer__col:first-child p {
        max-width: 100%;
        margin: 0 auto;
    }
    .site-footer__utility-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
        padding: 0.5rem 1.5rem;
    }
    .footer-quicklinks {
        justify-content: center;
    }
    .social-links {
        justify-content: center;
    }
    .footer-donate-btn {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .site-footer__partners-inner {
        gap: 1.5rem;
    }
    .site-footer__partners-inner img {
        max-height: 30px;
    }
    .site-footer__inner {
        padding: 0 1rem;
    }
    .site-footer__col:first-child h2 {
        font-size: 1.1rem;
    }
    .footer-donate-btn {
        font-size: 0.75rem;
        padding: 0.6rem 1.5rem;
    }
}
/* ==========================================================================
   Slideshow controls
   ========================================================================== */
.what-we-do-slideshow {
    position: relative;
}
.slideshow-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.slideshow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--transition);
}
.slideshow-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   Form error summary
   ========================================================================== */
.form-error-summary {
    border: 2px solid #b3261e;
    border-radius: var(--radius);
    background: #fdecea;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.form-error-summary__title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: #b3261e;
}
.form-error-summary ul {
    margin: 0;
    padding-left: 1.2rem;
}
.form-error-summary a {
    color: #b3261e;
    font-weight: 600;
}
html.high-contrast .form-error-summary {
    background: #000;
    color: #fff;
    border-color: #fff;
}
html.high-contrast .form-error-summary__title,
html.high-contrast .form-error-summary a {
    color: #fff;
}

/* ==========================================================================
   Reduced motion — honour the user's OS/browser preference (WCAG 2.3.3)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .media-frame:hover img {
        transform: none;
    }
}

/* ==========================================================================
   Scroll-reveal + hover motion (progressive enhancement)
   Hidden start-state is scoped to `.js` so no-JS users always see content.
   Hover uses the independent `translate` property so it never conflicts with
   the reveal's `transform`.
   ========================================================================== */
.js .reveal,
.js .card,
.js .section-heading,
.js .impact-stat,
.js .resource-card,
.js .team-card,
.js .payment-card,
.js .donation-quicklinks__card,
.js .hero-banner__content,
.js .president-card {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease,
                translate 0.25s ease, box-shadow 0.25s ease;
}
.js .reveal.is-visible,
.js .card.is-visible,
.js .section-heading.is-visible,
.js .impact-stat.is-visible,
.js .resource-card.is-visible,
.js .team-card.is-visible,
.js .payment-card.is-visible,
.js .donation-quicklinks__card.is-visible,
.js .hero-banner__content.is-visible,
.js .president-card.is-visible {
    opacity: 1;
    transform: none;
}

/* Hover lift */
.card,
.resource-card,
.team-card,
.payment-card,
.donation-quicklinks__card {
    transition: translate 0.25s ease, box-shadow 0.25s ease;
}
.card:hover,
.resource-card:hover,
.team-card:hover,
.payment-card:hover,
.donation-quicklinks__card:hover {
    translate: 0 -6px;
    box-shadow: var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
    .js .reveal,
    .js .card,
    .js .section-heading,
    .js .impact-stat,
    .js .resource-card,
    .js .team-card,
    .js .payment-card,
    .js .donation-quicklinks__card,
    .js .hero-banner__content,
    .js .president-card {
        opacity: 1 !important;
        transform: none !important;
    }
    .card:hover,
    .resource-card:hover,
    .team-card:hover,
    .payment-card:hover,
    .donation-quicklinks__card:hover {
        translate: none;
    }
}

/* Error pages */
.error-page {
    padding: 3.5rem 0 4.5rem;
}

/* ==========================================================================
   Intro (welcome) video modal
   ========================================================================== */
.intro-modal {
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: #000;
    width: min(90vw, 860px);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.intro-modal::backdrop {
    background: rgba(10, 22, 34, 0.8);
}
.intro-modal video {
    display: block;
    width: 100%;
    max-height: 80vh;
    background: #000;
}
.intro-modal__skip {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.45rem 1.1rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.92);
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
}
.intro-modal__skip:hover {
    background: #fff;
}

/* Honeypot: park it far off-screen (display:none is skipped by smarter bots) */
.hp-wrap {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    height: 1px;
    overflow: hidden;
}

.site-footer__copyright a {
    color: rgba(255, 255, 255, 0.7);
}
.site-footer__copyright a:hover {
    color: #fff;
}

/* ==========================================================================
   Official content components
   Added for the Commission's approved website content: page headers, core
   values, responsibilities, leadership message, programme detail, advocacy
   initiatives, FAQs and the publications library.
   ========================================================================== */

/* Long official headlines have to fit the hero without overflowing */
.hero-banner h1 {
    font-size: clamp(1.9rem, 3.4vw, 3.2rem);
    max-width: 640px;
}

.hero-banner__tagline {
    display: inline-block;
    align-self: flex-start;
    margin: 0 0 1rem;
    padding: 0.35rem 1rem;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255,255,255,0.12);
}

/* Shared page header for interior pages */
.page-hero {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: #fff;
    padding: 3.5rem 0 3rem;
    margin-bottom: 3rem;
}

.page-hero h1 {
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    margin: 0.4rem 0 0.8rem;
    max-width: 22ch;
}

.page-hero .eyebrow { color: rgba(255,255,255,0.85); }
.page-hero .eyebrow::before { background: rgba(255,255,255,0.6); }

.page-hero__lead {
    max-width: 65ch;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.9);
    margin: 0;
}

.page-hero__lead a { color: #fff; }

.page-hero__tagline {
    margin: 1.2rem 0 0;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.page-hero__back { margin: 0 0 0.5rem; }
.page-hero__back a { color: rgba(255,255,255,0.9); }

html.high-contrast .page-hero {
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-border);
}

/* Readable body copy */
.prose { max-width: 70ch; }
.prose p { line-height: 1.8; }
.prose--centered { margin: 0 auto; text-align: left; }
.centerp { text-align: center; }

.grid--two { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.card__title {
    font-size: 1.25rem;
    margin: 0.2rem 0 0.6rem;
}
.card__title a {
    color: var(--color-primary-dark);
    text-decoration: none;
}
.card__title a:hover { color: var(--color-accent); }

/* Core values */
.values-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.value-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--shadow-sm);
}

.value-card h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

.value-card p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Primary responsibilities */
.responsibilities {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.responsibilities li {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
}

.responsibilities__check {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--color-accent);
    margin-top: 0.15rem;
}
.responsibilities__check svg { width: 100%; height: 100%; }

/* Leadership message */
.leadership-message {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2.5rem;
    align-items: start;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}

.leadership-message__photo { text-align: center; }

.leadership-message__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.leadership-message__name {
    margin: 0.9rem 0 0.1rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.leadership-message__role {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-accent);
    font-weight: 600;
}

.leadership-message__text h2 { margin-bottom: 0.2rem; }

@media (max-width: 720px) {
    .leadership-message { grid-template-columns: 1fr; gap: 1.5rem; }
    .leadership-message__photo { max-width: 200px; margin: 0 auto; }
}

/* Programme detail */
.program-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(min(260px, 100%), 1fr);
    gap: 3rem;
    align-items: start;
}

.program-layout__main h2 {
    font-size: 1.35rem;
    margin-top: 2rem;
}
.program-layout__main h2:first-child { margin-top: 0; }

.program-layout__facts {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    position: sticky;
    top: 1.5rem;
}

.program-fact + .program-fact {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.program-fact__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.35rem;
}

.program-fact p { margin: 0; font-size: 0.95rem; line-height: 1.6; }

@media (max-width: 860px) {
    .program-layout { grid-template-columns: 1fr; gap: 2rem; }
    .program-layout__facts { position: static; }
}

/* Advocacy initiatives */
.initiative-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.initiative-card {
    position: relative;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.6rem 1.6rem 1.4rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.initiative-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.initiative-card__number {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    margin-bottom: 0.4rem;
}

.initiative-card h3 {
    margin: 0 0 0.7rem;
    font-size: 1.1rem;
}

.initiative-card ul {
    margin: 0;
    padding-left: 1.1rem;
}

.initiative-card li {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.4rem;
}

/* FAQs */
.faq-list {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    gap: 0.9rem;
}

.faq-item {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.4rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--color-primary-dark);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:hover { background: var(--color-bg-alt); }

.faq-item summary:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: -3px;
}

.faq-item__marker {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    transform: rotate(45deg);
    transition: transform var(--transition);
}

.faq-item[open] .faq-item__marker { transform: rotate(-135deg); }

.faq-item__answer {
    padding: 0 1.4rem 1.4rem;
    border-top: 1px solid var(--color-border);
}

.faq-item__answer p { line-height: 1.75; }
.faq-item__answer ul { padding-left: 1.2rem; }
.faq-item__answer li { margin-bottom: 0.45rem; line-height: 1.65; }

.faq-contact {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

.faq-contact__item {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
}

.faq-contact__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.3rem;
}

.faq-contact__item p { margin: 0; }

/* Resources library */
.resource-group { margin-bottom: 3rem; }

.resource-group__title {
    font-size: 1.3rem;
    padding-bottom: 0.6rem;
    margin-bottom: 1.4rem;
    border-bottom: 2px solid var(--color-border);
}

.resource-group__empty {
    margin: 0;
    color: #5c6b73;
    font-size: 0.95rem;
}

html.high-contrast .resource-group__empty { color: var(--color-text); }

/* Donate page intro */
.donate-intro { max-width: 70ch; line-height: 1.75; }
.donate-intro--muted { font-size: 0.95rem; color: #4a5a63; }
html.high-contrast .donate-intro--muted { color: var(--color-text); }

/* Footer additions */
.site-footer__col--wide { flex: 1 1 340px; }

.site-footer__tagline {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.contact-info__hours {
    font-size: 0.9rem;
    opacity: 0.85;
}

/* Questions are headings so screen-reader users can navigate between them */
.faq-item__question {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
    color: inherit;
    line-height: 1.4;
}

/* ==========================================================================
   Professional polish
   Typographic rhythm, a calmer footer grid, and the small corrections that
   make the pages read as one institution rather than a set of components.
   ========================================================================== */

/* Body copy sits better slightly narrower and looser */
p { line-height: 1.7; }

.hero-banner h1 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    letter-spacing: -0.015em;
    max-width: 14ch;
}

.hero-banner__lead {
    font-size: 1.02rem;
    max-width: 46ch;
    color: rgba(255, 255, 255, 0.88);
}

.page-hero { padding: 4rem 0 3.5rem; }

.page-hero h1 { font-weight: 600; }

/* A single opening statement, set larger than body copy */
.lead-statement {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--color-primary-dark);
    text-align: center;
    max-width: 62ch;
    margin: 0 auto;
}

html.high-contrast .lead-statement { color: var(--color-text); }

/* Leadership message reads full width when no portrait has been supplied */
.leadership-message--no-photo { grid-template-columns: 1fr; }
.leadership-message--no-photo .leadership-message__text { max-width: 78ch; }

.leadership-message {
    border-left: 3px solid var(--color-accent);
    padding: 2.2rem 2.4rem;
}

.leadership-message__text h2 {
    font-size: 1.5rem;
}

.leadership-message__role {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.leadership-message__signoff {
    margin-top: 0.4rem;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* Section badges and message button share the pill language of the buttons */
.section-badge {
    font-family: var(--font-ui);
    letter-spacing: 0.1em;
    font-size: 0.7rem;
}

.btn-message {
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: 0.88rem;
    padding: 0.75rem 1.7rem;
}

.president-section { padding: 4.5rem 1.5rem; }
.president-text h2 { font-size: 1.9rem; }
.president-text h4 {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.president-text p { color: var(--color-muted); font-size: 1rem; }

/* Values, initiatives and facts pick up the serif for their headings */
.value-card h3,
.initiative-card h3,
.card__title,
.resource-group__title { font-family: var(--font-heading); }

.faq-item__question { font-family: var(--font-heading); font-size: 1.08rem; }

.program-fact__label,
.faq-contact__label,
.initiative-card__number,
.card__meta { font-family: var(--font-ui); }

/* Footer: three even columns, styled as one set rather than first and last */
.site-footer__main { padding: 3.5rem 0 2rem; }

.site-footer__inner {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 3rem;
}

.site-footer__col h2 {
    font-family: var(--font-ui);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.site-footer__col--wide h2 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    text-transform: none;
    letter-spacing: 0;
}

.site-footer__col p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
    line-height: 1.75;
    margin: 0 0 0.5rem;
    max-width: 42ch;
}

.site-footer__col a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: color var(--transition);
}
.site-footer__col a:hover { color: #fff; }

.site-footer__tagline {
    font-family: var(--font-ui);
}

@media (max-width: 860px) {
    .site-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* Impact figures read as data, not decoration */
.impact-stat__value { font-family: var(--font-heading); }

/* Media frames lose most of the tint so the photographs speak for themselves */
.media-frame::after { opacity: 0.07; }


/* The seal and a two-line wordmark, set in title case as on official stationery */
.site-header__brand { gap: 0.85rem; }

.site-header__brand img {
    width: 54px;
    height: 54px;
}

.site-header__wordmark {
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.22;
    color: var(--color-primary);
}

.site-header__wordmark span { display: block; }

@media (max-width: 480px) {
    .site-header__brand img { width: 44px; height: 44px; }
    .site-header__wordmark { font-size: 0.82rem; }
}

/* ==========================================================================
   Corrections found in review
   ========================================================================== */

/* The hero eyebrow was wrapping mid-phrase */
.hero-banner__content .eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

/* Maroon on navy failed contrast; the on-dark link now reads clearly */
.what-we-do .card__link--on-dark {
    color: #fff;
    align-self: flex-start;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 2px;
}
.what-we-do .card__link--on-dark:hover {
    color: #fff;
    border-bottom-color: #fff;
}

/* Close the gap under the What We Do columns */
.what-we-do { padding: 4.5rem 0; }
.what-we-do__col:first-child h2 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.2vw, 2.6rem);
    font-weight: 600;
}
.what-we-do__col:last-child { gap: 1.5rem; }
.what-we-do-slider { height: 240px; }

/* Impact strip breathes a little less */
.impact-strip { padding: 3.5rem 0; }


/* Maroon on deep navy is unreadable; on-dark accents run in plain white instead
   so no gold appears anywhere in the What We Do band. */
.eyebrow--on-dark,
.eyebrow--on-dark::before {
    color: rgba(255, 255, 255, 0.82);
    background-color: transparent;
}
.eyebrow--on-dark::before { background: rgba(255, 255, 255, 0.55); }

.impact-stat__label {
    font-family: var(--font-ui);
    color: rgba(255, 255, 255, 0.82);
}

/* A lone card should keep card proportions rather than stretch across the page */
.grid--capped {
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 380px));
    justify-content: start;
}

/* Interior page headers sit a little tighter */
.page-hero { padding: 3.25rem 0 3rem; }

/* The stacked hero photo was running to two thirds of a phone screen */
@media (max-width: 860px) {
    .hero-banner__media,
    .hero-banner__media .media-frame--hero {
        height: 280px;
        min-height: 280px;
        max-height: 280px;
    }
    .hero-banner__media .media-frame--hero img {
        height: 100%;
        object-position: center 30%;
    }
}

/* ==========================================================================
   Homepage hero — photograph behind the opening statement
   The headline sits on a flat maroon field on the left; the photograph fills
   the right of the band and is faded into that field, so a portrait-shaped
   picture still shows a whole person rather than a cropped face.
   ========================================================================== */
.hero-banner {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(460px, 62vh, 680px);
    background: linear-gradient(115deg, #691424 0%, var(--color-accent) 100%);
}

.hero-banner__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-banner__backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The photograph is already banner-shaped, so it sits almost uncropped */
    object-position: center 55%;
    filter: none;
}

/* Illustrations have no photographic detail to protect, so they sit contained */
.hero-banner__backdrop-illustration {
    object-fit: contain;
    object-position: right center;
}

/* The wash that keeps the type legible over the picture */
.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Sampled from the reference artwork: near opaque behind the headline,
       gone by roughly two thirds across, so the photograph carries the right. */
    background: linear-gradient(90deg,
        rgba(105, 20, 32, 0.97) 0%,
        rgba(118, 26, 39, 0.94) 30%,
        rgba(127, 29, 43, 0.80) 42%,
        rgba(127, 29, 43, 0.45) 52%,
        rgba(127, 29, 43, 0.14) 63%,
        rgba(127, 29, 43, 0) 74%);
}

.hero-banner::after { z-index: 3; }

.hero-banner__inner {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: var(--max-width);
    min-height: 0;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.hero-banner__content {
    max-width: 30rem;
    padding: 4rem 0;
}

.hero-banner h1 {
    max-width: 15ch;
    font-size: clamp(2.3rem, 4.6vw, 3.5rem);
    text-shadow: 0 2px 18px rgba(20, 4, 9, 0.45);
}

.hero-banner__lead {
    max-width: 44ch;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 10px rgba(20, 4, 9, 0.45);
}

/* Solid buttons read more clearly against a photograph than glass ones */
.hero-banner .btn {
    background: rgba(255, 255, 255, 0.14);
    border: 2px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 6px 18px rgba(20, 4, 9, 0.3);
}

.hero-banner .btn-navy {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Donate is the outlined companion to the solid Learn More button */
.hero-banner .btn-donate {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.8);
    color: #fff;
}

.hero-banner .btn-donate:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: #fff;
}

html.high-contrast .hero-banner::before {
    background: rgba(0, 0, 0, 0.86);
}

/* In high contrast the primary colour is white, which would otherwise leave the
   Learn More button white on white. Both hero buttons are restated here. */
html.high-contrast .hero-banner .btn,
html.high-contrast .hero-banner .btn-navy {
    background: #000;
    border-color: #fff;
    color: #fff;
}
html.high-contrast .hero-banner .btn-donate {
    background: #000;
    border-color: var(--color-accent-bright);
    color: var(--color-accent-bright);
}
html.high-contrast .hero-banner h1,
html.high-contrast .hero-banner__lead { text-shadow: none; }

/* On narrow screens the photograph runs full width under a heavier wash */
@media (max-width: 860px) {
    .hero-banner {
        min-height: 420px;
    }
    .hero-banner__content {
        max-width: none;
        padding: 3rem 0;
    }
    .hero-banner__backdrop img {
        object-position: 76% center;
    }
    .hero-banner::before {
        background:
            linear-gradient(90deg,
                rgba(105, 20, 32, 0.95) 0%,
                rgba(118, 26, 39, 0.88) 60%,
                rgba(127, 29, 43, 0.8) 100%),
            linear-gradient(0deg,
                rgba(60, 12, 20, 0.45) 0%,
                rgba(60, 12, 20, 0) 55%);
    }
}

/* ==========================================================================
   Leadership card
   The Executive Director's message reuses the president card so the two
   statements at the top of the home page read as one pair.
   ========================================================================== */

/* The two cards sit together, so one section's padding separates them */
.president-section--follow-on { padding-top: 0; }

/* The site carries no icon font, so the card button uses an inline arrow */
.btn-message__icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.05em;
    height: 1.05em;
    transition: transform var(--transition);
}
.btn-message__icon svg { width: 100%; height: 100%; }
.btn-message:hover .btn-message__icon { transform: translateX(3px); }

/* An empty placeholder still needs its own shape when no portrait is set */
.no-picture-placeholder::after {
    content: "";
    display: block;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--color-border);
}

/* ==========================================================================
   Justified body copy
   Requested for the running prose. Only wide measures are justified: narrow
   columns such as card bodies stay ranged left, where justification would
   open large gaps between words. Hyphenation is on for the same reason, and
   phone widths fall back to ranged left because the measure is too short.
   ========================================================================== */
.prose p,
.prose li,
.president-text p,
.leadership-message__text p,
.faq-item__answer p,
.faq-item__answer li,
.page-hero__lead,
.lead-statement {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}

@media (max-width: 640px) {
    .prose p,
    .prose li,
    .president-text p,
    .leadership-message__text p,
    .faq-item__answer p,
    .faq-item__answer li,
    .page-hero__lead,
    .lead-statement {
        text-align: left;
        -webkit-hyphens: manual;
        hyphens: manual;
    }
}

/* ==========================================================================
   Giving the pages weight
   Buttons that sit off the page, an Our Impact band that stands apart from
   the navy above it, a footer whose three columns share one measure, and a
   leadership card that reads as a statement rather than a stranded portrait.
   ========================================================================== */

/* --- Hero call to action -------------------------------------------------
   The two buttons sit on a warm maroon wash over a photograph, so the shadow
   is mixed from that same warmth: a cool grey one simply disappears here.
   Each carries a tight contact shadow to seat it, two wider soft layers for
   lift, and a hairline highlight along the top edge. */
.hero-banner .btn {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 2px 3px rgba(14, 1, 4, 0.58),
        0 9px 18px rgba(14, 1, 4, 0.52),
        0 24px 50px rgba(14, 1, 4, 0.56);
}

.hero-banner .btn-navy {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 2px 3px rgba(14, 1, 4, 0.66),
        0 10px 20px rgba(14, 1, 4, 0.60),
        0 26px 54px rgba(14, 1, 4, 0.64);
}

.hero-banner .btn:hover,
.hero-banner .btn:focus-visible {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 3px 5px rgba(14, 1, 4, 0.58),
        0 16px 30px rgba(14, 1, 4, 0.56),
        0 36px 70px rgba(14, 1, 4, 0.60);
}

.hero-banner .btn-navy:hover,
.hero-banner .btn-navy:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 3px 5px rgba(14, 1, 4, 0.66),
        0 18px 34px rgba(14, 1, 4, 0.62),
        0 40px 76px rgba(14, 1, 4, 0.66);
}

/* Pressing a button drops it back onto the page */
.hero-banner .btn:active {
    transform: translateY(0);
    box-shadow:
        0 1px 2px rgba(14, 1, 4, 0.66),
        0 3px 8px rgba(14, 1, 4, 0.44);
}

@media (prefers-reduced-motion: reduce) {
    .hero-banner .btn,
    .hero-banner .btn:hover,
    .hero-banner .btn:focus-visible { transform: none; }
}

/* Flat buttons in high contrast: a shadow there is only noise */
html.high-contrast .hero-banner .btn,
html.high-contrast .hero-banner .btn-navy,
html.high-contrast .hero-banner .btn-donate { box-shadow: none; }

/* --- What We Do ----------------------------------------------------------
   The structure stays; the type is quieter so the column reads as a list of
   commitments rather than a wall. */
.what-we-do__intro {
    font-size: 1rem;
    max-width: 46ch;
    opacity: 0.82;
}

.what-we-do__list li {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.what-we-do__list li span:last-child {
    font-size: 0.98rem;
    line-height: 1.6;
}

.what-we-do__statements p {
    font-size: 0.94rem;
    line-height: 1.65;
}

/* Trimming the list to four leaves the left column shorter than the right, so
   it becomes a full-height flex column and the link sits on its own baseline
   at the foot of the band rather than floating in the middle of a gap. */
.what-we-do__inner { align-items: stretch; }

.what-we-do__col:first-child {
    display: flex;
    flex-direction: column;
}

.what-we-do__col:first-child .what-we-do__list { margin-bottom: 0; }

/* The link that carries the rest of the list */
.what-we-do__more {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 2rem;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.35);
    padding-bottom: 0.2rem;
    transition: border-color var(--transition);
}
.what-we-do__more:hover { border-bottom-color: #fff; }

/* --- Our Impact ----------------------------------------------------------
   Lifted out of the navy run above it onto a maroon band of its own, so the
   three figures read as a break in the page rather than more of What We Do. */
.impact-strip {
    background: var(--color-accent);
    color: #fff;
    padding: 64px 0;
    border-top: 4px solid var(--color-accent-dark);
    border-bottom: 4px solid var(--color-accent-dark);
}

.impact-strip .section-heading--on-dark h2 { color: #fff; }
.impact-strip .section-heading--on-dark h2::after {
    background: rgba(255, 255, 255, 0.55);
}

.impact-strip__grid {
    gap: 2.5rem;
    margin-top: 2.5rem;
}

/* White figures on maroon: gold would carry the yellow back in */
.impact-stat__value {
    color: #fff;
    font-size: 3.2rem;
    letter-spacing: -0.02em;
}

.impact-stat__label {
    color: rgba(255, 255, 255, 0.88);
    opacity: 1;
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
}

/* A hairline between the figures, dropped when they stack */
.impact-stat + .impact-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.22);
}

@media (max-width: 720px) {
    .impact-stat + .impact-stat { border-left: 0; }
    .impact-strip { padding: 48px 0; }
}

html.high-contrast .impact-strip {
    background: #000;
    border-color: #fff;
}
html.high-contrast .impact-stat__value,
html.high-contrast .impact-stat__label { color: #fff; }

/* --- Footer --------------------------------------------------------------
   The three columns are set to one measure and justified together, so the
   organisation block lines up with Visit Us and Contact beside it. */
.site-footer__col p {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    max-width: 42ch;
}

/* An address and a phone number are not prose: justifying them opens gaps */
.site-footer__col--wide + .site-footer__col p,
.site-footer__col--wide + .site-footer__col + .site-footer__col p,
.site-footer__tagline {
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
}

@media (max-width: 640px) {
    .site-footer__col p {
        text-align: left;
        -webkit-hyphens: manual;
        hyphens: manual;
    }
}

/* --- Leadership message --------------------------------------------------
   The portrait sat in a 220px column beside six paragraphs, leaving a tall
   empty gutter under it. It now sits in a filled panel that runs the height
   of the message, and the closing line is set as a sign-off. */
/* The message keeps a 70ch measure, so the card is sized to that measure plus
   the portrait panel rather than run to the full container width, which left a
   wide empty strip down its right-hand side. */
.leadership-message--full {
    max-width: 980px;
    margin-inline: auto;
    grid-template-columns: 280px 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-left: 0;
    box-shadow: var(--shadow-md);
}

.leadership-message--full .leadership-message__photo {
    background: var(--color-primary-dark);
    padding: 2rem 1.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.leadership-message--full .leadership-message__photo .media-frame {
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.leadership-message--full .leadership-message__photo .media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
}

.leadership-message--full .leadership-message__name {
    margin: 1.25rem 0 0.35rem;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.25;
}

.leadership-message--full .leadership-message__role {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    line-height: 1.5;
}

/* Fills the gutter that used to sit empty below a short caption */
.leadership-message__seal {
    margin-top: auto;
    padding-top: 2rem;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* No measure cap here: the panel already narrows the column, and capping it
   again left a wide empty strip down the right of the card. */
.leadership-message--full .leadership-message__text {
    padding: 2.75rem 3rem;
}

/* The opening line is the greeting, so it is set as one */
.leadership-message__text > p:first-child {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    line-height: 1.45;
    color: var(--color-primary-dark);
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
    margin-bottom: 1.4rem;
}

/* And the closing line is the sign-off */
.leadership-message__text > p:last-child {
    margin-top: 1.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--color-accent);
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
}

@media (max-width: 900px) {
    .leadership-message--full { grid-template-columns: 1fr; }
    .leadership-message--full .leadership-message__photo {
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
        padding: 1.5rem;
        max-width: none;
        margin: 0;
    }
    .leadership-message--full .leadership-message__photo .media-frame {
        width: 110px;
        flex-shrink: 0;
    }
    .leadership-message--full .leadership-message__name { margin-top: 0; }
    .leadership-message__seal { display: none; }
    .leadership-message--full .leadership-message__text { padding: 1.75rem 1.5rem; }
}

html.high-contrast .leadership-message--full .leadership-message__photo {
    background: #000;
    border-right: 1px solid #fff;
}
html.high-contrast .leadership-message--full .leadership-message__name,
html.high-contrast .leadership-message--full .leadership-message__role,
html.high-contrast .leadership-message__text > p:first-child,
html.high-contrast .leadership-message__text > p:last-child { color: #fff; }

/* --- Support Our Work ----------------------------------------------------
   The running paragraphs on the donation page were the one place left ranged
   right while the rest of the site is justified. */
.donate-intro,
.section-heading > p {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}

/* The homepage "Support Our Cause" banner is a short, centred call to action
   rather than running prose, so it stays centred under its heading instead of
   being justified — justification left ragged word-spacing on its two lines. */
.banner-content p {
    text-align: center;
    max-width: 60ch;
    margin-inline: auto;
    overflow-wrap: break-word;
}

/* The block stays centred under its title, but the copy inside it is
   justified like the rest of the site's running prose. A one-line standfirst
   is unaffected either way. */
.section-heading > p {
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
}

.donate-intro {
    max-width: 72ch;
}

@media (max-width: 640px) {
    /* Justified prose gets ugly gaps on a narrow screen, so it ranges left
       here. The support banner is excluded: it is a centred call to action at
       every width. */
    .donate-intro {
        text-align: left;
        -webkit-hyphens: manual;
        hyphens: manual;
    }
}

/* ==========================================================================
   Project Highlights gallery, rebuilt
   The photographs were being cropped to a 4:5 portrait frame, which cut the
   sides off pictures shot at 3:2 and left faces sliced at the edge. Each one
   now sits in a card at its native landscape shape, with the caption on the
   card rather than floating under it, and the first card on screen runs at
   double size so the grid has a focal point instead of eight equal tiles.
   ========================================================================== */

/* --- Filter row ---------------------------------------------------------- */
.highlights-filters {
    margin-bottom: 2.25rem;
    gap: 0.5rem;
}

.highlights-filters__btn {
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-muted);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
}

.highlights-filters__btn:hover {
    border-color: var(--color-accent);
    background: var(--color-bg);
    color: var(--color-accent);
}

.highlights-filters__btn[aria-pressed="true"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(127, 29, 43, 0.28);
}

/* --- Grid ---------------------------------------------------------------- */
.highlights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 1.5rem;
}

@media (min-width: 1000px) {
    .highlights-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .highlights-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
}

/* --- Card ---------------------------------------------------------------- */
.highlights-grid .highlight-card {
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition),
                border-color var(--transition);
}

.highlights-grid .highlight-card:hover {
    transform: translateY(-4px);
    border-color: rgba(127, 29, 43, 0.35);
    box-shadow: var(--shadow-md);
}

/* The photographs are 3:2 out of the camera, so the frame keeps that shape
   and crops almost nothing away. */
.highlight-card__frame {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--color-primary-dark);
    aspect-ratio: 3 / 2;
}

.highlight-card__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.highlights-grid .highlight-card:hover .highlight-card__frame img {
    transform: scale(1.04);
}

.highlight-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.1rem 1.15rem;
    flex: 1;
}

.highlight-card__tag {
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.highlight-card__caption {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--color-text);
}

/* --- Feature card --------------------------------------------------------
   Only in the four-column layout, where two columns still leave room for two
   ordinary cards beside it. Narrower layouts keep every card the same size. */
@media (min-width: 1000px) {
    .highlights-grid .highlight-card.is-feature {
        grid-column: span 2;
        grid-row: span 2;
    }

    /* The frame stretches to whatever height the two spanned rows give it */
    .highlights-grid .highlight-card.is-feature .highlight-card__frame {
        aspect-ratio: auto;
        flex: 1;
        min-height: 0;
    }

    .highlights-grid .highlight-card.is-feature .highlight-card__body {
        flex: 0 0 auto;
        padding: 1.25rem 1.5rem 1.5rem;
    }

    .highlights-grid .highlight-card.is-feature .highlight-card__caption {
        font-size: 1.05rem;
        line-height: 1.5;
    }
}

.highlights-grid .highlight-card[hidden] { display: none; }

html.high-contrast .highlights-grid .highlight-card {
    background: var(--color-bg);
    border-color: #fff;
    box-shadow: none;
}
html.high-contrast .highlight-card__caption { color: var(--color-text); }

@media (prefers-reduced-motion: reduce) {
    .highlights-grid .highlight-card,
    .highlights-grid .highlight-card:hover,
    .highlight-card__frame img,
    .highlights-grid .highlight-card:hover .highlight-card__frame img {
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   About page masthead
   The header was a flat navy rectangle holding four lines of type. It now
   carries a photograph bleeding off the right edge, faded into the navy so
   the headline stays on a solid field, a maroon rule under the eyebrow, and
   two jump links so the band does something as well as saying something.
   Interior pages without a photo keep the plain band unchanged.
   ========================================================================== */
.page-hero--featured {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 0;
    /* The picture needs room to read as a photograph rather than a texture */
    min-height: 420px;
    display: flex;
    align-items: center;
}

.page-hero__backdrop {
    position: absolute;
    inset: 0 0 0 auto;
    width: 72%;
    z-index: 0;
}

.page-hero__backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    display: block;
}

/* Near solid behind the type, gone by about two thirds across, so the right
   of the frame carries the photograph. Mirrors the home page hero, in navy. */
.page-hero--featured::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(14, 39, 64, 0.98) 0%,
        rgba(14, 39, 64, 0.96) 26%,
        rgba(16, 44, 71, 0.86) 40%,
        rgba(18, 48, 77, 0.55) 52%,
        rgba(20, 52, 82, 0.22) 64%,
        rgba(22, 58, 92, 0.06) 76%,
        rgba(22, 58, 92, 0) 88%);
}

/* A quiet vignette along the bottom so the band meets the page cleanly */
.page-hero--featured::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(0deg,
        rgba(10, 28, 47, 0.45) 0%,
        rgba(10, 28, 47, 0) 100%);
}

.page-hero--featured .page-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: 4rem;
}

.page-hero--featured h1,
.page-hero--featured .page-hero__lead {
    text-shadow: 0 2px 16px rgba(6, 18, 31, 0.5);
}

.page-hero--featured h1 {
    max-width: 16ch;
    font-size: clamp(2rem, 3.6vw, 3rem);
    letter-spacing: -0.015em;
}

.page-hero--featured .page-hero__lead {
    max-width: 46ch;
}

/* The maroon rule is the Commission's second colour, absent until now */
.page-hero--featured .eyebrow::before {
    background: var(--color-accent-bright);
    width: 32px;
    height: 3px;
}

/* --- The motto -----------------------------------------------------------
   Set in white rather than the focus gold, which was the only warm accent on
   the page and read as a warning colour next to the navy. */
.page-hero__tagline,
.site-footer__tagline {
    color: #fff;
}

.page-hero__tagline {
    display: inline-block;
    margin-top: 1.4rem;
    padding: 0.45rem 0 0.45rem 0.9rem;
    border-left: 3px solid var(--color-accent-bright);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
}

.site-footer__tagline {
    opacity: 0.92;
    letter-spacing: 0.06em;
}

/* --- Jump links ----------------------------------------------------------
   Two entry points into the page, so the header carries a next step the way
   the home page hero does. */
.page-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    margin-top: 2rem;
}

.page-hero__jump {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    transition: color var(--transition), border-color var(--transition);
}

.page-hero__jump:hover,
.page-hero__jump:focus-visible {
    color: #fff;
    border-bottom-color: var(--color-accent-bright);
}

/* --- Narrow screens ------------------------------------------------------
   The photograph moves behind the whole band under a heavier wash, because a
   72% wide picture beside a phone-width column shows nothing useful. */
@media (max-width: 860px) {
    .page-hero--featured {
        min-height: 0;
        display: block;
    }
    .page-hero__backdrop { width: 100%; }
    .page-hero--featured::before {
        background: linear-gradient(180deg,
            rgba(14, 39, 64, 0.93) 0%,
            rgba(14, 39, 64, 0.88) 60%,
            rgba(14, 39, 64, 0.94) 100%);
    }
    .page-hero--featured .page-hero__inner { padding-block: 3rem; }
    .page-hero--featured h1 { max-width: 100%; }
}

html.high-contrast .page-hero--featured::before {
    background: rgba(0, 0, 0, 0.9);
}
html.high-contrast .page-hero--featured::after { display: none; }
html.high-contrast .page-hero--featured h1,
html.high-contrast .page-hero--featured .page-hero__lead { text-shadow: none; }

/* ==========================================================================
   Footer column headings share one type style
   The organisation name was set in the serif face while Visit Us and Contact
   were uppercase sans, so the three columns read as two unrelated systems.
   They now share the family, weight, case and tracking; the organisation name
   keeps a larger size so the column still leads.
   ========================================================================== */
/* An earlier rule targets this heading as .site-footer__col:first-child h2,
   which outranks a single class, so the selector here carries the same weight
   and wins on order. */
.site-footer .site-footer__col--wide h2 {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.6;
    margin-bottom: 1.1rem;
    max-width: 26ch;
}

@media (max-width: 860px) {
    .site-footer .site-footer__col--wide h2 { font-size: 0.88rem; }
}

/* ==========================================================================
   In-page anchor targets clear the sticky header
   The header is 76px tall and sticks to the top, so a link to #leadership or
   #responsibilities used to drop the heading underneath it.
   ========================================================================== */
:target,
#leadership,
#responsibilities,
.page-hero__jump-target {
    scroll-margin-top: 96px;
}

/* ==========================================================================
   Centred page masthead
   Built to the reference layout: one large title, the organisation's name
   beneath it as a small letterspaced standfirst, then the description, all
   centred on a deep band with generous air above and below.

   The reference sets its standfirst in gold. Gold is out here, and the brand
   maroon is unreadable on navy, so the two lines are separated by size,
   weight and tracking rather than hue.
   ========================================================================== */
.page-hero--centered {
    text-align: center;
    padding: 5.5rem 0 5rem;
}

/* The measure has to hold both a three-word title and a nine-word one. At
   20ch the longer Advocacy headline broke to three lines and stranded a
   single word on the last; this keeps short titles on one line and long ones
   on two, and text-wrap: balance evens the lines that do break. */
.page-hero--centered h1 {
    max-width: 30ch;
    margin: 0 auto;
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.page-hero__org {
    margin: 1.5rem auto 0;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

/* Centred, and wider than the ranged-left lead: a centred column needs the
   extra measure or it breaks into too many short lines. */
.page-hero--centered .page-hero__lead {
    max-width: 74ch;
    margin: 2.25rem auto 0;
    text-align: center;
    -webkit-hyphens: manual;
    hyphens: manual;
}

.page-hero--centered .page-hero__tagline {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 640px) {
    .page-hero--centered {
        padding: 3.5rem 0 3rem;
    }
    .page-hero--centered h1 { max-width: 100%; }
    .page-hero--centered .page-hero__lead {
        text-align: center;
        margin-top: 1.75rem;
    }
    .page-hero__org { letter-spacing: 0.14em; }
}

html.high-contrast .page-hero__org { color: var(--color-text); }


/* ==========================================================================
   High-contrast theme overrides
   Kept at the end of the stylesheet so they win on order as well as
   specificity; every rule here fixes text that was invisible against the
   black background.
   ========================================================================== */
/* The support banner is a gradient behind white text. In high contrast the
   accent is yellow, so the gradient is replaced with solid black and a visible
   border rather than leaving white text on yellow. */
html.high-contrast .support-banner {
    background: #000000;
    border: 2px solid #ffffff;
}
html.high-contrast .banner-content p {
    color: #ffffff;
}

/* Elements that set their text to --color-primary-dark for the light theme.
   That variable is #000 in high contrast, so on the black background they
   rendered black-on-black and vanished. Headings, links and .lead-statement
   are already handled by their own high-contrast rules; these are the rest. */
html.high-contrast .site-header__brand,
html.high-contrast .site-header__wordmark,
html.high-contrast .card__body h3 a,
html.high-contrast .card__title a,
html.high-contrast .president-text h2,
html.high-contrast .team-card h3,
html.high-contrast .payment-card h4,
html.high-contrast .resource-content h3,
html.high-contrast .leadership-message__name,
html.high-contrast .faq-item summary {
    color: #ffffff;
}

/* The payment dropdown is a form control: it needs a black field as well as
   white text, or it inherits the light theme's white background. */
html.high-contrast .payment-selector select {
    color: #ffffff;
    background: #000000;
    border-color: #ffffff;
}

/* The mobile menu button draws its glyph from inherited colour, which resolves
   to black here, and the section badge is white-on-white because its fill uses
   --color-primary (white in this theme). Both were invisible. */
html.high-contrast .nav-toggle {
    color: #ffffff;
    border-color: #ffffff;
}
html.high-contrast .section-badge {
    background: #000000;
    color: #ffffff;
    border: 1px solid #ffffff;
}

/* Components with hard-coded light backgrounds or text. These ignore the theme
   variables entirely, so in high contrast they kept a white card or a white
   fill and their text disappeared against it. */
html.high-contrast .btn-primary {
    background: #000000;
    color: #ffe600;
    border: 2px solid #ffffff;
}
html.high-contrast .btn-primary:hover {
    background: #ffe600;
    color: #000000;
}
html.high-contrast .resource-card {
    background: #000000;
    border: 1px solid #ffffff;
    backdrop-filter: none;
}
html.high-contrast .resource-content p {
    color: #ffffff;
}

/* The donate buttons take both their fill and their text from the accent, so
   in high contrast they became yellow-on-yellow. Black text on the yellow fill
   reads at about 16:1. The payment card copy was mid-grey on black. */
html.high-contrast .donate-btn,
html.high-contrast .footer-donate-btn {
    background: #ffe600;
    color: #000000;
    border: 2px solid #ffffff;
}
html.high-contrast .payment-card p {
    color: #ffffff;
}

/* The active filter chip is white-on-yellow, and the leadership seal is white
   at 45% opacity, which lands at 4.41:1 — just under the 4.5:1 minimum. */
/* Inactive chips sit on black and need white text; only the selected chip has
   the yellow fill and therefore needs black. */
html.high-contrast .highlights-filters__btn {
    color: #ffffff;
    border-color: #ffffff;
}
html.high-contrast .highlights-filters__btn[aria-pressed="true"],
html.high-contrast .highlights-filters__btn.is-active {
    color: #000000;
}
html.high-contrast .leadership-message__seal {
    color: #ffffff;
}

/* .btn fills itself with the accent, which is yellow here, and .contact-info
   uses --color-primary as a panel background — white in this theme — so its
   white heading and yellow links vanished. Both become black panels with a
   visible border, matching .btn-primary above. */
html.high-contrast .btn {
    background: #000000;
    color: #ffe600;
    border: 2px solid #ffffff;
}
html.high-contrast .btn:hover {
    background: #ffe600;
    color: #000000;
}
html.high-contrast .contact-info {
    background: #000000;
    border: 1px solid #ffffff;
}
html.high-contrast .contact-info h2,
html.high-contrast .contact-info p,
html.high-contrast .contact-info__label,
html.high-contrast .contact-info__hours {
    color: #ffffff;
}
html.high-contrast .contact-info a {
    color: #ffe600;
}

/* WordPress donate page: with no payment form below it, the statement runs
   the full width of the container instead of stopping at a reading measure,
   and words are not broken across lines. */
.donate-page .donate-intro {
    max-width: none;
    -webkit-hyphens: manual;
    hyphens: manual;
}