/* =========================================================================
   Optimum Earth - design system
   Tokens and components per the v2 landing-page design handoff.
   ========================================================================= */

:root {
    /* Brand */
    --blue: #214292;
    --green: #5E952E;
    --grey: #5C6061;
    /* Derived */
    --navy-deep: #16295C;
    --navy-ink: #1B2A44;
    --blue-tint: #A8BCEA;
    --blue-mid: #4E74C8;
    --blue-hover: #1A3576;
    --grey-900: #3A3F42;
    --grey-600: #74797C;
    --grey-500: #8A8F92;
    --grey-400: #9AA0A3;
    --grey-300: #DCDEDF;
    --grey-200: #E2E4E5;
    --grey-150: #E7E8E9;
    --grey-100: #F4F5F5;
    --white: #FFFFFF;
    /* Foundation-scoped palette */
    --green-deep: #33591A;
    --green-ink: #1F3311;
    --green-light: #B4DC93;
    --green-pale: #D3E7BE;
    --green-wash: #F2F6EE;
    --green-wash-border: #DCE7D2;
    --blue-wash: #EAF0FB;
    /* Deliberately darker than --grey-100 (the section's own tint
       background, #F4F5F5) - matching it made the hovered card blend into
       the page instead of standing out. --grey-150 gives visible contrast
       while staying light enough to read as a subtle wash. */
    --grey-wash: #E7E8E9;
    --radius: 5px;
    --gutter: 56px;
    --shadow-btn-blue: 0 4px 18px rgba(33, 66, 146, .45);
    --shadow-btn-green: 0 4px 18px rgba(94, 149, 46, .42);
    --shadow-btn-grey: 0 4px 18px rgba(0, 0, 0, .4);
    --shadow-btn-white: 0 4px 18px rgba(0, 0, 0, .32);
    --shadow-btn-hover: 0 4px 18px rgba(0, 0, 0, .28);
    --shadow-card-hover: 0 16px 34px rgba(27, 42, 68, .13);
    --shadow-card-hover-foundation: 0 16px 34px rgba(31, 51, 17, .14);
    --shadow-card-hover-zambia: 0 16px 34px rgba(58, 63, 66, .14);
    --header-height: 76px;
}

/* ---------- Reset / base ---------- */

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

[id] {
    scroll-margin-top: calc(var(--header-height) + 16px);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    margin: 0;
    background: var(--white);
    color: var(--navy-ink);
    font-family: 'Archivo', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: 'Archivo', system-ui, sans-serif;
}

p {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: var(--blue);
    text-decoration: none;
}

button {
    font-family: inherit;
}

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

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.shell {
    max-width: 1440px;
    margin: 0 auto;
}

.eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--blue);
}

/* ---------- Placeholder image slots ---------- */

.img-slot {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-color: var(--grey-100);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--grey-500);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 12px;
}

    .img-slot:not([style*="background-image"]) {
        background: repeating-linear-gradient(135deg, rgba(33, 66, 146, .08) 0 14px, rgba(33, 66, 146, .04) 14px 28px), var(--grey-100);
    }

    .img-slot::after {
        content: attr(data-label);
    }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .18s, color .18s, border-color .18s, box-shadow .18s;
    border: 1.5px solid transparent;
    text-align: center;
}

.btn--lg {
    padding: 15px 34px;
    font-size: 15.5px;
    letter-spacing: .01em;
}

.btn--nav {
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
}

.btn--blue {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    box-shadow: var(--shadow-btn-blue);
}

    .btn--blue:hover, .btn--blue:focus-visible {
        background: #fff;
        color: var(--blue);
        box-shadow: var(--shadow-btn-hover);
    }

.btn--grey {
    background: var(--grey);
    color: #fff;
    border-color: #6E7375;
    box-shadow: var(--shadow-btn-grey);
}

    .btn--grey:hover, .btn--grey:focus-visible {
        background: #fff;
        color: var(--grey);
        border-color: #fff;
        box-shadow: var(--shadow-btn-hover);
    }

.btn--green {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
    box-shadow: var(--shadow-btn-green);
}

    .btn--green:hover, .btn--green:focus-visible {
        background: #fff;
        color: var(--green);
        box-shadow: var(--shadow-btn-hover);
    }

.btn--white {
    background: #fff;
    color: var(--blue);
    border-color: #fff;
    box-shadow: var(--shadow-btn-white);
}

    .btn--white:hover, .btn--white:focus-visible {
        background: transparent;
        color: #fff;
    }

.btn--ghost {
    background: rgba(15, 23, 42, .22);
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}

    .btn--ghost:hover, .btn--ghost:focus-visible {
        background: #fff;
        color: var(--blue);
        border-color: #fff;
    }

.btn--nav-cta {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

    .btn--nav-cta:hover, .btn--nav-cta:focus-visible {
        background: #fff;
        color: var(--blue);
    }

.btn--nav-foundation-cta {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}

    .btn--nav-foundation-cta:hover, .btn--nav-foundation-cta:focus-visible {
        background: #fff;
        color: var(--green);
    }

    .btn--nav-foundation-cta.is-current {
        background: #fff;
        color: var(--green);
    }

.text-link {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--blue);
    border-bottom: 1.5px solid transparent;
    transition: border-color .2s;
    white-space: nowrap;
}

    .text-link:hover, .text-link:focus-visible {
        border-bottom-color: var(--blue);
    }

/* ---------- Header ---------- */

.has-dashboard-banner {
    --dashboard-banner-height: 44px;
}

.dashboard-banner {
    position: sticky;
    top: 0;
    z-index: 30;
    flex-shrink: 0;
    background: var(--navy-deep);
    color: var(--white);
    font-size: 13px;
}

.dashboard-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 8px clamp(16px, 4vw, 56px);
}

.dashboard-banner a {
    color: var(--white);
    font-weight: 600;
    white-space: nowrap;
    padding: 4px 0;
}

.dashboard-banner a:hover {
    text-decoration: underline;
}

.dashboard-banner a:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 4px;
}

.has-dashboard-banner [id] {
    scroll-margin-top: calc(var(--header-height) + var(--dashboard-banner-height) + 16px);
}

.site-header {
    position: sticky;
    top: var(--dashboard-banner-height, 0px);
    z-index: 20;
    border-bottom: 1px solid var(--grey-150);
}
    /* The blur lives on a pseudo-element rather than .site-header itself:
   backdrop-filter on an ancestor becomes the containing block for any
   position:fixed descendant, which broke the full-page mobile nav's
   inset:0 sizing when it was set directly on the header. */
    .site-header::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(8px);
        pointer-events: none;
    }

.site-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 48px;
    gap: 24px;
}

.brand-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.brand {
    display: flex;
    align-items: center;
}

.brand__logo {
    height: 42px;
    width: auto;
    display: block;
}

/* ---- Foundation co-brand (header, foundation theme only) ----
   The supplied Foundation lockup stacks three lines of type plus a tagline, so
   at header height its wordmark lands around 8px and the tagline smaller again.
   Only its mark is used here; the words are set in the site's own type. */
.brand-rule {
    width: 1px;
    height: 30px;
    background: var(--grey-200);
    flex: none;
}

.brand--foundation {
    gap: 11px;
    text-decoration: none;
}

.brand__mark {
    /* the mark is very nearly square once cropped out of the lockup, so height
       and width track each other; alt="" because the link carries its own
       visually-hidden name */
    height: 38px;
    width: auto;
    display: block;
    flex: none;
}

.brand__words {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand__name {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--green-deep);
}

.brand__tagline {
    margin-top: 3px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--grey);
    white-space: nowrap;
}

    .brand--foundation:hover .brand__name,
    .brand--foundation:focus-visible .brand__name {
        color: var(--green);
    }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
}

.nav-toggle__bar {
    width: 22px;
    height: 2px;
    background: var(--navy-ink);
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.primary-nav__link {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--grey-900);
    transition: color .18s;
}

    .primary-nav__link:hover, .primary-nav__link:focus-visible {
        color: var(--blue);
    }

.primary-nav__link--foundation {
    color: var(--white);
}

    .primary-nav__link--foundation:hover, .primary-nav__link--foundation:focus-visible {
        color: var(--green);
    }

.primary-nav__link.is-current {
    color: var(--blue);
}

.primary-nav__link--foundation.is-current {
    color: var(--green);
}

.primary-nav__divider {
    width: 1px;
    height: 16px;
    background: var(--grey-300);
    flex: none;
}

/* Head (logo + close) and destination pills only appear in the
   full-page mobile nav; on desktop the nav stays a plain inline row. */
.primary-nav__head {
    display: none;
}

.primary-nav__close {
    display: none;
}

.primary-nav__destinations {
    display: contents;
}

/* ---------- Footer ---------- */

.site-footer {
    margin-top: auto;
    background: var(--navy-deep);
    color: #B9C4DC;
    font-size: 14px;
}

.site-footer__upper {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, .8fr);
    align-items: start;
    gap: 32px;
    padding: 44px 56px;
}

/* Let older compiled layouts use the same five-column footer. */
.site-footer__brand,
.site-footer__office-list {
    display: contents;
}

.site-footer__office {
    display: grid;
    gap: 11px;
    padding: 0;
/*    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .03);*/
}

.site-footer__wordmark {
    /*font-size: 16px;*/
    font-weight: 600;
    color: #fff;
    /*letter-spacing: .02em;*/
}

.site-footer__address {
    display: grid;
    gap: 9px;
    margin: 0;
    font: inherit;
    font-style: normal;
    overflow-wrap: anywhere;
}

    .site-footer__address a {
        color: inherit;
        transition: color .18s;
    }

        .site-footer__address a:hover,
        .site-footer__address a:focus-visible {
            color: #fff;
        }

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

    .site-footer__col h3 {
        color: #fff;
        font-weight: 600;
        font-size: 14px;
        margin: 0 0 2px;
    }

    .site-footer__col a {
        color: inherit;
        transition: color .18s;
    }

        .site-footer__col a:hover, .site-footer__col a:focus-visible {
            color: #fff;
        }

