:root {
    --color-bg: #ffffff;
    --color-text: #1a1a1a;
    --color-muted: #6b7280;
    --color-border: #e5e7eb;
    --color-accent: #1d4ed8;
    --color-accent-dark: #1e3a8a;
    --color-surface: #ffffff;

    /* Typography. Nothing below sets a family literally — everything points at
       these two variables, so the site's type is changed here and in
       templates/partials/head-fonts.html (which loads the files) and nowhere
       else. The fallbacks are what renders during the swap, so they are the
       nearest system faces rather than a bare `sans-serif`/`serif`.

       --font-body:    UI, prose, controls — Source Sans 3.
       --font-display: headings and the institutional labels that set the tone
                       of a band (eyebrows, section titles) — Source Serif 4. */
    --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;

    /* Height of the collapsed navbar. main.js measures the real value and
       overwrites this; the fallback only has to survive until it runs. */
    --navbar-height: 4.5rem;

    /* The page shell. Every full-width band — navbar, hero, main — lines its
       content up on these two values, so the edge spacing is changed here and
       nowhere else. --shell-max is `none` so the shell stays fluid to any
       width; the gutter is what holds the content off the edges, growing with
       the viewport so wide screens are not margin-to-margin text. */
    --shell-max: none;
    --shell-gutter: clamp(1.25rem, 5vw, 6rem);
}

/* One helper for the inner box of any full-width band. */
.shell {
    width: 100%;
    max-width: var(--shell-max);
    margin: 0 auto;
    padding-inline: var(--shell-gutter);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    /* Global Commitments' off-screen slides (static/js/main.js pins the
       section and translates a track wider than the viewport) sit outside
       the viewport by design, clipped by that section's own overflow:
       hidden — but GSAP measuring/positioning the pin in real browsers can
       still nudge the document's horizontal extent by a sub-pixel amount
       at certain zoom levels. This is the hard backstop: no page-level
       horizontal scrollbar can appear regardless of the cause, vertical
       scrolling is untouched. */
    overflow-x: hidden;
    font-family: var(--font-body);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
}

/* Headings take the serif by default so any page that just writes an <h1> is
   already on-brand. Anything that wants the sans back (a UI label that happens
   to be an <h2>, say) sets font-family: var(--font-body) locally. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
}

/* Buttons and fields do not inherit the page font on their own. */
button, input, select, textarea {
    font-family: inherit;
}

.site-header,
.site-footer {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-nav a {
    color: var(--color-muted);
    text-decoration: none;
}

.site-nav a:hover {
    color: var(--color-text);
}

.site-logo {
    font-family: var(--font-display);
    font-weight: 700;
    text-decoration: none;
    color: inherit;
}

/* ---------------------------------------------------------------------------
   Navbar (partials/navbar.html)
   Mobile first: the nav collapses into a drawer with accordion sections.
   From 1080px up it becomes a horizontal bar with dropdown panels.
--------------------------------------------------------------------------- */

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

/* Everything the navbar paints with goes through these four variables, so the
   transparent-over-hero palette below is a single override rather than a
   parallel set of rules. */
.navbar {
    --navbar-fg: var(--color-text);
    --navbar-fg-muted: var(--color-muted);
    --navbar-accent: var(--color-accent);
    --navbar-border: var(--color-border);
    /* Height of the upper institutional tier on desktop. Both the tier itself
       and the rule continued across the brand column derive from this. */
    --navbar-tier-top: 2.5rem;

    position: relative;
    z-index: 50;
    background: var(--color-surface);
    border-bottom: 1px solid var(--navbar-border);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-block: 0.875rem;
}

/* Emblem and wordmark together set the collapsed height of the bar. On desktop
   the brand is a sibling of the two rows rather than part of either, and
   stretches across both. */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    /* The wordmark inherits this rather than naming a colour, so it follows the
       bar's palette over the hero the way every other element in it does. */
    color: var(--navbar-fg);
}

.navbar-logo {
    width: 3rem;
    height: auto;
    flex: none;
}

/* "World" over "Peace Board" beside the emblem. Body sans rather than the
   display serif; the tracking and the tight leading are what keep the two short
   lines reading as one mark rather than as two stacked words. */
.navbar-wordmark {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Room for the divider, which is painted in this space by ::before. */
    padding-left: 0.625rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* The mark is a name, not a sentence — never let it wrap mid-word or break
       to a fourth line on a narrow phone. */
    white-space: nowrap;
}

/* The rule between emblem and wordmark. Deliberately partial — it spans the two
   lines of text and stops there, rather than running the full height of the
   emblem, so it reads as a separator inside one lockup instead of as a column
   divider splitting the bar in two. currentColor ties it to the inherited
   --navbar-fg, so it fades with the wordmark over the hero. */
.navbar-wordmark::before {
    content: "";
    position: absolute;
    left: 0;
    /* Centred on the text block and sized as a share of it, so it tracks the
       wordmark at both sizes without a second value on the desktop side. */
    top: 50%;
    transform: translateY(-50%);
    height: 84%;
    border-left: 1px solid currentColor;
    opacity: 0.28;
}

/* Mobile: the drawer. Collapsed by default; .is-open is toggled by main.js on
   the same element that used to be .navbar-nav, so the JS contract is unchanged. */
.navbar-rows {
    display: none;
    flex-basis: 100%;
    padding-bottom: 0.75rem;
}

/* Flex column so the two rows can be reordered: primary nav first in the
   drawer, institutional row first on desktop. */
.navbar-rows.is-open {
    display: flex;
    flex-direction: column;
    /* Two tiers plus the open accordion panels overflow a short viewport (and
       every phone in landscape), so the drawer scrolls within what is left
       below the bar instead of running off the bottom unreachably. */
    max-height: calc(100dvh - var(--navbar-height) - 1rem);
    overflow-y: auto;
    /* Keep a flick inside the drawer from scrolling the page behind it. */
    overscroll-behavior: contain;
}

.navbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: none;
    border: 1px solid var(--navbar-border);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: border-color 0.25s ease;
}

.navbar-toggle-bars,
.navbar-toggle-bars::before,
.navbar-toggle-bars::after {
    display: block;
    width: 1.125rem;
    height: 2px;
    background: var(--navbar-fg);
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.25s ease;
}

.navbar-toggle-bars {
    position: relative;
}

.navbar-toggle-bars::before,
.navbar-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.navbar-toggle-bars::before {
    top: -6px;
}

.navbar-toggle-bars::after {
    top: 6px;
}

.navbar-toggle[aria-expanded="true"] .navbar-toggle-bars {
    background: transparent;
}

.navbar-toggle[aria-expanded="true"] .navbar-toggle-bars::before {
    top: 0;
    transform: rotate(45deg);
}

.navbar-toggle[aria-expanded="true"] .navbar-toggle-bars::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Mobile order: the primary nav comes first because it is what people came for,
   and the institutional links sit below it as a quieter closing section. On
   desktop (below) the order reverses into the formal two-tier arrangement. */
.navbar-utility {
    order: 2;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--navbar-border);
}

/* A section heading in the drawer, where the tier has no visual context of its
   own. Redundant on desktop, where the row's position says the same thing. */
.navbar-utility-label {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navbar-fg-muted);
}

.navbar-utility-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-utility-list a {
    display: block;
    /* 44px min touch target, the reason for the padding rather than line-height. */
    padding: 0.625rem 0;
    font-size: 0.9375rem;
    color: var(--navbar-fg-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}

.navbar-utility-list a:hover,
.navbar-utility-list a:focus-visible {
    color: var(--navbar-accent);
}

.navbar-nav {
    order: 1;
}

.navbar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-item {
    border-top: 1px solid var(--navbar-border);
}

.navbar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 0;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    text-decoration: none;
    color: var(--navbar-fg);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color 0.25s ease;
}

.navbar-link:hover,
.navbar-link:focus-visible {
    color: var(--navbar-accent);
}

.navbar-caret {
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
}

.navbar-link[aria-expanded="true"] .navbar-caret {
    transform: translateY(2px) rotate(-135deg);
}

.navbar-panel-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0.75rem 0.75rem;
}

.navbar-panel-list a {
    display: block;
    padding: 0.4375rem 0;
    font-size: 0.9375rem;
    color: var(--navbar-fg-muted);
    text-decoration: none;
}

.navbar-panel-list a:hover,
.navbar-panel-list a:focus-visible {
    color: var(--navbar-accent);
}

.navbar-cta {
    display: block;
    margin-top: 1rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background: var(--color-accent);
    /* Matches .hero-button — squared-off, not a pill. */
    border-radius: 0.25rem;
}

.navbar-cta:hover,
.navbar-cta:focus-visible {
    background: var(--color-accent-dark);
}

@media (min-width: 1080px) {
    /* align-items: stretch is what makes the emblem span both rows: the brand
       becomes as tall as the .navbar-rows column beside it, and centres its
       image within that full height. */
    .navbar-inner {
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 2rem;
        /* The rows carry the vertical padding at this width; the horizontal
           gutter stays with .shell so the bar keeps the page's edge spacing. */
        padding-block: 0;
    }

    /* No tier rule across this column: the emblem spans both rows, so a divider
       continued under it would cut through the middle of the artwork. The rule
       belongs to the utility row alone and starts where that row starts. */
    .navbar-brand {
        flex: none;
        /* The rows carry their own vertical padding; the brand matches the sum
           so the emblem's box is exactly as tall as the stack it sits beside.
           No left padding: the emblem starts on the shell gutter, so it lines up
           with the hero eyebrow and heading in the column below it. */
        padding: 0.75rem 0;
    }

    /* Free to grow now that it spans two rows — this is the size that makes the
       bar read as institutional rather than as a small site header. */
    .navbar-logo {
        width: 4.75rem;
    }

    /* Scaled to the taller emblem, but deliberately short of matching its full
       height — the emblem stays the dominant half of the lockup. */
    .navbar-wordmark {
        /* Divider gap grows with the type so the lockup keeps its proportions. */
        padding-left: 0.875rem;
        font-size: 1.125rem;
        letter-spacing: 0.08em;
    }

    .navbar-toggle {
        display: none;
    }

    .navbar-rows {
        display: flex;
        flex-direction: column;
        flex: 1;
        flex-basis: auto;
        min-width: 0;
        padding-bottom: 0;
    }

    /* Top tier. The tinted band and the hairline under it are what separate the
       two rows; without them the stack reads as one crowded block. */
    .navbar-utility {
        order: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 0;
        /* Flush right on the shell gutter, matching the brand on the left. */
        padding: 0;
        min-height: var(--navbar-tier-top);
        border-top: 0;
        border-bottom: 1px solid var(--navbar-border);
    }

    .navbar-utility-label {
        display: none;
    }

    .navbar-utility-list {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }

    .navbar-utility-list a {
        padding: 0;
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    .navbar-nav {
        order: 2;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1;
        gap: 1.25rem;
        min-height: 3.5rem;
        /* Flush right on the shell gutter, matching the brand on the left. */
        padding-right: 0;
    }

    .navbar-list {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .navbar-item {
        position: relative;
        border-top: 0;
    }

    .navbar-link {
        width: auto;
        padding: 0.5rem 0;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    /* Dropdowns bring their own solid surface, so they stay on the light
       palette even while the bar itself is transparent. */
    .navbar-panel {
        --navbar-fg-muted: var(--color-muted);
        --navbar-accent: var(--color-accent);

        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 0.5rem;
        padding: 0.75rem 0.5rem;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 0.5rem;
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    }

    /* An invisible bridge across the margin above the panel. Without it the gap
       is dead space: the pointer travelling from the link down to the panel
       leaves the item, fires mouseleave, and the panel closes before it can be
       reached. The bridge keeps that journey inside the item. */
    .navbar-panel::before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 0;
        width: 100%;
        height: 0.5rem;
    }

    .navbar-panel-list {
        min-width: 14rem;
        padding: 0;
    }

    .navbar-panel-list-columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(12rem, 1fr));
        column-gap: 1.5rem;
    }

    .navbar-panel-list a {
        padding: 0.4375rem 0.75rem;
        border-radius: 0.375rem;
    }

    .navbar-panel-list a:hover,
    .navbar-panel-list a:focus-visible {
        background: #f3f4f6;
    }

    /* Keep the panels nearest the right edge from overflowing it. Counting from
       the end covers the two trailing plain links, which have no panel. */
    .navbar-item:nth-last-of-type(3) .navbar-panel,
    .navbar-item:nth-last-of-type(4) .navbar-panel {
        left: auto;
        right: 0;
    }

    .navbar-cta {
        margin-top: 0;
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------------------
   Hero (partials/hero.html)
   A white, full-bleed band with the WebGPU globe behind the copy. The gradient
   below doubles as the fallback: if static/js/hero-earth.js cannot start, no
   canvas is ever inserted and this is what remains.
--------------------------------------------------------------------------- */

.hero {
    /* White, keeping only a faint cool tint where the globe's bloom sits. */
    --hero-bg: #ffffff;
    --hero-bg-deep: #eef4f9;
    --hero-glow: rgba(133, 197, 224, 0.3);
    --hero-text: var(--color-text);
    /* Darker than --color-muted: this text can land on the lit side of the
       globe, where a lighter grey would wash out. */
    --hero-muted: #4b5563;

    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    /* The whole band — statement, pillars and rail — is meant to be taken in
       without scrolling, so the target is the viewport minus the bar above it,
       not a fixed height. min-height only sets the floor: the grid still
       grows past it when the copy needs more room, which is what keeps the band
       safe at large user font sizes.

       svh rather than vh so a mobile browser's collapsing URL bar cannot push
       the CTAs under the fold on first paint (vh resolves to the *largest*
       viewport there, i.e. the state where the bar is already hidden).

       The navbar now sits in normal flow above the hero (not overlaid via
       negative margin), so the fold the band targets is the viewport minus
       the bar's own height. */
    min-height: calc(100svh - var(--navbar-height));
    overflow: hidden;
    color: var(--hero-text);
    /* Soft cool bloom centred on the globe, settling into white at the edges.
       The globe centres on the fold-height backdrop below the navbar — a
       length, not a band percentage, because the band can outgrow the fold
       while the globe stays pinned to it. */
    --hero-globe-y: calc((100svh - var(--navbar-height) - 3rem) / 2);

    background:
        radial-gradient(48% 48% at 50% var(--hero-globe-y), rgba(133, 197, 224, 0.22), transparent 70%),
        radial-gradient(80% 80% at 50% var(--hero-globe-y), var(--hero-glow), transparent 72%),
        radial-gradient(120% 100% at 50% var(--hero-globe-y), var(--hero-bg) 35%, var(--hero-bg-deep) 100%);
}

/* Photo backdrop, one layer further back than everything else in the band:
   the earth canvas paints with alpha:true (see hero-earth.js), so this shows
   through behind the sphere itself, not just around it. z-index -3 keeps it
   under .hero-backdrop (-2) and the scrim (-1). */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background: url("../images/hero/hero-bg.2a1d9aa56387.png") center / cover no-repeat;
    opacity: 0.6;
    pointer-events: none;
}

/* The globe centres on the fold-height backdrop, so the copy actually occupies
   rather than on the taller full-bleed box — without this it sits too high on
   every display.

   The height is pinned to the first viewport rather than the band — a
   backdrop that tracked the band would enlarge and re-centre the globe
   whenever content growth stretched it — and stops 3rem short of the fold so
   the sphere's lower limb ends above the rail zone at the band's foot instead
   of running under the chips. */
.hero-backdrop {
    position: absolute;
    inset: 0 0 auto;
    height: calc(100svh - var(--navbar-height) - 3rem);
    z-index: -2;
    /* Own layer, and never a source of scrollbars if the canvas rounds up.
       Deliberately not `strict`: that adds size containment, which collapses
       this box to 0 height because `inset` leaves the height auto. */
    contain: layout paint;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero-backdrop.is-ready {
    opacity: 1;
}

.hero-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Scrim between the globe and the copy. The globe is centred, so this lightens
   the outer edges where the dark text sits and leaves the middle alone. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Below 768px there is no room to seat the copy beside the sphere, so the
       text lands directly on it and this veil has to be heavy enough to carry
       body-size type over the lit face. The desktop rule below trades it for a
       pair of edge gradients once the copy moves off the globe. */
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.66) 45%,
        rgba(255, 255, 255, 0.88) 100%
    );
}

/* .shell supplies width:100%, which .hero needs as a flex container — without
   it the box shrinks to fit its text and the copy drifts off the shell grid
   the navbar sits on.

   Mobile is a single column: the globe is behind the copy rather than beside
   it, so the three blocks simply stack in source order. The grid that opens a
   lane for the sphere starts at 1080px, below the "hero-grid" comment. */