.site-footer__lower {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 20px 56px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 13px;
}

.site-footer__social {
    display: flex;
    gap: 22px;
}

    .site-footer__social a {
        color: inherit;
        transition: color .18s;
    }

        .site-footer__social a:hover, .site-footer__social a:focus-visible {
            color: #fff;
        }

/* ---------- Back to top ---------- */

.back-to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 40;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid transparent;
    background: var(--blue);
    color: #fff;
    box-shadow: var(--shadow-btn-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s, background-color .18s, color .18s;
}

    .back-to-top.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .back-to-top:hover, .back-to-top:focus-visible {
        background: #fff;
        color: var(--blue);
        border-color: var(--blue);
    }

    .back-to-top svg {
        width: 20px;
        height: 20px;
    }

/* ---------- Home: hero carousel ---------- */

.hero-carousel {
    position: relative;
    height: calc(100vh - var(--header-height));
    min-height: 640px;
    overflow: hidden;
    background: var(--navy-deep);
}
/* The home page has no site header (see .theme-home below), so its hero
   fills the full viewport instead of leaving room for one. */
.theme-home .hero-carousel {
    height: calc(100vh - var(--dashboard-banner-height, 0px));
}

.hero-carousel__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.1s ease;
}

    .hero-carousel__slide.is-active {
        opacity: 1;
    }

    .hero-carousel__slide:first-child {
        opacity: 1;
    }

.hero-carousel__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22, 41, 92, .42) 0%, rgba(22, 41, 92, .30) 40%, rgba(22, 41, 92, .86) 100%);
    pointer-events: none;
}

.hero-carousel__copy {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 var(--gutter) 150px;
    gap: 20px;
    pointer-events: none;
}

.hero-carousel__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--blue-tint);
    text-transform: uppercase;
}

.hero-carousel__headline {
    font-size: clamp(2.25rem, 1.1rem + 3.6vw, 3.875rem);
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: #fff;
    max-width: 900px;
    text-wrap: balance;
}

.hero-carousel__body {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .8);
    max-width: 620px;
}

.hero-carousel__row {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 var(--gutter) 44px;
}

.hero-carousel__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

.hero-carousel__pip {
    width: 2px;
    height: 24px;
    background: rgba(255, 255, 255, .72);
    margin: 0 8px;
    flex: none;
}

.hero-carousel__who-btn {
    position: absolute;
    top: 24px;
    left: var(--gutter);
    z-index: 5;
}

/* Home has no site header, so the brand mark lives inside the hero
   instead - top right, level with the "Who We Are" button. */
.hero-carousel__logo {
    position: absolute;
    top: 24px;
    right: var(--gutter);
    z-index: 5;
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .92);
}

.hero-carousel__logo-img {
    height: 34px;
    width: auto;
    display: block;
}

.hero-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .5);
    background: rgba(15, 23, 42, .28);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .18s, border-color .18s;
}

    .hero-carousel__arrow:hover, .hero-carousel__arrow:focus-visible {
        background: rgba(255, 255, 255, .18);
        border-color: #fff;
    }

    .hero-carousel__arrow svg {
        width: 20px;
        height: 20px;
    }

.hero-carousel__arrow--prev {
    left: var(--gutter);
}

.hero-carousel__arrow--next {
    right: var(--gutter);
}

/* ---------- Who we are ---------- */

.who-we-are {
    --who-body-size: 16px;
    padding: 56px var(--gutter) 96px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.who-we-are__rule-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

    .who-we-are__rule-row .eyebrow {
        letter-spacing: .2em;
        white-space: nowrap;
    }

.who-we-are__rule {
    flex: 1;
    height: 1px;
    background: var(--grey-200);
}

.who-we-are__split {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 72px;
    align-items: start;
}

.who-we-are__left {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.who-we-are__right {
    display: flex;
    flex-direction: column;
}

.who-we-are__statement {
    font-size: clamp(1.75rem, 1.1rem + 1.4vw, 2.125rem);
    line-height: 1.14;
    font-weight: 700;
    letter-spacing: -0.032em;
    color: var(--navy-ink);
    text-wrap: pretty;
    margin: 0;
}

    .who-we-are__statement em {
        color: var(--blue);
        font-style: normal;
    }

.who-we-are__mission-vision {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.mission-vision-item {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 30px 32px;
    border-radius: 12px;
}

.mission-vision-item--vision {
    background: #F3F7FC;
    border: 1px solid rgba(33, 66, 146, .16);
}

.mission-vision-item--mission {
    background: var(--navy-deep);
    border: 1px solid rgba(255, 255, 255, .08);
}

.mission-vision-item__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--navy-ink);
}

.mission-vision-item__title::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid currentColor;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75);
    flex: none;
}

.mission-vision-item__title::after {
    content: "";
    height: 1px;
    flex: 1;
    background: currentColor;
    opacity: .26;
}

.mission-vision-item--mission .mission-vision-item__title {
    color: #fff;
}

.mission-vision-item__text {
    margin: 0;
    font-family: 'Newsreader', serif;
    font-size: clamp(1.2rem, .98rem + .45vw, 1.55rem);
    line-height: 1.5;
    color: var(--navy-ink);
    max-width: none;
}

.mission-vision-item--mission .mission-vision-item__text {
    color: rgba(255, 255, 255, .96);
}

.values-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 56px 0;
    background: #fff;
}

.values-section__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--navy-ink);
    letter-spacing: -0.01em;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--blue-tint);
}

.values-section__intro {
    font-size: 14px;
    line-height: 1.6;
    color: var(--grey-600);
    margin: 0;
    padding: 16px 0;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.values-acronym {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}

.values-acronym__bubble {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(33, 66, 146, .18);
    background: #fff;
    color: var(--blue);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    cursor: pointer;
    transition: transform .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

    .values-acronym__bubble:hover,
    .values-acronym__bubble:focus-visible,
    .values-acronym__bubble.is-active {
        background: var(--blue);
        border-color: var(--blue);
        color: #fff;
        box-shadow: 0 10px 22px rgba(33, 66, 146, .16);
        transform: translateY(-2px);
    }

.values-tooltip {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    min-height: 148px;
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid rgba(33, 66, 146, .12);
    background: var(--blue-wash);
    box-sizing: border-box;
    min-width: 0;
    overflow-wrap: anywhere;
}

.values-tooltip__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy-ink);
}

.values-tooltip__body {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--grey-600);
}

.value-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid var(--grey-200);
    transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

    .value-item:hover {
        border-color: var(--blue);
        box-shadow: 0 12px 30px rgba(33, 66, 146, .12);
        transform: translateY(-4px);
    }

.value-item__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: -0.01em;
    margin: 0;
}

.value-item__description {
    font-size: 14px;
    line-height: 1.6;
    color: var(--grey-600);
    margin: 0;
}

.who-we-are__support {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding-top: 8px;
}

.who-we-are__lede {
    font-size: 17px;
    line-height: 1.7;
    color: var(--grey);
    text-wrap: pretty;
}

.stat-pair {
    display: flex;
    gap: 40px;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .stat b {
        font-size: 34px;
        font-weight: 700;
        color: var(--blue);
        letter-spacing: -0.03em;
    }

    .stat span {
        font-size: 13px;
        color: var(--grey-600);
    }

.capabilities-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.capabilities-section__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--navy-ink);
    letter-spacing: -0.01em;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--blue-tint);
}

.capability-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px;
}

.capability-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .capability-cell:hover .capability-cell__desc,
    .capability-cell:focus-within .capability-cell__desc {
        border-top-color: var(--blue);
    }

.capability-cell__index {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--grey-400);
}

.capability-cell__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--navy-ink);
    letter-spacing: -0.01em;
    line-height: 1.25;
    min-height: calc(1.25em * 2);
}

.capability-cell__desc {
    display: block;
    margin-top: 14px;
    padding-top: 22px;
    border-top: 2px solid var(--grey-300);
    font-size: 13.5px;
    color: var(--grey);
    line-height: 1.5;
    transition: border-color .2s;
}

.who-we-are .who-we-are__lede,
.who-we-are .mission-vision-item__text,
.who-we-are .values-section__intro,
.who-we-are .values-tooltip__body,
.who-we-are .capability-cell__desc {
    font-family: inherit;
    font-size: var(--who-body-size);
    line-height: 1.65;
}

@media (max-width: 768px) {
    .who-we-are {
        --who-body-size: 15px;
    }
}

@media (max-width: 480px) {
    .who-we-are {
        --who-body-size: 14px;
    }
}

/* ---------- Home: service scroll sequence ---------- */

.service-sequence {
    position: relative;
    background: #fff;
}

.service-sequence__intro {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    position: sticky;
    top: 0;
    z-index: 0;
    background: #fff;
    padding: 0 var(--gutter);
    text-align: center;
}

    .service-sequence__intro .eyebrow {
        letter-spacing: .2em;
    }

    .service-sequence__intro h2 {
        font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
        line-height: 1.06;
        font-weight: 700;
        letter-spacing: -0.035em;
        color: var(--navy-ink);
        max-width: 820px;
        text-wrap: balance;
    }

.service-panel {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.service-panel__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.service-panel__scrim--navy-left {
    background: linear-gradient(90deg, rgba(22, 41, 92, .95) 0%, rgba(22, 41, 92, .78) 46%, rgba(22, 41, 92, .10) 100%);
}

.service-panel__scrim--white-right {
    background: linear-gradient(270deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .86) 46%, rgba(255, 255, 255, .06) 100%);
}

.service-panel__copy-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 80px;
    pointer-events: none;
}

.service-panel--left .service-panel__copy-wrap {
    justify-content: flex-start;
}

.service-panel--right .service-panel__copy-wrap {
    justify-content: flex-end;
}

.service-panel__copy {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 520px;
}

.service-panel__counter-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.service-panel__counter {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
}

.service-panel__rule {
    width: 44px;
    height: 1px;
}

.service-panel__eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.service-panel__headline {
    font-size: clamp(1.5rem, 1rem + 1.8vw, 2.75rem);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.03em;
    text-wrap: pretty;
}

.service-panel--navy .service-panel__counter,
.service-panel--navy .service-panel__eyebrow {
    color: var(--blue-tint);
}

.service-panel--navy .service-panel__counter {
    color: rgba(255, 255, 255, .6);
}

.service-panel--navy .service-panel__rule {
    background: rgba(255, 255, 255, .4);
}

.service-panel--navy .service-panel__headline {
    color: #fff;
}

.service-panel--white .service-panel__counter {
    color: var(--grey);
}

.service-panel--white .service-panel__rule {
    background: #C9CCCD;
}

.service-panel--white .service-panel__eyebrow {
    color: var(--blue);
}

.service-panel--white .service-panel__headline {
    color: var(--navy-ink);
}

@media (prefers-reduced-motion: reduce) {
    .service-sequence__intro,
    .service-panel {
        position: static;
        height: auto;
        min-height: 70vh;
        z-index: auto !important;
    }

    .service-panel__copy-wrap {
        position: relative;
        padding: 48px var(--gutter);
    }
    /* Pre-existing issue, unrelated to the mobile work below: once
     .service-panel loses position:sticky its absolutely-positioned
     .service-panel__scrim resolves against the wrong ancestor and
     mispositions the gradient, leaving white-on-white text. Same fix
     as the mobile layout: drop the scrim, give the copy a solid
     brand-colored background instead. */
    .service-panel__scrim {
        display: none;
    }

    .service-panel--navy .service-panel__copy-wrap {
        background: var(--navy-deep);
    }

    .service-panel--white .service-panel__copy-wrap {
        background: #fff;
    }
}

@media (max-width: 900px) {
    /* Below 900px the pinned photo panels (and the reduced-motion
     fallback above) are both replaced by a compact card list: the
     gradient scrim only reads correctly when text sits over roughly
     half a wide image, so on a narrow phone the text spans the full
     width and drifts into the faded, low-contrast end of it. A small
     thumbnail with a solid-color copy block below removes that
     contrast problem entirely and cuts six ~100vh screens down to
     six short cards. */
    .service-sequence__intro {
        height: auto;
        min-height: 0;
        position: static;
        padding: 56px var(--gutter) 32px;
    }

    .service-panel {
        position: static;
        height: auto;
        z-index: auto !important;
        border-bottom: 1px solid var(--grey-150);
    }

        .service-panel .img-slot {
            height: 180px;
        }

    .service-panel__scrim {
        display: none;
    }

    .service-panel__copy-wrap {
        position: static;
        display: block;
        padding: 0;
        pointer-events: auto;
    }

    .service-panel__copy {
        max-width: none;
        gap: 12px;
        padding: 24px var(--gutter);
    }

    .service-panel--navy .service-panel__copy-wrap {
        background: var(--navy-deep);
    }

    .service-panel--white .service-panel__copy-wrap {
        background: #fff;
    }
}

@media print {
    .service-sequence__intro,
    .service-panel {
        position: static;
        height: auto;
    }
}

/* ---------- Home: evidence band ---------- */

.evidence {
    padding: 88px var(--gutter);
    background: var(--grey-100);
    display: flex;
    flex-direction: column;
    gap: 56px;
    border-top: 1px solid var(--grey-150);
}

.evidence__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

.evidence__stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 20px;
    border-top: 2px solid var(--grey-300);
}

    .evidence__stat b {
        font-size: 44px;
        font-weight: 700;
        color: var(--blue);
        letter-spacing: -0.03em;
        line-height: 1;
    }

    .evidence__stat span {
        font-size: 13.5px;
        color: var(--grey-600);
    }

.evidence__recent {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.evidence__recent-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    flex-wrap: wrap;
}

    .evidence__recent-head h2 {
        font-size: 34px;
        font-weight: 700;
        letter-spacing: -0.028em;
        color: var(--navy-ink);
    }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.project-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #fff;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow .2s;
    min-height: 320px;
    justify-content: flex-end;
    position: relative;
}

    .project-card:hover, .project-card:focus-within {
        box-shadow: var(--shadow-card-hover);
    }

.theme-foundation .project-card:hover,
.theme-foundation .project-card:focus-within {
    box-shadow: var(--shadow-card-hover-foundation);
}

.project-card__media {
    height: 200px;
    position: relative;
}

.project-card__body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 22px 22px 24px;
    background: linear-gradient(180deg, rgba(27, 42, 68, 0) 0%, rgba(27, 42, 68, 0.8) 100%);
}

.project-card__tag {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #FDB913;
}

.theme-foundation .project-card__tag {
    color: #A5D65A;
}

.project-card__title {
    font-size: 18.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.015em;
}

.theme-foundation .project-card__title {
    color: #fff;
}

.project-card__meta {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.55;
}

.project-card__link {
    position: absolute;
    inset: 0;
}

/* ---------- Destination template (Uganda / Zambia / Foundation) ---------- */

.dest-hero {
    position: relative;
    height: 460px;
}

.dest-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dest-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(22, 41, 92, .92), rgba(22, 41, 92, .25));
    pointer-events: none;
}

.theme-foundation .dest-hero__scrim {
    background: linear-gradient(90deg, rgba(31, 51, 17, .92), rgba(31, 51, 17, .28));
}

.theme-zambia .dest-hero__scrim {
    background: linear-gradient(90deg, rgba(58, 63, 66, .92), rgba(58, 63, 66, .28));
}

.dest-hero__copy {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 var(--gutter);
    gap: 16px;
    max-width: 800px;
}

.dest-hero__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--blue-tint);
}

.theme-foundation .dest-hero__eyebrow {
    color: var(--green-light);
}

.theme-zambia .dest-hero__eyebrow {
    color: var(--grey-300);
}

.dest-hero__headline {
    font-size: clamp(1.75rem, 1rem + 2.6vw, 3.125rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.032em;
    color: #fff;
    text-wrap: balance;
}

.dest-hero__sub {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .8);
    max-width: 560px;
}

.dest-overview {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 64px;
    padding: 64px var(--gutter);
    border-bottom: 1px solid var(--grey-150);
}

.dest-overview__main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dest-overview__eyebrow {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--grey-500);
}

.theme-foundation .dest-overview__eyebrow {
    color: var(--green);
}

.dest-overview__quote {
    font-family: 'Newsreader', serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--navy-ink);
    text-wrap: pretty;
    font-weight: 400;
}

.theme-foundation .dest-overview__quote {
    color: var(--green-ink);
}

.dest-overview__body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--grey);
    max-width: 680px;
}

:is(.theme-uganda, .theme-zambia) .dest-overview__main > p {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--grey);
    max-width: 680px;
    text-wrap: pretty;
}

.dest-overview__quote--intro {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: var(--grey);
    font-weight: 400;
}

.theme-foundation .dest-overview__quote--intro {
    color: var(--grey);
}

.dest-overview__body--intro {
    font-size: 18px;
}

.vm-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 4px;
    overflow: hidden;
}

.vm-card {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 28px 32px;
}

.vm-card--vision {
    background: var(--green-wash);
    color: var(--green-ink);
}

.vm-card--mission {
    background: var(--green-deep);
    color: var(--white);
}

.vm-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vm-card__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.vm-card__label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.vm-card__label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: .4;
}

.vm-card__text {
    font-family: 'Newsreader', serif;
    font-size: 20px;
    line-height: 1.45;
    font-weight: 400;
}

@media (max-width: 640px) {
    .vm-grid {
        grid-template-columns: 1fr;
    }
}

.dest-overview__full {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sdg-loops {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.sdg-loop {
    position: relative;
    width: 320px;
    height: 190px;
    display: block;
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sdg-loop__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* direct child only — as a descendant selector this also matches the path
   inside <mask>, overriding its fill="none" and revealing the ring at rest */
.sdg-loop__ring > path {
    fill: var(--green-light);
}

/* deeper ring that draws itself over the pale one on hover */
.sdg-loop__ring > path.sdg-loop__ring-draw {
    fill: var(--green);
}

.sdg-loop__ring mask path {
    transition: stroke-dashoffset .7s ease-out;
}

.sdg-loop:hover .sdg-loop__ring mask path {
    stroke-dashoffset: 0;
}

.sdg-loop:hover .sdg-loop__title {
    color: var(--green-deep);
    font-weight: 650;
}

@media (prefers-reduced-motion: reduce) {
    .sdg-loop__ring mask path,
    .sdg-loop__title {
        transition: none;
    }
}

.sdg-loop__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 100%;
    padding: 0 56px;
}

.sdg-loop__icon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.sdg-loop__icon {
    width: 28px;
    height: 28px;
    color: var(--green);
}

.sdg-loop__num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--green);
    opacity: .7;
}

.sdg-loop__divider {
    flex-shrink: 0;
    height: 46%;
    width: 1px;
    background: var(--green-wash-border);
}

.sdg-loop__title {
    font-family: 'Newsreader', serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--navy-ink);
    transition: color .3s ease, font-weight .3s ease;
}

.glance-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--grey-100);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    padding: 26px;
    height: fit-content;
}

.theme-foundation .glance-panel {
    background: var(--green-wash);
    border-color: var(--green-wash-border);
}

.glance-panel__title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--grey-500);
}

.theme-foundation .glance-panel__title {
    color: var(--green);
}

.glance-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--grey-200);
    font-size: 14.5px;
}

    .glance-row:last-child {
        border-bottom: 0;
    }

.glance-row__key {
    color: var(--grey-600);
    white-space: nowrap;
}