.hero-inner {
    display: grid;
    /* An explicit minmax(0, 1fr) rather than the default `auto`: the rail is a
       nowrap flex row whose max-content is far wider than a phone, and an auto
       column is floored at that max-content, which stretches every row in the
       grid past the viewport. Flooring the column at 0 is what lets the rail
       scroll inside its own box instead of widening the band. */
    grid-template-columns: minmax(0, 1fr);
    /* Viewport-relative for the same reason as the desktop rule below: the band
       is sized to the fold, so its internal spacing has to give on a short
       window rather than pushing the CTAs out of view. */
    gap: clamp(1.75rem, 4vh, 2.5rem);
    /* Deeper on top than below: the eyebrow needs clear air under the navbar
       the band slides beneath, and the rail already earns its own room from the
       row gap. */
    padding-block: clamp(3rem, 8vh, 6rem) clamp(2rem, 5vh, 4rem);
}

.hero-eyebrow {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Three lines, split "One planet, / one shared conversation / about peace." The
   split is hard <br>s in the markup: a measure-based cap collapsed to two lines
   whenever the flank grew wider than the cap, and a cap tight enough to prevent
   that folded the middle line into four. No max-width for the same reason.
   `pretty` still guards the one case left — a viewport narrow enough to wrap a
   forced line anyway. */
.hero-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4.8vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}

.hero-lead {
    max-width: 44ch;
    margin: 1.25rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    font-family: var(--font-body);
    color: var(--hero-muted);
    text-wrap: pretty;
}

/* The two CTAs sit side by side wherever the column is wide enough and wrap to
   their own rows where it is not — which is most of the 1080–1600px range, once
   the globe's lane has taken the middle of the band. Wrapping is the right
   outcome there: the alternative is squeezing two uppercase labels into a
   width that would cost them their padding. align-items keeps a wrapped button
   at its natural width instead of stretching it across the column. */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 2rem;
}

.hero-button {
    display: inline-block;
    /* The horizontal padding is the first thing to give when the statement
       column is narrow (a 1280px laptop, where the globe's lane takes the
       middle): shrinking it keeps the two buttons on one row instead of
       stacking them, and it never falls below the comfortable tap target. */
    padding: 0.8125rem clamp(1rem, 2.2vw, 1.5rem);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    /* Squared-off rather than a pill: just enough radius to soften the corner. */
    border-radius: 0.25rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hero-button-primary {
    color: #ffffff;
    background: var(--color-accent);
}

.hero-button-primary:hover,
.hero-button-primary:focus-visible {
    background: var(--color-accent-dark);
}

.hero-button-ghost {
    color: var(--hero-text);
    border-color: rgba(26, 26, 26, 0.28);
}

.hero-button-ghost:hover,
.hero-button-ghost:focus-visible {
    border-color: var(--hero-text);
    background: rgba(26, 26, 26, 0.06);
}

/* The four philosophy themes. Reset the list here rather than globally — these
   are the only bullets on the page so far. */
.hero-pillars {
    display: grid;
    gap: 1.5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Two-up from the first size where two 20ch columns fit without hyphenating.
   auto-fit rather than a fixed count so it collapses back on its own. */
@media (min-width: 30rem) {
    .hero-pillars {
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    }
}

/* The rule is the pillar's only ornament: a hairline the eye can follow down
   the column, in the accent so the four read as one set. */
.hero-pillar {
    padding-left: 0.875rem;
    border-left: 2px solid rgba(29, 78, 216, 0.35);
}

.hero-pillar-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--color-accent-dark);
}

.hero-pillar-text {
    margin: 0.375rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--hero-muted);
    text-wrap: pretty;
}

/* Initiative rail. */
.hero-rail-label {
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hero-muted);
}

/* The chips wrap into as many rows as the width demands. This used to be a
   sideways scroller with the scrollbar hidden, which on a phone showed two of
   the six chips and no hint that the rest existed off-screen. Wrapping costs
   nothing now that the globe is pinned to the first viewport and the rail
   sits in its own row below the sphere. */
.hero-rail-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-rail-list a {
    display: block;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    color: var(--hero-text);
    border: 1px solid rgba(26, 26, 26, 0.16);
    border-radius: 999px;
    /* Frosted rather than solid white: the chips sit over the globe's bloom at
       the bottom of the band and should not read as a hard white bar. */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(4px);
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.hero-rail-list a:hover,
.hero-rail-list a:focus-visible {
    color: var(--color-accent-dark);
    border-color: var(--color-accent);
    background: #ffffff;
}

/* The tablet band: wide enough that the globe is a real presence, too narrow to
   seat copy on both sides of it. Everything therefore stays in a left column on
   the scrimmed side, and the sphere fills the space that leaves on the right.
   Without this the pillars run the full width and the middle one lands on the
   lit face, where no amount of scrim keeps 15px text readable. */
@media (min-width: 768px) and (max-width: 1079.98px) {
    .hero-statement,
    .hero-pillars,
    .hero-rail {
        max-width: min(60%, 34rem);
    }

    /* All the copy is on the left here, so the veil is too: a single left-to-
       right fade, rather than the symmetric pair the three-column layout needs. */
    .hero::after {
        background:
            linear-gradient(
                to right,
                rgba(255, 255, 255, 0.94) 0%,
                rgba(255, 255, 255, 0.82) 45%,
                rgba(255, 255, 255, 0) 78%
            ),
            linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, transparent 30%);
    }

    /* Two-up would push the second column back onto the globe, so the pillars
       stay in one column through this range. */
    .hero-pillars {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* The globe stays centred at every width (as in the reference), so the scrim
   lightens both edges instead, keeping the copy legible against the bloom.
   Symmetrical because the pillars sit opposite the statement: the middle band
   is left clear so the sphere itself is never veiled.

   Scoped to 1080px and up — the same breakpoint as the three-column grid, since
   this pair of edge fades only makes sense once there is copy on both edges.
   The 768–1080px band has its own single-sided scrim above. */
@media (min-width: 1080px) {
    .hero::after {
        background:
            linear-gradient(
                to right,
                rgba(255, 255, 255, 0.92) 0%,
                rgba(255, 255, 255, 0.6) 22%,
                rgba(255, 255, 255, 0) 38%,
                rgba(255, 255, 255, 0) 62%,
                rgba(255, 255, 255, 0.6) 78%,
                rgba(255, 255, 255, 0.92) 100%
            ),
            /* The rail crosses the globe's lower half, where the lit sphere is
               brightest; this fades the foot of the band back to white under
               it without touching the equator. */
            linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.6) 0%,
                transparent 30%,
                transparent 72%,
                rgba(255, 255, 255, 0.55) 100%
            );
    }
}

/* hero-grid. From here the band is wide enough to seat content on both sides of
   the sphere, so the single column becomes:

       statement | (globe) | pillars
       ----------- rail -------------

   The middle column is empty on purpose — it is the lane the globe occupies.
   The backdrop is a separate absolutely-positioned layer, so nothing in this
   grid can push it around; the column only reserves the space so the copy stops
   short of the sphere. 1fr on the flanks and a fixed-ish centre keeps the text
   columns growing with the viewport while the globe's lane stays proportional
   to how large hero-earth.js actually draws it (FRAMED_FILL of the tighter
   axis). Matched 1fr flanks also keep the sphere optically centred, which is
   what the renderer assumes when it frames the camera.

   1080px is the navbar's own breakpoint: below it the bar is a drawer and the
   hero is the stacked single column, so the two switch to their desktop form
   together rather than leaving one wide-but-collapsed state in between. */
@media (min-width: 1080px) {
    .hero-inner {
        /* minmax(0, 1fr) on the flanks for the same reason as the base rule:
           the rail spans all three columns, so an auto-floored track would let
           its max-content dictate the whole grid's width.

           The centre lane tracks vh as well as vw because that is what the
           renderer does: hero-earth.js frames the sphere to FRAMED_FILL of the
           *tighter* viewport axis, so on a short laptop window the globe is
           sized by the height and a vw-only lane would be narrower than the
           sphere it is meant to clear. Taking the larger of the two keeps the
           reserved space ahead of the drawn size in both regimes.

           The flanks come first, though: their minimum is what guarantees the
           headline and the two CTAs still fit, so the lane is capped at 42% and
           has no minimum of its own. It yields to the text rather than the
           other way round, and a globe grazed at its rim reads better than a
           stacked button pair or a title broken after one word.

           The 24rem floor is what the two CTAs need to share one row once
           their padding clamps down: below it they would wrap or spill into
           the globe's lane, and that pair staying intact is what the flank
           minimum exists to protect. It is deliberately no higher — the two
           floors plus the lane must fit a 1366px laptop, and a 28rem floor
           overflowed the grid there and clipped the pillars at the viewport
           edge. The headline's own three-line split is handled in the markup,
           not here, so the two flanks stay symmetrical and the sphere stays
           optically centred between them. */
        grid-template-columns:
            minmax(24rem, 1fr)
            min(max(28vw, 50vh), 42%)
            minmax(24rem, 1fr);
        /* Stretch to the band's full height and give the copy row all the
           slack: that pins the rail row to the band's foot — below the globe,
           whose backdrop stops 3rem short of the fold — instead of letting a
           centred content block float the rail up onto the sphere. */
        align-self: stretch;
        grid-template-rows: 1fr auto;
        align-items: center;
        /* Both the gap and the padding are viewport-relative so the band can
           absorb a short window by tightening rather than by overflowing: at
           1080x800 there is no room for a fixed 6rem top, 4.5rem gap and the
           rail all at once, and something has to give before the CTAs fall off
           the fold. The floors keep the rail clear of the globe's lower edge. */
        gap: clamp(2rem, 5vh, 4.5rem) 2.5rem;
        /* Top-heavy like the base rule: the statement should hang below the
           navbar with real air above the eyebrow, not press up against it. */
        padding-block: clamp(3.5rem, 9vh, 7rem) clamp(2rem, 5vh, 4rem);
    }

    .hero-statement {
        grid-column: 1;
        grid-row: 1;
    }

    /* nowrap keeps the forced three-line split: without it the column edge
       re-wraps the middle line and the title reads as four. The size is capped
       lower than the stacked layouts' — here the sphere sits beside the copy
       with nothing over it, so the longest line ("one shared conversation")
       has to end before the globe's rim rather than run across it. 2.4vw
       tracks the flank, whose width grows with the viewport. */
    .hero-title {
        white-space: nowrap;
        font-size: clamp(1.75rem, 2.4vw, 2.875rem);
        /* Above the lead and the CTAs, so a slight overhang past the column
           cannot swallow clicks on anything beside it. */
        position: relative;
    }

    /* The left column curves too, by the same logic as the pillars: the lead
       sits level with the globe's widest point, so it stops shorter than the
       title above it. Right-hand padding rather than a width, so the text still
       starts flush on the shell's left edge. */
    .hero-lead {
        padding-right: 1.5rem;
    }

    /* The CTAs are the exception to the curve: they are the band's primary
       action and keeping them on one row matters more than the silhouette, so
       they get the full column back. nowrap on the labels stops a narrow
       column from breaking "MAKE YOUR VOICE HEARD" mid-phrase instead. */
    .hero-actions {
        flex-wrap: nowrap;
    }

    .hero-button {
        white-space: nowrap;
    }

    .hero-pillars {
        grid-column: 3;
        grid-row: 1;
        /* One per row beside the globe: two columns here would crowd the
           sphere, and the four short blocks read better as a vertical list. */
        grid-template-columns: 1fr;
        gap: clamp(1rem, 2.4vh, 1.5rem);
        /* The pillars are supporting text, so they stay narrower than the
           statement column even when the viewport gives them room. The extra
           2.25rem over that 22rem is the deepest arc offset below: without it
           the pushed-out middle items would lose that width from their text and
           wrap a line earlier than their neighbours, which reads as ragged
           rather than curved. */
        max-width: calc(22rem + 2.25rem);
        margin-left: auto;
    }

    /* Curve the column around the sphere. This column sits to the RIGHT of the
       globe, so the sphere's edge reaches furthest toward it at the equator and
       falls away at the top and bottom. The concave arc that clears it is
       therefore the mirror of the globe's convex one: the middle pair is pushed
       out furthest, and the first and last items step back into the space the
       curve vacates. (Indenting the outer items instead — the intuitive read —
       bends the column the same way as the sphere and closes the gap exactly
       where it is already tightest.)

       Values are eyeballed against the rendered sphere rather than derived: the
       globe's drawn radius depends on the renderer's framing, so a fixed trig
       fit would be wrong at most sizes anyway. Margin rather than transform so
       the accent rule on each pillar moves with its text and the arc is visible
       in the rules themselves. */
    .hero-pillar:nth-child(1) { margin-left: 0; }
    .hero-pillar:nth-child(2) { margin-left: 1.75rem; }
    .hero-pillar:nth-child(3) { margin-left: 2.25rem; }
    .hero-pillar:nth-child(4) { margin-left: 0.75rem; }

    /* Spanning all three columns puts the rail under the globe as well as the
       copy, which is what closes the composition around the sphere. */
    .hero-rail {
        grid-column: 1 / -1;
        /* The bottom-pinned row (see grid-template-rows above): the backdrop's
           3rem shortfall plus the band's bottom padding is what keeps the
           sphere's lower limb above these chips. */
        grid-row: 2;
    }

    .hero-rail-label {
        text-align: center;
    }

    /* Centred under the globe; the stacked layouts keep the chips flush left
       with the copy above them. */
    .hero-rail-list {
        justify-content: center;
    }
}

/* Very wide screens: the flanks stop growing so the text does not drift to the
   far edges away from the globe it belongs to. */
@media (min-width: 100rem) {
    .hero-inner {
        grid-template-columns: minmax(0, 28rem) minmax(22rem, 38rem) minmax(0, 28rem);
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-backdrop,
    .hero-button {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   The Challenge (partials/the-challenge.html)
   The one inverted band on the page: dark navy, light text. The tonal break
   from the white sections either side of it is deliberate — it marks this as
   the problem statement, ahead of "Why World Peace Board" answering it back
   on the light background. No imagery; the four-item grid is stat-style
   typography rather than prose paragraphs, which is what keeps it visually
   distinct from the two sections above.
--------------------------------------------------------------------------- */

.the-challenge {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding-block: clamp(3.5rem, 9vh, 6rem);
    color: #ffffff;
    background: var(--color-accent-dark);
    overflow: hidden;
}

/* Scroll pause: these are the sections the page snaps to on the way past,
   so a fast scroll still lands on the full "cost of conflict" band and the
   global-work carousel instead of skimming through them. scroll-snap-stop:
   always forces that landing even on a fling that would otherwise sail past
   a proximity snap point. proximity (not mandatory) on the container keeps
   every other section's scrolling unaffected. Reduced-motion users get no
   snap at all, since scroll-snap moves the page for them regardless of how
   they scrolled.

   global-commitments is deliberately excluded: GSAP ScrollTrigger pins it
   for its own scroll distance (main.js), and a native y-axis snap point
   landing mid-pin fights that pin's own scroll-position bookkeeping. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-snap-type: y proximity;
    }

    .the-challenge,
    .our-global-work {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

.the-challenge-inner {
    width: 100%;
}

.the-challenge-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.the-challenge-slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.the-challenge-slide.is-active {
    opacity: 1;
}

/* Darkens and evens out the four photos so the white copy and the
   accent-dark brand tone both stay legible no matter which slide is up. */
.the-challenge-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0.86));
}

.the-challenge-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    /* Lighter than the accent used on white — the dark-blue token reads as
       near-invisible against its own background. */
    color: #93c5fd;
}

.the-challenge-title {
    margin: 0;
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    color: #ffffff;
}

.the-challenge-lead {
    max-width: 52ch;
    margin: 1.25rem 0 0;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    text-wrap: pretty;
}

.the-challenge-stats-row {
    display: grid;
    gap: 0.875rem;
    margin: clamp(1.25rem, 3vh, 1.75rem) 0 0;
}

@media (min-width: 64rem) {
    .the-challenge-stats-row {
        grid-template-columns: minmax(0, 44rem) minmax(0, 16rem);
        justify-content: space-between;
        align-items: stretch;
        gap: 3rem;
    }
}

.the-challenge-stats {
    display: grid;
    gap: 0.875rem;
    margin: 0;
    padding: 0.875rem;
    list-style: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.625rem;
}