.glance-row__value {
    min-width: 0;
    color: var(--navy-ink);
    font-weight: 600;
    text-align: right;
}

.glance-row__sector {
    display: inline-block;
    white-space: nowrap;
}
.theme-foundation .glance-row__value {
    color: var(--green-ink);
}

.dest-section {
    overflow-x: clip;
    padding: 64px var(--gutter);
    display: flex;
    flex-direction: column;
    gap: 28px;
    border-bottom: 1px solid var(--grey-150);
}

.dest-section--tint {
    background: var(--grey-100);
}

.dest-section__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    flex-wrap: wrap;
}

    .dest-section__head h2 {
        font-size: 32px;
        font-weight: 700;
        letter-spacing: -0.025em;
        color: var(--navy-ink);
    }

.theme-foundation .dest-section__head h2 {
    color: var(--green-ink);
}

.theme-zambia .dest-section__head h2 {
    color: var(--grey-900);
}

.plain-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

@media (max-width: 960px) {
    .plain-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .plain-card-grid {
        grid-template-columns: 1fr;
    }
}

.service-card {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Destination service cards now share the same outline language as the
   Foundation pillar cards, while keeping each page's own wash and theme
   colours. */
.destination-service-grid > .service-card {
    position: relative;
    min-width: 0;
    border: 1.5px solid var(--blue);
    border-radius: 50px 0;
    padding: 38px 36px 46px;
    filter: none;
    clip-path: none;
}

/* Excludes .service-card--cta so this doesn't outrank its own navy/grey
   background further down the sheet - this selector's two classes otherwise
   beat that rule's one on specificity regardless of source order. */
.destination-service-grid > .service-card:not(.service-card--cta) {
    --wash-pos: 0% 100%;
    --wash-color: var(--blue-wash);
    background-color: #fff;
    background-image: radial-gradient(circle at var(--wash-pos),
        var(--wash-color) 0%, var(--wash-color) 72%, transparent 73%);
    background-repeat: no-repeat;
    background-position: var(--wash-pos);
    background-size: 0% 0%;
    transition: background-size .7s ease-out, border-color .35s ease;
}

.destination-service-grid > .service-card:not(.service-card--cta):hover {
    background-size: 260% 260%;
    border-color: var(--navy-deep);
}

.theme-zambia .destination-service-grid > .service-card {
    border-color: var(--grey);
}

.theme-zambia .destination-service-grid > .service-card:not(.service-card--cta) {
    --wash-color: var(--grey-wash);
}

.theme-zambia .destination-service-grid > .service-card:not(.service-card--cta):hover {
    border-color: var(--grey-900);
}

@media (prefers-reduced-motion: reduce) {
    .destination-service-grid > .service-card:not(.service-card--cta) {
        transition: none;
    }
}

.service-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy-ink);
    position: relative;
    width: fit-content;
}

.service-card__desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--grey);
}

.destination-service-grid > .service-card:not(.service-card--cta) {
    cursor: pointer;
}

/* Underline as a progress bar: an empty track the width of the title,
   filled left-to-right on hover rather than simply faded in. Colour follows
   the same theme-token pattern as the hover wash. */
.service-card__title {
    --underline-color: var(--blue);
}

.theme-zambia .service-card__title {
    --underline-color: var(--grey-900);
}

.service-card__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: var(--underline-color);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s ease-out;
}

.destination-service-grid > .service-card:not(.service-card--cta):hover .service-card__title::after {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .service-card__title::after {
        transition: none;
    }
}

/* Not a real service line. Ordinarily it just takes the slot the remainder
   already leaves open in the last row, sized like its neighbours - the
   .service-card--cta--wide modifier below is the exception, used only when
   there is no such slot to take. */
.service-card--cta {
    justify-content: space-between;
    background: var(--navy-deep);
    border-color: var(--navy-deep);
    text-decoration: none;
    transition: background-color .2s ease;
}

.service-card--cta .service-card__title {
    color: #fff;
}

.service-card--cta .service-card__desc {
    color: #B9C4DC;
}

.service-card--cta__arrow {
    flex: none;
    align-self: flex-end;
    font-size: 22px;
    color: #fff;
    transition: transform .2s ease;
}

.service-card--cta:hover, .service-card--cta:focus-visible {
    background: var(--blue-hover);
    border-color: var(--blue-hover);
}

    .service-card--cta:hover .service-card--cta__arrow, .service-card--cta:focus-visible .service-card--cta__arrow {
        transform: translateX(4px);
    }

.theme-foundation .service-card--cta {
    background: var(--green-deep);
    border-color: var(--green-deep);
}

    .theme-foundation .service-card--cta:hover, .theme-foundation .service-card--cta:focus-visible {
        background: var(--green);
        border-color: var(--green);
    }

.theme-zambia .service-card--cta {
    background: var(--grey-900);
    border-color: var(--grey-900);
}

    .theme-zambia .service-card--cta:hover, .theme-zambia .service-card--cta:focus-visible {
        background: var(--grey);
        border-color: var(--grey);
    }

/* The real-card count is already a multiple of 3, so there is no open slot
   left for this tile - it would land alone on a fresh row by itself.
   Spanning every column and switching to a horizontal banner instead turns
   that lonely row into a deliberate full-width one. */
.service-card--cta--wide {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

    .service-card--cta--wide .service-card--cta__arrow {
        align-self: center;
    }

@media (max-width: 620px) {
    .service-card--cta--wide {
        flex-direction: column;
        align-items: flex-start;
    }

        .service-card--cta--wide .service-card--cta__arrow {
            align-self: flex-end;
        }
}

/* ---- How We Work: editorial principles with a hand-drawn hover ---- */
.principles {
    display: grid;
    /* capped at 3 rather than auto-fit: a 4th column narrows each one until the
       decorative ring, which is a fixed 400px, overhangs past the page edge */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 40px;
}

@media (max-width: 1100px) {
    .principles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .principles {
        grid-template-columns: 1fr;
    }
}

.principle {
    display: flex;
    gap: 16px;
    padding: 26px 0 30px;
    border-top: 1.5px solid var(--green-wash-border);
    transition: border-color .4s ease;
}

.principle__mark {
    flex-shrink: 0;
    width: 46px;
    height: 30px;
    margin-top: 4px;
    color: var(--green-light);
    transition: opacity .3s ease;
}

.principle__mark path {
    fill: currentColor;
}

.principle__body {
    position: relative;
    /* 240 is the widest the text can be while the ring still both contains it
       (needs >=1.45x the width) and overhangs by no more than the page gutter */
    max-width: 240px;
}

.principle__title {
    font-family: 'Newsreader', serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--green-ink);
    margin: 0 0 7px;
    transition: color .3s ease, font-weight .3s ease;
}

.principle__desc {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--grey);
    margin: 0;
    transition: color .3s ease;
}

.principle__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* sized from the text rather than fixed: a fixed width overhangs further as
       the column narrows, and once the overhang passes the gutter it puts a
       horizontal scrollbar on the page. +110 keeps the overhang at 55px. */
    width: calc(100% + 110px);
    height: calc(100% + 78px);
    overflow: visible;
    pointer-events: none;
}

/* direct child only — must not match the path inside <mask>, whose fill="none"
   a descendant selector would override (CSS beats presentation attributes) */
.principle__ring > path {
    fill: var(--green-light);
}

/* the ring is a filled band, so the draw-on animates the stroked centre line
   inside its mask, which progressively reveals the fill */
.principle__ring mask path {
    transition: stroke-dashoffset .7s ease-out;
}

.principle:hover {
    border-top-color: transparent;
}

.principle:hover .principle__mark {
    opacity: 0;
}

/* Newsreader is a variable font, so 650 is a real weight rather than a
   synthesised one. It renders ~1.3% wider than 600 — measured as too small
   to re-wrap the current copy, but re-check if these strings get longer,
   since the ring around them is a fixed size. */
.principle:hover .principle__title {
    color: var(--green-deep);
    font-weight: 650;
}

.principle:hover .principle__desc {
    color: var(--navy-ink);
}

.principle:hover .principle__ring mask path {
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
    .principle__mark,
    .principle__ring mask path,
    .principle__title,
    .principle__desc {
        transition: none;
    }
}

.pillar-card {
    position: relative;
    background-color: #fff;
    /* wash blooms from the bottom-left corner on hover — the corner the SDG
       badge is anchored to. Painted as a background-image rather than a
       pseudo-element because the badge hangs outside the card, so the card
       cannot clip its own overflow. */
    background-image: radial-gradient(circle at 0% 100%,
        var(--green-wash) 0%, var(--green-wash) 72%, transparent 73%);
    background-repeat: no-repeat;
    background-position: 0% 100%;
    background-size: 0% 0%;
    border: 1.5px solid var(--green);
    border-radius: 50px 0px;
    padding: 38px 36px 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    transition: background-size .7s ease-out, border-color .35s ease;
}

.pillar-card:hover {
    background-size: 260% 260%;
    border-color: var(--green-deep);
}

/* the badge is the origin of the bloom, so it fills in rather than being
   left behind by it */
.pillar-card__sdg {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

.pillar-card:hover .pillar-card__sdg {
    background: var(--green);
    border-color: var(--green);
    color: var(--white);
}

.pillar-card:hover .pillar-card__title {
    color: var(--green-deep);
}

@media (prefers-reduced-motion: reduce) {
    .pillar-card,
    .pillar-card__sdg,
    .pillar-card__title {
        transition: none;
    }
}

.pillar-card__sdg {
    position: absolute;
    left: 5px;
    bottom: -11px;
}

.pillar-card__title {
    transition: color .35s ease;
    font-size: 20px;
    font-weight: 700;
    color: var(--green-ink);
    letter-spacing: -0.015em;
}

.pillar-card__desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--grey);
}

.section-note {
    font-size: 14px;
    color: var(--grey-500);
    font-style: italic;
}