@media (min-width: 30rem) {
    .the-challenge-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.the-challenge-stat-top {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.the-challenge-stat-icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: #93c5fd;
}

.the-challenge-stat-value {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    color: #ffffff;
}

.the-challenge-stat-label {
    margin: 0.15rem 0 0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.the-challenge-stat-source {
    margin: 0.1rem 0 0;
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.55);
}

/* Same tinted-callout pattern as why-peaceboard-quote, translated to this
   section's dark palette. */
.the-challenge-quote {
    margin: 0;
    padding: 0.875rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.625rem;
}

.the-challenge-quote-mark {
    display: block;
    width: 1rem;
    height: 1rem;
    margin-bottom: 0.25rem;
    color: #93c5fd;
}

.the-challenge-quote-text {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #ffffff;
    text-wrap: pretty;
}

.the-challenge-quote-cite {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.625rem;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #93c5fd;
}

.the-challenge-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin: clamp(1.5rem, 4vh, 2.25rem) 0 0;
    padding: 0;
    list-style: none;
}

/* A hairline rather than the accent-blue one the light sections use — on
   this background the plain light rule is what stays legible without
   competing with the eyebrow's blue. The active item (its photo is the one
   showing behind the section) brightens to the same blue as the eyebrow, so
   the slideshow and the copy always point at each other. */
.the-challenge-item {
    padding-top: 1rem;
    border-top: 2px solid rgba(255, 255, 255, 0.28);
    transition: border-color 0.6s ease, opacity 0.6s ease;
    outline-offset: 6px;
}

.the-challenge-item:focus-visible {
    outline: 2px solid #93c5fd;
}

.the-challenge-item.is-active {
    border-top-color: #93c5fd;
}

[data-challenge-slideshow] .the-challenge-item:not(.is-active) {
    opacity: 0.55;
}

.the-challenge-item-icon {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.78);
    transition: color 0.6s ease;
}

.the-challenge-item.is-active .the-challenge-item-icon {
    color: #93c5fd;
}

.the-challenge-item-title {
    margin: 0;
    font-size: 1.125rem;
    color: #ffffff;
    transition: color 0.6s ease;
}

.the-challenge-item.is-active .the-challenge-item-title {
    color: #93c5fd;
}

.the-challenge-item-text {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   Why World Peace Board (partials/why-peaceboard.html)
   Back on light, answering the dark Challenge band above it. Redesigned as
   an overlapping photo collage beside the principles list — collage on the
   left (desktop), stacked above the copy on mobile/tablet. The six photos
   are dark/moody, so each tile carries its own shadow and hairline border
   to stay legible sitting directly on the light section background rather
   than needing a dark backing panel.
--------------------------------------------------------------------------- */

.why-peaceboard {
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding-block: clamp(1.75rem, 4.5vh, 3rem);
    border-top: 1px solid var(--color-border);
}

.why-peaceboard-inner {
    width: 100%;
}

.why-peaceboard-layout {
    display: grid;
    gap: clamp(2rem, 6vh, 3rem) clamp(2rem, 5vw, 3rem);
}

.why-peaceboard-collage {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    gap: 0.5rem;
    aspect-ratio: 4 / 5;
    max-width: 20rem;
    margin-inline: auto;
}

@media (min-width: 30rem) {
    .why-peaceboard-collage {
        max-width: 24rem;
    }
}

@media (min-width: 60rem) {
    .why-peaceboard-collage {
        max-width: 29rem;
        gap: 0.5rem;
    }
}

.why-peaceboard-collage-tile {
    position: relative;
    overflow: hidden;
    border-radius: 0.25rem;
    border: 1px solid var(--color-border);
    background: #111827;
    transition: box-shadow 0.25s ease, z-index 0.25s ease;
}

.why-peaceboard-collage-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.why-peaceboard-collage-caption {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    padding: 1.75rem 0.625rem 0.5625rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0) 85%);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.why-peaceboard-collage-caption-title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.25;
    color: #ffffff;
}

.why-peaceboard-collage-caption-text {
    font-size: 0.625rem;
    font-weight: 400;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.78);
}

.why-peaceboard-collage-tile:hover {
    z-index: 20;
    box-shadow: 0 0 0 2px var(--color-accent);
}

.why-peaceboard-collage-tile--hands {
    grid-column: 1 / 8;
    grid-row: 1 / 8;
}

.why-peaceboard-collage-tile--justice {
    grid-column: 8 / 13;
    grid-row: 1 / 5;
}

.why-peaceboard-collage-tile--flags {
    grid-column: 8 / 13;
    grid-row: 5 / 8;
}

.why-peaceboard-collage-tile--map {
    grid-column: 1 / 5;
    grid-row: 8 / 13;
}

.why-peaceboard-collage-tile--chairs {
    grid-column: 5 / 9;
    grid-row: 8 / 13;
}

.why-peaceboard-collage-tile--seedling {
    grid-column: 9 / 13;
    grid-row: 8 / 13;
}

/* Hover a principle on the right, light up every tile relevant to it — pure
   CSS via :has(), matching data-relates (on the <li>) to data-topics (on the
   tile) one keyword at a time. No JS: the mapping is many-to-many by design
   (a tile can back more than one principle, a principle can light up more
   than one tile), which is easier to keep straight as parallel attribute
   lists than as a JS lookup table. */
.why-peaceboard-layout:has(.why-peaceboard-item[data-relates="dialogue"]:hover) .why-peaceboard-collage-tile[data-topics~="dialogue"],
.why-peaceboard-layout:has(.why-peaceboard-item[data-relates="leadership"]:hover) .why-peaceboard-collage-tile[data-topics~="leadership"],
.why-peaceboard-layout:has(.why-peaceboard-item[data-relates="accountability"]:hover) .why-peaceboard-collage-tile[data-topics~="accountability"],
.why-peaceboard-layout:has(.why-peaceboard-item[data-relates="cooperation"]:hover) .why-peaceboard-collage-tile[data-topics~="cooperation"],
.why-peaceboard-layout:has(.why-peaceboard-item[data-relates="dignity"]:hover) .why-peaceboard-collage-tile[data-topics~="dignity"],
.why-peaceboard-layout:has(.why-peaceboard-item[data-relates="justice"]:hover) .why-peaceboard-collage-tile[data-topics~="justice"],
.why-peaceboard-layout:has(.why-peaceboard-item[data-relates="sovereignty"]:hover) .why-peaceboard-collage-tile[data-topics~="sovereignty"],
.why-peaceboard-layout:has(.why-peaceboard-item[data-relates="future"]:hover) .why-peaceboard-collage-tile[data-topics~="future"] {
    z-index: 20;
    box-shadow: 0 0 0 2px var(--color-accent);
}

.why-peaceboard-layout:has(.why-peaceboard-item[data-relates="dialogue"]:hover) .why-peaceboard-collage-tile[data-topics~="dialogue"] .why-peaceboard-collage-caption,
.why-peaceboard-layout:has(.why-peaceboard-item[data-relates="leadership"]:hover) .why-peaceboard-collage-tile[data-topics~="leadership"] .why-peaceboard-collage-caption,
.why-peaceboard-layout:has(.why-peaceboard-item[data-relates="accountability"]:hover) .why-peaceboard-collage-tile[data-topics~="accountability"] .why-peaceboard-collage-caption,
.why-peaceboard-layout:has(.why-peaceboard-item[data-relates="cooperation"]:hover) .why-peaceboard-collage-tile[data-topics~="cooperation"] .why-peaceboard-collage-caption,
.why-peaceboard-layout:has(.why-peaceboard-item[data-relates="dignity"]:hover) .why-peaceboard-collage-tile[data-topics~="dignity"] .why-peaceboard-collage-caption,
.why-peaceboard-layout:has(.why-peaceboard-item[data-relates="justice"]:hover) .why-peaceboard-collage-tile[data-topics~="justice"] .why-peaceboard-collage-caption,
.why-peaceboard-layout:has(.why-peaceboard-item[data-relates="sovereignty"]:hover) .why-peaceboard-collage-tile[data-topics~="sovereignty"] .why-peaceboard-collage-caption,
.why-peaceboard-layout:has(.why-peaceboard-item[data-relates="future"]:hover) .why-peaceboard-collage-tile[data-topics~="future"] .why-peaceboard-collage-caption {
    opacity: 1;
    transform: translateY(0);
}

/* Captions are visible by default; hovering a principle hides captions on
   every tile it doesn't relate to (the rules above re-show the relevant
   ones, and win on specificity). */
.why-peaceboard-layout:has(.why-peaceboard-item:hover) .why-peaceboard-collage-caption {
    opacity: 0;
}

.why-peaceboard-copy {
    min-width: 0;
}

.why-peaceboard-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.why-peaceboard-eyebrow::before {
    content: "";
    flex: none;
    width: 3px;
    height: 0.875rem;
    background: var(--color-accent);
}

.why-peaceboard-title {
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
}

.why-peaceboard-lead {
    max-width: 52ch;
    margin: 0.625rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-muted);
    text-wrap: pretty;
}

.why-peaceboard-list {
    display: grid;
    gap: 0;
    margin: clamp(0.875rem, 2.5vh, 1.25rem) 0 0;
    padding: 0;
    list-style: none;
}

.why-peaceboard-item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.875rem;
    padding-block: 0.625rem;
    border-top: 1px solid var(--color-border);
}

/* Top two points never get a line above them — the divider already closes
   off the lead paragraph, and on desktop these two sit side by side as the
   first row anyway. */
.why-peaceboard-item:nth-child(-n + 2) {
    padding-top: 0;
    border-top: none;
}

.why-peaceboard-item-icon-badge {
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(29, 78, 216, 0.1);
}

.why-peaceboard-item-icon {
    width: 1.0625rem;
    height: 1.0625rem;
    color: var(--color-accent);
}

.why-peaceboard-item-title {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.25;
    color: var(--color-text);
}

.why-peaceboard-item-text {
    grid-column: 2;
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-muted);
    text-wrap: pretty;
}

/* Closing statement — a tinted callout rather than another list row, so it
   reads as the section's takeaway instead of a ninth principle. */
.why-peaceboard-quote {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    margin-top: clamp(0.875rem, 2.5vh, 1.25rem);
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    background: rgba(29, 78, 216, 0.06);
}

.why-peaceboard-quote-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: #ffffff;
}

.why-peaceboard-quote-icon img {
    width: 1.375rem;
    height: 1.375rem;
    object-fit: contain;
}

.why-peaceboard-quote-text {
    position: relative;
    z-index: 1;
    max-width: 34ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-text);
}

.why-peaceboard-quote-decoration {
    position: absolute;
    right: -0.5rem;
    bottom: -1rem;
    width: 4rem;
    height: 4rem;
    object-fit: contain;
    opacity: 0.28;
    pointer-events: none;
}

@media (min-width: 60rem) {
    .why-peaceboard-layout {
        grid-template-columns: minmax(0, 29rem) minmax(0, 1fr);
        align-items: center;
    }

    .why-peaceboard-collage {
        margin-inline: 0;
    }

    .why-peaceboard-list {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2rem;
    }
}

/* ---------------------------------------------------------------------------
   Mission, Vision & Leadership (partials/mission-vision-leadership.html)
   Former vision.html and peace-is-possible.html combined into a single
   one-screen band: statements on the left, leadership on the right, split
   at 60rem. min-height: 100svh + flex centring is the same full-screen
   pattern the-challenge/our-global-work/citizen-voice use, so this reads as
   one deliberate screen rather than two stacked scroll-height sections.
   Below 60rem there isn't room for two columns without shrinking type past
   readable, so it stacks and scrolls like any other mobile section.
--------------------------------------------------------------------------- */

.mission-vision {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding-block: clamp(2.5rem, 6vh, 4rem);
    border-top: 1px solid var(--color-border);
    overflow: hidden;
    background: url("../images/leadership/mission-vision-bg.037f53e11e41.png") center / cover no-repeat;
}

.mission-vision-inner {
    width: 100%;
}

.mission-vision-grid {
    display: grid;
    gap: clamp(2.5rem, 5vh, 3rem);
}

@media (min-width: 60rem) {
    .mission-vision-grid {
        /* Statements stay a fixed, readable measure; leadership takes
           whatever's left so the portraits have real room to be big. */
        grid-template-columns: minmax(14rem, 20rem) 1fr;
        gap: 4rem;
    }

    .mission-vision-col--leadership {
        padding-left: 4rem;
        border-left: 1px solid var(--color-border);
        /* Photos are sized in cqw below so they scale off this column's own
           width, not the full viewport. That's what keeps the empty space
           to the right of Kanethara's portrait matching the shell gutter on
           the left, instead of ballooning on wide screens. */
        container-type: inline-size;
    }
}

.mission-vision-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.mission-vision-eyebrow--stacked {
    margin-top: 1.5rem;
}

/* A <p>, not a heading — this is a statement to be read, not a label for the
   section beneath it, so it takes the serif at heading scale without
   claiming the outline level. */
.mission-vision-statement {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--color-text);
    text-wrap: pretty;
}

.mission-vision-text {
    max-width: 42ch;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-muted);
    text-wrap: pretty;
}

.mission-vision-note {
    margin: 1.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-muted);
}

/* Bottom-aligned so the two captions land on one line even though a wide
   landscape photo and a tall portrait don't share a height above them —
   the mismatch is the point, not a bug to normalise away. */
.mission-vision-people {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.mission-vision-person {
    display: flex;
    flex-direction: column;
}

/* No shared crop box, no object-fit: each photo shows in full at its own
   native ratio (Chauhan wide, Kanethara tall) — width/height: auto plus a
   per-person max-width is what actually sizes it; the <img width height>
   attributes only seed the aspect ratio pre-load to avoid layout shift. */
.mission-vision-avatar {
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 0.875rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-border);
}

.mission-vision-person--chauhan .mission-vision-avatar {
    max-width: clamp(16rem, 58cqw, 40rem);
}

.mission-vision-person--kanethara .mission-vision-avatar {
    max-width: clamp(10rem, 36cqw, 26rem);
}

.mission-vision-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.mission-vision-role {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-muted);
}

/* Only shown when the section is used on the leadership page itself
   (detailed=True) — the home page teaser stays to name + role only. */
.mission-vision-detail {
    max-width: 28ch;
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-muted);
}

.mission-vision-link {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-accent);
    text-decoration: none;
}

.mission-vision-link:hover,
.mission-vision-link:focus-visible {
    color: var(--color-accent-dark);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Peace Ambassadors (templates/partials/peace-ambassadors.html)
   Leadership page only, directly under the Chairman/Secretary General
   section: a single rounded, tinted card (same visual language as the
   governance ".content-note" below it) with Divya's introduction on the
   left, her portrait centred and full-height, and the Red Hands on Earth
   movement she represents as Peace Ambassador on the right.
--------------------------------------------------------------------------- */

.peace-ambassadors {
    padding-block: clamp(2rem, 5vh, 3.5rem);
}

.peace-ambassadors-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.75rem, 4vw, 3rem);
    background: linear-gradient(155deg, #eff6ff, #f8fafc);
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
}

.peace-ambassadors-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2rem;
}

@media (min-width: 60rem) {
    .peace-ambassadors-grid {
        grid-template-columns: minmax(14rem, 1fr) minmax(16rem, 1.3fr) minmax(12rem, 0.8fr);
        align-items: stretch;
        gap: 3rem;
    }
}

.peace-ambassadors-label {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1.5rem;
}

.peace-ambassadors-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex: none;
    background: #dbeafe;
    color: var(--color-accent-dark);
    border-radius: 50%;
}

.peace-ambassadors-icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

.peace-ambassadors-eyebrow {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
}

.peace-ambassadors-eyebrow-divider {
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-top: 0.5rem;
    background: var(--color-accent);
    border-radius: 2px;
}

.peace-ambassadors-lead {
    max-width: 34ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-text);
    text-wrap: pretty;
}

.peace-ambassadors-highlight {
    color: var(--color-accent);
}

.peace-ambassadors-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.75rem 0;
    color: var(--color-accent);
}

.peace-ambassadors-divider span {
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.peace-ambassadors-divider svg {
    width: 1rem;
    height: 1rem;
    flex: none;
}

.peace-ambassadors-person {
    padding-left: 1rem;
    border-left: 3px solid var(--color-accent);
}

.peace-ambassadors-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text);
}

.peace-ambassadors-role {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-muted);
}

.peace-ambassadors-col--photo {
    min-height: 16rem;
}

.peace-ambassadors-avatar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
    border: 1px solid var(--color-border);
}

.peace-ambassadors-movement-image {
    display: block;
    width: 100%;
    height: 9rem;
    margin: 0 0 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-border);
    object-fit: cover;
}

.peace-ambassadors-movement-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-muted);
    text-wrap: pretty;
}

.peace-ambassadors-link {
    display: inline-block;
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-accent);
    text-decoration: none;
}

.peace-ambassadors-link:hover,
.peace-ambassadors-link:focus-visible {
    color: var(--color-accent-dark);
    text-decoration: underline;
}

.peace-ambassadors-decor {
    position: absolute;
    right: -2rem;
    bottom: -2rem;
    width: 11rem;
    height: 11rem;
    color: var(--color-accent);
    opacity: 0.08;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Page brand (pages/citizen-voice.html)
   Standalone pages that skip the full navbar still need a way back home:
   just the emblem, fixed top-left, over whatever the page background is.
--------------------------------------------------------------------------- */

.page-brand {
    position: fixed;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 50;
    display: block;
    line-height: 0;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.page-brand img {
    width: clamp(2.75rem, 6vw, 3.5rem);
    height: auto;
}

/* ---------------------------------------------------------------------------
   Citizen Voice preloader (templates/pages/citizen-voice.html)
   A short video plays full-bleed on load. main.js then adds is-text, which:
   fades the video out, fades caption-bg.png up from below as the new
   backdrop, and (once that backdrop is under way) pops the headline in
   word by word via the --i custom property driving each word's animation-
   delay. is-hidden then fades the whole thing away to reveal the voting
   page underneath, which is already rendered the whole time.
   prefers-reduced-motion skips the overlay outright.
   --------------------------------------------------------------------- */

.voice-preloader {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #05070d;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.voice-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.voice-preloader-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity 0.6s ease;
}

.voice-preloader.is-text .voice-preloader-video {
    opacity: 0;
}

.voice-preloader-caption-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #05070d url("../images/hero/caption-bg.4177b046b6c4.png") center / cover no-repeat;
    opacity: 0;
    transform: translateY(2.5rem);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.voice-preloader.is-text .voice-preloader-caption-bg {
    opacity: 1;
    transform: translateY(0);
}

.voice-preloader-caption {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 36rem;
    padding: 0 1.5rem;
}

.voice-preloader-headline {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 9vw, 5.75rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-align: center;
    color: #ffffff;
}

.voice-preloader-line {
    display: block;
}

.voice-preloader-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.5em) scale(0.92);
    filter: blur(8px);
}

.voice-preloader.is-text .voice-preloader-word {
    animation: voice-preloader-word-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 0.12s + 0.4s);
}