.dest-cta {
    padding: 56px;
    background: var(--navy-deep);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.theme-foundation .dest-cta {
    background: var(--green-deep);
}

.theme-zambia .dest-cta {
    background: var(--grey-900);
}

.dest-cta__title {
    font-size: 34px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.025em;
}

.dest-cta__body {
    font-size: 16px;
    line-height: 1.65;
    color: #B9C4DC;
    max-width: 420px;
}

.theme-foundation .dest-cta__body {
    color: var(--green-pale);
}

.theme-zambia .dest-cta__body {
    color: var(--grey-300);
}

.mini-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mini-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mini-form__field,
.mini-form select,
.mini-form input {
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 14.5px;
    border-radius: var(--radius);
    font-family: inherit;
}

.theme-foundation .mini-form select,
.theme-foundation .mini-form input {
    border-color: rgba(255, 255, 255, .24);
}

.mini-form input::placeholder {
    color: #9DA2A5;
}

.mini-form select {
    color: #B9C4DC;
}

    .mini-form select option {
        color: #1B2A44;
    }

.mini-form__submit {
    background: var(--blue);
    color: #fff;
    border: 1.5px solid var(--blue);
    font-weight: 700;
    font-size: 15px;
    padding: 14px 26px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .18s;
}

    .mini-form__submit:hover, .mini-form__submit:focus-visible {
        background: #fff;
        color: var(--blue);
    }

.theme-foundation .mini-form__submit {
    background: var(--green);
    border-color: var(--green);
}

    .theme-foundation .mini-form__submit:hover, .theme-foundation .mini-form__submit:focus-visible {
        background: #fff;
        color: var(--green);
    }

.theme-zambia .mini-form__submit {
    background: var(--grey);
    border-color: var(--grey);
}

    .theme-zambia .mini-form__submit:hover, .theme-zambia .mini-form__submit:focus-visible {
        background: #fff;
        color: var(--grey);
    }

.form-success {
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--radius);
    padding: 14px 16px;
    color: #fff;
    font-size: 14.5px;
}

.field-error {
    color: #FFD9D2;
    font-size: 12.5px;
}

/* ---------- Foundation page ---------- */

/* Anchors need extra clearance to land below both the sticky site header
   and the sticky sub-nav beneath it. */
.theme-foundation [id] {
    scroll-margin-top: calc(var(--header-height) + 72px);
}

.sub-nav {
    position: sticky;
    top: var(--header-height);
    z-index: 15;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 14px var(--gutter);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--grey-150);
    overflow-x: auto;
    scrollbar-width: none;
}

    .sub-nav::-webkit-scrollbar {
        display: none;
    }

.sub-nav__link {
    flex: none;
    padding: 9px 16px;
    border: 1px solid #CFD2D3;
    background: #fff;
    color: var(--grey);
    border-radius: var(--radius);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color .18s, color .18s, background-color .18s;
}

    .sub-nav__link:hover, .sub-nav__link:focus-visible {
        border-color: var(--green);
        color: var(--green);
    }

    .sub-nav__link.is-active {
        border-color: var(--green);
        color: #fff;
        background: var(--green);
    }

.sdg-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sdg-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border-radius: var(--radius);
    background: var(--green-wash);
    border: 1px solid var(--green-wash-border);
    color: var(--green-ink);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.sdg-badge__num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    background: var(--green);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.sdg-badge--sm {
    padding: 4px 10px 4px 4px;
    font-size: 11px;
    gap: 6px;
}

    .sdg-badge--sm .sdg-badge__num {
        width: 20px;
        height: 20px;
        font-size: 9.5px;
    }

.pillar-card__tags {
    display: flex;
    flex-wrap: wrap;
    margin-top: 4px;
    padding: 0;
}

.pillar-tag {
    position: relative;
    list-style: none;
    display: inline-flex;
    align-items: center;
    height: 32px;
    max-width: 32px;
    margin-left: -12px;
    border-radius: 16px;
    border: 2px solid var(--white);
    background: var(--green-wash);
    color: var(--green-ink);
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    cursor: default;
    transition: max-width .35s ease, background-color .2s, color .2s;
}

.pillar-tag:first-child {
    margin-left: 0;
}

.pillar-tag:hover,
.pillar-tag:focus-visible {
    max-width: 100%;
    z-index: 5;
    background: var(--green);
    color: var(--white);
    outline: none;
}

.pillar-tag__initial {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/* Centered suits the collapsed circle at rest, but once the tag expands and
   __rest becomes visible, that same centering leaves a gap between the
   letter and the rest of the word - so nudge it flush right on expansion. */
.pillar-tag:hover .pillar-tag__initial,
.pillar-tag:focus-visible .pillar-tag__initial {
    justify-content: flex-end;
    padding-right: 1px;
}

.pillar-tag__rest {
    padding-right: 10px;
    white-space: nowrap;
}

.tag-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .tag-strip .filter-chip {
        cursor: default;
    }

/* Org-chart flow: Advisory Board -> Team Lead -> 4 parallel tracks, each
   with one role beneath it. .gov-flow__branch (desktop) is a single SVG
   path drawing the stem/branch-out/drop-down tree; .gov-flow__branches
   uses grid-auto-flow:column with track-major markup order (node,
   connector, leaf per track) so the same markup reflows into 4 stacked
   node/connector/leaf groups on mobile just by switching the grid to a
   single column (see the max-width:700px block below). */

.gov-flow {
    display: flex;
    flex-direction: column;
}

.gov-flow__row {
    display: flex;
    justify-content: center;
}

.gov-flow__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 320px;
    padding: 22px 24px;
    background: #fff;
    border: 1.5px solid var(--green);
    border-radius: var(--radius);
    text-align: center;
}

.gov-flow__node-title {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--green-ink);
}

.gov-flow__node-desc {
    font-size: 13px;
    color: var(--grey);
    line-height: 1.5;
}

.gov-flow__stem {
    width: 2px;
    height: 24px;
    margin: 0 auto;
    background: var(--green);
}

.gov-flow__stem--mobile {
    display: none;
}

.gov-flow__branch {
    height: 44px;
    color: var(--green);
}

    .gov-flow__branch svg {
        width: 100%;
        height: 100%;
        display: block;
    }

.gov-flow__branches {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto 24px auto;
    grid-auto-columns: 1fr;
}

    .gov-flow__branches .gov-flow__node--sm {
        max-width: none;
        margin: 0 8px;
        padding: 16px 14px;
    }

        .gov-flow__branches .gov-flow__node--sm .gov-flow__node-title {
            font-size: 14.5px;
        }

.gov-flow__node--leaf {
    background: var(--green-wash);
    border-color: var(--green-wash-border);
}

.gov-flow__connector {
    justify-self: center;
    width: 2px;
    height: 100%;
    background: var(--green);
}

@media (max-width: 700px) {
    .gov-flow__branch {
        display: none;
    }

    .gov-flow__stem--mobile {
        display: block;
    }

    .gov-flow__branches {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

        .gov-flow__branches .gov-flow__node--sm:not(.gov-flow__node--leaf) {
            margin-top: 28px;
        }
}

/* ---- Stories & Impact tiles -------------------------------------------------
   At rest the cover fills the whole tile and the title + summary sit on it,
   kept legible by a bottom-to-top gradient. On hover an opaque veil takes the
   tile edge to edge and the same text rises into the middle of it. */
.story-tile {
    all: unset;
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 100%;
    height: 320px;
    background: var(--navy-ink);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .35s ease, box-shadow .35s ease;
}

.theme-foundation .story-tile {
    background: var(--green-ink);
}

.theme-zambia .story-tile {
    background: var(--grey-900);
}

/* the hover veil. Kept on the tile's own ::after rather than a div so the
   three layers stack cover -> veil -> text with nothing extra in the markup */
.story-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(27, 42, 68, .965);
    opacity: 0;
    transition: opacity .45s ease;
}

.theme-foundation .story-tile::after {
    background: rgba(31, 51, 17, .965);
}

.theme-zambia .story-tile::after {
    background: rgba(58, 63, 66, .965);
}

.story-tile__media {
    /* .img-slot is position:relative; this rule is later in the file so it
       wins, but the override has to stay explicit for the inset to apply */
    position: absolute;
    inset: 0;
    z-index: 0;
    transition: transform .7s ease-out;
}

/* resting scrim: dark at the foot, clear by the upper quarter, so the cover
   still reads as a photograph rather than a tinted block */
.story-tile__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(14, 21, 34, .88) 0%,
        rgba(14, 21, 34, .64) 26%,
        rgba(14, 21, 34, .20) 55%,
        rgba(14, 21, 34, 0) 78%);
    transition: opacity .45s ease;
}

.theme-foundation .story-tile__media::after {
    background: linear-gradient(to top,
        rgba(15, 30, 8, .88) 0%,
        rgba(15, 30, 8, .64) 26%,
        rgba(15, 30, 8, .20) 55%,
        rgba(15, 30, 8, 0) 78%);
}

.theme-zambia .story-tile__media::after {
    background: linear-gradient(to top,
        rgba(29, 31, 33, .88) 0%,
        rgba(29, 31, 33, .64) 26%,
        rgba(29, 31, 33, .20) 55%,
        rgba(29, 31, 33, 0) 78%);
}

.story-tile__body {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 26px 28px;
    text-align: left;
}

/* the two spacers carry the state change: at rest only the top one grows, so
   the text sits at the foot; on hover the bottom one grows to match and the
   same text lands in the middle. flex-grow interpolates, so this animates —
   switching justify-content would have snapped. */
.story-tile__body::before,
.story-tile__body::after {
    content: "";
    flex: 1 0 0;
}

.story-tile__body::after {
    flex-grow: 0;
    transition: flex-grow .5s ease;
}

.story-tile__title {
    font-family: 'Newsreader', serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    margin: 0;
    transition: font-size .45s ease;
}

/* the summary and the fuller body occupy the same slot: one collapses as the
   other opens. max-height is the lever rather than height, since neither
   paragraph has a height the stylesheet can know — the values below are
   generous caps, not measurements, so they must stay above the tallest real
   string or the text will clip. */
.story-tile__meta,
.story-tile__full {
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    margin: 0;
    overflow: hidden;
}

.story-tile__meta {
    margin-top: 10px;
    max-width: 30ch;
    max-height: 6em;
    opacity: 1;
    transition: max-height .4s ease, margin-top .4s ease, opacity .25s ease;
}

/* held shut at rest. Both strings open on the same sentence, so the fade-in is
   delayed past the summary's fade-out — cross-fading them would have read as a
   flicker on that shared first line rather than as a swap. */
.story-tile__full {
    font-size: 14px;
    line-height: 1.55;
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    transition: max-height .5s ease, margin-top .5s ease, opacity .3s ease .18s;
}

/* only shown once the veil is up, where the cover no longer hints that the
   tile opens something */
.story-tile__cue {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blue-tint);
    opacity: 0;
    transform: translateY(7px);
    transition: opacity .4s ease .08s, transform .4s ease .08s;
}

.theme-foundation .story-tile__cue {
    color: var(--green-light);
}

.theme-zambia .story-tile__cue {
    color: var(--grey-300);
}

.story-tile__cue svg {
    width: 20px;
    height: 9px;
    overflow: visible;
}

.story-tile__cue p {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 15.5px;
    line-height: 1.55;
    color: #fff;
}

.story-tile:hover,
.story-tile:focus-visible {
    border-color: var(--blue);
    box-shadow: var(--shadow-card-hover);
}

.theme-foundation .story-tile:hover,
.theme-foundation .story-tile:focus-visible {
    border-color: var(--green);
    box-shadow: var(--shadow-card-hover-foundation);
}

.theme-zambia .story-tile:hover,
.theme-zambia .story-tile:focus-visible {
    border-color: var(--grey);
    box-shadow: var(--shadow-card-hover-zambia);
}

.story-tile:hover .story-tile__media,
.story-tile:focus-visible .story-tile__media {
    transform: scale(1.06);
}

/* the gradient gives way to the flat veil so the two never stack */
.story-tile:hover .story-tile__media::after,
.story-tile:focus-visible .story-tile__media::after {
    opacity: 0;
}

.story-tile:hover::after,
.story-tile:focus-visible::after {
    opacity: 1;
}

.story-tile:hover .story-tile__body::after,
.story-tile:focus-visible .story-tile__body::after {
    flex-grow: 1;
}

.story-tile:hover .story-tile__title,
.story-tile:focus-visible .story-tile__title {
    font-size: 27px;
}

.story-tile:hover .story-tile__meta,
.story-tile:focus-visible .story-tile__meta {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
}

.story-tile:hover .story-tile__full,
.story-tile:focus-visible .story-tile__full {
    max-height: 16em;
    margin-top: 12px;
    opacity: 1;
}

.story-tile:hover .story-tile__cue,
.story-tile:focus-visible .story-tile__cue {
    opacity: 1;
    transform: none;
}

.story-tile:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* Two columns need roughly 420px each before the fuller hover text stops
   fitting the fixed tile height. .card-grid's own 300px floor allows columns
   well below that, and at ~312-332px the body was squeezed by the flex column
   and clipped, so this grid drops to one column while the tiles are still
   wide enough. */
@media (max-width: 960px) {
    .card-grid--stories {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .story-tile {
        height: 280px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-tile,
    .story-tile::after,
    .story-tile__media,
    .story-tile__media::after,
    .story-tile__body::after,
    .story-tile__title,
    .story-tile__meta,
    .story-tile__full,
    .story-tile__cue {
        transition: none;
    }

    .story-tile:hover .story-tile__media,
    .story-tile:focus-visible .story-tile__media,
    .story-tile:hover .story-tile__cue,
    .story-tile:focus-visible .story-tile__cue {
        transform: none;
    }
}

/* ---- Stories & Impact lightbox ---------------------------------------------
   A native <dialog>, so focus trapping and Esc come for free; site.js adds the
   close button, the backdrop click and moving between images. */
.lightbox {
    border: 0;
    border-radius: 14px;
    padding: 0;
    width: min(1040px, calc(100vw - 48px));
    max-width: none;
    max-height: calc(100vh - 56px);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .34);
}

    .lightbox::backdrop {
        background: rgba(12, 22, 8, .7);
        backdrop-filter: blur(3px);
    }

.lightbox__panel {
    display: flex;
    flex-direction: column;
    /* the dialog's own max-height is a cap, not a size; without this the panel
       lays out at content height and the stage below cannot shrink into it */
    max-height: calc(100vh - 56px);
    padding: 24px 26px 22px;
    gap: 14px;
}

.lightbox__head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.lightbox__title {
    font-family: 'Newsreader', serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--green-ink);
    margin: 4px 0 0;
}

.lightbox__count {
    margin: 0 0 0 auto;
    align-self: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--grey);
    font-variant-numeric: tabular-nums;
}

.lightbox__close {
    flex: none;
    /* pushes itself to the head's far right - a no-op where .lightbox__count
       already claims that space with its own auto margin (the gallery
       lightbox), but needed for dialogs like the SDG one that have no count
       between the title and the close button. */
    margin-left: auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--grey-100);
    color: var(--navy-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}

    .lightbox__close:hover,
    .lightbox__close:focus-visible {
        background: var(--green-wash);
        color: var(--green-ink);
    }

    .lightbox__close svg {
        width: 18px;
        height: 18px;
    }

.lightbox__stage {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    /* min-height:0 lets this flex child shrink below its content so tall
       photographs stay inside the dialog instead of pushing the thumbnails out */
    min-height: 0;
    flex: 1 1 auto;
}

/* a fixed box, because the slides are stacked absolutely to cross-fade and so
   contribute no height of their own. It carries no background: the images have
   mixed proportions, and a tinted box turns every mismatch into letterbox bands
   instead of plain panel whitespace. */
.lightbox__frame {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    height: min(62vh, 560px);
}

/* every slide is stacked in the same box and cross-faded, so the frame never
   resizes between images of different proportions */
.lightbox__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
}

    .lightbox__slide.is-current {
        opacity: 1;
        visibility: visible;
        transition: opacity .35s ease, visibility 0s;
    }

    /* the image sizes itself inside the frame rather than filling it, so it
       keeps its own proportions and shows whole — a gallery should never crop */
    .lightbox__slide img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        display: block;
        border-radius: 10px;
    }

.lightbox__nav {
    flex: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--grey-200);
    border-radius: 50%;
    background: #fff;
    color: var(--green-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}

    .lightbox__nav:hover,
    .lightbox__nav:focus-visible {
        background: var(--green-wash);
        border-color: var(--green);
        color: var(--green-deep);
    }

    .lightbox__nav svg {
        width: 20px;
        height: 20px;
    }

    .lightbox__nav[hidden] {
        display: none;
    }

.lightbox__caption {
    margin: 0;
    /* matches the frame's inset so the caption lines up with the image, not
       with the arrows either side of it */
    padding: 0 54px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--grey);
    text-align: center;
}

.lightbox__thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lightbox__thumb {
    width: 74px;
    height: 52px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    background-color: var(--grey-100);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    opacity: .58;
    transition: opacity .25s ease, border-color .25s ease;
}

    .lightbox__thumb:hover,
    .lightbox__thumb:focus-visible {
        opacity: 1;
    }

    .lightbox__thumb.is-current {
        opacity: 1;
        border-color: var(--green);
    }

/* SDG approach documents: same dialog chrome as the story lightbox, just
   wider/taller (no thumbnail strip to share the panel with) and holding a
   single PDF iframe instead of a photo stage. */
.lightbox--doc {
    width: min(900px, calc(100vw - 48px));
}

.lightbox__doc-stage {
    flex: 1 1 auto;
    min-height: 0;
    height: min(78vh, 760px);
}

.lightbox__doc-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--grey-100);
}

@media (max-width: 780px) {
    .lightbox {
        width: calc(100vw - 24px);
    }

    .lightbox__doc-stage {
        height: min(70vh, 600px);
    }

    .lightbox__panel {
        padding: 18px 16px 16px;
    }

    .lightbox__frame {
        height: min(42vh, 300px);
    }

    /* the arrows would eat the width a phone needs for the image; the
       thumbnails and a swipe-sized target stay, so nothing becomes unreachable */
    .lightbox__nav {
        width: 34px;
        height: 34px;
    }

    .lightbox__caption {
        padding: 0 8px;
        font-size: 13.5px;
    }

    .lightbox__thumb {
        width: 58px;
        height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox__slide,
    .lightbox__nav,
    .lightbox__close,
    .lightbox__thumb {
        transition: none;
    }
}

@media (max-width: 780px) {
    .sub-nav {
        padding: 12px 24px;
    }
}

/* ---------- Services page ---------- */

.services-hero {
    padding: 70px var(--gutter);
    background: var(--grey-100);
    display: flex;
    flex-direction: column;
    gap: 18px;
    border-bottom: 1px solid var(--grey-150);
}

.services-hero__title {
    font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.032em;
    color: var(--navy-ink);
    max-width: 820px;
    text-wrap: balance;
}

.services-hero__lede {
    font-size: 17px;
    line-height: 1.65;
    color: var(--grey);
    max-width: 660px;
}

.service-row {
    display: grid;
    grid-template-columns: 70px 1fr 420px;
    gap: 32px;
    padding: 44px var(--gutter);
    border-bottom: 1px solid var(--grey-150);
    align-items: center;
}

.service-row__index {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue);
}

.service-row__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.service-row__title {
    font-size: 28px;
    font-weight: 700;
    color: var(--navy-ink);
    letter-spacing: -0.02em;
    margin: 0;
}