@keyframes voice-preloader-word-in {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.voice-preloader-subline {
    margin: 0;
    font-size: clamp(1rem, 2.4vw, 1.25rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    opacity: 0;
    transform: translateY(0.6rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: 1.1s;
}

.voice-preloader.is-text .voice-preloader-subline {
    opacity: 1;
    transform: translateY(0);
}

.voice-preloader-skip {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 3;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.voice-preloader-skip:hover,
.voice-preloader-skip:focus-visible {
    color: #ffffff;
    border-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .voice-preloader {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Global Citizen Voice (partials/citizen-voice.html)
   A live poll carousel: one card per PollQuestion, native CSS scroll-snap
   for paging (no transform math), swapped for a percentage-bar results view
   once the visitor's session has voted on that question.

   Third dark-inverted band on the page (after The Challenge and Global
   Commitments), this one carrying voting-page-bg.png: a navy illustration
   of a crowd either side with a plain dark gap down the middle, which is
   exactly where .citizen-voice-inner's centred column lands. The card uses
   the same translucent "glass on photo" treatment as Global Commitments'
   dot rail rather than a solid fill, so the illustration still reads
   through it.

   One-screen band like why-peaceboard/mission-vision/global-dialogue:
   min-height: 100svh + flex centring, with the carousel's own vertical
   rhythm kept tight enough that the whole card and its nav sit inside the
   fold rather than pushing it into a scroll.
--------------------------------------------------------------------------- */

.citizen-voice {
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding-block: clamp(2rem, 6vh, 4rem);
    color: #ffffff;
    background: #060a1f url("../images/hero/voting-page-bg.549df2ace912.png") center / cover no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.citizen-voice-inner {
    width: 100%;
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
}

.citizen-voice-eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #93c5fd;
}

.citizen-voice-title {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #ffffff;
}

.citizen-voice-lead {
    max-width: 40ch;
    margin: 0.75rem auto 0;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    text-wrap: pretty;
}

.citizen-voice-empty {
    margin: clamp(1.5rem, 4vh, 2.5rem) 0 0;
    color: rgba(255, 255, 255, 0.78);
}

/* Entrance: the eyebrow/title/lead and the carousel box each slide up and
   fade in, one after another, once main.js adds is-revealed to the section
   (on the standalone page that's timed to the preloader clearing; embedded
   on the home page it fires the first time the section scrolls into view).
   prefers-reduced-motion skips straight to the settled state (main.js adds
   the class immediately rather than dropping it, so no-JS/no-observer
   visitors still see the content). */
.citizen-voice-eyebrow,
.citizen-voice-title,
.citizen-voice-lead,
.citizen-voice-carousel {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.citizen-voice.is-revealed .citizen-voice-eyebrow {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.05s;
}

.citizen-voice.is-revealed .citizen-voice-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
}

.citizen-voice.is-revealed .citizen-voice-lead {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.25s;
}

.citizen-voice.is-revealed .citizen-voice-carousel {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.35s;
}

@media (prefers-reduced-motion: reduce) {
    .citizen-voice-eyebrow,
    .citizen-voice-title,
    .citizen-voice-lead,
    .citizen-voice-carousel {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.citizen-voice-carousel {
    margin: clamp(1.5rem, 4vh, 2.25rem) 0 0;
}

.citizen-voice-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.citizen-voice-track::-webkit-scrollbar {
    display: none;
}

.citizen-voice-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0.5rem;
    /* Lighter and bluer than the backdrop's own near-black navy, plus a
       real drop shadow, so the card lifts off the illustration behind it
       instead of blending into it. */
    background: rgba(35, 48, 97, 0.78);
    box-shadow:
        0 24px 60px rgba(2, 6, 20, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    text-align: left;
    /* Each card scales/fades slightly while off-centre, so paging with the
       prev/next buttons (or auto-advance) reads as one card sliding out
       and the next sliding into focus, not a flat snap-scroll. main.js
       toggles is-active off scroll position (see updatePosition). */
    opacity: 0.55;
    transform: scale(0.94);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.citizen-voice-card.is-active {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .citizen-voice-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.citizen-voice-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.citizen-voice-nav-btn {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.25rem;
    line-height: 1;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.citizen-voice-nav-btn:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
}

.citizen-voice-progress {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.citizen-voice-home-link {
    display: block;
    margin-top: 2rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.citizen-voice-home-link:hover,
.citizen-voice-home-link:focus-visible {
    opacity: 0.7;
}

.citizen-voice-question {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
    text-wrap: pretty;
}

.citizen-voice-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.125rem;
}

.citizen-voice-options[hidden] {
    display: none;
}

/* Same visual language as .final-cta-button-ghost — white on a dark band. */
.citizen-voice-option {
    padding: 0.75rem 1.5rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.citizen-voice-option:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.citizen-voice-option.is-selected {
    color: #060a1f;
    background: #ffffff;
    border-color: #ffffff;
}

.citizen-voice-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.7);
}

.citizen-voice-countdown {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #60a5fa;
}

.citizen-voice-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    flex: none;
    border-radius: 50%;
    background: #60a5fa;
}

.citizen-voice-results {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.125rem;
}

.citizen-voice-results[hidden] {
    display: none;
}

.citizen-voice-change-vote {
    align-self: flex-start;
    margin-top: 0.25rem;
    padding: 0;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    border: none;
    text-decoration: underline;
    cursor: pointer;
}

.citizen-voice-change-vote:hover {
    color: #ffffff;
}

.citizen-voice-result-row.is-selected .citizen-voice-result-label {
    color: #93c5fd;
}

.citizen-voice-result-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
}

.citizen-voice-result-bar {
    margin-top: 0.375rem;
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}

.citizen-voice-result-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #60a5fa;
}

.citizen-voice-verify {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    text-align: center;
}

.citizen-voice-verify[hidden] {
    display: none;
}

.citizen-voice-verify-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: #ffffff;
}

.citizen-voice-verify-lead {
    max-width: 38ch;
    margin: 0.375rem auto 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}

.citizen-voice-details-form,
.citizen-voice-otp-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin: 0.875rem 0 0;
}

.citizen-voice-details-form[hidden],
.citizen-voice-otp-form[hidden] {
    display: none;
}

.citizen-voice-turnstile {
    display: flex;
    justify-content: center;
    margin: 0.875rem 0 0;
}

.citizen-voice-verify-input {
    flex: 1 1 12rem;
    min-width: 0;
    padding: 0.625rem 0.875rem;
    font: inherit;
    font-size: 0.8125rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0.25rem;
}

.citizen-voice-verify-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.citizen-voice-verify-button {
    padding: 0.625rem 1.25rem;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #060a1f;
    white-space: nowrap;
    background: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.citizen-voice-verify-button:hover {
    opacity: 0.88;
}

.citizen-voice-verify-resend {
    padding: 0.625rem 0.5rem;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    border: none;
    text-decoration: underline;
    cursor: pointer;
}

.citizen-voice-verify-button.is-loading,
.citizen-voice-verify-resend.is-loading {
    position: relative;
    color: transparent;
    cursor: not-allowed;
    pointer-events: none;
}

.citizen-voice-verify-button.is-loading::after,
.citizen-voice-verify-resend.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.875rem;
    height: 0.875rem;
    margin: -0.4375rem 0 0 -0.4375rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: citizen-voice-btn-spin 0.6s linear infinite;
}

.citizen-voice-verify-button.is-loading::after {
    border-color: rgba(6, 10, 31, 0.25);
    border-top-color: #060a1f;
}

@keyframes citizen-voice-btn-spin {
    to {
        transform: rotate(360deg);
    }
}

.citizen-voice-verify-status {
    min-height: 1.2em;
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.citizen-voice-verify-status.is-error {
    color: #fca5a5;
}

.citizen-voice-thanks {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    animation: citizen-voice-thanks-in 0.6s ease both;
}

.citizen-voice-thanks[hidden] {
    display: none;
}

.citizen-voice-thanks-mark {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0;
    font-size: 1.5rem;
    color: #ffffff;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.9), rgba(96, 165, 250, 0.35));
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(96, 165, 250, 0.14);
}

.citizen-voice-thanks-title {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #ffffff;
}

.citizen-voice-thanks-lead {
    max-width: 40ch;
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    text-wrap: pretty;
}

.citizen-voice-thanks-note {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

.citizen-voice-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    width: 100%;
    margin-top: 0.25rem;
}

.citizen-voice-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.citizen-voice-stat-value {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: proportional-nums;
}

.citizen-voice-stat-label {
    margin: 0;
    max-width: 16rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

.citizen-voice-thanks-results-title {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.citizen-voice-leaderboard {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    width: 100%;
    max-width: 28rem;
    text-align: left;
}

.citizen-voice-leaderboard-row .citizen-voice-result-label {
    font-size: 0.8125rem;
    font-weight: 600;
    gap: 1rem;
}

.citizen-voice-leaderboard-row .citizen-voice-result-label span:first-child {
    flex: 1;
}

.citizen-voice-result-you {
    font-weight: 600;
    color: #93c5fd;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
}

.citizen-voice-result-votes {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

/* Bars in the results/leaderboard reveal are an emphasis chart: the
   voter's own pick carries the accent hue, every other option recedes to
   gray so "what I picked" reads at a glance against "everyone else". The
   per-poll voting card elsewhere on this page keeps its own all-accent
   bars unchanged, this only applies to the post-vote reveal. */
.citizen-voice-thanks-result .citizen-voice-result-bar span {
    background: rgba(255, 255, 255, 0.32);
    transition: width 0.6s ease;
}

.citizen-voice-thanks-result .citizen-voice-result-row.is-selected .citizen-voice-result-bar span {
    background: #60a5fa;
}

.citizen-voice-thanks-results {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-width: 28rem;
    text-align: left;
}

.citizen-voice-thanks-results[hidden] {
    display: none;
}

.citizen-voice-thanks-result {
    padding: 1rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
}

.citizen-voice-thanks-result .citizen-voice-question {
    font-size: 0.95rem;
}

.citizen-voice-thanks-result .citizen-voice-results {
    margin-top: 0.625rem;
}

@keyframes citizen-voice-thanks-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .citizen-voice-thanks {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
   Global Dialogue (partials/global-dialogue.html)
   Proof of real activity, and a one-screen band like why-peaceboard/mission-
   vision/global-governance: min-height: 100svh + flex centring, with gaps
   and type sizes leaning on clamp()s so the fold fits without scroll.

   The stat row reuses the-challenge's own grammar (icon, serif number,
   label, small source line, tinted bordered card) for the four facts that
   are genuinely numbers, dates, attendance, theme count, sponsorship
   tiers, so this section reads as the same family as the rest of the page
   instead of a form. Everything else (venue, organiser, format, the full
   theme list, the Raisina cross-link) stays the section's original plain
   fact list: thin rule between rows, small caps label above a value, the
   same rhythm it always had, just tightened to fit beside the new stats.

   Same image+copy mechanics as worlds-voice/why-peaceboard, with the media
   on the right again: the third photo section on the page alternates back
   to the same side as worlds-voice rather than continuing why-peaceboard's.
--------------------------------------------------------------------------- */

.global-dialogue {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(4, 25, 75, 0.97), rgba(7, 62, 158, 0.95)), url("../images/hero/hero-background.317fad64a243.jpg") center / cover no-repeat;
    border-top: 1px solid var(--color-border);
}

.global-dialogue-inner {
    display: grid;
    width: 100%;
    gap: 2rem;
    align-items: start;
}

.global-dialogue-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.global-dialogue-eyebrow {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #93c5fd;
}

.global-dialogue-title {
    max-width: 12ch;
    margin: 0.75rem 0 0;
    color: #ffffff;
    font-size: clamp(2.6rem, 4.4vw, 4.4rem);
    line-height: 1.02;
}

.global-dialogue-theme {
    max-width: 44ch;
    margin: 0.65rem 0 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
    text-wrap: pretty;
}

/* Same card language as .the-challenge-stats, translated to this section's
   light palette: icon, serif value, small label, smaller source line. */
.global-dialogue-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0.75rem;
    list-style: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 1.25rem;
}

@media (min-width: 30rem) {
    .global-dialogue-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.global-dialogue-stat {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 0.7rem;
}

.global-dialogue-stat + .global-dialogue-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.global-dialogue-stat-icon {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0.42rem;
    box-sizing: content-box;
    color: #fff;
    background: linear-gradient(135deg, #04194b, #073e9e);
    border-radius: 50%;
}

.global-dialogue-stat-text {
    min-width: 0;
}

.global-dialogue-stat-value {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.1;
    font-weight: 700;
    color: #ffffff;
}

.global-dialogue-stat-label {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffffff;
}

.global-dialogue-stat-source {
    margin: 0.05rem 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.global-dialogue-facts {
    display: grid;
    gap: 0;
    margin: 0;
}

.global-dialogue-fact {
    display: grid;
    grid-template-columns: auto minmax(8rem, 0.72fr) minmax(0, 1.8fr);
    align-items: center;
    gap: 0.85rem 1rem;
    padding: 0.72rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.global-dialogue-fact-icon {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0.55rem;
    box-sizing: content-box;
    color: #fff;
    background: linear-gradient(135deg, #04194b, #073e9e);
    border-radius: 0.6rem;
}

.global-dialogue-fact dt {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #93c5fd;
}

.global-dialogue-fact dd {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    text-wrap: pretty;
}

.global-dialogue-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.global-dialogue-media {
    margin: 0;
}

.global-dialogue-media-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 1.4rem;
    background: #f3f4f6;
    box-shadow: 0 1rem 2.5rem rgba(2, 10, 30, 0.35);
}

.global-dialogue-aside-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.35rem 1.5rem;
    color: #fff;
    background: linear-gradient(135deg, #04194b, #073e9e);
    border-radius: 1.1rem;
}

.global-dialogue-aside-icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.6rem;
    box-sizing: content-box;
    color: #fff;
    background: linear-gradient(135deg, #145ad1, #3b82f6);
    border-radius: 50%;
}

.global-dialogue-aside-card h3 {
    margin: 0;
    font-size: 1.25rem;
}

.global-dialogue-aside-card p {
    margin: 0.55rem 0 0;
    font-size: 0.92rem;
    line-height: 1.65;
}

.global-dialogue-link {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem 1rem;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.85rem 1.1rem;
    color: #09245e;
    text-decoration: none;
    background: linear-gradient(100deg, #e9f2ff, #f8fbff);
    border-radius: 1rem;
}

.global-dialogue-link-icon {
    flex: none;
    grid-row: 1 / span 2;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0.6rem;
    box-sizing: content-box;
    color: #fff;
    background: linear-gradient(135deg, #04194b, #073e9e);
    border-radius: 50%;
}

.global-dialogue-link strong,
.global-dialogue-link small {
    display: block;
}

.global-dialogue-link strong {
    font-family: var(--font-display);
    font-size: 1.2rem;
}

.global-dialogue-link small {
    margin-top: 0.12rem;
    font-size: 0.88rem;
}

.global-dialogue-link-button {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    background: linear-gradient(110deg, #063fa9, #2269dc);
    border-radius: 0.6rem;
}

.global-dialogue-link:hover,
.global-dialogue-link:focus-visible {
    box-shadow: 0 0.5rem 1.5rem rgba(26, 78, 164, 0.16);
}

@media (max-width: 34rem) {
    .global-dialogue-fact {
        grid-template-columns: auto 1fr;
    }

    .global-dialogue-fact-icon {
        grid-row: 1 / span 2;
    }

    .global-dialogue-stat + .global-dialogue-stat {
        border-left: 0;
    }
}

/* Above 60rem the panel runs noticeably taller than one viewport: type,
   stat and fact spacing scale off vh/vw for a bit of screen-size nuance,
   but the section is allowed to grow past 100svh (min-height, not a hard
   cap) so the larger type and taller photo have room to breathe and the
   page simply scrolls past it like any other section. */
@media (min-width: 60rem) {
    .global-dialogue {
        min-height: calc(100svh - var(--navbar-height) + 7rem);
        align-items: center;
        padding-block: clamp(2.5rem, 5vh, 4.5rem);
    }

    .global-dialogue-inner {
        grid-template-columns: minmax(0, 1.8fr) minmax(20rem, 1fr);
        grid-template-rows: auto auto;
        align-items: stretch;
        column-gap: clamp(2.5rem, 4.4vw, 5rem);
        row-gap: clamp(1rem, 2.6vh, 1.75rem);
    }

    .global-dialogue-content {
        grid-column: 1;
        grid-row: 1;
        gap: clamp(1rem, 2.2vh, 1.75rem);
    }

    .global-dialogue-title {
        max-width: none;
        font-size: clamp(2.6rem, 2vw + 2vh, 4.25rem);
    }

    .global-dialogue-theme {
        font-size: clamp(1rem, 0.3vw + 0.9vh, 1.25rem);
    }

    .global-dialogue-stats {
        padding: clamp(0.6rem, 1.6vh, 0.9rem);
    }

    .global-dialogue-stat {
        padding-block: clamp(0.2rem, 0.6vh, 0.35rem);
    }

    .global-dialogue-stat-value {
        font-size: clamp(1.2rem, 0.5vw + 0.9vh, 1.6rem);
    }

    .global-dialogue-stat-label,
    .global-dialogue-stat-source {
        font-size: clamp(0.75rem, 0.2vw + 0.6vh, 0.85rem);
    }

    .global-dialogue-fact {
        padding-block: clamp(0.45rem, 1vh, 0.65rem);
    }

    .global-dialogue-fact dd {
        font-size: clamp(0.95rem, 0.9vh, 1.05rem);
    }

    .global-dialogue-link {
        grid-column: 1;
        grid-row: 2;
        margin-top: 0.75rem;
        grid-template-columns: auto 1fr auto;
    }

    .global-dialogue-link-icon {
        grid-row: auto;
    }

    .global-dialogue-link-button {
        grid-column: auto;
        min-width: 15rem;
    }

    .global-dialogue-aside {
        display: flex;
        flex-direction: column;
        justify-content: center;
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .global-dialogue-media {
        flex: 0 1 auto;
        height: clamp(20rem, 68vh, 34rem);
        min-height: 0;
    }

    .global-dialogue-media-img {
        height: 100%;
        aspect-ratio: auto;
    }

    .global-dialogue-aside-card {
        padding: clamp(1rem, 2vh, 1.4rem) 1.5rem;
    }
}

/* ---------------------------------------------------------------------------
   Our Global Work (partials/our-global-work.html)
   The six Charter initiatives, promoted out of the hero rail into a full
   screen photo carousel, one initiative per slide, image and copy
   crossfading together, echoing the-challenge's slide mechanism but as a
   deliberate sequence a visitor steps through (arrows/dots) rather than a
   hover-to-preview grid. Same dark-on-photo palette as the-challenge
   (#93c5fd eyebrow, white title, translucent-white body copy) so the two
   full-bleed sections read as one family.
--------------------------------------------------------------------------- */

.our-global-work {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding-block: clamp(2.5rem, 6vh, 4rem);
    color: #ffffff;
    background: var(--color-accent-dark);
    overflow: hidden;
}

.our-global-work-inner {
    width: 100%;
}

.our-global-work-slides {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.our-global-work-slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transition: opacity 0.9s ease;
}

.our-global-work-slide.is-active {
    opacity: 1;
}

.our-global-work-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(0deg, rgba(8, 13, 28, 0.92), rgba(8, 13, 28, 0.5) 55%, rgba(8, 13, 28, 0.72)),
        linear-gradient(180deg, rgba(8, 13, 28, 0.55), rgba(8, 13, 28, 0.2) 30%);
}

.our-global-work-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #93c5fd;
}

.our-global-work-title {
    margin: 0;
    max-width: 22ch;
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    color: #ffffff;
}

.our-global-work-lead {
    max-width: 52ch;
    margin: 1rem 0 0;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    text-wrap: pretty;
}

.our-global-work-stage {
    margin-top: clamp(1.75rem, 5vh, 3rem);
}

.our-global-work-panels {
    position: relative;
    min-height: clamp(9rem, 24vh, 12rem);
}

.our-global-work-panel {
    position: absolute;
    inset: 0;
    max-width: 36rem;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.our-global-work-panel.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.our-global-work-panel-index {
    display: block;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #93c5fd;
}

.our-global-work-panel-title {
    margin: 0.5rem 0 0;
    font-size: clamp(1.375rem, 2.6vw, 1.875rem);
    color: #ffffff;
}

.our-global-work-panel-text {
    max-width: 46ch;
    margin: 0.625rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    text-wrap: pretty;
}

.our-global-work-controls {
    margin-top: clamp(1.25rem, 4vh, 2rem);
}

/* Every initiative stays named and pictured on screen, not collapsed to
   anonymous dots — the active one is the slide currently showing behind the
   section, its card lit up while the rest sit dim and desaturated. A
   horizontal filmstrip (scroll, not wrap) keeps every card the same
   generous size at any viewport width instead of shrinking to fit a row. */
.our-global-work-tabs {
    display: flex;
    flex: 1;
    align-items: flex-start;
    gap: 0.875rem;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.our-global-work-tabs::-webkit-scrollbar {
    display: none;
}

.our-global-work-tab {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 7.5rem;
    padding: 0.5rem 0.5rem 0.625rem;
    font: inherit;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.875rem;
    cursor: pointer;
    scroll-snap-align: start;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.our-global-work-tab:hover,
.our-global-work-tab:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-0.125rem);
}

.our-global-work-tab.is-active {
    background: rgba(147, 197, 253, 0.16);
    border-color: rgba(147, 197, 253, 0.65);
}

.our-global-work-tab-thumb {
    display: block;
    flex: none;
    width: 100%;
    height: 4.25rem;
    object-fit: cover;
    border-radius: 0.5rem;
    opacity: 0.6;
    filter: grayscale(65%);
    transition: opacity 0.25s ease, filter 0.25s ease;
}

.our-global-work-tab:hover .our-global-work-tab-thumb,
.our-global-work-tab:focus-visible .our-global-work-tab-thumb {
    opacity: 0.85;
    filter: grayscale(20%);
}

.our-global-work-tab.is-active .our-global-work-tab-thumb {
    opacity: 1;
    filter: none;
}

/* min-height reserves room for two lines even when a shorter label (e.g.
   "Cultural Exchange") only needs one, so every card in the filmstrip stays
   the same height regardless of how its label wraps. */
.our-global-work-tab-label {
    display: -webkit-box;
    max-width: 100%;
    min-height: 1.95rem;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.55);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 0.25s ease;
}

.our-global-work-tab:hover .our-global-work-tab-label,
.our-global-work-tab:focus-visible .our-global-work-tab-label {
    color: rgba(255, 255, 255, 0.85);
}

.our-global-work-tab.is-active .our-global-work-tab-label {
    color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Global Representation (partials/global-representation.html)
   A full-screen stage, as before, but the seven categories are now an
   exclusive accordion built on native <details name="...">: collapsed
   panes show only an icon and a sideways label, the open pane widens to
   show its text, and the browser itself enforces "only one open" — no JS.
   Every pane shares one fixed row height (see .global-representation-
   accordion), so opening one never grows the section past a single
   viewport. Below 64rem there isn't room for a sideways-label row, so it
   drops to a plain vertical accordion instead. Global Governance below
   keeps its own numbered-list form, so the two sections still read as
   distinct.
--------------------------------------------------------------------------- */

.global-representation {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    /* Same reasoning as .hero: a floor, not a fixed box, so generous type
       sizes or a narrow phone never clip content, but sized to the fold so
       the section is ordinarily taken in without scrolling. */
    min-height: 100svh;
    padding-block: clamp(2.5rem, 6vh, 4rem);
    border-top: 1px solid var(--color-border);
    background: #ffffff;
}

/* Background image lives on its own layer, behind everything else in the
   band, so its opacity fades only the image and not the content sitting on
   top of it (same pattern as .hero::before). */
.global-representation::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../images/global-representation/background.904d6137ade5.png") center / cover no-repeat;
    opacity: 0.3;
    pointer-events: none;
}

.global-representation-inner {
    max-width: none;
}

.global-representation-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.global-representation-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.global-representation-lead {
    max-width: 60ch;
    margin: 1rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-muted);
    text-wrap: pretty;
}

/* The row: every pane is a flex sibling of equal starting width, and the
   row's own height is fixed rather than content-driven — that's what stops
   the open pane's text from ever pushing the section past one screen. */
.global-representation-accordion {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    height: clamp(24rem, 62vh, 34rem);
    margin: clamp(2rem, 5vh, 3rem) 0 0;
}

.global-representation-item {
    /* Collapsed panes share the leftover space evenly; the open one below
       claims most of the row via flex-grow, so this is only the floor. */
    flex: 1 1 0%;
    min-width: 0;
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #111827;
    cursor: pointer;
    transition: flex-grow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

/* Plain hoverable/focusable panes, not native <details> — Chrome renders
   non-summary <details> content through an internal ::details-content box
   with content-visibility: hidden while closed, which no amount of author
   CSS on the children can override, so a CSS-only hover-to-expand wasn't
   reachable on top of it. Hover/focus expand a pane immediately; the
   .is-default-open pane only shows expanded while nothing else in the row
   is hovered/focused, so moving the mouse elsewhere closes it instead of
   leaving two open at once. */
.global-representation-item:hover,
.global-representation-item:focus,
.global-representation-accordion:not(:has(.global-representation-item:hover, .global-representation-item:focus)) .global-representation-item.is-default-open {
    flex-grow: 7;
    border-color: var(--color-accent);
    outline: none;
}

.global-representation-item-summary {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1rem;
}

.global-representation-item-icon {
    flex-shrink: 0;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    color: #ffffff;
}

.global-representation-item-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.3;
    color: #ffffff;
    text-wrap: nowrap;
}

/* Collapsed: the label reads bottom-to-top in the narrow column, filling
   what height the icon leaves rather than wrapping under it. Two cases:
   plainly closed with nothing hovered/focused, or the default-open pane
   losing out to a sibling that currently is. */
.global-representation-item:not(:hover):not(:focus):not(.is-default-open) .global-representation-item-title,
.global-representation-accordion:has(.global-representation-item:hover, .global-representation-item:focus) .global-representation-item.is-default-open:not(:hover):not(:focus) .global-representation-item-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.global-representation-item:not(:hover):not(:focus):not(.is-default-open) .global-representation-item-text,
.global-representation-accordion:has(.global-representation-item:hover, .global-representation-item:focus) .global-representation-item.is-default-open:not(:hover):not(:focus) .global-representation-item-text {
    display: none;
}

/* Open: label sits beside the icon instead of under it, freeing the pane's
   height for the text below. */
.global-representation-item:hover .global-representation-item-summary,
.global-representation-item:focus .global-representation-item-summary,
.global-representation-accordion:not(:has(.global-representation-item:hover, .global-representation-item:focus)) .global-representation-item.is-default-open .global-representation-item-summary {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
}

.global-representation-item-text {
    margin: 0;
    padding: 0 1.25rem 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    text-wrap: pretty;
    /* Collapsed panes never show this at all (see above); on the open pane
       it is what may need to scroll instead of growing the row. */
    overflow-y: auto;
}

/* Photo sits full-bleed behind the pane, same -2/-1 z-index convention as
   .our-global-work-slide/-scrim: the icon/title/text stay in normal flow
   (unpositioned, so they paint above both) and get pushed to the bottom of
   the pane by .global-representation-item's justify-content: flex-end,
   reading as a caption over the image rather than a header above it. */
.global-representation-item-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.global-representation-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(8, 13, 28, 0.92), rgba(8, 13, 28, 0.35) 55%, rgba(8, 13, 28, 0.15));
}

/* Below this, seven columns are too narrow for a sideways label to read
   comfortably, and there's no hover on touch — so the row becomes a plain
   vertical stack instead, every pane permanently showing its full caption
   rather than depending on an interaction touch can't reliably drive. */
@media (max-width: 63.98rem) {
    .global-representation-accordion {
        flex-direction: column;
        height: auto;
    }

    .global-representation-item {
        flex: 0 0 auto;
    }

    .global-representation-item-summary {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 1.125rem 0.5rem;
    }

    .global-representation-item-title {
        writing-mode: horizontal-tb;
        transform: none;
    }

    .global-representation-item-text {
        display: block;
        max-height: none;
    }
}

/* ---------------------------------------------------------------------------
   Global Governance (partials/global-governance.html)
   A donut wheel: eight wedges running clockwise from Patron Council at the
   top, darkest tint first, fading tier by tier out to Secretariat. Each
   wedge's icon + number sits at a trig-derived point along the ring
   (--x/--y per .global-governance-slice--n), and a white hub over the
   centre carries the dove mark. The numbered legend beside it repeats each
   tier's tint as a badge, tying the two together the same way a swatch
   would. A "Built on Inclusivity" card and pull quote sit alongside in a
   second column, with a closing banner spanning both beneath.

   Sized to the fold the same way .hero is: min-height is the viewport minus
   the navbar rather than a flat value, everything below it is scaled down
   with clamp()s that lean on vh, and the eyebrow/title/lead reuse the hero's
   exact font sizes so the two bands read as one type scale — the fold
   budget is spent on shrinking the wheel, legend, cards and banner instead.
--------------------------------------------------------------------------- */

.global-governance {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100svh - var(--navbar-height));
    padding-block: clamp(1.5rem, 4vh, 2.5rem);
    background: color-mix(in srgb, var(--color-accent) 3%, #ffffff);
    border-top: 1px solid var(--color-border);
}

.global-governance-inner {
    width: 100%;
    max-width: none;
}

.global-governance-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: stretch;
}

.global-governance-eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.global-governance-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}

/* Same size as .hero-lead. No max-width: matches the title's full column
   width rather than clamping to a narrower measure. */
.global-governance-lead {
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-muted);
    text-wrap: pretty;
}

.global-governance-orbit {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(2.75rem, 6.5vw, 4.5rem);
    margin: clamp(1.5rem, 3.5vh, 2.25rem) 0 0;
}

/* Leader lines from each wedge to its legend row, measured in JS (main.js)
   since the two endpoints live in independently-flowing boxes with no pure
   CSS way to connect them — see the ResizeObserver-driven sync there. Sits
   behind both boxes (z-index 0 vs. 1) so it only shows in the gap between
   them. */
.global-governance-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

.global-governance-line {
    transition: opacity 0.15s ease;
}

.global-governance-line-path {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 1.25;
    pointer-events: stroke;
    transition: stroke 0.15s ease, stroke-width 0.15s ease;
}

.global-governance-line-dot {
    r: 2.5px;
    fill: var(--color-border);
    pointer-events: all;
    transition: fill 0.15s ease, r 0.15s ease;
}

.global-governance-line.is-active .global-governance-line-path {
    stroke: var(--color-accent);
    stroke-width: 2;
}

.global-governance-line.is-active .global-governance-line-dot {
    fill: var(--color-accent);
    r: 3.5px;
}

.global-governance-chart {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: clamp(10rem, 15vw, 13rem);
}

.global-governance-wheel {
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        var(--color-accent-dark) 0% 12.5%,
        color-mix(in srgb, var(--color-accent-dark) 87%, #ffffff) 12.5% 25%,
        color-mix(in srgb, var(--color-accent-dark) 74%, #ffffff) 25% 37.5%,
        color-mix(in srgb, var(--color-accent-dark) 61%, #ffffff) 37.5% 50%,
        color-mix(in srgb, var(--color-accent-dark) 47%, #ffffff) 50% 62.5%,
        color-mix(in srgb, var(--color-accent-dark) 32%, #ffffff) 62.5% 75%,
        color-mix(in srgb, var(--color-accent-dark) 18%, #ffffff) 75% 87.5%,
        color-mix(in srgb, var(--color-accent-dark) 8%, #ffffff) 87.5% 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

/* Icon + number for each wedge, positioned at the wedge's centre angle
   (22.5deg steps starting at the top, clockwise) and a fixed radius,
   pre-computed to x/y percentages since eight static points aren't worth
   a runtime trig() calc. */
.global-governance-slice {
    position: absolute;
    top: var(--y);
    left: var(--x);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}

.global-governance-slice.is-active {
    transform: translate(-50%, -50%) scale(1.2);
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.35));
}

/* While any wedge/line/legend row is hovered, dim the other seven pairs so
   the active one reads clearly against the rest. */
.global-governance-orbit:has(.is-active) .global-governance-slice:not(.is-active),
.global-governance-orbit:has(.is-active) .global-governance-line:not(.is-active),
.global-governance-orbit:has(.is-active) .global-governance-tier:not(.is-active) {
    opacity: 0.35;
}

.global-governance-slice--1 { --x: 63.01%; --y: 18.59%; }
.global-governance-slice--2 { --x: 81.41%; --y: 36.99%; }
.global-governance-slice--3 { --x: 81.41%; --y: 63.01%; }
.global-governance-slice--4 { --x: 63.01%; --y: 81.41%; }
.global-governance-slice--5 { --x: 36.99%; --y: 81.41%; }
.global-governance-slice--6 { --x: 18.59%; --y: 63.01%; }
.global-governance-slice--7 { --x: 18.59%; --y: 36.99%; }
.global-governance-slice--8 { --x: 36.99%; --y: 18.59%; }

.global-governance-slice-icon {
    width: 1rem;
    height: 1rem;
}

.global-governance-slice-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.625rem;
    letter-spacing: 0.02em;
}

.global-governance-hub {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 44%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
}

.global-governance-hub-icon {
    width: 2rem;
    height: auto;
}

.global-governance-legend {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6875rem;
    flex: 1 1 0%;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.global-governance-tier {
    display: grid;
    grid-template-columns: 1.6875rem 1fr;
    column-gap: 0.6875rem;
    align-items: start;
    transition: opacity 0.15s ease;
}

.global-governance-tier.is-active .global-governance-tier-badge {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.global-governance-tier.is-active .global-governance-tier-title {
    color: var(--color-accent-dark);
}

.global-governance-tier-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6875rem;
    height: 1.6875rem;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.75rem;
    color: #ffffff;
    cursor: pointer;
}

/* Same eight tints as the wheel, same order, so a badge is a direct key to
   its wedge — no separate colour scale to keep in sync. */
.global-governance-tier:nth-child(1) .global-governance-tier-badge { background: var(--color-accent-dark); }
.global-governance-tier:nth-child(2) .global-governance-tier-badge { background: color-mix(in srgb, var(--color-accent-dark) 87%, #ffffff); }
.global-governance-tier:nth-child(3) .global-governance-tier-badge { background: color-mix(in srgb, var(--color-accent-dark) 74%, #ffffff); }
.global-governance-tier:nth-child(4) .global-governance-tier-badge { background: color-mix(in srgb, var(--color-accent-dark) 61%, #ffffff); }
.global-governance-tier:nth-child(5) .global-governance-tier-badge { background: color-mix(in srgb, var(--color-accent-dark) 47%, #ffffff); }
.global-governance-tier:nth-child(6) .global-governance-tier-badge { background: color-mix(in srgb, var(--color-accent-dark) 32%, #ffffff); }
.global-governance-tier:nth-child(7) .global-governance-tier-badge { background: color-mix(in srgb, var(--color-accent-dark) 18%, #ffffff); }
.global-governance-tier:nth-child(8) .global-governance-tier-badge { background: color-mix(in srgb, var(--color-accent-dark) 8%, #ffffff); }

/* Title + text share one hoverable box (below) so the small gap between
   them is part of the hit area instead of a dead zone. */
.global-governance-tier-copy {
    grid-column: 2;
    justify-self: start;
    cursor: pointer;
}

.global-governance-tier-title {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25;
}

.global-governance-tier-text {
    margin: 0.09375rem 0 0;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--color-muted);
    text-wrap: pretty;
}

/* Below this, the wheel and an 8-row legend no longer both fit beside each
   other without either shrinking past legibility — the wheel moves above
   the legend instead of beside it, and the band drops its fold constraint
   since it now scrolls like every other section. */
@media (max-width: 63.98rem) {
    .global-governance {
        min-height: 0;
    }

    .global-governance-grid {
        grid-template-columns: 1fr;
    }

    .global-governance-orbit {
        flex-direction: column;
    }

    .global-governance-chart {
        width: clamp(11rem, 55vw, 15rem);
    }

    .global-governance-legend {
        width: 100%;
        gap: 0.75rem;
    }

    .global-governance-aside {
        height: auto;
    }
}

/* align-items: stretch on the grid gives this the same height as the main
   column; space-between spreads the two cards across it instead of leaving
   them stacked short at the top. */
.global-governance-aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.875rem;
    height: 100%;
}

.global-governance-inclusivity {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.875rem;
    padding: 2rem 2rem;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

.global-governance-inclusivity-title {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    margin: 0 0 1.3rem;
    font-size: 0.71875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.global-governance-inclusivity-title svg {
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
}

.global-governance-inclusivity-list {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.global-governance-inclusivity-list li {
    display: grid;
    grid-template-columns: 2.6875rem 1fr;
    gap: 0.9375rem;
    align-items: start;
}

.global-governance-inclusivity-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6875rem;
    height: 2.6875rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent) 10%, #ffffff);
    color: var(--color-accent-dark);
}

.global-governance-inclusivity-icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

.global-governance-inclusivity-list h4 {
    margin: 0 0 0.21875rem;
    font-family: var(--font-display);
    font-size: 0.875rem;
    line-height: 1.25;
}

.global-governance-inclusivity-list p {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-muted);
}

.global-governance-quote {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 1rem 1.1875rem 0.9375rem;
    border-radius: 0.875rem;
    background: color-mix(in srgb, var(--color-accent) 6%, #ffffff);
}

.global-governance-quote-mark {
    display: block;
    margin-bottom: 0.125rem;
    font-family: var(--font-display);
    font-size: 1.6875rem;
    line-height: 1;
    color: var(--color-accent);
}

.global-governance-quote-text {
    position: relative;
    z-index: 1;
    margin: 0 0 0.4375rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--color-text);
    text-wrap: pretty;
}

.global-governance-quote-cite {
    position: relative;
    z-index: 1;
    display: block;
    font-style: normal;
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.global-governance-quote-decoration {
    position: absolute;
    right: -0.75rem;
    bottom: -0.75rem;
    width: 3.5rem;
    height: auto;
    opacity: 0.5;
    pointer-events: none;
}

.global-governance-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(1.25rem, 3vh, 1.875rem);
    padding: 0.9375rem 1.5rem;
    border-radius: 0.875rem;
    background: linear-gradient(120deg, var(--color-accent-dark), var(--color-accent));
    color: #ffffff;
}

.global-governance-banner-copy {
    display: flex;
    align-items: center;
    gap: 0.8125rem;
    min-width: 0;
}

.global-governance-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.global-governance-banner-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.global-governance-banner-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9375rem;
}

.global-governance-banner-text {
    margin: 0.15625rem 0 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
}

.global-governance-banner-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    flex-shrink: 0;
    padding: 0.625rem 1.3125rem;
    border-radius: 999px;
    background: #ffffff;
    color: var(--color-accent-dark);
    font-weight: 700;
    font-size: 0.8125rem;
    text-decoration: none;
    white-space: nowrap;
}

.global-governance-banner-button svg {
    width: 0.9375rem;
    height: 0.9375rem;
}

.global-governance-banner-button:hover,
.global-governance-banner-button:focus-visible {
    background: color-mix(in srgb, #ffffff 90%, var(--color-accent));
}

/* The wheel and leader lines are a visual index into the legend below it,
   useful once there's room to see both at a glance, but at this width the
   legend already stacks full-width on its own, so the wheel just eats
   vertical space without adding information. Drop both and let the legend
   stand alone. */
@media (max-width: 40rem) {
    .global-governance-lines,
    .global-governance-chart {
        display: none;
    }

    .global-governance-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .global-governance-banner-button {
        width: 100%;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------------
   Global Commitments (partials/global-commitments.html)
   A light band, on a plain white background rather than the dark-inverted
   treatment the-challenge and our-global-work use for their own full-bleed
   photo bands.

   Exactly one viewport tall. Unlike those sections, the photo is not
   full-bleed here: each commitment is a rounded card sized well inside
   the viewport, so the section's own white background shows on either
   side of it as the track scrolls past — a "horizontal moving box"
   rather than a wall-to-wall image. GSAP ScrollTrigger (main.js) pins
   the section for a scroll distance equal to the track's overhang and
   scrubs the track's x transform against scroll progress, so vertical
   scrolling drives horizontal paging and the section can't be scrolled
   past faster than that distance allows — the pin itself is what keeps
   it "in the loop", not a hand-rolled event guard.
--------------------------------------------------------------------------- */

.global-commitments {
    position: relative;
    isolation: isolate;
    height: 100svh;
    color: var(--color-text);
    background: #ffffff;
    overflow: hidden;
}

/* Title on the left, lead paragraph on the right of it (not stacked
   underneath), so the head copy's total height stays short enough to
   clear the first card below it — both are absolutely positioned with
   no shared layout otherwise, so a tall stacked block was overlapping
   the "01 / 05" index and title on the first card. Justify-content:
   space-between with wrap means a single leftover item (the lead, once
   there's no room beside the title) falls back to flex-start on its own
   line, so it still reads as a normal stacked block on narrow screens. */
.global-commitments-head {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    column-gap: clamp(2rem, 6vw, 5rem);
    row-gap: 0.75rem;
    padding-top: clamp(2rem, 6vh, 3.5rem);
    pointer-events: none;
}

.global-commitments-head-copy {
    max-width: 28rem;
}

.global-commitments-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.global-commitments-title {
    margin: 0;
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    color: var(--color-text);
}

.global-commitments-lead {
    max-width: 24rem;
    flex: 1 1 18rem;
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-muted);
    text-wrap: pretty;
}

/* Cards are bottom-anchored (align-items: flex-end) with a bottom padding
   that clears the dots pill, and left-anchored to the shell gutter so the
   first card lines up under the eyebrow/title above it. Vertically the
   cards sit low enough in the viewport to stay clear of that head copy,
   since both are absolutely positioned with no shared layout to guard
   against overlap otherwise. */
.global-commitments-track {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding: 0 var(--shell-gutter) clamp(4.5rem, 11vh, 6.5rem);
    will-change: transform;
}

/* The "horizontal moving box": a rounded card sized well inside the
   viewport (not full-bleed) so the section's own dark background frames
   it on every side as the track scrubs past. */
.global-commitments-slide {
    position: relative;
    flex: none;
    width: min(85vw, 34rem);
    height: min(58vh, 30rem);
    display: flex;
    align-items: flex-end;
    background-position: center;
    background-size: cover;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 24px 55px rgba(4, 8, 20, 0.5);
}

.global-commitments-slide-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(8, 13, 28, 0.75), rgba(8, 13, 28, 0.25) 45%),
        linear-gradient(180deg, rgba(8, 13, 28, 0.65), rgba(8, 13, 28, 0.18) 35%),
        rgba(8, 13, 28, 0.15);
}

.global-commitments-slide-copy {
    position: relative;
    width: 100%;
    padding: 1.5rem;
}

.global-commitments-slide-index {
    display: block;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #93c5fd;
}

.global-commitments-slide-title {
    margin: 0.5rem 0 0;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #ffffff;
}

.global-commitments-slide-text {
    max-width: 46ch;
    margin: 0.625rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    text-wrap: pretty;
}

/* Red Hands on Earth only, same pillar list as the Charter/Geneva sentences
   above it just broken into scannable terms — glass-tinted pills rather
   than membership-partnership's plain-border ones, since these sit on a
   photo instead of a flat background. */
.global-commitments-slide-tags {
    display: none;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 46ch;
    margin: 0.875rem 0 0;
    padding: 0;
    list-style: none;
}

/* This slide is pinned to exactly one viewport (no scroll to fall back on),
   and the head copy above it is absolutely positioned rather than reserving
   its own row, so there's no layout-level guarantee against overlap. The
   pillar list is the one genuinely optional element here (the paragraph
   already states everything it restates in shorter form), so it only shows
   once both axes have confirmed headroom instead of risking collision on a
   short laptop window or a narrow phone. */
@media (min-width: 36rem) and (min-height: 46rem) {
    .global-commitments-slide-tags {
        display: flex;
    }
}

.global-commitments-slide-tags li {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
}

/* Pill sits on the section's own white background (the track's bottom
   padding keeps the cards clear of it), not on a photo, so it's a plain
   light chip rather than the glass-over-photo treatment used elsewhere. */
.global-commitments-dots {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: clamp(1.25rem, 3vh, 1.75rem);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    transform: translateX(-50%);
    background: color-mix(in srgb, var(--color-accent) 4%, #ffffff);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}

.global-commitments-dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text) 25%, transparent);
    cursor: pointer;
    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, transform 0.25s ease;
}

.global-commitments-dot:hover,
.global-commitments-dot:focus-visible {
    background: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.global-commitments-dot.is-active {
    width: 1.5rem;
    background: var(--color-accent);
    box-shadow: 0 0 10px rgba(29, 78, 216, 0.5);
}

/* ---------------------------------------------------------------------------
   Membership & Partnership (partials/membership-partnership.html)
   Two columns, one per audience, sharing a single band rather than two full
   sections — both are "register interest" moments rather than working
   conversion flows, since the dossier notes the operational detail behind
   each (eligibility, application steps, sponsorship terms) is not yet
   confirmed. The tag lists borrow the hero-rail chip language so named
   categories read as concrete rather than as a generic bullet list.
--------------------------------------------------------------------------- */

.membership-partnership {
    padding-block: clamp(3.5rem, 9vh, 6rem);
    border-top: 1px solid var(--color-border);
}

.membership-partnership-inner {
    display: grid;
    gap: clamp(2.5rem, 6vh, 3rem);
}

@media (min-width: 48rem) {
    .membership-partnership-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(3rem, 6vw, 5rem);
    }
}

.membership-partnership-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.membership-partnership-title {
    margin: 0;
    font-size: clamp(1.375rem, 2.4vw, 1.75rem);
}

.membership-partnership-lead {
    max-width: 38ch;
    margin: 1rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-muted);
    text-wrap: pretty;
}

.membership-partnership-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.membership-partnership-tags li {
    padding: 0.4375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.membership-partnership-link {
    display: inline-block;
    margin-top: 1.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-accent);
    text-decoration: none;
}

.membership-partnership-link:hover,
.membership-partnership-link:focus-visible {
    color: var(--color-accent-dark);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Donation (partials/donation.html)
   A glass card holds the copy over the photo, rather than plain text set
   directly on a gradient: the card gives the ask a defined edge and its
   own shadow, so it reads as one composed object instead of type floating
   loose over an image. Feature points are icon-led, matching the pattern
   the-challenge's own grid uses for its four impact areas.
--------------------------------------------------------------------------- */

.donation {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(36rem, 90vh, 46rem);
    padding-block: clamp(3.5rem, 9vh, 6rem);
    color: #ffffff;
    background-color: #0f172a;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.donation::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.25) 38%, rgba(15, 23, 42, 0.08) 100%);
}

.donation-inner {
    display: flex;
}

.donation-card {
    max-width: 34rem;
    padding: clamp(2.25rem, 4.5vw, 3rem);
    background: color-mix(in srgb, #0f172a 55%, transparent);
    border: 1px solid color-mix(in srgb, #ffffff 16%, transparent);
    border-radius: 1.25rem;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55);
}

.donation-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, #ffffff 75%, transparent);
}

.donation-title {
    margin: 0;
    font-size: clamp(1.75rem, 3.2vw, 2.375rem);
    line-height: 1.2;
    color: #ffffff;
    text-wrap: pretty;
}

.donation-lead {
    margin: 1rem 0 0;
    font-size: 1rem;
    line-height: 1.65;
    color: color-mix(in srgb, #ffffff 82%, transparent);
    text-wrap: pretty;
}

.donation-points {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin: 1.75rem 0 0;
    padding: 1.25rem 0 0;
    list-style: none;
    border-top: 1px solid color-mix(in srgb, #ffffff 16%, transparent);
}

.donation-points li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: color-mix(in srgb, #ffffff 90%, transparent);
}

.donation-point-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.5rem;
    color: #ffffff;
    background: color-mix(in srgb, #ffffff 14%, transparent);
    border-radius: 999px;
}

.donation-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2rem;
}

.donation-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-accent-dark);
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.donation-button:hover,
.donation-button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -8px rgba(15, 23, 42, 0.5);
}

.donation-note {
    margin: 0;
    font-size: 0.8125rem;
    color: color-mix(in srgb, #ffffff 60%, transparent);
}

@media (max-width: 40rem) {
    .donation-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* ---------------------------------------------------------------------------
   Final CTA (partials/final-cta.html)
   Closes the page with the same visual weight as the hero it echoes: large
   serif statement, centred, and the same button styles as .hero-button so
   the first and last things a visitor sees carry matching energy.
--------------------------------------------------------------------------- */

.final-cta {
    padding-block: clamp(4.5rem, 12vh, 7rem);
    color: var(--color-text);
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
}

.final-cta-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}

.final-cta-content {
    max-width: 36rem;
}

.final-cta-eyebrow {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.final-cta-title {
    margin: 0;
    font-size: clamp(1.75rem, 3.8vw, 2.75rem);
    line-height: 1.2;
    color: var(--color-text);
    text-wrap: pretty;
}

.final-cta-lead {
    max-width: 42ch;
    margin: 1.25rem 0 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-muted);
    text-wrap: pretty;
}

.final-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.final-cta-actions-row {
    display: flex;
    gap: 0.75rem;
}

.final-cta-button {
    display: inline-block;
    padding: 0.8125rem 1.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

@media (max-width: 56.25rem) {
    .final-cta-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .final-cta-content {
        max-width: 42rem;
    }

    .final-cta-lead {
        margin-inline: auto;
    }

    .final-cta-actions-row {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.final-cta-button-primary {
    color: #ffffff;
    background: var(--color-accent-dark);
}

.final-cta-button-primary:hover,
.final-cta-button-primary:focus-visible {
    background: var(--color-accent);
}

.final-cta-button-ghost {
    color: var(--color-text);
    background: color-mix(in srgb, #ffffff 55%, transparent);
    border-color: color-mix(in srgb, #ffffff 70%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

.final-cta-button-ghost:hover,
.final-cta-button-ghost:focus-visible {
    border-color: var(--color-accent-dark);
    background: color-mix(in srgb, #ffffff 72%, transparent);
}

/* ---------------------------------------------------------------------------
   Site footer (partials/footer.html)
   Five-column institutional footer: brand+social, then three navigation
   columns that mirror navbar.html's own groupings, then contact. Dark navy
   like The Challenge and Global Commitments — the footer is the one other
   full-width band that should read as institutional weight rather than as
   a trailing afterthought under the light page above it.
--------------------------------------------------------------------------- */

.site-footer {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3rem, 7vh, 4.5rem) 1.75rem;
    color: rgba(255, 255, 255, 0.7);
    background: var(--color-accent-dark);
    font-size: 0.875rem;
}

.site-footer-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(var(--color-accent-dark), var(--color-accent-dark));
    opacity: 0.82;
    z-index: 1;
}

.site-footer-inner {
    position: relative;
    z-index: 2;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: #ffffff;
}

.site-footer-top {
    display: grid;
    gap: 2.5rem;
    padding-bottom: clamp(2.5rem, 6vh, 3.5rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

@media (min-width: 40rem) {
    .site-footer-top {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .site-footer-top {
        grid-template-columns: 1.3fr repeat(3, 0.85fr) 1.1fr;
        gap: 2rem;
    }
}

.site-footer-brand {
    grid-column: 1 / -1;
}

@media (min-width: 64rem) {
    .site-footer-brand {
        grid-column: auto;
    }
}

.site-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: #ffffff;
}

.site-footer-logo img {
    width: 2.5rem;
    height: auto;
    flex: none;
}

.site-footer-wordmark {
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.site-footer-tagline {
    margin: 0.875rem 0 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.68);
}

.site-footer-social {
    display: flex;
    gap: 0.625rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.site-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.site-footer-social a:hover,
.site-footer-social a:focus-visible {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.site-footer-social svg {
    width: 1.0625rem;
    height: 1.0625rem;
    fill: currentColor;
    color: #ffffff;
}

.site-footer-heading {
    margin: 0 0 1rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

.site-footer-col ul {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer-col-stacked {
    display: grid;
    gap: 2rem;
}

.site-footer-contact address {
    display: grid;
    gap: 0.625rem;
    font-style: normal;
    line-height: 1.5;
}

.site-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 1.75rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
}

.site-footer-bottom p {
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Back to top (templates/partials/back-to-top.html)
   Fixed bottom-right. Hidden while the page's hero band (.hero /
   .content-hero / .vm-hero) is on screen, shown once main.js's
   IntersectionObserver sees it scroll out of view. Circular so it reads as a
   floating control rather than another inline button. Glassmorphic: a
   frosted, translucent disc that picks up whatever is scrolling underneath
   it (light bands and the site's dark navy bands alike) rather than a flat
   fill, with the accent colour carried through the icon and edge highlight
   so it still reads as a primary action.
---------------------------------------------------------------------------- */

.back-to-top {
    position: fixed;
    right: clamp(1.25rem, 3vw, 2.25rem);
    bottom: clamp(1.25rem, 3vw, 2.25rem);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.125rem;
    height: 3.125rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    color: var(--color-accent-dark);
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem);
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease, background-color 0.2s ease, visibility 0.3s;
}

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

.back-to-top:hover,
.back-to-top:focus-visible {
    background: rgba(255, 255, 255, 0.34);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.2), 0 3px 8px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-0.1875rem);
}

.back-to-top:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.back-to-top:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.back-to-top svg {
    width: 1.375rem;
    height: 1.375rem;
}

/* backdrop-filter falls back to no blur on unsupported browsers, so the fill
   needs to stand on its own there too. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .back-to-top {
        background: rgba(255, 255, 255, 0.86);
    }

    .back-to-top:hover,
    .back-to-top:focus-visible {
        background: rgba(255, 255, 255, 0.96);
    }
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: opacity 0.2s ease, visibility 0.2s;
        transform: none;
    }

    .back-to-top:hover,
    .back-to-top:focus-visible,
    .back-to-top:active {
        transform: none;
    }
}

@media (max-width: 640px) {
    .back-to-top {
        width: 2.75rem;
        height: 2.75rem;
    }

    .back-to-top svg {
        width: 1.1875rem;
        height: 1.1875rem;
    }
}

/* ---------------------------------------------------------------------------
   Generic content page (templates/pages/content.html)
   Shared shell for every page reached from a navbar/footer link that is not
   part of the animated homepage: an institutional dark header (same navy as
   The Challenge / Global Commitments / the footer) followed by light-band
   content blocks. Block types are the only vocabulary content.py needs:
   paragraphs, list, cards, table, quote, note, links.
--------------------------------------------------------------------------- */

.content-hero {
    padding-block: clamp(4rem, 13vh, 7rem) clamp(2.75rem, 8vh, 4.5rem);
    color: #ffffff;
    background: var(--color-accent-dark);
    /* content-page-view.html sets background-image inline per page (a scrim
       over a real photo); cover/center here is what makes that crop well
       regardless of the source image's own aspect ratio. Harmless on the
       flat-colour pages that have no photo. */
    background-size: cover;
    background-position: center;
}

/* Photo pages run taller and vibrancy-correct: flat white text reads weak
   over a busy photo, so the eyebrow and lead pick up a touch more weight
   and contrast than the flat-navy variant needs (apple-design §12). */
.content-hero--photo {
    padding-block: clamp(5rem, 18vh, 9rem) clamp(3.5rem, 10vh, 5.5rem);
}

.content-hero--photo .content-hero-eyebrow {
    color: #bfdbfe;
}

.content-hero--photo .content-hero-lead {
    color: rgba(255, 255, 255, 0.92);
}

.content-hero-inner {
    max-width: 48rem;
    /* .shell centers its inner box by default (margin-inline: auto); a hero
       with a fixed max-width otherwise floats it toward the middle of the
       band instead of hugging the same left edge every other section on
       the page starts from. */
    margin-inline: 0;
}

.content-hero-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #93c5fd;
}

/* Tracking/leading tighten together as the heading grows, per apple-design
   §15: negative tracking and a tight line-height read as one deliberate
   display size rather than body text scaled up. */
.content-hero-title {
    margin: 0;
    font-size: clamp(2.25rem, 4.4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
}

.content-hero-divider {
    display: block;
    width: 3.5rem;
    height: 3px;
    margin: 1rem 0 0;
    background: var(--color-accent);
    border-radius: 2px;
}

.content-hero-lead {
    max-width: 40rem;
    margin: 1.125rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}

.content-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 6vh, 3.5rem);
    padding-block: clamp(2.5rem, 7vh, 4rem);
}

.content-block-heading {
    margin: 0 0 1rem;
    font-size: 1.375rem;
    letter-spacing: -0.008em;
}

/* Heading + optional "see more" link sharing one row, e.g. the Leadership
   card group's "Full Leadership Profile" link. When there's no link, this
   collapses to just the heading with no visual change. */
.content-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.content-block-head .content-block-heading {
    margin-bottom: 0;
}

.content-block-heading--icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.content-block-heading-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--color-accent-dark);
}

.content-block-head-link {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
}

.content-block-head-link:hover,
.content-block-head-link:focus-visible {
    text-decoration: underline;
}

/* A paragraphs block with an image: copy on the left, the image plain
   (no tint/overlay) filling its own column on the right. */
.content-block--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 3.5rem);
}

.content-block-side-image {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 26rem;
    object-fit: cover;
    border-radius: 1rem;
}

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

.content-block-text {
    max-width: 42rem;
    margin: 0 0 1rem;
    color: var(--color-text);
    line-height: 1.65;
}

.content-block-text:last-child {
    margin-bottom: 0;
}

.content-list {
    display: grid;
    gap: 0.625rem;
    max-width: 42rem;
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.6;
}

/* Shared header pattern for 'principles' and 'word-grid' blocks: a filled
   icon circle beside a serif heading with its own short underline accent,
   distinct from the plain .content-block-heading used everywhere else. */
.content-section-lead {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.content-section-lead-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex: none;
    background: var(--color-accent-dark);
    color: #ffffff;
    border-radius: 50%;
}

.content-section-lead-icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

.content-section-lead-heading {
    margin: 0;
    font-size: 1.375rem;
    letter-spacing: -0.008em;
}

.content-section-lead-divider {
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-top: 0.5rem;
    background: var(--color-accent);
    border-radius: 2px;
}

/* 'principles' block: each statement as its own bordered row, an icon on
   the left and a large, faint index number on the right (apple-design
   §7 — the number is decorative rank, not content, so it stays quiet).
   A two-column newspaper layout (CSS columns, not a grid) fills the left
   column top-to-bottom before the right, so seven items split 4-and-3
   instead of alternating row by row. */
.content-principles-list {
    columns: 2;
    column-gap: 1.125rem;
}

.content-principles-item {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    margin-bottom: 0.75rem;
    padding: 1.125rem 1.375rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    break-inside: avoid;
}

@media (max-width: 720px) {
    .content-principles-list {
        columns: 1;
    }
}

.content-principles-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    background: #eff6ff;
    color: var(--color-accent);
    border-radius: 50%;
}

.content-principles-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.content-principles-text {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--color-text);
    font-weight: 500;
    line-height: 1.5;
}

.content-principles-number {
    flex: none;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: #dbeafe;
}

/* 'word-grid' block: a tinted panel holding a short intro and a row of
   icon + label pairs, e.g. "In six words". */
.content-word-grid {
    padding: clamp(1.75rem, 4vw, 2.5rem);
    background: #eef2f9;
    border-radius: 1.25rem;
}

.content-word-grid-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.75rem 1rem;
    margin-top: 1.75rem;
}

.content-word-grid-item {
    display: flex;
    flex: 1 1 7rem;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.content-word-grid-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex: none;
    background: #e0e7f5;
    color: var(--color-accent);
    border-radius: 50%;
}

.content-word-grid-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.content-word-grid-label {
    margin: 0;
    max-width: 8rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
}

/* 'partner-list' block: an icon + label + arrow row list beside a dark
   quote panel, e.g. "Who partners with World Peace Board". */
.content-partner-list-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(1.5rem, 4vw, 2.5rem);
}

@media (max-width: 800px) {
    .content-partner-list-grid {
        grid-template-columns: 1fr;
    }
}

.content-partner-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-partner-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0.25rem;
    border-bottom: 1px solid var(--color-border);
}

.content-partner-list-item:last-child {
    border-bottom: none;
}

.content-partner-list-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    background: #eff6ff;
    color: var(--color-accent);
    border-radius: 0.5rem;
}

.content-partner-list-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.content-partner-list-label {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: var(--color-text);
}

.content-partner-list-arrow {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    color: var(--color-accent);
}

.content-partner-list-quote {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.75rem, 4vw, 2.25rem);
    background: linear-gradient(135deg, #1e3a8a 0%, #0f1f4d 100%);
    border-radius: 1.25rem;
    color: #ffffff;
}

.content-partner-list-quote-text {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
}

/* 'tier-table' block: like 'table' but with a dark header band and a
   small round icon beside each row's leading label, e.g. sponsorship
   tiers. */
.content-tier-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.content-tier-table th {
    padding: 0.875rem 1.25rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--color-accent-dark);
}

.content-tier-table th:first-child {
    border-top-left-radius: 0.625rem;
}

.content-tier-table th:last-child {
    border-top-right-radius: 0.625rem;
}

.content-tier-table td {
    padding: 0.875rem 1.25rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
}

.content-tier-table-level {
    width: 1%;
}

.content-tier-table-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--color-accent-dark);
    background: #dbeafe;
    border-radius: 0.5rem;
}

.content-tier-table-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.content-tier-table-desc {
    max-width: 34rem;
    color: var(--color-muted);
    line-height: 1.55;
}

.content-tier-table-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    background: #eff6ff;
    color: var(--color-accent);
    border-radius: 50%;
}

.content-tier-table-icon svg {
    width: 1rem;
    height: 1rem;
}

/* Below 720px there isn't room for a Level / Body / Role-composition row
   without either truncating the body name (nowrap) or squeezing the
   description into a tall, barely-readable sliver, so each row becomes its
   own card instead of a table row: header badge/icon/name on one line,
   description flowing full-width underneath. */
@media (max-width: 720px) {
    .content-table-wrap:has(.content-tier-table) {
        overflow-x: visible;
    }

    .content-tier-table thead {
        display: none;
    }

    .content-tier-table,
    .content-tier-table tbody {
        display: block;
        width: 100%;
    }

    .content-tier-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.75rem;
        row-gap: 0.5rem;
        padding: 1rem 0;
        border-bottom: 1px solid var(--color-border);
    }

    .content-tier-table tr:last-child {
        border-bottom: none;
    }

    .content-tier-table td {
        display: block;
        padding: 0;
        border-bottom: none;
    }

    .content-tier-table-level {
        width: auto;
    }

    .content-tier-table-name {
        white-space: normal;
    }

    .content-tier-table-desc {
        flex-basis: 100%;
        max-width: none;
    }
}

.content-cards {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.content-card {
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.625rem;
    /* Feedback starts on the same interaction that would open/focus the
       card, not after — a lift + deeper shadow on hover, a quick settle on
       press (apple-design §1, §4: critically damped, no overshoot). */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

.content-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-border);
    box-shadow: 0 12px 24px -12px rgba(15, 23, 42, 0.22);
}

.content-card:active {
    transform: translateY(-1px) scale(0.99);
    transition-duration: 0.1s;
}

.content-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.content-card-body {
    padding: 1.5rem;
}

.content-card-title {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
}

.content-card-text {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.55;
}

/* Row layout: a small square photo beside the copy instead of a full-width
   image on top, for compact people cards like Leadership. */
.content-cards--row {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.content-cards--row .content-card {
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.25rem;
}

.content-cards--row .content-card-image {
    width: 40%;
    max-width: 11rem;
    height: auto;
    min-height: 9rem;
    aspect-ratio: auto;
    flex-shrink: 0;
    border-radius: 0.75rem;
}

.content-cards--row .content-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

.content-cards--row .content-card-title {
    font-size: 1rem;
}

/* Gallery: a head (eyebrow/title/text) next to a track of staggered,
   varied-size images. Progressively enhanced by JS (see main.js) into a
   pinned section on wide viewports: the head stays put and scrolling the
   page instead drives the track sideways via transform, so the section
   reads as "stuck" until the whole strip has passed. Without JS, or on
   narrow viewports, it stays a plain full-bleed horizontal scroller
   (drag/swipe/wheel via native overflow-x), which JS also auto-advances on
   a timer there so the content is always usable and always moving. */
.content-gallery-pin {
    position: relative;
    margin-inline: calc(-1 * var(--shell-gutter));
    padding-inline: var(--shell-gutter);
}

.content-gallery-pin-inner {
    display: grid;
    gap: 1.75rem;
    min-width: 0;
}

.content-gallery-pin-head {
    display: grid;
    gap: 0.75rem;
    max-width: 34rem;
}

.content-gallery-pin-eyebrow {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.content-gallery-pin-title {
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 2.375rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.content-gallery-pin-text {
    max-width: 26rem;
    margin: 0;
    color: var(--color-muted);
    line-height: 1.6;
}

/* The clip boundary lives here, one level up from the track itself: in
   pinned mode the track is a wide, freely-transformed flex row with
   overflow:visible (see .is-pinned below), so without a dedicated ancestor
   to clip against, images sliding past would spill outside the track
   column and over the head text instead of disappearing behind it. */
.content-gallery-viewport {
    overflow: hidden;
    min-width: 0;
}

.content-gallery-track {
    display: flex;
    align-items: flex-end;
    gap: 1.125rem;
    min-width: 0;
    padding-bottom: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.content-gallery-track::-webkit-scrollbar {
    display: none;
}

.content-gallery-track:active {
    cursor: grabbing;
}

.content-gallery-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    overflow: hidden;
    border-radius: 0.875rem;
    background: var(--color-surface);
}

.content-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

/* Bigger than a plain thumbnail grid, vh-capped so no item can outgrow a
   pinned 100svh viewport even when the pattern's rem heights are large. */
.content-gallery-item:nth-child(6n+1) { width: 12rem; height: min(26rem, 55vh); transform: translateY(0.5rem); }
.content-gallery-item:nth-child(6n+2) { width: 16.5rem; height: min(21rem, 46vh); transform: translateY(-1.5rem); }
.content-gallery-item:nth-child(6n+3) { width: 19rem; height: min(15rem, 32vh); transform: translateY(2rem); }
.content-gallery-item:nth-child(6n+4) { width: 14rem; height: min(18.5rem, 40vh); transform: translateY(-0.75rem); }
.content-gallery-item:nth-child(6n+5) { width: 15rem; height: min(19rem, 42vh); transform: translateY(2.5rem); }
.content-gallery-item:nth-child(6n+6) { width: 18rem; height: min(13.5rem, 28vh); transform: translateY(0.25rem); }

/* Larger still on big screens (matches the JS pin breakpoint), where there's
   headroom to make the photography the star rather than a strip of thumbnails. */
@media (min-width: 900px) {
    .content-gallery-item:nth-child(6n+1) { width: 18.5rem; height: min(38rem, 70vh); }
    .content-gallery-item:nth-child(6n+2) { width: 25rem; height: min(31rem, 60vh); }
    .content-gallery-item:nth-child(6n+3) { width: 28rem; height: min(22rem, 45vh); }
    .content-gallery-item:nth-child(6n+4) { width: 21rem; height: min(27rem, 55vh); }
    .content-gallery-item:nth-child(6n+5) { width: 23rem; height: min(28rem, 57vh); }
    .content-gallery-item:nth-child(6n+6) { width: 27rem; height: min(20rem, 40vh); }
}

.content-gallery-foot {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 2.5rem;
}

.content-gallery-hint {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    transition: opacity 0.3s ease-out;
}

.content-gallery-hint.is-dismissed {
    opacity: 0;
}

.content-gallery-controls {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
}

/* Small and quiet on purpose: a hairline ring, a muted glyph, and a fill
   that appears only on hover/press, rather than a bold filled button
   competing with the photography. */
.content-gallery-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-muted);
    cursor: pointer;
    transition: background 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out, transform 0.15s ease-out;
}

.content-gallery-arrow svg {
    width: 0.8125rem;
    height: 0.8125rem;
}

.content-gallery-arrow:hover {
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-surface);
}

.content-gallery-arrow:active {
    transform: scale(0.9);
}

/* Controls stay visible on mobile now that the fallback track auto-moves
   there — they're how a touch user steps it manually, not just a desktop
   nicety. The "scroll to explore" hint would collide with them at that
   width, so it drops instead. */
@media (max-width: 480px) {
    .content-gallery-hint {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content-gallery-track {
        scroll-behavior: auto;
    }
}

/* Pin mode: JS adds is-pinned only on wide viewports where the track
   actually overflows, and sets --gallery-pin-height to viewport height plus
   however far the track needs to travel. */
.content-gallery-pin.is-pinned {
    height: var(--gallery-pin-height, 100vh);
}

.content-gallery-pin.is-pinned .content-gallery-pin-inner {
    position: sticky;
    top: 0;
    height: 100svh;
    grid-template-columns: minmax(15rem, 24rem) 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
}

.content-gallery-pin.is-pinned .content-gallery-track {
    overflow: visible;
    cursor: default;
    scroll-snap-type: none;
    padding-bottom: 0;
    will-change: transform;
}

.content-gallery-pin.is-pinned .content-gallery-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.75rem;
}

.content-table-wrap {
    overflow-x: auto;
}

.content-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.content-table th,
.content-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}

.content-table th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    white-space: nowrap;
}

/* Panel the quote sits in: a tinted background with a low-opacity leaf
   motif bleeding off the bottom-right corner, purely decorative. */
.content-quote-panel {
    position: relative;
    overflow: hidden;
    background: #eef2f9;
    border-radius: 1.25rem;
}

.content-quote-decor {
    position: absolute;
    right: -1.5rem;
    bottom: -1.5rem;
    width: 11rem;
    height: 11rem;
    color: var(--color-accent);
    opacity: 0.1;
    pointer-events: none;
}

.content-quote {
    position: relative;
    max-width: 42rem;
    margin: 0;
    padding: clamp(1.75rem, 4vw, 2.5rem);
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-style: italic;
    color: var(--color-accent-dark);
    border-left: 3px solid var(--color-accent);
}

.content-quote-text {
    margin: 0;
}

.content-quote-cite {
    display: block;
    margin-top: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.content-note {
    position: relative;
    overflow: hidden;
    max-width: 60rem;
    margin-inline: auto;
    padding: 1.5rem 1.75rem;
    background: #eff6ff;
    border-radius: 0.875rem;
}

.content-note-decor {
    position: absolute;
    right: -1.5rem;
    bottom: -1.5rem;
    width: 9rem;
    height: 9rem;
    color: var(--color-accent);
    opacity: 0.1;
    pointer-events: none;
}

.content-note-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
}

/* No heading: the icon sits inline beside the paragraph instead of on its
   own header row above it. */
.content-note-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.content-note-row .content-note-text {
    padding-top: 0.125rem;
}

.content-note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    border-radius: 50%;
    background: #dbeafe;
    color: var(--color-accent-dark);
}

.content-note-icon svg {
    width: 0.875rem;
    height: 0.875rem;
}

.content-note-heading {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
}

.content-note-text {
    margin: 0;
    color: var(--color-text);
    line-height: 1.55;
}

.content-links {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-links a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

.content-links a:hover,
.content-links a:focus-visible {
    text-decoration: underline;
}

.content-related {
    padding-block: clamp(2.5rem, 6vh, 3.5rem);
    background: #f8fafc;
    border-top: 1px solid var(--color-border);
}

.content-related-heading {
    margin: 0 0 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.content-related-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-related-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1.125rem;
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    transition: transform 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.content-related-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

/* Leadership-page-only variant: taller cards carrying each linked page's own
   one-line description underneath, instead of a plain label pill. */
.content-related--cards .content-related-list {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.125rem;
}

.content-related-link--card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 1.25rem 1.25rem 1.375rem;
    border-radius: 1rem;
}

.content-related-link--card .content-related-icon {
    width: 2.25rem;
    height: 2.25rem;
}

.content-related-link--card .content-related-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.content-related-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    flex: none;
    border-radius: 50%;
    background: #eff6ff;
    color: var(--color-accent);
}

.content-related-icon svg {
    width: 0.9375rem;
    height: 0.9375rem;
}

.content-related-arrow {
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    flex: none;
    color: var(--color-muted);
    transition: transform 0.2s ease-out;
}

.content-related-link:hover,
.content-related-link:focus-visible {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.25);
}

/* The arrow nudges toward where the click goes — a small preview of the
   outcome rather than a static icon (apple-design §8). */
.content-related-link:hover .content-related-arrow,
.content-related-link:focus-visible .content-related-arrow {
    transform: translateX(2px);
}

.content-related-link:active {
    transform: translateY(-1px) scale(0.99);
    transition-duration: 0.1s;
}

/* Reduced motion keeps the feedback (still resolvable via colour/shadow)
   but drops the movement itself (apple-design §14). */
@media (prefers-reduced-motion: reduce) {
    .content-card,
    .content-related-link,
    .content-related-arrow {
        transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out, background-color 0.2s ease-out;
    }

    .content-card:hover,
    .content-card:active,
    .content-related-link:hover,
    .content-related-link:focus-visible,
    .content-related-link:active {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   Vision & Mission (pages/vision-mission.html)
   A bespoke layout for one page (ContentPageView.TEMPLATE_OVERRIDES), reusing
   the site's blue institutional accent plus two page-local accents, green
   for Our Mission and purple for the Key Initiatives related-page icon, that
   exist only here rather than as new global --color-* tokens.
--------------------------------------------------------------------------- */

.vm-hero {
    padding-block: clamp(4.5rem, 16vh, 8rem) clamp(3rem, 9vh, 5rem);
    color: #ffffff;
    text-align: center;
    background-size: cover;
    background-position: center;
}

.vm-hero-inner {
    max-width: 42rem;
    margin-inline: auto;
}

.vm-hero-title {
    margin: 0;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
}

.vm-hero-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin: 1.25rem 0;
    color: rgba(255, 255, 255, 0.65);
}

.vm-hero-divider span {
    width: 2.5rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
}

.vm-hero-divider svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}

.vm-hero-lead {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

.vm-cards {
    margin-top: clamp(-2.5rem, -5vh, -1.5rem);
    position: relative;
    z-index: 1;
}

.vm-cards-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 52rem) {
    .vm-cards-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.vm-card {
    padding: 2rem clamp(1.5rem, 3vw, 2.25rem) 2.25rem;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-bottom: 4px solid var(--vm-card-accent, var(--color-accent));
    border-radius: 0.75rem;
    box-shadow: 0 16px 32px -20px rgba(15, 23, 42, 0.3);
}

.vm-card--vision {
    --vm-card-accent: var(--color-accent);
    background: #eff6ff;
}

.vm-card--mission {
    --vm-card-accent: #16a34a;
    background: #f0fdf4;
}

.vm-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1.25rem;
    color: var(--vm-card-accent, var(--color-accent));
    background: #ffffff;
    border-radius: 50%;
}

.vm-card-icon svg {
    width: 1.625rem;
    height: 1.625rem;
}

.vm-card-title {
    margin: 0 0 0.875rem;
    font-size: 1.375rem;
    color: var(--vm-card-accent, var(--color-accent-dark));
}

.vm-card-text {
    margin: 0 0 0.75rem;
    color: var(--color-text);
    line-height: 1.6;
}

.vm-card-text:last-child {
    margin-bottom: 0;
}

.vm-philosophy {
    padding-block: clamp(3.5rem, 8vh, 5rem) clamp(2.5rem, 6vh, 4rem);
}

.vm-philosophy-heading {
    max-width: 32rem;
    margin: 0 auto 2.75rem;
    text-align: center;
}

.vm-section-title {
    margin: 0;
    font-size: clamp(1.625rem, 3vw, 2rem);
    color: var(--color-accent-dark);
}

.vm-philosophy-heading .vm-hero-divider {
    color: var(--color-accent);
}

.vm-philosophy-heading .vm-hero-divider span {
    background: var(--color-border);
}

.vm-philosophy-grid {
    display: grid;
    gap: 2rem clamp(1.25rem, 3vw, 2rem);
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
}

@media (min-width: 40rem) {
    .vm-philosophy-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.vm-philosophy-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 0.875rem;
    color: var(--color-accent);
    background: #eff6ff;
    border-radius: 50%;
}

.vm-philosophy-icon svg {
    width: 1.625rem;
    height: 1.625rem;
}

.vm-philosophy-item-title {
    margin: 0 0 0.375rem;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-accent-dark);
}

.vm-philosophy-item-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-muted);
}

.vm-note-wrap {
    padding-block: clamp(1.5rem, 4vh, 2.5rem) clamp(3rem, 7vh, 4.5rem);
}

.vm-note {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    max-width: 54rem;
    margin-inline: auto;
    padding: 1.75rem clamp(1.5rem, 4vw, 3rem);
    background: #eff6ff;
    border-radius: 0.875rem;
}

.vm-note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    color: #ffffff;
    background: var(--color-accent-dark);
    border-radius: 50%;
}

.vm-note-icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

.vm-note-heading {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
}

.vm-note-text {
    margin: 0;
    max-width: 42rem;
    color: var(--color-text);
    line-height: 1.55;
}

.vm-note-deco {
    position: absolute;
    right: -1.5rem;
    bottom: -1.5rem;
    width: 6.5rem;
    height: 6.5rem;
    color: var(--color-accent);
    opacity: 0.14;
}

.vm-related {
    padding-block: clamp(2.5rem, 6vh, 3.5rem);
    background: #f8fafc;
    border-top: 1px solid var(--color-border);
}

.vm-related-heading {
    margin: 0 0 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.vm-related-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.vm-related-link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.125rem;
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    transition: transform 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.vm-related-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-accent);
    background: #eff6ff;
    border-radius: 50%;
}

.vm-related-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.vm-related-icon--leadership {
    color: #16a34a;
    background: #f0fdf4;
}

.vm-related-icon--key-initiatives {
    color: #7c3aed;
    background: #f5f3ff;
}

.vm-related-label {
    flex: 1;
}

.vm-related-arrow {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--color-accent);
    transition: transform 0.2s ease-out;
}

.vm-related-link:hover,
.vm-related-link:focus-visible {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.25);
}

.vm-related-link:hover .vm-related-arrow,
.vm-related-link:focus-visible .vm-related-arrow {
    transform: translateX(2px);
}

.vm-related-link:active {
    transform: translateY(-1px) scale(0.99);
    transition-duration: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
    .vm-related-link,
    .vm-related-arrow {
        transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    }

    .vm-related-link:hover,
    .vm-related-link:focus-visible,
    .vm-related-link:active {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   Membership application form (pages/membership-apply.html)
--------------------------------------------------------------------------- */

.membership-apply {
    max-width: 40rem;
    margin: 0 auto;
}

.membership-apply-form {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.membership-apply-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.125rem;
}

.membership-apply-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}

.membership-apply-optional {
    font-weight: 400;
    color: var(--color-muted);
}

.membership-apply-field input,
.membership-apply-field select,
.membership-apply-field textarea {
    padding: 0.7rem 0.875rem;
    font: inherit;
    font-weight: 400;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    resize: vertical;
}

.membership-apply-field input:focus,
.membership-apply-field select:focus,
.membership-apply-field textarea:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.membership-apply-error {
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
}

.membership-apply-submit {
    align-self: flex-start;
    padding: 0.75rem 1.75rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.membership-apply-submit:hover {
    opacity: 0.9;
}

.membership-apply-thanks {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    text-align: center;
}

.membership-apply-thanks-mark {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0;
    font-size: 1.5rem;
    color: #ffffff;
    background: var(--color-accent);
    border-radius: 50%;
}

.membership-apply-thanks-title {
    margin: 0;
    font-family: var(--font-display);
}

.membership-apply-thanks-lead {
    max-width: 32rem;
    margin: 0;
    color: var(--color-muted);
}