.service-row__desc {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--grey);
    max-width: 620px;
    margin-bottom: 6px;
}

.service-row__deliver {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--grey);
    max-width: 620px;
}

.service-row__where {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--blue);
    padding-top: 4px;
}

.service-row__deliverables {
    list-style: none;
    margin: 5px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 620px;
}

.service-row__deliverables li {
    font-size: 14px;
    line-height: 1.6;
    color: var(--grey);
    padding-left: 20px;
    position: relative;
}

.service-row__deliverables li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--blue);
    font-weight: 700;
    font-size: 16px;
}

.service-row__media {
    height: 180px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.split-cta {
    padding: 56px;
    background: var(--navy-deep);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.split-cta__title {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.025em;
}

.split-cta__body {
    font-size: 16px;
    color: #B9C4DC;
}

/* ---------- Projects page ---------- */

.projects-hero {
    padding: 60px var(--gutter) 34px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.projects-hero__title {
    font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.032em;
    color: var(--navy-ink);
    max-width: 760px;
}

.projects-filter {
    display: flex;
    gap: 10px;
    padding: 0 var(--gutter) 30px;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--grey-150);
}

.projects-filter__label {
    font-size: 13px;
    color: var(--grey-500);
    font-weight: 600;
    letter-spacing: .08em;
    padding-right: 6px;
}

.filter-chip {
    padding: 9px 16px;
    border: 1px solid #CFD2D3;
    background: #fff;
    color: var(--grey);
    border-radius: var(--radius);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s, color .18s;
}

    .filter-chip:hover, .filter-chip:focus-visible {
        border-color: var(--blue);
        color: var(--blue);
    }

    .filter-chip[aria-pressed="true"] {
        border-color: var(--blue);
        color: var(--blue);
        background: #EEF1FA;
    }

.projects-grid {
    padding: 44px var(--gutter);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 26px;
}

.project-card--lg {
    border-radius: 16px;
}

    .project-card--lg .project-card__media {
        height: 210px;
    }

    .project-card--lg:hover, .project-card--lg:focus-within {
        box-shadow: 0 18px 36px rgba(27, 42, 68, .16);
    }

.projects-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 320px;
    padding: 40px var(--gutter) 60px;
    color: var(--grey-500);
    font-size: 15px;
}

/* ---------- Contact page ---------- */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.contact-panel-left {
    padding: 70px var(--gutter);
    display: flex;
    flex-direction: column;
    gap: 26px;
    border-right: 1px solid var(--grey-150);
}

.contact-panel-left__intro {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact-panel-left__title {
    font-size: clamp(1.75rem, 1rem + 2vw, 2.875rem);
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: -0.032em;
    color: var(--navy-ink);
    text-wrap: balance;
}

.contact-panel-left__lede {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--grey);
    max-width: 480px;
}

.role-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.role-chip {
    position: relative;
}

    .role-chip input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
    }

    .role-chip label {
        display: inline-flex;
        padding: 12px 20px;
        border: 1px solid var(--grey-300);
        color: var(--grey-900);
        border-radius: var(--radius);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all .18s;
    }

    .role-chip input:checked + label {
        background: var(--blue);
        border-color: var(--blue);
        color: #fff;
    }

/* ---------- Responsive design: who-we-are ---------- */

@media (max-width: 1024px) {
    .who-we-are__split {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .who-we-are__statement {
        font-size: clamp(1.5rem, 0.8rem + 1.8vw, 2.25rem);
    }

    .who-we-are__mission-vision {
        gap: 18px;
    }

    .mission-vision-item {
        padding: 26px 28px;
        gap: 20px;
    }

    .mission-vision-item__title {
        font-size: 11px;
    }

    .mission-vision-item__text {
        font-size: clamp(1.12rem, .96rem + .35vw, 1.35rem);
    }

    .values-section__title {
        font-size: 20px;
    }

    .values-acronym__bubble {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .values-tooltip {
        padding: 16px 18px;
    }

    .values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .value-item {
        padding: 16px;
    }

    .capability-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .who-we-are {
        padding: 40px 24px 72px;
        gap: 48px;
    }

    .who-we-are__left {
        gap: 36px;
    }

    .who-we-are__statement {
        font-size: clamp(1.25rem, 0.6rem + 1.5vw, 1.875rem);
        line-height: 1.2;
    }

    .who-we-are__mission-vision {
        gap: 16px;
    }

    .mission-vision-item {
        padding: 22px 22px 24px;
        gap: 18px;
        border-radius: 10px;
    }

    .mission-vision-item__title {
        font-size: 10.5px;
        gap: 10px;
        letter-spacing: .16em;
    }

    .mission-vision-item__title::before {
        width: 11px;
        height: 11px;
    }

    .mission-vision-item__text {
        font-size: clamp(1rem, .9rem + .3vw, 1.18rem);
        line-height: 1.5;
    }

    .values-section__title {
        font-size: 18px;
    }

    .values-section__intro {
        font-size: 13px;
    }

    .values-acronym {
        justify-content: space-between;
        gap: 10px;
    }

    .values-acronym__bubble {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .values-tooltip {
        min-height: 156px;
        padding: 14px 16px;
    }

    .values-tooltip__title {
        font-size: 15px;
    }

    .values-tooltip__body {
        font-size: 13px;
    }

    .values-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .value-item {
        padding: 14px;
        gap: 8px;
    }

    .value-item__title {
        font-size: 15px;
    }

    .value-item__description {
        font-size: 13px;
    }

    .who-we-are__lede {
        font-size: 15px;
        line-height: 1.65;
    }

    .stat-pair {
        gap: 30px;
    }

    .stat b {
        font-size: 28px;
    }

    .capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .capability-cell {
        padding: 16px 0 0;
    }

    .capability-cell__title {
        font-size: 15px;
    }

    .capability-cell__desc {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .who-we-are {
        padding: 32px 16px 56px;
        gap: 36px;
    }

    .who-we-are__left {
        gap: 28px;
    }

    .who-we-are__statement {
        font-size: clamp(1.125rem, 0.5rem + 1.3vw, 1.5rem);
        line-height: 1.25;
    }

    .who-we-are__mission-vision {
        gap: 14px;
    }

    .mission-vision-item {
        padding: 18px 16px 20px;
        gap: 16px;
        border-radius: 9px;
    }

    .mission-vision-item__title {
        font-size: 10px;
        gap: 8px;
        letter-spacing: .14em;
    }

    .mission-vision-item__title::before {
        width: 10px;
        height: 10px;
    }

    .mission-vision-item__text {
        font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
        line-height: 1.5;
    }

    .values-section__title {
        font-size: 16px;
    }

    .values-section__intro {
        font-size: 12px;
        line-height: 1.55;
    }

    .values-acronym {
        justify-content: space-between;
        gap: 8px;
    }

    .values-acronym__bubble {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .values-tooltip {
        min-height: 168px;
        padding: 12px 14px;
        border-radius: 10px;
    }

    .values-tooltip__title {
        font-size: 14px;
    }

    .values-tooltip__body {
        font-size: 12px;
        line-height: 1.55;
    }

    .values-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .value-item {
        padding: 12px;
    }

    .value-item__title {
        font-size: 14px;
    }

    .value-item__description {
        font-size: 12px;
        line-height: 1.55;
    }

    .who-we-are__lede {
        font-size: 14px;
        line-height: 1.6;
    }

    .stat-pair {
        flex-direction: column;
        gap: 20px;
    }

    .stat {
        text-align: center;
    }

    .stat b {
        font-size: 24px;
    }

    .capability-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .capability-cell__index {
        font-size: 10px;
    }

    .capability-cell__title {
        font-size: 14px;
    }

    .capability-cell__desc {
        font-size: 11px;
    }
}
    }

    .role-chip input:focus-visible + label {
        outline: 2px solid var(--blue);
        outline-offset: 2px;
    }

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.contact-form__field--full {
    grid-column: 1 / -1;
}

.contact-form__field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--grey);
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
    padding: 14px 16px;
    border: 1px solid #D6D8D9;
    border-radius: var(--radius);
    color: var(--navy-ink);
    font-size: 14.5px;
    font-family: inherit;
}

.contact-form__field textarea {
    min-height: 110px;
    resize: vertical;
}

.contact-form__submit {
    padding: 16px;
    background: var(--blue);
    color: #fff;
    border: 1.5px solid var(--blue);
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    margin-top: 6px;
    cursor: pointer;
    transition: all .18s;
}

    .contact-form__submit:hover, .contact-form__submit:focus-visible {
        background: #fff;
        color: var(--blue);
    }

.contact-panel-right {
    display: flex;
    flex-direction: column;
}

.contact-panel-right__media {
    height: 300px;
    min-height: 0;
    flex: none;
    position: relative;
}

.contact-info {
    padding: 44px var(--gutter);
    display: flex;
    flex-direction: column;
    gap: 22px;
    border-bottom: 1px solid var(--grey-150);
}

.contact-info__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--grey-500);
}

.contact-office {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--grey-150);
}

    .contact-office:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

.contact-office__name {
    font-size: 19px;
    font-weight: 700;
    color: var(--navy-ink);
}

.contact-office__detail {
    font-size: 15px;
    line-height: 1.7;
    color: var(--grey);
}

    .contact-office__detail a {
        color: inherit;
    }

.contact-hours {
    padding: 36px var(--gutter);
    background: var(--grey-100);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-hours__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--navy-ink);
}

.contact-hours__body {
    font-size: 15px;
    color: var(--grey);
    line-height: 1.7;
}

.success-banner {
    border: 1px solid var(--blue);
    background: #EEF1FA;
    border-radius: var(--radius);
    padding: 16px 18px;
    color: var(--navy-ink);
    font-size: 14.5px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
    .capability-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .evidence__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .who-we-are__split {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .dest-overview {
        grid-template-columns: 1fr;
    }

    .service-row {
        grid-template-columns: 1fr;
    }

    .service-row__index {
        display: none;
    }

    .service-row__media {
        order: -1;
        height: 220px;
    }
}

@media (max-width: 960px) {
    /* Full-page takeover: sits above the header itself (inset:0, z-index
     above .site-header's 20), with its own logo + close row standing
     in for the header while it's open. */
    .primary-nav {
        position: fixed;
        inset: 0;
        z-index: 45;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        display: none;
        overflow-y: auto;
    }

        .primary-nav[data-open="true"] {
            display: flex;
        }

    .primary-nav__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: none;
        position: sticky;
        top: 0;
        z-index: 1;
        background: #fff;
        padding: 14px 24px;
        border-bottom: 1px solid var(--grey-150);
    }

    .primary-nav__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--navy-ink);
        cursor: pointer;
    }

        .primary-nav__close svg {
            width: 22px;
            height: 22px;
        }

    .primary-nav__destinations {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 28px 24px 8px;
    }

    .primary-nav__link--uganda,
    .primary-nav__link--zambia,
    .primary-nav__link--foundation {
        justify-content: center;
        padding: 16px 24px;
        border-radius: var(--radius);
        font-size: 15.5px;
        font-weight: 700;
        color: #fff;
    }

    .primary-nav__link--uganda {
        background: var(--blue);
    }

    .primary-nav__link--zambia {
        background: var(--grey);
    }

    .primary-nav__link--foundation {
        background: var(--green);
    }

        .primary-nav__link--uganda:hover, .primary-nav__link--uganda:focus-visible,
        .primary-nav__link--zambia:hover, .primary-nav__link--zambia:focus-visible,
        .primary-nav__link--foundation:hover, .primary-nav__link--foundation:focus-visible {
            opacity: .88;
            color: #fff;
        }
        /* .is-current normally recolors the link text (desktop); the pills
     are already brand-colored, so keep the label white instead. */
        .primary-nav__link--uganda.is-current,
        .primary-nav__link--zambia.is-current,
        .primary-nav__link--foundation.is-current {
            color: #fff;
        }

    .primary-nav__divider {
        display: none;
    }

    .primary-nav > a.primary-nav__link {
        padding: 16px 24px;
        font-size: 16px;
        border-top: 1px solid var(--grey-150);
    }

    .primary-nav__cta {
        margin: 28px 24px;
        justify-content: center;
        padding: 16px 24px;
    }

    /* The header sits underneath the open overlay (lower z-index) and
     stays fully covered, but hide it so its hamburger drops out of
     the tab order instead of lurking behind the menu. */
    body[data-nav-open="true"] .site-header {
        visibility: hidden;
    }

    body[data-nav-open="true"] .primary-nav {
        visibility: visible;
    }

    body[data-nav-open="true"] .back-to-top {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .site-header__row {
        padding: 14px 24px;
    }

    /* the hamburger appears at this width and the row gets tight; the tagline is
       the first thing that can go without losing what the co-brand says */
    .brand__tagline {
        display: none;
    }
}

@media (max-width: 1179px) {
    .site-footer__upper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Below this the parent logo and the hamburger need the whole row. The mark on
   its own would only put a second globe beside the first, which is the crowding
   this lockup was rebuilt to avoid, so the co-brand drops out entirely — the
   visitor is already on the Foundation page. */
@media (max-width: 560px) {
    .brand-rule,
    .brand--foundation {
        display: none;
    }
}

@media (max-width: 780px) {
    .hero-carousel {
        min-height: 560px;
    }

    .theme-home .hero-carousel {
        height: calc(100dvh - var(--dashboard-banner-height, 0px));
        min-height: 560px;
    }

    .hero-carousel__actions {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero-carousel__copy {
        padding: 0 24px 180px;
        gap: 16px;
    }

    .hero-carousel__headline {
        font-size: clamp(2rem, 1.35rem + 4vw, 3rem);
    }

    .hero-carousel__body {
        font-size: 16px;
        max-width: 560px;
    }

    .hero-carousel__who-btn {
        left: 24px;
    }

    .hero-carousel__logo {
        right: 24px;
        padding: 6px 10px;
    }

    .hero-carousel__logo-img {
        height: 28px;
    }

    .hero-carousel__arrow {
        width: 40px;
        height: 40px;
    }

    .hero-carousel__arrow--prev {
        left: 12px;
    }

    .hero-carousel__arrow--next {
        right: 12px;
    }

    .who-we-are, .evidence, .dest-overview, .dest-section {
        padding-left: 24px;
        padding-right: 24px;
    }

    .capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .evidence__stats {
        grid-template-columns: 1fr 1fr;
    }

    .dest-cta {
        grid-template-columns: 1fr;
        padding: 40px 24px;
    }

    .mini-form__row {
        grid-template-columns: 1fr;
    }

    .split-cta {
        padding: 40px 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-panel-left {
        border-right: 0;
        border-bottom: 1px solid var(--grey-150);
        padding: 40px 24px;
    }

    .contact-panel-right__media, .contact-info, .contact-hours {
        padding-left: 24px;
        padding-right: 24px;
    }

    .contact-form__row {
        grid-template-columns: 1fr;
    }

    .dest-hero__copy, .services-hero, .service-row, .projects-hero, .projects-filter, .projects-grid, .site-footer__upper, .site-footer__lower {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 560px) {
    .hero-carousel,
    .theme-home .hero-carousel {
        min-height: 520px;
    }

    .hero-carousel__copy {
        justify-content: center;
        padding: 88px 20px 112px;
        gap: 14px;
    }

    .hero-carousel__headline {
        font-size: clamp(1.85rem, 1.2rem + 3.8vw, 2.4rem);
    }

    .hero-carousel__body {
        font-size: 15px;
        line-height: 1.5;
        max-width: 34ch;
    }

    .hero-carousel__row {
        padding: 0 20px 24px;
    }

    .hero-carousel__actions {
        width: min(100%, 320px);
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .hero-carousel__actions .btn {
        width: 100%;
    }

    .hero-carousel__pip,
    .hero-carousel__arrow {
        display: none;
    }

    .capability-grid {
        grid-template-columns: 1fr;
    }

    .evidence__stats {
        grid-template-columns: 1fr;
    }

    .site-footer__upper {
        grid-template-columns: 1fr;
    }

    .stat-pair {
        flex-wrap: wrap;
        gap: 24px;
    }
}

/* ---------- Blog ---------- */

.blog-grid {
    padding: 44px var(--gutter);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 26px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow .2s;
}

    .blog-card:hover, .blog-card:focus-within {
        box-shadow: var(--shadow-card-hover);
    }

.blog-card__media {
    display: block;
    height: 200px;
    background-color: var(--grey-100);
    background-size: cover;
    background-position: center;
}

.blog-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px 24px;
    flex: 1;
}

.blog-card__tag {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blue);
    text-decoration: none;
}

.blog-card__title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--navy-ink);
}

    .blog-card__title a {
        color: inherit;
        text-decoration: none;
    }

        .blog-card__title a:hover, .blog-card__title a:focus-visible {
            text-decoration: underline;
        }

.blog-card__excerpt {
    font-size: 15px;
    line-height: 1.55;
    color: var(--grey);
}

.blog-card__meta {
    margin-top: auto;
    padding-top: 8px;
    font-size: 13px;
    color: var(--grey-500);
}

.blog-pager {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 var(--gutter) 64px;
}

    .blog-pager .filter-chip {
        text-decoration: none;
    }

.blog-post {
    max-width: 780px;
    margin: 0 auto;
    padding: 56px var(--gutter) 72px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.blog-post__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.blog-post__title {
    font-size: clamp(1.9rem, 1rem + 2.6vw, 3rem);
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: -0.032em;
    color: var(--navy-ink);
}

.blog-post__meta {
    font-size: 14px;
    color: var(--grey-600);
}

.blog-post__cover {
    height: clamp(220px, 40vw, 420px);
    border-radius: 16px;
    background-color: var(--grey-100);
    background-size: cover;
    background-position: center;
}

.blog-prose {
    font-size: 18px;
    line-height: 1.7;
    color: var(--grey-900);
    overflow-wrap: anywhere;
}

    .blog-prose > * + * {
        margin-top: 1.1em;
    }

    .blog-prose h2, .blog-prose h3, .blog-prose h4 {
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.2;
        color: var(--navy-ink);
        margin-top: 1.8em;
    }

    .blog-prose h2 { font-size: 1.6rem; }
    .blog-prose h3 { font-size: 1.25rem; }

    .blog-prose a {
        color: var(--blue);
    }

    .blog-prose ul, .blog-prose ol {
        padding-left: 1.4em;
    }

    .blog-prose li + li {
        margin-top: .35em;
    }

    .blog-prose blockquote {
        margin-left: 0;
        padding-left: 20px;
        border-left: 3px solid var(--green);
        font-family: 'Newsreader', serif;
        font-size: 1.25rem;
        line-height: 1.5;
        color: var(--navy-ink);
    }

    .blog-prose img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }

    .blog-prose table {
        border-collapse: collapse;
        width: 100%;
        font-size: 16px;
        display: block;
        overflow-x: auto;
    }

    .blog-prose th, .blog-prose td {
        border: 1px solid var(--grey-200);
        padding: 8px 12px;
        text-align: left;
    }

    .blog-prose code {
        background: var(--grey-100);
        padding: 1px 6px;
        border-radius: 4px;
        font-size: .9em;
    }

.blog-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .blog-tags li {
        font-size: 12.5px;
        border: 1px solid var(--grey-300);
        border-radius: 99px;
        padding: 4px 12px;
        color: var(--grey);
    }

@media (max-width: 960px) {
    .blog-grid, .blog-pager {
        padding-left: 24px;
        padding-right: 24px;
    }

    .blog-post {
        padding-left: 24px;
        padding-right: 24px;
    }
}