:root {
    /* Brand palette.

       The homepage runs on one orange. --color-coral-bright carries every
       button ground, the nav's hover and active states, the rails, the
       section eyebrows and the list numbers, with --color-coral as its
       darker step on hover. --color-coral also keeps the fills and the
       highlighted words in the large closing lines. Teal and lagoon carry
       secondary actions: Explore Sunfish, Explore Community Return.

       --color-coral-strong is deliberately absent from the homepage. It
       survives only on the legal pages, where body-copy links need the 4.5:1
       the brighter orange cannot reach.

       Contrast note: the bright coral is 2.9:1 against white, so white button
       labels and orange type on light grounds both sit under WCAG AA. This is
       a brand decision, taken knowingly. Nothing set in it may be the only
       carrier of information: eyebrows repeat their heading, numbers are
       ordinal, and every button also reads as a button by shape and position. */

    --color-coral: #C96732;  /* brand orange, solid marks and fills */
    --color-coral-strong: #944C25;  /* orange type on light grounds, where the brand value is too light */
    --color-coral-hover: #AC582B;
    --color-coral-tint: #E1AB8E;  /* accent type on teal grounds */
    --color-coral-bright: #C96732;  /* the brand orange: buttons, eyebrows, numbers, rails */
    --color-coral-bright-hover: #AC582B;
    --color-coral-deep: #944C25;

    --color-teal: #294F56;          /* primary institutional ground */
    --color-teal-deep: #0D3238;     /* the deepest band and the footer */
    --color-teal-light: #56747A;
    --color-teal-button: #357B85;
    --color-teal-accent: #4E9EA8;   /* decorative marks, not text */
    --color-lagoon: #51A9B8;        /* the resilience hub band */
    --color-ice: #C5F7FF;           /* the community return band */

    /* the four stage frames on the community return ring */
    --stage-1: #3E8E7E;
    --stage-2: #D6A441;
    --stage-3: #C96732;
    --stage-4: #51A9B8;

    --color-ink: #313a44;           /* headings */
    --color-body: #000000;          /* running copy on light grounds */
    --color-charcoal: #1C2021;
    /* The bar. The charcoal carried toward the site's teal and lifted about
       three times off it, so it sits dark without going to black. */
    --color-bar: #2B3B44;
    /* Every heading takes this: the charcoal the ink is drawn in, warm of
       black rather than the flat near-black it stood at. */
    --color-heading: var(--color-ink);
    --color-charcoal-hover: #343B3C;
    --color-slate: #465254;        /* quiet secondary button */
    --color-slate-hover: #58686A;

    /* Width of the coral horizontal above the footer. */
    --rail-w: 4px;

    --color-cream: #F7F1E8;
    /* The one tinted band. Three near-identical grounds had been standing in
       for it -- a cool grey, the sand, the cream -- which read as three
       accidents rather than one rhythm. */
    --color-band: var(--color-cream);
    --color-section: #F7F1E8;
    --color-sand: #F1EADC;
    --color-white: #FFFFFF;

    --color-brown: #7A3F2E;
    --color-orange: #E89760;
    --color-tan: #E8C088;
    --color-beige: #D8D2C0;
    --color-blue-gray: #8EA0A0;

    /* Three voices, assigned by what a piece of text is doing rather than by
       where it sits. --font-statement carries the sentences the foundation
       asserts, --font-system the named mechanisms and anything enumerated,
       --font-utility the quiet functional close of the page. */
    --font-statement: "Noto Serif Condensed", "Noto Serif", Georgia, serif;
    --font-system: "Noto Sans", system-ui, -apple-system, sans-serif;
    --font-utility: "Noto Serif", Georgia, "Times New Roman", serif;

    --font-display: var(--font-condensed);
    --font-accent: var(--font-condensed);
    /* The display and control voice. Noto Sans carries its condensed cut on a
       width axis rather than as a separate family, so the width is stated
       beside the family everywhere this token is taken. */
    --font-condensed: "Noto Sans", sans-serif;
    --font-sans: "Noto Serif", Georgia, "Times New Roman", serif;
    --font-button: var(--font-condensed);
    /* Everything you click — the nav, every button — is set in this. */
    --font-nav: var(--font-condensed);

    --max-width: 1220px;
    --side-padding: clamp(20px, 4vw, 56px);
    --section-padding: clamp(64px, 8vw, 112px);
    --radius: 14px;
    --radius-btn: 12px;   /* every button shares this scale */
    --radius-section: 28px;
    --section-min: clamp(620px, 66vh, 760px);   /* every content band shares this height */
    --header-h: 108px;
    /* ---------- The vertical rhythm ----------
       Four steps, and every band on the page takes one of them. They were a
       spread of unrelated values before -- 78, 120, 140, 184, 314 and a 130
       overlap -- which read as section-by-section decisions rather than one
       system. The clamps hold the same proportions down the viewport. */
    --section-sm: clamp(56px, 6vw, 80px);
    --section-md: clamp(64px, 7vw, 96px);
    --section-lg: clamp(80px, 9vw, 120px);
    --section-xl: clamp(96px, 10vw, 144px);
    /* The one deliberate overlap on the page: the signup panel lapping the
       band above it. Held as a token so it cannot drift. */
    --section-overlap: clamp(40px, 4vw, 64px);

    /* The older names now resolve onto the same four steps, so the pages that
       still speak in them stay on the grid. */
    --space-band: var(--section-lg);
    --space-section: var(--section-lg);
    --space-section-sm: var(--section-md);

    /* ---------- The content measures ----------
       Three, and every section belongs to one. */
    /* ---------- The heading scale ----------
       Five steps. The page had seven visually distinct sizes across its
       sections, which reads as nuance up close and as noise at a glance. */
    --display-hero: clamp(38px, 5.6vw, 80px);
    --display-lg: clamp(32px, 4.2vw, 56px);
    --display-md: clamp(28px, 3.2vw, 40px);
    --display-sm: clamp(24px, 2.4vw, 34px);
    --display-xs: clamp(22px, 2.2vw, 30px);

    --container-wide: 1290px;
    --container-standard: 1120px;
    --container-reading: 760px;
    --home-max-width: var(--container-wide);
    --home-side-padding: clamp(20px, 5vw, 80px);
}

/* The homepage collapses the orange family to the one brand value, so a
   single orange appears across it rather than four near-neighbours. */
.home-page {
    --color-coral: #C96732;
    --color-coral-strong: #C96732;
    --color-coral-tint: #C96732;
    --color-coral-deep: #C96732;
    --color-orange: #C96732;
    --stage-3: #C96732;
    --font-system: "Noto Sans", system-ui, -apple-system, sans-serif;
    --font-display: var(--font-condensed);
    --font-accent: var(--font-condensed);
    font-stretch: 75%;
}

/* Condensed, institutional heading direction, set in the case it is written
   in. Lists, labels and the olelo noeau keep their caps. */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    color: var(--color-body);
    background: var(--color-section);
    -webkit-font-smoothing: antialiased;
    font-stretch: 100%;
}

body {
    overflow-x: hidden;
    overflow-x: clip;
}

/* ---------- Founding Stewards ----------
   An editorial gradient banner with an independent landscape image and a
   real SVG bowl divider, following the construction supplied for this page. */
.founding-stewards-page {
    background: var(--color-white);
}

.founding-stewards-page .header-inner {
    max-width: var(--home-max-width);
    padding-inline: var(--home-side-padding);
}

.stewards-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 760px;
    padding: clamp(80px, 8vw, 128px) 0 clamp(150px, 13vw, 196px);
    background-color: var(--color-white);
    background-image: linear-gradient(122deg,
        rgba(41, 79, 86, 0) 0%,
        rgba(41, 79, 86, 0.10) 18%,
        rgba(45, 105, 122, 0.44) 54%,
        rgba(41, 79, 86, 0.9) 100%);
    color: var(--color-ink);
}

.stewards-banner-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    align-items: start;
    gap: clamp(52px, 8vw, 126px);
    width: min(var(--home-max-width), 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
}

.stewards-banner-copy {
    max-width: 650px;
}

.stewards-banner h1 {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-size: clamp(28px, 2.8vw, 42px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--color-heading);
    font-stretch: 75%;
}

.stewards-banner h1 span {
    display: block;
    white-space: nowrap;
}

.stewards-olelo {
    margin: 0 0 12px;
    font-family: var(--font-statement);
    font-size: clamp(23px, 2.2vw, 32px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

.stewards-translation {
    margin: 0 0 clamp(38px, 4vw, 56px);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-ink);
    font-stretch: 75%;
}

.stewards-overview {
    max-width: 58ch;
}

.stewards-overview p {
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 1.52;
    color: var(--color-body);
}

.stewards-overview p:last-child {
    margin-bottom: 0;
}

.stewards-banner-media {
    margin: clamp(34px, 4vw, 58px) 0 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--color-sand);
}

.stewards-banner-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
    transform: scale(1.08);
}

.stewards-banner-wave {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
    pointer-events: none;
}

.stewards-banner-wave svg {
    display: block;
    width: 100%;
    height: clamp(115px, 10.7vw, 205px);
}

@media (max-width: 820px) {
    .stewards-banner {
        min-height: 0;
        padding-top: 56px;
    }

    .stewards-banner-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 38px;
    }

    .stewards-banner-media {
        width: min(100%, 440px);
        margin-top: 0;
        aspect-ratio: 5 / 3;
    }

    .stewards-banner-media img {
        object-position: 68% center;
        transform: scale(1.04);
    }

    .stewards-banner h1 span {
        white-space: normal;
    }
}

@media (max-width: 520px) {
    .stewards-banner {
        padding-top: 44px;
        padding-bottom: 130px;
    }

    .stewards-banner h1 br {
        display: none;
    }

    .stewards-overview p {
        font-size: 16px;
    }
}

.stewards-foundation {
    background: var(--color-white);
    padding: clamp(76px, 9vw, 138px) 0 clamp(92px, 11vw, 168px);
}

.stewards-foundation-inner {
    width: min(920px, 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
    text-align: center;
}

.stewards-foundation h2 {
    margin: 0 0 clamp(42px, 5vw, 68px);
    font-family: var(--font-statement);
    font-size: clamp(28px, 3vw, 42px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--color-heading);
    font-stretch: 100%;
}

.stewards-foundation h2 em {
    font-style: inherit;
    color: var(--color-coral-bright);
}

.stewards-foundation-copy {
    max-width: 82ch;
    margin-inline: auto;
}

.stewards-foundation-copy p {
    margin: 0 0 22px;
    font: 400 17px/1.5 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.stewards-foundation-copy p:last-child {
    margin-bottom: 0;
}

@media (max-width: 620px) {
    .stewards-foundation {
        padding-block: 68px 92px;
    }

    .stewards-foundation h2 br {
        display: none;
    }

    .stewards-foundation-copy p {
        font-size: 16px;
        line-height: 1.55;
    }
}

.stewards-partnership {
    background: var(--color-band);
    padding: clamp(58px, 6vw, 88px) 0 clamp(72px, 8vw, 112px);
}

.stewards-partnership-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: clamp(36px, 4vw, 64px);
    row-gap: clamp(58px, 6vw, 84px);
    width: min(var(--home-max-width), 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
}

.stewards-giving-card {
    position: relative;
    width: min(100%, 540px);
    min-height: 430px;
    padding: 24px;
    border: 1px solid var(--color-ink);
    border-radius: 12px;
    background: var(--color-white);
    color: var(--color-ink);
}

.stewards-giving-mark {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.stewards-giving-intro {
    margin-bottom: 26px;
}

.stewards-giving-intro h2 {
    max-width: none;
    padding-right: 72px;
    margin: 0 0 12px;
    font: 700 clamp(22px, 2vw, 28px)/1.15 var(--font-display);
    letter-spacing: -0.02em;
    font-stretch: 75%;
}

.stewards-giving-intro p {
    margin: 0;
    font: 400 15px/1.5 var(--font-utility);
    color: var(--color-slate);
    font-stretch: 100%;
}

.stewards-giving-frequency,
.stewards-giving-amounts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
}

.stewards-giving-frequency {
    margin-bottom: 22px;
}

.stewards-giving-frequency span,
.stewards-giving-amounts span {
    display: grid;
    place-items: center;
    min-height: 46px;
    border-radius: 6px;
    font: 600 13px/1 var(--font-display);
    text-align: center;
    text-transform: uppercase;
    background: #f3f3f0;
    font-stretch: 75%;
}

.stewards-giving-frequency .is-selected,
.stewards-giving-button {
    background: #2f6577;
    color: var(--color-white);
}

.stewards-giving-amounts .is-selected {
    background: var(--color-coral-bright);
    color: var(--color-white);
}

.stewards-giving-card > .stewards-giving-label {
    margin: 0 0 13px;
    font: 600 12px/1.3 var(--font-display);
    text-transform: uppercase;
    font-stretch: 75%;
}

.stewards-giving-amounts {
    grid-template-columns: repeat(3, 1fr);
}

.stewards-giving-amounts span:nth-child(5) {
    grid-column: span 2;
}

.stewards-giving-amounts small {
    margin-top: 4px;
    font-size: 9px;
}

.stewards-giving-card .stewards-giving-note {
    margin: 18px 0;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
    text-align: center;
    text-transform: none;
}

.stewards-giving-button {
    display: block;
    padding: 16px 20px;
    border-radius: 6px;
    font: 700 13px/1 var(--font-display);
    text-align: center;
    text-transform: uppercase;
    font-stretch: 75%;
}

.stewards-giving-button:hover {
    background: #254f5e;
}

.stewards-partnership-copy {
    text-align: left;
}

.stewards-partnership-copy h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-heading);
    font-stretch: 75%;
}

.stewards-partnership-statement {
    margin: 16px 0 30px !important;
    font-family: var(--font-statement) !important;
    font-size: clamp(22px, 2.2vw, 29px) !important;
    font-style: italic;
    line-height: 1.15 !important;
    color: var(--color-coral-bright) !important;
    font-stretch: 100%;
}

.stewards-partnership-copy p {
    max-width: 64ch;
    margin: 0 0 18px;
    font: 400 17px/1.48 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.stewards-partnership-copy p:last-child {
    margin-bottom: 0;
}

.stewards-partnership-column {
    display: grid;
    gap: clamp(58px, 6vw, 84px);
}

.stewards-partnership-donate {
    display: inline-flex;
    margin-top: 18px;
    padding: 14px 24px;
    border-radius: var(--radius-btn);
    background: var(--color-coral-bright);
    color: var(--color-white);
}

.stewards-partnership-donate:hover {
    background: var(--color-coral-bright-hover);
}

.stewards-commitment-copy h2,
.stewards-inkind-copy h2 {
    margin: 0 0 28px;
    font-family: var(--font-display);
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-heading);
    font-stretch: 75%;
}

.stewards-commitment-copy,
.stewards-inkind-copy {
    width: 100%;
    max-width: 62ch;
}

/* it sits under the partnership block, so it starts on the same left edge
   rather than being pushed to the end of its track */
.stewards-inkind-copy {
    justify-self: start;
}

.stewards-commitment-copy h3,
.stewards-inkind-copy h2 {
    margin-top: 34px;
    font-family: var(--font-statement);
    font-size: clamp(20px, 2vw, 27px);
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

.stewards-commitment-copy p,
.stewards-inkind-copy p,
.stewards-inkind-copy li {
    margin: 0 0 18px;
    font: 400 16px/1.5 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.stewards-inkind-copy h2 {
    margin: 0 0 28px;
}

.stewards-inkind-copy ul {
    margin: 18px 0 0;
    padding-left: 22px;
}

.stewards-inkind-copy li {
    margin-bottom: 5px;
}

@media (max-width: 800px) {
    .stewards-partnership-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 54px;
    }

    .stewards-giving-card {
        width: min(100%, 540px);
        justify-self: center;
    }

    .stewards-commitment-copy,
    .stewards-inkind-copy {
        max-width: none;
        justify-self: stretch;
    }
}

@media (max-width: 520px) {
    .stewards-partnership {
        padding-block: 64px 78px;
    }

    .stewards-partnership-copy h2 br {
        display: none;
    }

    .stewards-partnership-copy p {
        font-size: 16px;
    }
}

.stewards-beyond {
    background: var(--color-white);
    padding: clamp(76px, 8vw, 120px) 0 clamp(42px, 4vw, 60px);
}

.stewards-beyond-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    align-items: start;
    gap: clamp(60px, 9vw, 138px);
    width: min(var(--home-max-width), 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
}

.stewards-beyond-copy {
    max-width: 56ch;
}

.stewards-beyond-copy h2 {
    margin: 0 0 28px;
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-heading);
    font-stretch: 75%;
}

.stewards-beyond-copy p,
.stewards-beyond-copy li {
    font: 400 16px/1.48 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.stewards-beyond-copy p {
    margin: 0 0 22px;
}

.stewards-beyond-copy ul {
    margin: 0 0 26px;
    padding-left: 22px;
}

.stewards-beyond-copy li {
    margin-bottom: 5px;
}

.stewards-beyond-media {
    width: min(100%, 520px);
    aspect-ratio: 3 / 4;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    justify-self: end;
}

.stewards-beyond-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.06);
}

@media (max-width: 800px) {
    .stewards-beyond-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }

    .stewards-beyond-copy {
        max-width: none;
    }

    .stewards-beyond-media {
        width: min(100%, 440px);
        justify-self: center;
    }
}

@media (max-width: 520px) {
    .stewards-beyond {
        padding: 64px 0 36px;
    }

    .stewards-beyond-copy h2 br {
        display: none;
    }
}

.stewards-governance {
    background: var(--color-band);
    padding: clamp(64px, 7vw, 96px) 0 clamp(60px, 6vw, 88px);
}

.stewards-governance-inner {
    width: min(900px, 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
    text-align: center;
}

.stewards-governance h2 {
    margin: 0 0 clamp(34px, 4vw, 54px);
    font-family: var(--font-statement);
    font-size: clamp(30px, 2.5vw, 34px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.12;
    text-transform: none;
    color: var(--color-heading);
    font-stretch: 100%;
}

.stewards-governance h2 em {
    font-style: inherit;
    color: var(--color-coral-bright);
}

.stewards-governance p {
    max-width: 76ch;
    margin: 0 auto 24px;
    font: 400 16px/1.5 var(--font-system);
    color: var(--color-body);
}

.stewards-governance p:last-child {
    margin-bottom: 0;
}

/* the claim the band opens and closes on */
.stewards-governance .stewards-governance-lead,
.stewards-governance .stewards-governance-close {
    font-weight: 600;
    color: var(--color-ink);
}

.stewards-governance .stewards-governance-close {
    margin-top: clamp(26px, 3vw, 36px);
}

@media (max-width: 520px) {
    .stewards-governance {
        padding: 36px 0 30px;
    }

    .stewards-governance p {
        font-size: 15px;
    }
}

.stewards-flow {
    padding: clamp(82px, 9vw, 132px) 0;
    background: var(--color-white);
}

.stewards-flow-header {
    max-width: 760px;
    margin: 0 auto clamp(54px, 6vw, 82px);
    text-align: center;
}

.stewards-flow-header h2 {
    margin: 0 0 18px;
    font-family: var(--font-statement);
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--color-heading);
    font-stretch: 100%;
}

.stewards-flow-header p {
    margin: 0;
    font: 400 18px/1.55 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.stewards-flow-list {
    width: 100%;
}

.stewards-flow-step {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    min-height: 126px;
    padding: 10px 34px 10px 10px;
    border: 2px solid currentColor;
    border-radius: 999px;
    color: var(--color-teal);
    background: var(--color-white);
}

.stewards-flow-number {
    display: grid;
    place-items: center;
    width: 102px;
    height: 102px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font: 700 23px/1 var(--font-statement);
    letter-spacing: 0.08em;
    font-stretch: 100%;
}

.stewards-flow-step h3 {
    margin: 0 0 7px;
    font-family: var(--font-statement);
    font-size: clamp(21px, 2.3vw, 29px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    color: currentColor;
    font-stretch: 100%;
}

.stewards-flow-step p {
    max-width: 760px;
    margin: 0;
    font: 400 16px/1.5 var(--font-system);
    color: var(--color-slate);
}

.stewards-flow-arrow {
    display: grid;
    place-items: center;
    height: 50px;
    font: 300 31px/1 var(--font-system);
    color: #a7b2b5;
}

.stewards-flow-step-1 { color: var(--color-brown); }
.stewards-flow-step-2 { color: var(--color-coral-bright); }
.stewards-flow-step-3 { color: var(--color-teal-accent); }
.stewards-flow-step-4 { color: var(--color-teal); }
.stewards-flow-step-5 { color: var(--color-teal-accent); }
.stewards-flow-step-6 { color: var(--color-coral-bright); }

@media (max-width: 720px) {
    .stewards-flow-step {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        padding: 22px 20px 28px;
        border-radius: 30px;
        text-align: center;
    }

    .stewards-flow-number {
        width: 84px;
        height: 84px;
        margin-bottom: 18px;
    }

    .stewards-flow-step h3 {
        font-size: 20px;
    }

    .stewards-flow-arrow {
        height: 42px;
    }
}

/* Wraps the section band. flow-root keeps the hero card's negative margin
   from collapsing out of the wrapper, and the white ground covers the strip
   the card overlaps, which would otherwise show the cream page background. */
.home-page .railed {
    position: relative;
    display: flow-root;
    background: var(--color-white);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

/* Native bullets use the same orange accent throughout the site. */
ul li::marker {
    color: var(--color-coral-bright);
}

/* ---------- Header ---------- */
/* A full-width cream bar pinned to the top of every page, rather than the
   translucent pill that used to float over the hero photo. */
/* The bar belongs to the page it sits on: it scrolls up and off with the
   content under it rather than pinning to the top or sliding away on its own.
   Relative rather than static so it still paints over the hero, which is
   pulled up under it by its own negative margin. */
.site-header {
    position: relative;
    z-index: 60;
    background: var(--color-white);
    border-bottom: 0;
    /* Enough to separate the bar from the page under it without reading as a
       drop shadow: a hairline of contact and a short, wide fall beneath it,
       both mixed from the deep teal rather than black so the edge stays warm
       against the cream grounds. */
    box-shadow:
        0 1px 2px rgba(13, 50, 56, 0.07),
        0 6px 18px rgba(13, 50, 56, 0.05);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Three tracks so the nav centres on the bar itself rather than being pushed
   right by the logo. The outer tracks are equal, so the middle one is centred
   no matter how wide the logo or the donate button get. */
.header-inner {
    max-width: var(--max-width);
    height: var(--header-h);
    margin-inline: auto;
    padding-inline: var(--side-padding);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.brand {
    position: relative;
    display: block;
    width: 204px;
    height: 70px;
    overflow: hidden;
}

.brand-logo {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 204px;
    height: auto;
    transform: translateY(-50%);
}

.primary-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2vw, 30px);
}

.primary-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* a nav label never breaks across two lines, however tight the bar gets */
    white-space: nowrap;
    font-size: 17px;
    font-weight: 500;
    color: var(--color-ink);
    transition: color 0.2s ease;
}

.primary-nav a:hover {
    color: var(--color-coral-bright);
}

/* colour alone marks the current page */
.primary-nav a.is-active {
    color: var(--color-coral-bright);
}

.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 17px;
    font-weight: 500;
    color: var(--color-ink);
    cursor: pointer;
}

.nav-dropdown-toggle > span {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.is-active { color: var(--color-coral-bright); }
.nav-dropdown.is-open .nav-dropdown-toggle > span { transform: translateY(2px) rotate(225deg); }

.nav-dropdown-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 18px);
    left: 50%;
    width: 220px;
    padding: 10px;
    border: 1px solid rgba(28, 32, 33, .1);
    background: var(--color-white);
    box-shadow: 0 18px 45px rgba(13, 50, 56, .16);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.nav-dropdown-menu a { display: flex; min-height: 40px; padding: 9px 12px; }

/* Dropdown content sits on a white panel even while the homepage header is
   transparent, so it must not inherit the hero's white navigation color. */
.home-page .site-header:not(.is-floating) .nav-dropdown-menu a {
    color: var(--color-ink);
    text-shadow: none;
}

.home-page .site-header:not(.is-floating) .nav-dropdown-menu a:hover,
.home-page .site-header:not(.is-floating) .nav-dropdown-menu a:focus-visible {
    color: var(--color-coral-bright);
}

/* the one button in the bar */
.nav-action {
    padding: 12px 26px;
    border-radius: var(--radius-btn);
    background: var(--color-coral-bright);
    font-family: "Noto Sans", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-white) !important;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-action:hover {
    background: var(--color-coral-bright-hover);
    color: var(--color-white) !important;
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 11px;
    border: 1px solid rgba(28, 32, 33, 0.14);
    border-radius: 50%;
    background: transparent;
    color: var(--color-ink);
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 4px 0;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* The homepage lays its sections out on --home-max-width, so the header
   adopts the same measure and the logo lines up with the copy beneath it. */
.home-page .header-inner {
    max-width: var(--home-max-width);
    padding-inline: var(--home-side-padding);
}

/* ---------- Homepage: the bar sits over the hero ----------
   The photograph runs up behind the bar. The hero is pulled up by the bar's
   height, the band grows by exactly what the pull-up took so the amount of
   picture showing is unchanged, and the hero's own top padding gives that
   height back to the claim. */
.home-page .home-hero {
    margin-top: calc(var(--header-h) * -1);
}

.home-page .home-hero-inner {
    padding-top: var(--header-h);
}

/* Kept close to the panel so the headline and supporting copy read as one
   composition rather than two unrelated layers in the photograph. */
.home-page .home-hero-inner {
    flex: 1;
    display: flex;
    align-items: center;
    /* Clears the line drawing below, so the headline never sits in the peaks.
       Measured against where the drawing's ink actually starts under the
       headline rather than the top of its box, which is transparent sky. */
    padding-bottom: min(24vw, 232px);
    /* set in from the page edge, so the claim reads as placed rather than
       flush; the extra travel scales down on narrow screens */
    padding-left: calc(var(--home-side-padding) + clamp(8px, 2vw, 40px));
}


/* Two marks, cross-faded: the light one reads on the photograph, the dark one
   on white. Interior pages only ever show the dark one. */
.brand-logo {
    transition: opacity 0.25s ease;
}

.brand-logo-light {
    opacity: 0;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The one voice every button shares. Held with !important because the
       per-section rules each set their own family; the token is what changes
       when the button voice changes. */
    font-family: var(--font-nav) !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-stretch: 75%;
}

/* Hover presses the button down into its own shadow: it travels the same
   distance the shadow shrinks, so the top face moves and the shadow's lower
   edge stays put, which is what selling the press depends on. */
.btn-coral {
    background: var(--color-coral-bright);
    color: var(--color-white);
    padding: 14px 34px;
    border-radius: var(--radius-btn);
    font-size: 18px;
    font-weight: 500;
}

.btn-coral:hover {
    background: var(--color-coral-bright-hover);
}

/* ---------- Hero ---------- */
.hero-2 {
    position: relative;
    background: var(--color-section);
}

.hero-2-media {
    position: relative;
    display: flex;
    align-items: center;          /* centres the copy in the hero height */
    min-height: 520px;
    height: calc(100vh - var(--header-h));
    height: calc(100svh - var(--header-h));   /* avoids the mobile URL-bar jump */
    overflow: hidden;
    isolation: isolate;
}

.hero-2-media::before {
    content: "";
    position: absolute;
    inset: -6% 0;
    background-image: url("ssfasset14-73.jpg");
    background-size: cover;
    background-position: center;
    z-index: -1;
}

/* Black fade down the top of the photo */
.page-hero-media::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 44%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.18) 34%, rgba(0, 0, 0, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

/* Top fade plus a left scrim. z-index 0 puts both above the photo (-1) but
   under the wave (1) and the copy (2). */
.hero-2-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.12) 26%, rgba(0, 0, 0, 0) 52%),
        linear-gradient(96deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.54) 28%, rgba(0, 0, 0, 0.22) 52%, rgba(0, 0, 0, 0) 74%);
    z-index: 0;
    pointer-events: none;
}

.hero-2-content {
    position: relative;
    z-index: 2;
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--side-padding) 0 clamp(28px, 6vw, 88px);
    color: var(--color-white);
}

.hero-2-heading {
    margin: 0 0 20px;
    font-family: var(--font-accent);
    font-weight: 400;
    font-size: clamp(40px, 5.4vw, 72px);
    line-height: 1.04;
    color: var(--color-white);
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.45);
    font-stretch: 75%;
}

.hero-2-accent {
    color: var(--color-coral);
}

/* the italic "The", opted out of the parent's uppercase */
.hero-2-eyebrow {
    display: inline-block;
    font-size: 0.42em;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    color: var(--color-cream);
    vertical-align: top;
    margin-right: 0.2em;
    padding-bottom: 0.15em;
    border-bottom: 2px solid var(--color-coral);
    line-height: 1;
    transform: translateY(0.45em);
}

.hero-2-body {
    margin: 0 0 32px;
    max-width: 480px;
    font-size: 19px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.hero-2-cta {
    padding: 16px 36px;
    font-size: 16px;
}

/* ---------- Shared section scaffolding ---------- */
/* Each band is rounded at the top and pulled up by the radius, so the curve
   sits inside the section above. Without the negative margin the corners
   would expose the page ground as two white notches. */
.brief,
.projects,
.values,
.team,
.closing {
    position: relative;
    border-radius: var(--radius-section) var(--radius-section) 0 0;
    overflow: hidden;
    /* pulled up by exactly the radius, so the corners sit on the dark teal of
       the wave above rather than exposing the page ground */
    margin-top: calc(-1 * var(--radius-section));
    /* one shared height; content centres in it rather than setting it */
    min-height: var(--section-min);
    display: flex;
    align-items: center;
    isolation: isolate;
}

.brief > .brief-inner,
.projects > .section-inner,
.values > .section-inner,
.closing > .closing-media {
    width: 100%;
}

/* trimmed so content fits inside the shared height instead of driving past it;
   the flex centring above supplies the breathing room */
.projects .section-inner,
.values .section-inner,
.team .section-inner {
    padding-block: clamp(28px, 3vw, 44px);
}


.closing-media {
    border-radius: inherit;
}

.section-inner {
    position: relative;
    z-index: 1;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--section-padding) var(--side-padding);
}

.section-cream {
    position: relative;
    background: var(--color-section);
    overflow: hidden;
}

.section-dark {
    position: relative;
    background: var(--color-teal);
    color: var(--color-cream);
    overflow: hidden;
}

.section-heading {
    margin: 0 0 20px;
    font-family: var(--font-accent);
    font-weight: 400;
    font-size: clamp(27px, 3.2vw, 43px);
    line-height: 1.14;
    color: var(--color-heading);
    font-stretch: 75%;
}

.section-dark .section-heading {
    color: var(--color-cream);
}

.section-body {
    margin: 0;
    max-width: 44ch;
    font-size: 18px;
    line-height: 1.75;
    color: var(--color-body);
}

.section-dark .section-body {
    color: rgba(247, 241, 232, 0.82);
}

/* ---------- What we do (newsletter-style feature) ---------- */
.brief {
    position: relative;
    overflow: hidden;
    background-color: var(--color-section);
    background-image: url("sffsection1bg.jpg");
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
}

.brief-inner {
    position: relative;
    z-index: 1;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: clamp(48px, 5vw, 72px) var(--side-padding);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46%;
    align-items: center;
}

/* Bleeds off the right edge; one straight diagonal runs the full height,
   slanting down-left from the top edge to the bottom-left corner. */
.brief-media {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 47%;
    margin: 0;
}

.brief-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}

.brief-text {
    grid-column: 1;
    padding-right: clamp(24px, 4vw, 64px);
}

.brief-heading {
    margin: 0 0 28px;
    font-family: var(--font-accent);
    font-weight: 400;
    font-size: clamp(27px, 3.2vw, 42px);
    line-height: 1.12;
    color: var(--color-heading);
    font-stretch: 75%;
}

/* Explicit grid rather than CSS multi-column, so both
   columns start on the same baseline. */
.brief-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 36px;
}

.brief-columns p {
    margin: 0 0 15px;
    font-size: 17px;
    line-height: 1.72;
    color: var(--color-body);
}

.brief-columns p:last-child {
    margin-bottom: 0;
}

.project-cards,
.value-list,
.footer-social {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---------- Featured projects ---------- */
.projects-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr);
    align-items: center;
    gap: clamp(32px, 5vw, 64px);
}

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

.project-card-media {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 18px;
}

.project-card-title {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 23px;
    line-height: 1.25;
    color: var(--color-cream);
    font-stretch: 75%;
}

.project-card-body {
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 1.62;
    color: rgba(247, 241, 232, 0.78);
}

.project-card-link {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-coral-tint);
    transition: color 0.2s ease;
}

.project-card-link:hover {
    color: var(--color-cream);
}

/* ---------- Values ---------- */
.values {
    position: relative;
    background: var(--color-teal-deep);
    color: var(--color-cream);
    text-align: center;
}

/* Faint tapa texture so the large terracotta field reads as a material
   rather than a flat CSS colour. */
.values::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("ssfasset11.png");
    background-repeat: repeat;
    background-size: 300px auto;
    mix-blend-mode: screen;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

.values-heading {
    margin: 0 0 clamp(40px, 5vw, 60px);
    font-family: var(--font-accent);
    font-weight: 400;
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.15;
    color: var(--color-cream);
    font-stretch: 75%;
}

.value-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 40px;
}

/* Padding rather than a column gap, so each rule sits centred between columns */
.value {
    padding: 0 clamp(12px, 1.8vw, 24px);
}

.value:not(:first-child) {
    border-left: 1px solid rgba(255, 255, 255, 0.32);
}

.value-icon {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    object-fit: contain;
    filter: invert(1) grayscale(1) brightness(2.2) sepia(0.5);
    mix-blend-mode: screen;
}

/* ssfasset11 is a repeating chevron tile rather than a single mark;
   cropping it to a disc lets it sit as a medallion beside the others. */
.value-icon-tile {
    object-fit: cover;
    border-radius: 50%;
}

.value-name {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-cream);
}

.value-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(247, 241, 232, 0.8);
}

/* ---------- Closing CTA ---------- */
/* Warm-neutral scrim rather than the site teal, so the golden haze survives */
/* Photo is mirrored via scaleX; .closing-inner flips back so the copy reads
   normally, and the scrim angle is reversed so it still darkens the left. */
.closing-media {
    position: relative;
    transform: scaleX(-1);
    background-image: linear-gradient(268deg, rgba(44, 36, 30, 0.76) 0%, rgba(44, 36, 30, 0.44) 46%, rgba(44, 36, 30, 0.08) 82%), url("ssfasset13-76.jpg");
    /* At banner proportions `cover` fits the photo edge-to-edge with no
       horizontal slack, so it needs a slight zoom before it can slide. */
    /* `cover` keeps the 2880px source at ~1:1 on a HiDPI screen; any extra
       zoom upscales past the source and reads soft. */
    background-size: auto, cover;
    background-position: center, center 62%;
    display: flex;
    align-items: center;
    min-height: var(--section-min);
}

/* width:100% because as a flex child it would otherwise shrink to its content
   and centre; scaleX(-1) undoes the mirror applied to .closing-media */
.closing-inner {
    width: 100%;
    transform: scaleX(-1);
}

.closing-heading {
    margin: 0 0 28px;
    font-family: var(--font-accent);
    font-weight: 400;
    font-size: clamp(27px, 3.2vw, 42px);
    line-height: 1.18;
    color: var(--color-white);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
    font-stretch: 75%;
}

/* ---------- Contact (section on home, page on contact.html) ---------- */
.plain {
    background: var(--color-section);
}

/* the header is absolute, so the first block clears it itself */
.plain-inner {
    padding-top: clamp(56px, 7vw, 92px);
    padding-bottom: clamp(64px, 8vw, 104px);
    max-width: 780px;
}

.plain-heading {
    margin: 0 0 18px;
    font-family: var(--font-accent);
    font-weight: 400;
    font-size: clamp(34px, 4.4vw, 58px);
    line-height: 1.08;
    color: var(--color-heading);
    font-stretch: 75%;
}

.plain-intro {
    margin: 0 0 clamp(36px, 4vw, 52px);
    font-size: 19px;
    line-height: 1.7;
    color: var(--color-body);
}

/* ---------- Our Focus: card grid ---------- */
.focus-page {
    overflow: hidden;
    background: #0d3a41;
}

.focus-section {
    --focus-ground: #0d3a41;
    overflow: hidden;
    background: var(--focus-ground);
    padding: clamp(68px, 7vw, 104px) 0;
}

.focus-shell {
    display: grid;
    grid-template-columns: clamp(250px, 21vw, 320px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(38px, 5vw, 76px);
    padding-left: max(var(--home-side-padding), calc((100vw - var(--home-max-width)) / 2 + 80px));
    padding-right: max(var(--home-side-padding), calc((100vw - var(--home-max-width)) / 2 + 80px));
}

.focus-intro { padding-top: 4px; color: var(--color-white); }

.focus-eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-button);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #7bd4df;
    font-stretch: 75%;
}

.focus-intro h1.focus-statement,
.focus-intro h2.focus-statement {
    margin: 0 0 28px;
    font-family: var(--font-display);
    font-size: clamp(28px, 2.75vw, 40px);
    font-weight: 700;
    line-height: 1.16;
    color: var(--color-white);
    font-stretch: 75%;
}

.focus-statement {
    color: var(--color-white);
}

.focus-intro > p:last-child {
    margin: 0;
    font-size: 19px;
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.9);
}

/* Three across, wrapping to a second row — the six focus areas read as one
   block instead of a rail the visitor has to scroll through. */
.focus-grid {
    --focus-card-height: clamp(300px, 24vw, 360px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 30px);
    min-width: 0;
}

.focus-card {
    position: relative;
    min-height: var(--focus-card-height);
    padding: clamp(27px, 2.5vw, 38px);
    border: 2px solid var(--focus-border, rgba(28, 32, 33, 0.16));
    border-radius: 18px;
    overflow: hidden;
    background: var(--focus-card-bg, #53aaba);
    color: var(--color-white);
}

.focus-card h2,
.focus-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 20px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.12;
    font-stretch: 100%;
}

.focus-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 19px;
    line-height: 1.55;
}

.focus-card img {
    position: absolute;
    right: -20px;
    bottom: -34px;
    width: clamp(170px, 16vw, 230px);
    height: clamp(170px, 16vw, 230px);
    object-fit: contain;
    opacity: 0.16;
}

/* One ground per focus area, drawn from the brand palette rather than three
   colors used twice. They are laid out so no two neighbours share a hue: the
   warm column reads orange into rust, and the cool grounds step down in value
   instead of sitting at the same one.

   The old grounds carried white body copy at 2.7-3.1:1. Every ground here
   except the brand orange clears 4.5:1; the orange stays because it is the
   signature color, and it leads the grid. */
.focus-card-energy {
    --focus-border: #ed9239;
    --focus-card-bg: var(--color-coral-bright);
}
.focus-card-infrastructure {
    --focus-border: #6198a0;
    --focus-card-bg: var(--color-teal-button);
}
.focus-card-resilience {
    --focus-border: #7b9397;
    --focus-card-bg: var(--color-teal-light);
}
/* Literal, not --color-coral-strong: the homepage collapses every orange token
   onto the one accent orange, which would make this card a duplicate of Energy.
   This value is what the token resolves to everywhere else, so both pages
   agree. */
.focus-card-leadership {
    --focus-border: #c9866a;
    --focus-card-bg: #944C25;
}
.focus-card-stewardship {
    --focus-border: #97695c;
    --focus-card-bg: var(--color-brown);
}
.focus-card-opportunity {
    --focus-border: #58767b;
    --focus-card-bg: var(--color-teal);
}

/* The intro sits in its own column, so three cards get cramped well before
   the layout actually stacks. Drop to two across first. */
@media (max-width: 1180px) {
    .focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .focus-section { padding-top: 64px; }

    .focus-shell {
        grid-template-columns: 1fr;
        gap: 38px;
        padding-left: var(--side-padding);
        padding-right: var(--side-padding);
    }

    .focus-intro { max-width: 620px; padding-right: 0; }

    .focus-card { min-height: 0; }

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

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

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

.field-wide {
    grid-column: 1 / -1;
}

.field label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-ink);
}

.field-note {
    font-weight: 400;
    color: var(--color-body);
}

.field input,
.field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(28, 32, 33, 0.22);
    border-radius: var(--radius-btn);
    background: var(--color-white);
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--color-charcoal);
    font-stretch: 100%;
}

.field textarea {
    resize: vertical;
    min-height: 140px;
}

.field input:focus-visible,
.field textarea:focus-visible {
    outline: 2px solid var(--color-coral);
    outline-offset: 2px;
    border-color: transparent;
}

.contact-submit {
    grid-column: 1 / -1;
    justify-self: start;
}

/* ---------- Contact: the photograph on a band, the form on the contours ----
   The band runs off the left edge and the photograph sits on it, so the pair
   reads as one composition rather than a picture parked beside a form. The
   contour map is the foundation's own drawing, held faint enough to stay a
   ground for the fields rather than competing with them. */
.contact-feature {
    position: relative;
    background: var(--color-white);
    padding-block: var(--space-section-sm);
    overflow: hidden;
}

.contact-feature::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: min(64%, 940px);
    background: url("Svgs/pattern_teal.svg") no-repeat right center / cover;
    opacity: 0.09;
    pointer-events: none;
}

.contact-feature-inner {
    position: relative;
    z-index: 1;
    width: min(var(--home-max-width), 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(320px, 1.22fr);
    column-gap: clamp(40px, 5vw, 88px);
    align-items: center;
}

/* Set inboard of its column so the band reads as a band to the left of the
   picture rather than a sliver at the page edge. */
.contact-figure {
    position: relative;
    z-index: 1;
    margin: 0 0 0 auto;
    width: min(100%, 400px);
    aspect-ratio: 4 / 5;
}

/* The band is the photograph's own, so it ends exactly at the picture's edge
   and the picture overhangs it top and bottom no matter what sets the
   section's height. It runs off the left of the page and the section clips it.
   object-fit keeps the image inside its box, so the figure needs no overflow
   rule that would take the band with it. */
.contact-figure::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    left: -100vw;
    top: 9%;
    bottom: 9%;
    background: var(--color-sand);
    pointer-events: none;
}

/* The frame is far narrower than the photograph, so cover crops its sides and
   shows the full height — which leaves object-position nothing to move
   vertically. The picture is scaled past the frame instead and pulled up, so
   the canoe, which sits at 63% of the image height, lands on the middle. The
   crop lives on its own element because the figure cannot hide its overflow:
   that would take the band with it. 140% is the least zoom that can centre the
   canoe, since only 37% of the picture lies below it, so this keeps as much of
   the ridgeline as centring allows. */
.contact-figure-crop {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.contact-figure-crop img {
    position: absolute;
    left: 0;
    top: -38.6%;
    width: 100%;
    height: 140%;
    object-fit: cover;
    object-position: center;
}

.contact-title {
    margin: 0 0 12px;
    font-family: var(--font-utility);
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-heading);
    font-stretch: 100%;
}

.contact-intro {
    margin: 0 0 clamp(24px, 2.6vw, 34px);
    padding-bottom: clamp(20px, 2.2vw, 28px);
    border-bottom: 1px solid rgba(41, 79, 86, 0.18);
    max-width: 52ch;
    font: 400 clamp(15px, 1.02vw, 17px)/1.6 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

@media (max-width: 900px) {
    .contact-feature-inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: clamp(30px, 5vw, 44px);
    }

    .contact-feature::after { width: 100%; }

    /* stacked, the band reaches past both sides of the picture */
    .contact-figure::before {
        right: -100vw;
    }

    .contact-figure {
        margin-inline: 0;
        width: min(100%, 420px);
        aspect-ratio: 3 / 4;
    }
}

/* ---------- Join the movement ---------- */
.signup {
    position: relative;
    background: var(--color-teal);
    color: var(--color-cream);
    z-index: 3;
}

.signup-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
}

.signup-heading {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.14;
    color: var(--color-cream);
    font-stretch: 75%;
}

.signup-body {
    margin: 0;
    max-width: 42ch;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(247, 241, 232, 0.82);
}

.signup-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.signup-form input {
    flex: 1 1 190px;
    min-width: 0;
    padding: 15px 18px;
    border: 1px solid rgba(247, 241, 232, 0.28);
    border-radius: var(--radius-btn);
    background: var(--color-white);
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--color-charcoal);
    font-stretch: 100%;
}

.signup-form input::placeholder {
    color: rgba(60, 60, 60, 0.5);
}

.signup-form input:focus-visible {
    outline: 2px solid var(--color-coral);
    outline-offset: 2px;
}

.signup-form .btn {
    flex: 0 0 auto;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- Home: community return ---------- */
.return {
    position: relative;
    background: var(--color-white);
    padding: var(--space-band) 0;
}

.return-inner {
    max-width: var(--home-max-width);
    margin: 0 auto;
    padding-inline: var(--home-side-padding);
}

.return-head {
    max-width: var(--container-reading);
    margin: 0 auto clamp(44px, 5vw, 76px);
    text-align: center;
}

.return-eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-button);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--color-coral-bright);
    font-stretch: 75%;
}

.return-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.06;
    color: var(--color-heading);
    font-stretch: 75%;
}

.return-body {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

/* The question mark sits behind the list rather than beside it, so the
   questions read over the glyph and it never takes a column of its own. */
.return-body::before {
    content: "?";
    position: absolute;
    z-index: 0;
    left: clamp(240px, 31vw, 470px);
    top: 50%;
    translate: -50% -50%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(280px, 33vw, 440px);
    line-height: 0.78;
    color: var(--color-cream);
    opacity: var(--q-opacity, 0.55);
    pointer-events: none;
    user-select: none;
    font-stretch: 75%;
}

.return-lede,
.return-questions {
    position: relative;
    z-index: 1;
}

.return-lede p {
    margin: 0 0 22px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--color-body);
}

.return-lede p:last-child { margin-bottom: 0; }

.return-questions {
    counter-reset: return-q;
    margin: 0;
    padding: 0;
    list-style: none;
}

.return-questions li {
    counter-increment: return-q;
    margin-bottom: 20px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(15px, 1.35vw, 19px);
    line-height: 1.45;
    color: var(--color-teal);
    font-stretch: 75%;
}

.return-questions li::before {
    content: counter(return-q, decimal-leading-zero) ".";
    margin-right: 10px;
    font-size: inherit;
    color: var(--color-coral-bright);
}

.return-questions li:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
    .return-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .return-body::before {
        left: 50%;
        font-size: clamp(220px, 48vw, 340px);
    }
}

/* ---------- Home: who we seek to partner with ---------- */
/* An editorial directory rather than another split of copy beside a picture:
   the numbered rows carry the section and the photograph runs the full height
   of the column beside them. */
.partner {
    position: relative;
    background: var(--color-white);
    padding: var(--space-band) 0;
}

.partner-inner {
    max-width: var(--home-max-width);
    margin: 0 auto;
    padding-inline: var(--home-side-padding);
}

/* The same track sizes and gutter as .model-inner: both sections run copy
   left against a strong visual right, so the visual column has to land on
   the same edge in each. align-items differs only so the figure can fill. */
.partner-body {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(460px, 1.12fr);
    align-items: stretch;
    gap: clamp(58px, 8vw, 124px);
}

.partner-eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-button);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--color-coral-bright);
    font-stretch: 75%;
}

.partner-title {
    margin: 0 0 22px;
    max-width: 26ch;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.06;
    color: var(--color-heading);
    font-stretch: 75%;
}

.partner-intro {
    margin: 0 0 clamp(34px, 4vw, 56px);
    max-width: 60ch;
    font-size: 19px;
    line-height: 1.62;
    color: var(--color-body);
}

.partner-directory {
    counter-reset: partner-row;
    margin: 0;
    padding: 0;
    list-style: none;
}

.partner-row {
    counter-increment: partner-row;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: clamp(14px, 2vw, 26px);
    padding: clamp(9px, 0.9vw, 13px) 0;
}

.partner-row::before {
    content: counter(partner-row, decimal-leading-zero) ".";
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(17px, 1.8vw, 26px);
    line-height: 1.2;
    color: var(--color-coral-bright);
    font-stretch: 75%;
}

.partner-row-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(17px, 1.8vw, 26px);
    line-height: 1.2;
    letter-spacing: 0.005em;
    color: var(--color-heading);
    font-stretch: 75%;
}

.partner-figure {
    position: relative;
    margin: 0;
    min-height: 0;
    /* The photograph used to set this column's height by its own proportions.
       Now that it is positioned for the parallax it no longer can, so the
       ratio is stated here and the section keeps the height it had. */
    aspect-ratio: 1000 / 1523;
    overflow: hidden;
}

.partner-figure img {
    position: absolute;
    /* Oversized so the parallax has crop to travel into. */
    inset: -4% 0;
    display: block;
    width: 100%;
    height: 108%;
    object-fit: cover;
    object-position: center;
}

.partner-close {
    margin-top: clamp(56px, 7vw, 104px);
    text-align: center;
}

.partner-statement {
    max-width: 40ch;
    margin: 0 auto clamp(30px, 3.4vw, 44px);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 2.9vw, 42px);
    line-height: 1.12;
    color: var(--color-heading);
    font-stretch: 75%;
}

.partner-statement em {
    font-style: normal;
    color: var(--color-coral);
}

.partner-cta {
    padding: 15px 34px;
    border-radius: var(--radius-btn);
    background: var(--color-coral-bright);
    font-size: 17px;
    color: var(--color-white);
}

.partner-cta:hover { background: var(--color-coral-bright-hover); }

@media (max-width: 900px) {
    .partner-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    /* the photograph moves under the intro so the directory stays unbroken */
    .partner-figure {
        order: -1;
        aspect-ratio: 16 / 10;
    }

    .partner-statement { max-width: 28ch; }
}

/* ---------- Home: rooted in Hawaii ---------- */
/* The cinematic payoff. A full bleed landscape carrying the largest type on
   the page after the hero, then a cream editorial continuation, then the one
   line the whole page has been building toward. */
.rooted {
    position: relative;
}

.rooted-media {
    position: relative;
    min-height: clamp(560px, 70vh, 820px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--color-teal-deep);
}

.rooted-media::before {
    content: "";
    position: absolute;
    /* Overscanned: the parallax shifts this layer, and at inset 0 the shift
       drags its edge into frame as a bar of the ground behind it. */
    inset: -6% 0;
    background-image:
        linear-gradient(180deg, rgba(4, 26, 30, 0.26) 0%, rgba(4, 26, 30, 0.06) 40%, rgba(4, 26, 30, 0.46) 100%),
        linear-gradient(90deg, rgba(4, 26, 30, 0) 42%, rgba(4, 26, 30, 0.58) 100%),
        url("rooted-westoahu.webp");
    background-size: cover;
    background-position: center;
    transform: scale(var(--rooted-scale, 1)) translate3d(0, var(--rooted-shift, 0px), 0);
    pointer-events: none;
}

.rooted-media-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--home-max-width);
    margin: 0 auto;
    padding: clamp(56px, 7vw, 104px) var(--home-side-padding);
}

.rooted-eyebrow {
    margin: 0 0 18px;
    font-family: var(--font-button);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--color-ice);
    font-stretch: 75%;
}

.rooted-statement {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(30px, 4.4vw, 64px);
    line-height: 1.04;
    color: var(--color-white);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
    font-stretch: 75%;
}

/* The proverb answers the statement from the opposite corner rather than
   stacking under it, so the photograph still has room to breathe. */
.rooted-olelo {
    max-width: 36ch;
    margin: clamp(56px, 8vw, 120px) 0 0 auto;
    text-align: left;
}

.rooted-olelo blockquote {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(20px, 2.1vw, 30px);
    line-height: 1.14;
    text-transform: uppercase;
    color: var(--color-coral-bright);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.42);
    font-stretch: 75%;
}

.rooted-olelo figcaption {
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.5;
    color: var(--color-white);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.42);
}

/* Keep the rooted story on the softer raster artwork; it has enough detail to
   carry the full-width composition without competing with the copy. */
.rooted-story {
    position: relative;
    overflow: hidden;
    background-color: var(--color-section);
    background-image: url("ChatGPT Image Aug 25, 2026, 09_55_17 PM.jpg");
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    padding: clamp(56px, 7vw, 96px) 0;
}

.rooted-story::before {
    content: none;
}

/* Two tracks so the pull statement can sit out in the left margin beside the
   paragraph it lifts, the way it would in a printed spread. */
.rooted-story-inner {
    max-width: var(--home-max-width);
    margin: 0 auto;
    padding-inline: var(--home-side-padding);
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 44px) clamp(40px, 6vw, 96px);
}

.rooted-para {
    grid-column: 2;
    margin: 0;
    max-width: 54ch;
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.62;
    color: var(--color-body);
}

.rooted-pull {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.1;
    color: var(--color-teal);
    font-stretch: 75%;
}

.rooted-para-echo { grid-row: 2; }

.rooted-climax {
    max-width: var(--home-max-width);
    margin: clamp(48px, 6vw, 84px) auto 0;
    padding-inline: var(--home-side-padding);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(38px, 6.4vw, 104px);
    line-height: 0.98;
    color: var(--color-teal);
    font-stretch: 75%;
}

.rooted-climax em {
    font-style: normal;
    color: var(--color-coral);
}

@media (max-width: 860px) {
    .rooted-olelo { margin-left: 0; }

    .rooted-story-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .rooted-para,
    .rooted-pull,
    .rooted-para-echo {
        grid-column: 1;
        grid-row: auto;
    }

    .rooted-pull { margin-block: 12px; }
}

/* ---------- Home: who we are ---------- */
/* Deliberately quiet after the climax, and a step lighter than the footer so
   the two teals read as separate bands. */
.whoweare {
    position: relative;
    overflow: hidden;
    background: var(--color-white);
    padding: var(--space-band) 0;
}

.whoweare::before {
    content: "";
    position: absolute;
    right: -140px;
    top: 50%;
    width: 620px;
    aspect-ratio: 1 / 1;
    background-image: url("sffvectors.svg");
    background-size: 398.35% 189.63%;
    background-position: 100% 54.7%;
    background-repeat: no-repeat;
    opacity: 0.09;
    transform: translateY(-50%);
    pointer-events: none;
}

.whoweare-inner {
    position: relative;
    z-index: 1;
    max-width: var(--home-max-width);
    margin: 0 auto;
    padding-inline: var(--home-side-padding);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(36px, 6vw, 104px);
}

.whoweare-eyebrow {
    margin: 0 0 18px;
    font-family: var(--font-button);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--color-coral-bright);
    font-stretch: 75%;
}

.whoweare-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--display-md);
    line-height: 1.06;
    color: var(--color-heading);
    font-stretch: 75%;
}

.whoweare-body p {
    margin: 0 0 clamp(26px, 3vw, 38px);
    max-width: 40ch;
    font-size: clamp(18px, 1.4vw, 21px);
    line-height: 1.62;
    color: var(--color-body);
}

.whoweare-cta {
    padding: 15px 34px;
    border-radius: var(--radius-btn);
    background: var(--color-coral-bright);
    font-size: 17px;
    color: var(--color-white);
}

.whoweare-cta:hover { background: var(--color-coral-bright-hover); }

@media (max-width: 860px) {
    .whoweare-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

/* ---------- Home: stay close / support ----------
   The last thing before the footer: one place to subscribe, one to give,
   split by a rule. Warm ground so it reads as a footer approach rather than
   another content section. */
.engage {
    background: var(--color-section);
    padding: var(--section-md) 0;
}

/* On every subpage the closing panel follows Explore, whose own bottom space
   already separates the two. Without this the two steps added up and the
   panel sat further from the page than any section sits from its neighbour. */
.explore + .engage {
    padding-top: var(--section-sm);
}

.engage-inner {
    max-width: var(--home-max-width);
    margin: 0 auto;
    padding-inline: var(--home-side-padding);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 80px);
    align-items: start;
}

.engage-support {
    padding-left: clamp(36px, 5vw, 80px);
    border-left: 1px solid rgba(41, 79, 86, 0.18);
}

.engage-title {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--display-sm);
    line-height: 1.12;
    color: var(--color-heading);
    font-stretch: 75%;
}

.engage-signup > p,
.engage-support > p {
    margin: 0 0 26px;
    max-width: 46ch;
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-body);
}

.engage-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.engage-field {
    display: grid;
    gap: 6px;
}

.engage-field label {
    font-family: var(--font-button);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-body);
    font-stretch: 75%;
}

.engage-field input {
    height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(41, 79, 86, 0.28);
    border-radius: var(--radius-btn);
    background: var(--color-white);
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--color-ink);
    font-stretch: 100%;
}

.engage-field input:focus-visible {
    outline: 2px solid var(--color-coral-bright);
    outline-offset: 1px;
    border-color: transparent;
}

.engage-submit,
.engage-donate {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 13px 30px;
    border-radius: var(--radius-btn);
    background: var(--color-coral-bright);
    font-size: 15px;
    color: var(--color-white);
}

.engage-submit:hover,
.engage-donate:hover {
    background: var(--color-coral-bright-hover);
}

.engage-donate {
    display: inline-flex;
}

@media (max-width: 860px) {
    .engage-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .engage-support {
        padding-left: 0;
        padding-top: 36px;
        border-left: 0;
        border-top: 1px solid rgba(41, 79, 86, 0.18);
    }

    .engage-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Footer ---------- */
.site-footer {
    position: relative;
    overflow: hidden;
    border-top: var(--rail-w) solid var(--color-coral-bright);
    background: var(--color-teal-deep);
    color: var(--color-cream);
}

.site-footer::before {
    content: "";
    position: absolute;
    right: 58px;
    top: 50%;
    width: 560px;
    aspect-ratio: 1 / 1;
    background-image: url("sffvectors.svg");
    background-size: 398.35% 189.63%;
    background-position: 100% 54.7%;
    background-repeat: no-repeat;
    opacity: 0.14;
    transform: translateY(-50%) rotate(-14deg);
    pointer-events: none;
}

/* Oʻahu, bleeding off the bottom-left corner. It balances the sunfish mark
   on the right, and `overflow: hidden` on the footer does the cropping. */
.site-footer .footer-island {
    position: absolute;
    left: -70px;
    bottom: 0;
    width: 620px;
    opacity: 0.22;
    pointer-events: none;
    user-select: none;
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    min-height: 580px;
    padding: 168px var(--side-padding) 76px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 76px 64px;
}

.footer-inner > * {
    position: relative;
    z-index: 1;
}

.footer-brand {
    position: relative;
    display: block;
    width: 167px;
    height: 68px;
    overflow: hidden;
}

.footer-logo {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 167px;
    height: auto;
    transform: translateY(-50%);
    opacity: 1;
}

.footer-nav {
    display: flex;
    justify-content: center;
    align-content: start;
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 12px 34px;
    font-size: 14px;
}

.footer-nav a {
    color: var(--color-cream);
    font-weight: 600;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.footer-nav a:hover {
    opacity: 1;
}

.footer-social {
    display: flex;
    gap: 10px;
}

/* A drawn ring rather than a washed disc: the border carries the shape at
   full strength and the mark sits on the footer's own ground, so the three
   read as icons instead of grey chips. */
.footer-social a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--color-white);
    background: transparent;
    color: var(--color-white);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover fills the ring and the mark takes the ground it was sitting on. */
.footer-social a:hover,
.footer-social a:focus-visible {
    background: var(--color-white);
    color: var(--color-teal-deep);
}

.footer-social svg {
    width: 17px;
    height: 17px;
}

.footer-copyright {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 13px;
    text-align: center;
    opacity: 0.7;
}

/* ---------- Team page: hero ---------- */
.page-hero {
    position: relative;
    background: var(--color-cream);
}

.page-hero-media {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 560px;
    height: clamp(560px, 70vh, 820px);
    overflow: hidden;
    isolation: isolate;
}

.page-hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(96deg, rgba(30, 45, 48, 0.78) 0%, rgba(30, 45, 48, 0.42) 46%, rgba(30, 45, 48, 0.05) 78%), url("ssfasset17-74.jpg");
    background-size: cover;
    background-position: center 22%;
    z-index: -1;
}

.page-hero-content {
    position: relative;
    z-index: 2;
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--side-padding);
    color: var(--color-white);
}

.page-hero-heading {
    margin: 0 0 16px;
    font-family: var(--font-accent);
    font-weight: 400;
    font-size: clamp(31px, 4vw, 54px);
    line-height: 1.06;
    color: var(--color-white);
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.45);
    font-stretch: 75%;
}

.page-hero-body {
    margin: 0;
    max-width: 430px;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ---------- Team page ---------- */
/* Faint tonal watermark: mountain, wave and fern in kapa pattern. Its cream
   was rebased to --color-section so the flat right side matches the ground. */
.team {
    /* Keep the section's top edge fixed when a bio expands. Centering this
       flex child caused the whole section contents to jump upward. */
    align-items: flex-start;
    background-color: var(--color-section);
    background-image: url("ChatGPT Image Aug 25, 2026, 09_55_17 PM.jpg");
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
}

.team .section-inner {
    width: 100%;
    padding-block: var(--space-section-sm);
}

.team-intro {
    margin-bottom: clamp(26px, 3vw, 40px);
}

.team-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 44px);
}

.member {
    min-width: 0;
}

.member-photo {
    display: block;
    width: 100%;
    max-width: 170px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 22px;
}

.member-name {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--color-heading);
    font-stretch: 75%;
}

.member-role {
    margin: 0 0 18px;
    font-size: 15px;
    color: var(--color-brown);
}

/* native <details>, so the toggle needs no JS and stays keyboard accessible */
.member-bio summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(28, 32, 33, 0.2);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-coral);
}

.member-bio summary::-webkit-details-marker { display: none; }

.member-bio summary::after {
    content: "+";
    font-size: 20px;
    line-height: 1;
}

/* open: label swaps to "Close" and the rule picks up the accent */
.member-bio[open] summary {
    border-bottom-color: var(--color-coral);
}

.member-bio[open] summary::after {
    content: "\2013";
}

.bio-label-close { display: none; }
.member-bio[open] .bio-label-open { display: none; }
.member-bio[open] .bio-label-close { display: inline; }

.member-bio-body {
    padding-top: 22px;
}

.member-bio-body p {
    margin: 0 0 16px;
    font-size: 17px;
    line-height: 1.75;
    color: var(--color-body);
}

.member-bio-body p:last-child { margin-bottom: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
    .brief-inner,
    .projects-inner,
    .team-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

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

    /* The desktop section is a horizontal flex composition. On smaller
       screens it must become a true vertical stack or the image and copy
       each claim half the viewport. */
    .brief {
        display: block;
    }

    .brief-media {
        position: static;
        width: auto;
        padding: clamp(52px, 8vw, 72px) var(--side-padding) 0;
    }

    .brief-media img {
        height: auto;
        aspect-ratio: 16 / 9;
        clip-path: none;
        border-radius: var(--radius);
    }

    .brief-inner {
        min-height: 0;
        padding-top: clamp(32px, 5vw, 48px);
    }

    .brief-text {
        padding-right: 0;
    }

    .value-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .value:nth-child(3n + 1) {
        border-left: none;
    }
}

@media (max-width: 900px) {
    :root {
        --side-padding: clamp(18px, 5vw, 32px);
        --section-padding: clamp(56px, 10vw, 80px);
        --section-min: auto;
        --radius-section: 20px;
    }

    :root { --header-h: 76px; }

    :root { --rail-w: 2px; }

    .header-inner {
        grid-template-columns: auto 1fr;
        gap: 12px;
    }

    .brand {
        width: 148px;
        height: 50px;
    }

    .brand-logo { width: 148px; }

    .home-page .brand,
    .home-page .brand-logo { width: 127px; }

    .home-page .header-actions { gap: 8px; }

    .nav-action {
        padding: 10px 20px;
        font-size: 16px;
    }

    .home-page .menu-toggle {
        width: 40px;
        height: 40px;
        padding: 10px;
    }

    .site-footer .footer-island {
        left: -80px;
        bottom: 0;
        width: 440px;
        opacity: 0.2;
    }

    .site-footer::before {
        right: 15px;
        top: 54%;
        width: 400px;
        opacity: 0.1;
        transform: translateY(-50%) rotate(-14deg);
    }

    .menu-ready .menu-toggle {
        display: block;
        position: relative;
        z-index: 2;
        flex: 0 0 auto;
    }

    /* the nav collapses into the panel; the donate pill stays on the bar */
    .menu-ready .primary-nav {
        grid-column: 1 / -1;
    }

    .menu-ready .primary-nav {
        position: absolute;
        justify-content: stretch;
        justify-items: stretch;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        display: grid;
        gap: 0;
        padding: 10px;
        border-radius: 18px;
        background: var(--color-white);
        border: 1px solid rgba(28, 32, 33, 0.10);
        box-shadow: 0 18px 45px rgba(13, 50, 56, 0.18);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }

    .menu-ready .primary-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .menu-ready .primary-nav a {
        min-height: 48px;
        padding: 0 14px;
        border-radius: 10px;
        font-size: 14px;
    }

    .menu-ready .nav-dropdown { display: grid; }
    .menu-ready .nav-dropdown-toggle {
        min-height: 48px;
        padding: 0 14px;
        justify-content: space-between;
        font-size: 14px;
    }
    .menu-ready .nav-dropdown-menu {
        position: static;
        width: auto;
        padding: 0 0 0 14px;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }
    .menu-ready .nav-dropdown.is-open .nav-dropdown-menu { display: grid; }
    .menu-ready .nav-dropdown-menu a { min-height: 42px; }
    .home-page .site-header:not(.is-floating) .primary-nav.is-open .nav-dropdown-toggle {
        color: var(--color-ink);
        text-shadow: none;
    }

    .menu-ready .primary-nav a:hover,
    .menu-ready .primary-nav a:focus-visible {
        background: rgba(28, 32, 33, 0.06);
        outline: none;
    }

    body:not(.home-page) .primary-nav.is-open > a,
    body:not(.home-page) .primary-nav.is-open .nav-dropdown-toggle {
        color: var(--color-ink);
    }

    body:not(.home-page) .primary-nav.is-open > a.is-active,
    body:not(.home-page) .primary-nav.is-open .nav-dropdown-toggle.is-active {
        color: var(--color-coral-bright);
    }


    .brief,
    .projects,
    .values,
    .team,
    .closing {
        min-height: 0;
    }

    .footer-inner {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding-top: 72px;
        justify-items: center;
        text-align: center;
    }

    .footer-nav {
        grid-template-columns: repeat(2, max-content);
        justify-content: center;
    }
}

@media (max-width: 720px) {
    .hero-2-media {
        min-height: 620px;
    }

    .hero-2-heading {
        font-size: clamp(38px, 12vw, 54px);
    }

    .hero-2-body {
        max-width: 100%;
    }

    .project-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .project-card-media {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .values .section-inner {
        padding-block: clamp(72px, 14vw, 104px);
    }

    .value-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .signup-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .contact-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .signup-form .btn {
        flex: 1 1 100%;
    }

    .signup-form input {
        flex-basis: 100%;
    }

    .value,
    .value:not(:first-child) {
        border-left: none;
        padding: 0 16px 36px;
    }

    .value:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    }

    .value:last-child {
        padding-bottom: 0;
    }

    .brief-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .brief-column p:last-child {
        margin-bottom: 15px;
    }

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

    .member-photo { max-width: 150px; }

    .page-hero-media {
        min-height: 560px;
        height: 78svh;
    }

    .contact-submit,
    .btn-coral { width: 100%; }

    .footer-nav { gap: 16px 22px; }
}

@media (max-width: 420px) {
    .brief-media img { aspect-ratio: 4 / 3; }

    .section-heading,
    .brief-heading,
    .values-heading,
    .signup-heading {
        overflow-wrap: anywhere;
    }
}

/* Off-canvas holder for the clip-path definition */
.sff-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------- Motion ---------- */
/* Everything here is scoped to .motion, which script.js adds only when JS runs
   and the reader has not asked for reduced motion. Without it nothing hides.
   Movement uses the standalone `translate` property rather than `transform`,
   so it composes with elements that already carry one (the closing section's
   copy is scaleX(-1) to counter its mirrored photo). */
.motion [data-reveal] {
    opacity: 0;
    transition:
        opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
        translate 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--d, 0s);
    will-change: opacity, translate;
}

.motion [data-reveal="left"]  { translate: -42px 0; }
.motion [data-reveal="right"] { translate: 42px 0; }
.motion [data-reveal="up"]    { translate: 0 30px; }

.motion [data-reveal].is-in {
    opacity: 1;
    translate: none;
}

/* Departure is scroll-linked, so no transition — driven per frame.
   Applied to content wrappers, never sections, so backgrounds stay solid. */
.motion [data-fade] {
    opacity: var(--fade, 1);
    translate: 0 var(--lift, 0px);
}

@media (prefers-reduced-motion: reduce) {
    .motion [data-reveal],
    .motion [data-fade] {
        opacity: 1;
        translate: none;
        transition: none;
    }
}

/* ---------- legal pages (privacy policy, terms of service) ---------- */
.legal-body {
    font-size: 18px;
    line-height: 1.75;
    color: var(--color-body);
}

.legal-body h2 {
    margin: clamp(34px, 4vw, 46px) 0 12px;
    font-family: var(--font-accent);
    font-weight: 400;
    font-size: clamp(21px, 2.3vw, 27px);
    line-height: 1.2;
    color: var(--color-heading);
    font-stretch: 75%;
}

.legal-body h2:first-child {
    margin-top: 0;
}

.legal-body p {
    margin: 0 0 16px;
}

.legal-body ul {
    margin: 0 0 16px;
    padding-left: 22px;
}

.legal-body li {
    margin-bottom: 8px;
}

.legal-body a {
    color: var(--color-coral-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-updated {
    margin: 0 0 clamp(30px, 3.5vw, 42px);
    font-size: 14px;
    letter-spacing: 0;
    color: var(--color-body);
}

.legal-body table {
    width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
    font-size: 15px;
}

.legal-body th,
.legal-body td {
    padding: 10px 12px;
    border: 1px solid rgba(41, 79, 85, 0.16);
    text-align: left;
    vertical-align: top;
}

.legal-body th {
    background: var(--color-sand);
    font-weight: 600;
    color: var(--color-ink);
}

/* footer legal links, styled to match the Cookie Settings button */
.footer-legal-link {
    margin-left: 10px;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.9;
}

.footer-legal-link::before {
    content: "\2022";
    display: inline-block;
    margin-right: 10px;
    text-decoration: none;
}

.footer-legal-link:hover,
.footer-legal-link:focus-visible {
    opacity: 1;
}


/* ---------- Home hero (Canva comp) ---------- */
/* Photo band with the headline over it, and a white copy card that hangs off
   its bottom edge into the page ground below. */
.home-hero {
    position: relative;
    background: var(--color-white);
}

.home-hero-media {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;
    /* Sized off viewport width alone, this filled a laptop screen and pushed
       the overlapping card below the fold. It answers to height too now. */
    height: clamp(470px, min(58vw, 78vh), 810px);
    overflow: hidden;
    isolation: isolate;
}

/* Past this width the 810px cap stops the hero growing while the line drawing,
   which is tied to the viewport width, keeps going — and the headline loses its
   clearance. Large displays have the height to spare. */

/* keeps the white headline off the bright sky without flattening the photo */
.home-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(4, 26, 30, 0.18);
    pointer-events: none;
}

.home-hero-media::before {
    content: "";
    position: absolute;
    /* Overscanned so the scroll parallax never slides its edge into view. */
    inset: -6% 0;
    /* Weighted to the top left, under the bar and the headline. */
    background-image: url("ssfasset14-73.jpg");
    background-size: cover;
    background-position: center;
    z-index: -1;
    transform: scale(var(--hero-scale, 1.02)) translate3d(0, var(--hero-shift, 0px), 0);
    animation: home-hero-ken-burns 18s ease-in-out infinite alternate;
}

@keyframes home-hero-ken-burns {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to { transform: scale(1.1) translate3d(-1.25%, -1%, 0); }
}




.home-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--home-max-width);
    margin: 0 auto;
    padding: clamp(48px, 7vw, 96px) var(--home-side-padding) 0;
}

.home-hero-title {
    margin: 0;
    max-width: 30ch;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.16;
    color: var(--color-white);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.38);
    font-stretch: 75%;
}

/* The line drawing runs the full width of the hero, flush to both sides and
   the bottom edge. Its upper third is transparent, so capping the height and
   anchoring to the bottom crops only empty pixels. */
/* The range at the foot of the hero. The file is greyscale with an alpha
   channel, so it is used as a mask and the colour is painted through it
   rather than being carried in the pixels, so it can take any colour the
   hero wants. It takes the white it was drawn in. */
.home-hero-art {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: min(62%, 33.34vw);
    background-color: var(--color-white);
    -webkit-mask-image: image-set(url("heromountains.png") 1x, url("heromountains@2x.png") 2x);
    mask-image: image-set(url("heromountains.png") 1x, url("heromountains@2x.png") 2x);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center bottom;
    mask-position: center bottom;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: 0.94;
    pointer-events: none;
    user-select: none;
}


/* ---------- Section 1: the intro band under the hero ---------- */
/* This copy used to sit in a translucent panel over the photograph. It reads
   as its own section now, on a quiet gray so the hero keeps the color. */
.intro-band {
    position: relative;
    z-index: 2;
    width: 100%;
    background: #ededed;
}

.intro-band-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 44px);
    max-width: var(--home-max-width);
    margin-inline: auto;
    padding: clamp(80px, 9.5vw, 168px) var(--home-side-padding) clamp(60px, 6.6vw, 112px);
}

.intro-band-inner p {
    margin: 0 0 16px;
    font-size: 19px;
    line-height: 1.62;
    color: var(--color-body);
}

.intro-band-inner p:last-child { margin-bottom: 0; }

.intro-band-claim {
    grid-column: 1 / -1;
    max-width: 34ch;
    margin: 0 auto clamp(42px, 4.8vw, 76px);
    font-family: var(--font-statement);
    font-size: clamp(38px, 5.2vw, 74px);
    line-height: 1.35;
    text-align: center;
    text-transform: none;
    color: var(--color-heading);
    font-stretch: 100%;
}

/* the three verbs the sentence turns on */
.intro-band-claim em {
    font-style: italic;
    color: var(--color-coral-bright);
}

/* The pair sat twelve pixels under the copy while every other action on the
   site stands about thirty from what it follows; this brings it into line. */
.intro-band-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: clamp(24px, 2.4vw, 34px);
}

/* The pair that opens the site: an outlined first action and a filled second
   one, both setting their label in the ink so neither shouts over the other.
   The ice button carries a transparent border so the two boxes measure the
   same height. */
.btn-teal {
    padding: 14px 34px;
    border: 2px solid rgba(28, 32, 33, 0.30);
    border-radius: var(--radius-btn);
    background: var(--color-white);
    color: var(--color-heading);
    font-family: var(--font-utility);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    font-stretch: 100%;
}

.btn-teal:hover {
    border-color: var(--color-heading);
    background: var(--color-white);
}

.btn-teal.btn-ice {
    border-color: transparent;
    background: var(--color-coral-bright);
    color: var(--color-white);
}

.btn-teal.btn-ice:hover {
    border-color: transparent;
    background: var(--color-coral-bright-hover);
}

@media (max-width: 860px) {
    .intro-band-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .intro-band-actions .btn-teal { flex: 1 1 100%; text-align: center; justify-content: center; }
}


/* Laptop screens are wide but short — the hero gives back height on them, and
   the band tightens to match so section 1 still lands close to the fold. */
@media (min-width: 861px) and (max-height: 900px) {
    .home-hero-title {
        font-size: clamp(26px, 2.8vw, 38px);
    }

    .intro-band-inner {
        padding: clamp(60px, 7vw, 118px) var(--home-side-padding) clamp(42px, 4.6vw, 74px);
        gap: clamp(18px, 2.2vw, 30px);
    }

    .intro-band-inner p {
        margin-bottom: 12px;
        font-size: 18px;
        line-height: 1.55;
    }

    .intro-band-claim {
        font-size: clamp(34px, 4.6vw, 60px);
        margin-bottom: clamp(24px, 2.8vw, 36px);
    }

    .intro-band-actions .btn {
        padding: 11px 26px;
        font-size: 16px;
    }
}

/* ---------- Home: the Sunfish model (Canva comp) ---------- */
.model {
    position: relative;
    background: var(--color-white);
    padding-top: var(--space-band);
    padding-bottom: var(--space-band);
}

.model-inner {
    max-width: var(--home-max-width);
    margin: 0 auto;
    padding: 0 var(--home-side-padding);
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(460px, 1.12fr);
    gap: clamp(58px, 8vw, 124px);
    align-items: start;
}

.model-title {
    margin: 0 0 clamp(34px, 4vw, 54px);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.2;
    color: var(--color-heading);
    font-stretch: 75%;
}

.model-inner > .model-copy {
    /* 620px ran to about 78 characters a line in the serif and pushed the last
       paragraph under the callout that overlaps this column */
    max-width: 540px;
    padding-top: 8px;
}

.model-contact-button {
    margin-top: 18px;
    padding: 14px 30px;
    border-radius: var(--radius-btn);
    background: var(--color-coral-bright);
    color: var(--color-white);
}

.model-contact-button:hover { background: var(--color-coral-bright-hover); }

.model-visual {
    position: relative;
    min-height: clamp(740px, 58vw, 880px);
    overflow: hidden;
    background: #17334c;
}

.model-visual > img {
    position: absolute;
    /* Crop room for the parallax; the numbered steps above it do not move. */
    inset: -4% 0;
    width: 100%;
    height: 108%;
    object-fit: cover;
    object-position: 20% center;
}

.model-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 35, 55, 0.5), rgba(7, 35, 55, 0.16) 50%, rgba(7, 35, 55, 0.54));
}

.model-visual-content {
    position: relative;
    z-index: 1;
    min-height: inherit;
    padding: clamp(58px, 6vw, 88px) clamp(48px, 6vw, 86px);
    display: flex;
    flex-direction: column;
    color: var(--color-white);
}

.model-visual-steps {
    list-style: none;
    margin: clamp(38px, 4vw, 56px) 0 0;
    padding: 0;
    display: grid;
    gap: clamp(38px, 4.5vw, 62px);
}

.model-visual-steps li {
    max-width: 17ch;
    font-family: var(--font-button);
    font-size: clamp(23px, 2.45vw, 36px);
    font-weight: 600;
    line-height: 1.05;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    font-stretch: 75%;
}

.model-visual-steps li span { color: var(--color-coral-bright); }

.model-copy p {
    margin: 0 0 20px;
    font-size: 19px;
    line-height: 1.62;
    color: var(--color-body);
}

.model-copy p:last-child { margin-bottom: 0; }

.model-copy p:first-child {
    padding-bottom: 0;
}

.model-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(70px, 10vw, 150px);
    align-items: start;
}

.model-left,
.model-right { min-width: 0; }

.model-capacity {
    margin: 6px 0 28px !important;
    padding-bottom: 24px;
    border-bottom: 2px solid var(--color-coral);
    font-family: var(--font-button);
    font-size: clamp(24px, 2.8vw, 40px) !important;
    font-weight: 600;
    line-height: 1.08 !important;
    color: #294f56 !important;
    font-stretch: 75%;
}

.model-explanation { max-width: 620px; }

.model-left .model-figure {
    margin-top: clamp(34px, 5vw, 64px);
}

.model-return {
    margin: 22px 0 0;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(41, 79, 86, 0.28);
    font-family: var(--font-button);
    font-size: 18px;
    font-weight: 500;
    color: #294f56;
    font-stretch: 75%;
}

.model-right {
    display: grid;
    gap: clamp(38px, 5vw, 66px);
}

.model-right .model-stage {
    padding-bottom: clamp(34px, 4vw, 52px);
    border-bottom: 1px solid rgba(41, 79, 86, 0.28);
}

.model-right .model-stage-final {
    padding-bottom: 0;
    border-bottom: 0;
}

.model-right .model-stage > p {
    margin: 26px 0 0 70px;
}

.model-top {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(54px, 8vw, 126px);
    align-items: start;
}

.model-copy {
    max-width: 590px;
    padding-top: 6px;
}

.model-invest {
    display: grid;
    gap: clamp(24px, 3vw, 38px);
}

.model-step-heading {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.model-step-heading h3 {
    max-width: 18ch;
    margin: 0;
    font-size: clamp(24px, 2.8vw, 40px);
    line-height: 1.08;
    color: var(--color-heading);
}

.model-step-heading .model-num {
    padding-top: 3px;
    font-family: var(--font-button);
    font-size: clamp(18px, 1.7vw, 24px);
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--color-coral);
    font-stretch: 75%;
}

.model-bottom {
    margin-top: clamp(54px, 7vw, 94px);
    padding-top: clamp(42px, 5vw, 68px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(58px, 9vw, 140px);
}

.model-stage > p {
    max-width: 560px;
    margin: 24px 0 0 70px;
    font-size: 19px;
    line-height: 1.65;
    color: var(--color-body);
}

.model-stage-final {
    display: flex;
    flex-direction: column;
}

.model-mission-callout {
    align-self: flex-end;
    width: min(100%, 360px);
    margin-top: clamp(38px, 5vw, 64px) !important;
    padding: 24px 0 0;
    border-top: 2px solid var(--color-coral);
    border-left: 0;
    background: transparent;
    font-family: var(--font-button);
    font-size: clamp(18px, 2vw, 25px) !important;
    font-weight: 600;
    line-height: 1.2 !important;
    color: #294f56 !important;
    font-stretch: 75%;
}

/* the numbered steps */
.model-steps {
    list-style: none;
    margin: 0 0 clamp(26px, 3vw, 40px);
    padding: 0;
    display: grid;
    gap: clamp(22px, 2.6vw, 34px);
}

.model-steps li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
}

.model-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(16px, 1.4vw, 20px);
    color: var(--color-coral);
    font-stretch: 75%;
}

.model-step-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.3;
    color: #294F56;
    font-stretch: 75%;
}

.model-figure {
    margin: 0;
}

.model-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.model-cta-eyebrow {
    margin: 0 0 9px;
    font-family: var(--font-button);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #c5f7ff;
    font-stretch: 75%;
}

.cta-band {
    position: relative;
    min-height: clamp(250px, 24vw, 350px);
    display: flex;
    align-items: center;
    overflow: hidden;
    /* A neutral scrim rather than a teal one: the deep teal the other bands
       use turns this sand green. */
    background-color: var(--color-teal-deep);
}

.cta-band::before {
    content: "";
    position: absolute;
    inset: -5% 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)),
        linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.36) 32%, rgba(0, 0, 0, 0) 62%),
        url("cta-sandbeach.webp");
    background-size: cover;
    background-position: center 50%;
    transform: translate3d(0, var(--cta-drift, 0px), 0);
    pointer-events: none;
}

.cta-band-inner {
    position: relative;
    z-index: 1;
}

.cta-band-inner {
    width: 100%;
    max-width: var(--home-max-width);
    margin: 0 auto;
    padding: clamp(42px, 5vw, 70px) var(--home-side-padding);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(36px, 8vw, 130px);
}

.cta-band-copy { max-width: 620px; color: var(--color-white); }

.cta-band-copy h2 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: clamp(25px, 3vw, 42px);
    line-height: 1.08;
    color: var(--color-white);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
    font-stretch: 75%;
}

.cta-band-copy > p:last-child {
    margin: 0;
    font-size: 19px;
    line-height: 1.5;
}

.cta-band-button {
    flex: none;
    padding: 15px 34px;
    font-size: 17px;
    border-radius: var(--radius-btn);
    background: var(--color-coral-bright);
    color: var(--color-white);
    white-space: nowrap;
}

.cta-band-button:hover { background: var(--color-coral-bright-hover); }

@media (max-width: 700px) {
    .cta-band-inner { grid-template-columns: 1fr; gap: 24px; }
    .cta-band-button { justify-self: start; }
}

/* A connected progression over the landscape: the symbols read faster than
   four unrelated photographs and keep the causal sequence visible. */
.model-outcomes {
    list-style: none;
    margin: 0;
    padding: clamp(46px, 5vw, 72px) max(var(--home-side-padding), calc((100vw - var(--home-max-width)) / 2 + 80px));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    justify-items: center;
    text-align: center;
    background-image: linear-gradient(rgba(13, 50, 56, 0.62), rgba(13, 50, 56, 0.62)), url("ssfasset12.webp");
    background-size: cover;
    background-position: center 58%;
}

.model-outcomes li {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.model-outcomes li:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 31px;
    width: 100%;
    height: 1px;
    background: rgba(197, 247, 255, 0.56);
}

.model-outcome-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 62px;
    aspect-ratio: 1 / 1;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--color-teal-deep);
    color: var(--color-white);
}

.model-outcome-icon-impact {
    background: var(--color-coral);
    color: var(--color-white);
}

.model-outcome-icon svg {
    width: 42px;
    height: 42px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.model-outcome-label {
    position: relative;
    z-index: 1;
    max-width: 18ch;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 1.35;
    color: var(--color-white);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.62);
    font-stretch: 100%;
}

@media (max-width: 860px) {
    .model { background: var(--color-white); }

    .model-inner {
        grid-template-columns: minmax(0, 1fr);
        padding-inline: var(--home-side-padding);
    }

    .model-visual { min-height: 720px; }

    .model-columns,
    .model-top,
    .model-bottom { grid-template-columns: minmax(0, 1fr); }

    .model-columns { gap: 58px; }

    .model-top { gap: 42px; }
    .model-bottom { gap: 50px; }

    .model-stage > p { margin-left: 0; }

    .model-side {
        margin-inline: 0;
        padding: 0;
        background: transparent;
    }

    .model-outcomes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(28px, 6vw, 44px);
        padding-inline: var(--home-side-padding);
    }

    .model-outcomes li::after { display: none; }
}

@media (max-width: 480px) {
    .model-outcomes { grid-template-columns: 1fr; }
}


/* The press is motion, so it goes when motion is not wanted. The colour
   change on hover stays, so the buttons still respond. */
@media (prefers-reduced-motion: reduce) {
    .home-hero-media::before { animation: none; }

    .btn:hover,
    .btn:active,
    .nav-action:hover,
    .nav-action:active {
        translate: none;
    }
}

/* ---------- Home: community facility to resilience hub ---------- */
.hub {
    position: relative;
}

.hub-inner {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
    position: relative;
    display: block;
    overflow: hidden;
    min-height: clamp(600px, 48vw, 720px);
    border: 0;
    border-radius: 0;
    background: #073b70;
    box-shadow: none;
}

.hub-intro {
    position: relative;
    z-index: 2;
    width: 50%;
    margin-left: auto;
    padding: clamp(48px, 5vw, 76px) clamp(42px, 5vw, 76px) 190px;
    color: var(--color-white);
}

.hub-inner::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(4, 33, 65, 0.02) 30%, rgba(4, 33, 65, 0.58) 62%, rgba(4, 33, 65, 0.82) 100%),
        linear-gradient(0deg, rgba(4, 33, 65, 0.72) 0%, rgba(4, 33, 65, 0) 34%);
    pointer-events: none;
}

.hub-photo {
    position: absolute;
    inset: 0;
    margin: 0;
    min-height: 0;
}

/* Out of flow, so the photo's own proportions cannot set the row height and
   the copy column decides it. The figure stretches to that height and the
   image fills whatever it gets. */
.hub-photo img {
    position: absolute;
    /* Oversized so the parallax has crop to travel into. The figure and the
       copy stay where they are; only this moves. */
    inset: -5% 0;
    display: block;
    width: 100%;
    height: 110%;
    object-fit: cover;
    object-position: center;
}

.hub-title {
    margin: 0 0 clamp(18px, 2vw, 26px);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--display-md);
    line-height: 1.2;
    color: var(--color-white);
    font-stretch: 75%;
}

.hub-intro p {
    margin: 0 0 18px;
    font-size: 19px;
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.94);
}

.hub-cue {
    margin-bottom: 12px !important;
    color: #c5f7ff !important;
}

.hub-list {
    margin: 0;
    padding-left: 22px;
    columns: 2;
    column-gap: clamp(30px, 4vw, 56px);
}

.hub-list li {
    break-inside: avoid;
    margin-bottom: 7px;
    font-size: 19px;
    line-height: 1.5;
    color: var(--color-white);
}

.hub-list li:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
    .hub-list { columns: 1; }
}

/* ---------- closing copy ---------- */
.hub-outro {
    position: absolute;
    z-index: 2;
    right: clamp(26px, 4vw, 58px);
    bottom: clamp(22px, 3vw, 42px);
    left: clamp(26px, 4vw, 58px);
    max-width: none;
    margin: 0;
    padding: 0;
}

.hub-outro p {
    margin: 0 0 18px;
    font-size: 19px;
    line-height: 1.62;
    color: var(--color-white);
}

.hub-outro p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .hub-inner {
        width: 100%;
        min-height: 760px;
    }

    .hub-intro {
        width: 100%;
        padding: 42px 30px 210px;
        background: rgba(4, 33, 65, 0.64);
    }

    .hub-photo {
        position: absolute;
    }

    .hub-photo img {
        position: absolute;
        height: 100%;
        aspect-ratio: auto;
    }
}

/* ---------- Home: why this matters / the community return cycle ---------- */
.why {
    position: relative;
    background: var(--color-white);
    padding: var(--space-band) 0;
}

.why-inner {
    width: min(var(--container-standard), 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
}

.why-head {
    max-width: var(--container-reading);
    margin: 0 auto clamp(42px, 5vw, 72px);
    text-align: center;
}

.why-label {
    display: none;
}

.why .why-title {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.05;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-heading);
    font-stretch: 100%;
}

.why-title-line {
    display: block;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .why-title-line { white-space: normal; }
}

/* large display type, so the orange clears the 3:1 bar that applies to it */
.why-accent { color: var(--color-coral); }

.why-story {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 0.34fr);
    grid-template-areas:
        "callout collage"
        "explanation collage";
    column-gap: clamp(44px, 7vw, 96px);
    row-gap: 14px;
    align-items: start;
}

.why-collage {
    grid-area: collage;
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 230px);
    aspect-ratio: auto;
    justify-self: end;
}

.why-photo {
    position: relative;
    margin: 0;
    width: 100%;
    aspect-ratio: 1.72 / 1;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}
.why-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.why-photo-mission { order: 1; }
.why-photo-solar { order: 2; }
.why-photo-community { order: 3; }
.why-photo-mission img { object-position: center 42%; }

/* Was a bleeding pill with coral rails; now simply the lead paragraph of the
   column, set a size up from the copy beneath it. */
.why-callout {
    grid-area: callout;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-body);
    font-size: 18px;
    line-height: 1.42;
}

/* Continue both the lagoon fill and its coral rails to the viewport edge.
   A pseudo-element avoids relying on container-width calculations, so the
   full bleed remains exact at every screen width. */
.why-callout::after { content: none; }

.why-callout p { position: relative; z-index: 1; margin: 0; font-size: inherit; line-height: inherit; }

.why-explanation {
    grid-area: explanation;
    max-width: none;
    font-size: 18px;
    line-height: 1.42;
    color: var(--color-body);
}

.why-explanation p { margin: 0 0 14px; }
.why-opening { letter-spacing: 0; word-spacing: normal; white-space: normal; }
.why-closing { padding-top: 6px; font-family: var(--font-statement); font-style: italic; font-weight: 700; color: var(--color-ink);
    font-stretch: 100%;
}

@media (max-width: 900px) {
    .why-story {
        grid-template-columns: minmax(0, 1fr) minmax(140px, 0.36fr);
        grid-template-areas: "callout collage" "explanation collage";
    }
    .why-callout::after { display: none; }
    .why-explanation { max-width: 720px; margin-inline: auto; }
    .why-opening { white-space: normal; }
}

@media (max-width: 620px) {
    .why-title br { display: none; }
    .why-story { grid-template-columns: 1fr; grid-template-areas: "callout" "explanation" "collage"; }
    .why-collage { width: 100%; max-width: none; justify-self: stretch; }
    .why-photo { aspect-ratio: 1.8 / 1; }
    .why-opening { letter-spacing: 0.06em; word-spacing: 0.12em; }
}

/* ---------- Type system ----------
   STATEMENT (Newsreader). Sentences the foundation asserts: the opening
   claim, the argument about money, the two big questions, the partner
   premise and its closing line, and the whole Rooted passage. Set in
   sentence case, because a serif shouting is a different thing entirely. */
/* Crimson Pro set the okina on a very wide advance and needed pulling in by
   hand. The Noto faces space it normally, so the correction is released in the
   preview block at the end of this file. */
.okina {
    margin-inline: -0.17em;
}

/* Two places only: the claim the page opens on, and the one it builds to. */
.home-hero-title,
.rooted-statement {
    font-family: var(--font-statement);
    font-weight: 400;
    letter-spacing: -0.012em;
    text-transform: none;
    font-stretch: 100%;
}

/* Everything that was serif returns to the system voice. */
.why-title,
.return-title,
.cta-band-copy h2,
.partner-title,
.partner-statement,
.rooted-pull,
.rooted-climax,
.rooted-olelo blockquote {
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-style: normal;
}

/* The serif carries more width per character than the condensed sans it
   replaces, so the largest settings come back a step. */
.home-hero-title {
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 1.02;
    font-style: normal;
}
.why-title { font-size: clamp(30px, 3.7vw, 52px); line-height: 1.04; }
.return-title { font-size: clamp(28px, 3.4vw, 46px); }
.partner-title { font-size: clamp(28px, 3.4vw, 46px); }
.cta-band-copy h2 { font-size: clamp(25px, 3vw, 42px); }
.rooted-statement { font-size: var(--display-lg); line-height: 1.1; }
.rooted-climax { font-size: clamp(34px, 5.25vw, 78px); line-height: 0.98; }
.partner-statement { font-size: clamp(24px, 2.9vw, 42px); }


/* SYSTEM (Noto Sans, caps). Named mechanisms and anything enumerated: the model
   and the hub, the focus taxonomy, every numbered row, the callouts, and the
   eyebrows that label each section. */
.model-title,
.hub-title,
.focus-statement,
.model-visual-steps li,
.model-capacity,
.model-mission-callout,
.return-questions li,
.partner-row-name {
    font-family: var(--font-condensed);
    font-stretch: 75%;
    text-transform: uppercase;
}

.return-eyebrow,
.partner-eyebrow,
.rooted-eyebrow,
.whoweare-eyebrow,
.focus-eyebrow,
.model-cta-eyebrow,
.why-label {
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* UTILITY (Noto Serif). The two sections that close the page do the plainest
   work on it — who we are, and how to stay in touch or give. */
.whoweare-title,
.engage-title {
    /* sans, so the two closing headings read as labels on the actions beneath
       them rather than as more of the serif copy above */
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.006em;
    text-transform: none;
    font-stretch: 75%;
}

/* ---------- Button colours ----------
   Orange asks for a commitment: donate, partner with us, send the form.
   Teal invites a look around: explore, connect, sign up.
   Slate is the quiet one, used where the section is deliberately restrained. */
.nav-action,
.btn-coral,
.partner-cta,
.engage-donate {
    background: var(--color-coral-bright);
    color: var(--color-white);
}

.nav-action:hover,
.btn-coral:hover,
.partner-cta:hover,
.engage-donate:hover {
    background: var(--color-coral-bright-hover);
    color: var(--color-white);
}

.model-contact-button,
.engage-submit {
    background: var(--color-coral-bright);
    color: var(--color-white);
}

.model-contact-button:hover,
.engage-submit:hover {
    background: var(--color-coral-bright-hover);
    color: var(--color-white);
}

.whoweare-cta {
    background: var(--color-slate);
    color: var(--color-white);
}

.whoweare-cta:hover {
    background: var(--color-slate-hover);
    color: var(--color-white);
}

/* ---------- Homepage editorial refinement ---------- */
.return-inner {
    width: min(var(--container-standard), 100%);
    max-width: var(--container-standard);
    margin-inline: auto;
}

/* Community Return: replace the oversized punctuation with a ruled list. */
.return-inner { padding-inline: var(--home-side-padding); }
.return-head { max-width: 850px; }
.return-title {
    font-family: var(--font-sans);
    font-size: clamp(30px, 3.8vw, 48px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: 0;
    text-transform: none;
    font-stretch: 100%;
}
.return-body { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(48px, 7vw, 92px); align-items: start; }
.return-body::before { content: none; }
.return-questions li { margin: 0; padding: 15px 0; border-top: 1px solid rgba(41, 79, 86, 0.15); font-family: var(--font-sans); font-size: 19px; font-weight: 400; text-transform: none; color: var(--color-body);
    font-stretch: 100%;
}
.return-questions li:last-child { border-bottom: 1px solid rgba(41, 79, 86, 0.15); }
.return-questions li::before { font-family: var(--font-system); font-weight: 600; color: var(--color-coral); }

/* Partner directory: lighter rows and a less dominant photograph. */
.partner { background: #fff; }
.partner-inner { padding-inline: var(--home-side-padding); }
.partner-body { grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); gap: clamp(52px, 7vw, 92px); }
.partner-title { font-family: var(--font-sans); font-size: clamp(30px, 3.8vw, 48px); font-weight: 400; line-height: 1.08; letter-spacing: 0; text-transform: none;
    font-stretch: 100%;
}
.partner-intro { font-size: 18px; line-height: 1.55; }
.partner-row { padding: 11px 0; border-top: 1px solid rgba(41, 79, 86, 0.14); }
.partner-row:last-child { border-bottom: 1px solid rgba(41, 79, 86, 0.14); }
.partner-row::before { font-size: 16px; }
.partner-row-name { font-family: var(--font-sans); font-size: 17px; font-weight: 400; text-transform: none;
    font-stretch: 100%;
}
.partner-figure { aspect-ratio: 4 / 5; }
.partner-close { margin-top: clamp(52px, 6vw, 80px); }
.partner-statement { font-family: var(--font-sans); font-size: var(--display-sm); font-weight: 400; line-height: 1.15; text-transform: none;
    font-stretch: 100%;
}

/* Serif is reserved as a quiet accent rather than the homepage's lead voice. */
.home-page .home-hero-title {
    font-family: var(--font-statement);
    font-weight: 400;
    letter-spacing: -0.01em;
    font-stretch: 100%;
}

/* Short laptop screens: the claim and the drawing compete for the same
   vertical band, so the type steps back. This sits after the rule above
   because an earlier copy of it was being overridden and never applied. */
@media (min-width: 861px) and (max-height: 900px) {
    .home-page .home-hero-title {
        font-size: clamp(32px, min(4.1vw, 7vh), 56px);
    }
}

/* Each line is its own block. The lines are long enough now that holding
   them unbroken would push the claim off a narrow screen, so they wrap if
   they have to. */
.home-page .home-hero-title > span {
    display: block;
}

.home-page .home-hero-title em {
    font-family: inherit;
    font-style: normal;
    font-weight: inherit;
}

.home-page .model-title {
    font-family: var(--font-utility);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    font-stretch: 100%;
}

.home-page .return-questions li,
.home-page .partner-row-name {
    font-family: var(--font-statement);
    font-weight: 700;
    font-stretch: 100%;
}

.home-page .return-questions li,
.home-page .partner-row-name {
    font-size: 18px;
    line-height: 1.35;
}

.home-page .partner-body {
    max-width: 1220px;
    margin-inline: auto;
    grid-template-columns: minmax(0, 0.88fr) minmax(460px, 1.12fr);
    gap: clamp(44px, 5vw, 68px);
}

.home-page .partner-figure {
    width: 100%;
    justify-self: start;
}

.home-page .partner-figure img {
    inset: 0 0 -4%;
    height: 104%;
    object-position: center top;
}

.home-page .rooted-statement {
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
}

.home-page .rooted-statement .okina {
    position: relative;
    top: -0.04em;
    margin-inline: 0.015em;
}

.home-page .rooted-story {
    background-color: #f7f1e8;
    background-position: left 15%;
    padding-block: clamp(38px, 4vw, 56px);
}

.home-page .rooted-story-inner {
    position: relative;
    z-index: 1;
    width: min(var(--home-max-width), 100%);
    max-width: var(--home-max-width);
    box-sizing: border-box;
    grid-template-columns: minmax(240px, 0.78fr) minmax(420px, 1.22fr);
    column-gap: clamp(72px, 9vw, 144px);
    row-gap: clamp(20px, 2.2vw, 32px);
}

/* The right column starts flush with the section's top edge, which reads high
   against the pull quote opposite it. Drop it without moving the grid. */
.home-page .rooted-story-inner .rooted-para {
    position: relative;
    top: clamp(18px, 2vw, 34px);
    width: min(100%, 540px);
    max-width: none;
    justify-self: end;
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.55;
    text-align: left;
}

.home-page .rooted-story-inner .rooted-pull {
    max-width: 22ch;
    font-family: var(--font-utility);
    font-weight: 400;
    font-size: clamp(16px, 1.4vw, 20px);
    letter-spacing: 0;
    line-height: 1.18;
    text-transform: none;
    font-stretch: 100%;
}

.home-page .rooted-climax {
    position: relative;
    z-index: 1;
    width: min(600px, calc(100% - (2 * var(--home-side-padding))));
    max-width: 600px;
    box-sizing: border-box;
    padding: 0;
    margin-top: clamp(26px, 3vw, 42px);
    /* Match .rooted-story-inner, which is centred at --home-max-width, so the
       line starts on the same edge as the copy above it. */
    margin-inline-start: calc(max(0px, (100% - var(--home-max-width)) / 2) + var(--home-side-padding));
    font-family: var(--font-statement);
    font-size: clamp(26px, 2.8vw, 40px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-teal);
    background: none;
    font-stretch: 100%;
}

.home-page .rooted-climax em {
    font-style: normal;
    color: var(--color-coral-bright);
}

/* A quieter CTA: one even scrim, a tighter measure and a grounded action. */
.home-page .cta-band,
.cta-band--pattern {
    width: 100vw;
    max-width: none;
    min-height: clamp(170px, 14vw, 210px);
    margin: 0 0 0 calc(50% - 50vw);
    background: var(--color-teal-deep);
}

.cta-band--pattern { background: var(--color-teal-deep); }

/* The CTA is its own viewport-wide band; the cream directory below returns
   to ordinary editorial spacing instead of visually containing the banner.
   It opens on the compact step and closes on the larger one, which gives the
   emotional band that follows its run-up without the directory itself
   growing. */
.home-page .cta-band + .partner {
    padding-top: var(--section-md);
    padding-bottom: var(--section-lg);
}

.home-page .cta-band::before,
.cta-band--pattern::before {
    background-color: rgba(247, 241, 232, 0.055);
    background-image: none;
    -webkit-mask-image: url("Svgs/mountains.svg");
    mask-image: url("Svgs/mountains.svg");
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-position: center 57%;
    mask-position: center 57%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: none;
}

.home-page .cta-band-inner,
.cta-band--pattern .cta-band-inner {
    width: min(var(--container-reading), 100%);
    max-width: var(--container-reading);
    padding-block: 36px;
    gap: clamp(28px, 5vw, 64px);
}

.home-page .cta-band-copy h2,
.cta-band--pattern .cta-band-copy h2 {
    max-width: 27ch;
    font-family: var(--font-statement);
    font-size: var(--display-xs);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-transform: none;
    font-stretch: 100%;
}

.home-page .cta-band-button,
.cta-band--pattern .cta-band-button {
    padding: 13px 24px;
    border-radius: var(--radius-btn);
    background: var(--color-coral-bright);
    box-shadow: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-page .cta-band-button:hover,
.cta-band--pattern .cta-band-button:hover {
    background: var(--color-coral-bright-hover);
}

.home-page .model-visual-steps li {
    font-weight: 400;
}

.home-page .model-visual-steps li {
    max-width: 20ch;
    font-family: var(--font-statement);
    font-size: clamp(24px, 2.3vw, 34px);
    font-weight: 400;
    line-height: 1.12;
    text-transform: none;
    font-stretch: 100%;
}

.home-page .model-cta-eyebrow {
    font-weight: 600;
}

/* Keep the model compact and let the outcome bridge copy and image, matching
   the diagram's flow instead of reading as a separate card inside the photo. */
.home-page .model {
    padding-block: var(--space-section-sm);
}

.home-page .model-inner {
    position: relative;
    grid-template-columns: minmax(0, 1.12fr) minmax(400px, 0.88fr);
    gap: clamp(44px, 6vw, 88px);
}

.home-page .model-title {
    margin-bottom: 22px;
    font-size: var(--display-md);
    font-weight: 400;
}

.home-page .model-copy p {
    margin-bottom: 15px;
    font-size: clamp(16px, 1.15vw, 18px);
    line-height: 1.48;
}

.home-page .model-visual {
    min-height: clamp(580px, 48vw, 700px);
}

.home-page .model-visual-content {
    padding: clamp(38px, 4vw, 58px) clamp(34px, 4vw, 54px);
}

.home-page .model-visual-steps {
    margin-top: clamp(36px, 3.8vw, 54px);
    gap: clamp(42px, 4.8vw, 68px);
}

@media (max-width: 860px) {
    .home-page .model-inner { grid-template-columns: minmax(0, 1fr); }
    .home-page .model-visual { min-height: 620px; }
}

/* Resilience Hub: compact editorial card on the mauve section ground. */
.home-page .hub {
    padding: var(--space-band) 20px;
    background: #786c6d;
}

.home-page .hub-inner {
    width: min(var(--container-standard), 100%);
    max-width: var(--container-standard);
    min-height: 0;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(360px, 0.48fr) minmax(0, 0.52fr);
    grid-template-areas: "photo intro" "outro outro";
    gap: 0 clamp(42px, 5vw, 72px);
    overflow: visible;
    background: transparent;
}

.home-page .hub-inner::after { content: none; }

.home-page .hub-photo {
    grid-area: photo;
    position: relative;
    inset: auto;
    min-height: clamp(500px, 43vw, 570px);
    aspect-ratio: auto;
    border: 7px solid rgba(255, 255, 255, 0.45);
    border-bottom: 0;
}

.home-page .hub-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-page .hub-intro {
    --hub-title-overlap: clamp(105px, 9vw, 140px);
    grid-area: intro;
    position: relative;
    width: auto;
    margin: 0;
    padding: clamp(24px, 3vw, 42px) 0;
    color: var(--color-white);
}

.home-page .hub-title {
    position: relative;
    z-index: 2;
    width: calc(100% + var(--hub-title-overlap) + 28px);
    margin-left: calc(-1 * var(--hub-title-overlap));
    padding: 13px 24px 13px var(--hub-title-overlap);
    box-sizing: border-box;
    font-family: var(--font-utility);
    font-weight: 400;
    text-transform: none;
    color: var(--color-white);
    background: linear-gradient(90deg, rgba(198, 207, 213, 0.72), rgba(132, 226, 208, 0.9));
    font-stretch: 100%;
}

.home-page .hub-intro p,
.home-page .hub-list li {
    font-size: 17px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.94);
}

.home-page .hub-cue { color: var(--color-white) !important; }

.home-page .hub-outro {
    --hub-outro-overhang: clamp(36px, 7vw, 100px);
    grid-area: outro;
    position: relative;
    inset: auto;
    z-index: 3;
    width: calc(100% + (2 * var(--hub-outro-overhang)));
    margin: 0 0 0 calc(-1 * var(--hub-outro-overhang));
    padding: 18px clamp(24px, 2.8vw, 38px);
    box-sizing: border-box;
    background: var(--color-teal-deep);
}

.home-page .hub-outro p {
    margin: 0;
    font-family: "Noto Sans", system-ui, -apple-system, sans-serif;
    font-size: clamp(18px, 1.4vw, 20px);
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-white);
}

/* Our Focus: compact editorial carousel on a warm editorial ground. */
.home-page .focus-section {
    background: #f2ece3;
    padding: var(--section-md) 0;
}

.home-page .focus-shell {
    width: min(var(--home-max-width), 100%);
    max-width: var(--home-max-width);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
    grid-template-columns: minmax(250px, 0.62fr) minmax(0, 2.38fr);
    gap: clamp(34px, 4vw, 58px);
}

.home-page .focus-intro {
    padding-top: 12px;
    color: var(--color-body);
}

.home-page .focus-eyebrow { display: none; }

.home-page .focus-intro h2.focus-statement {
    margin-bottom: 18px;
    font-family: var(--font-statement);
    font-size: var(--display-xs);
    font-style: italic;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-heading);
    font-stretch: 100%;
}

.home-page .focus-intro > p:last-child {
    font-size: 17px;
    line-height: 1.5;
    color: var(--color-body);
}

.home-page .focus-grid {
    --focus-card-height: clamp(230px, 18vw, 260px);
    gap: 16px;
}

.home-page .focus-card {
    min-height: var(--focus-card-height);
    padding: clamp(22px, 2vw, 28px);
    border-width: 0;
    border-radius: 0;
}

.home-page .focus-card h3 {
    margin-bottom: 16px;
    font-size: 18px;
}

.home-page .focus-card p {
    font-size: 17px;
    line-height: 1.48;
}

.home-page .focus-card img {
    right: -18px;
    bottom: -34px;
    width: clamp(185px, 15vw, 220px);
    height: clamp(185px, 15vw, 220px);
    opacity: 0.2;
}

@media (max-width: 900px) {
    .return-body { grid-template-columns: 1fr; }
    .partner-body { grid-template-columns: 1fr; }
    .partner-figure { order: 0; aspect-ratio: 16 / 10; }
    .home-page .partner-body { grid-template-columns: 1fr; }
    .home-page .partner-figure { width: 100%; max-width: none; }
    .home-page .hub-inner {
        grid-template-columns: 1fr;
        grid-template-areas: "photo" "outro" "intro";
    }
    .home-page .hub-photo { min-height: 0; aspect-ratio: 16 / 10; }
    .home-page .hub-intro { width: auto; padding: 36px 0 0; background: transparent; }
    .home-page .hub-title { width: auto; margin-left: 0; padding: 14px 20px; }
    .home-page .hub-outro { width: auto; margin-left: 0; }
    .home-page .focus-shell { grid-template-columns: 1fr; padding-inline: var(--home-side-padding); }
    .home-page .focus-intro { max-width: 560px; padding-right: 0; }
}

@media (max-width: 620px) {
    .home-page .rooted-climax { padding-right: var(--home-side-padding); }
}

@media (max-width: 860px) {
    .home-page .rooted-story-inner .rooted-para { justify-self: start; }
}

/* ---------- Homepage: geographic focus ---------- */
.geography {
    width: 100%;
    background: transparent;
    padding: 0;
}

.geography-inner {
    width: 100%;
    margin: 0;
    padding: 0;
}

.geography-header {
    display: grid;
    grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.2fr);
    gap: 10px clamp(54px, 8vw, 128px);
    align-items: end;
    margin-bottom: clamp(38px, 5vw, 64px);
}

.geography-eyebrow {
    grid-column: 1;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-coral-bright);
}

.geography-header h2 {
    grid-column: 1;
    margin: 0;
    max-width: 18ch;
    font-family: var(--font-statement);
    font-size: clamp(32px, 4vw, 58px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--color-heading);
    font-stretch: 100%;
}

.geography-header > p:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    justify-self: end;
    width: min(100%, 560px);
    margin: 0;
    font-size: clamp(18px, 1.4vw, 21px);
    line-height: 1.58;
    color: var(--color-body);
}

.geography-controls {
    display: flex;
    gap: clamp(24px, 4vw, 52px);
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(41, 79, 86, 0.24);
}

.geography-controls button {
    position: relative;
    appearance: none;
    padding: 0 0 13px;
    border: 0;
    background: transparent;
    font: 700 14px/1 var(--font-utility);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(28, 32, 33, 0.58);
    cursor: pointer;
    font-stretch: 100%;
}

.geography-controls button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--color-coral-bright);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.geography-controls button.is-active { color: var(--color-ink); }
.geography-controls button.is-active::after { transform: scaleX(1); }
.geography-controls button:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 5px; }

.geography-map-shell {
    position: relative;
    overflow: hidden;
    width: 100%;
    border: 0;
    background: #d9dfe0;
}

.geography-map {
    width: 100%;
    height: clamp(520px, 42vw, 680px);
    background: #d9dfe0;
}

.geography-map-loading {
    position: absolute;
    inset: 50% auto auto 50%;
    margin: 0;
    translate: -50% -50%;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-body);
}

.geography-map-caption {
    position: absolute;
    z-index: 4;
    left: clamp(18px, 3vw, 42px);
    bottom: clamp(18px, 3vw, 36px);
    display: grid;
    gap: 4px;
    padding: 15px 18px;
    border-left: 3px solid var(--color-coral-bright);
    background: rgba(247, 241, 232, 0.94);
    color: var(--color-ink);
    pointer-events: none;
}

.geography-map-caption span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.geography-map-caption strong {
    font-family: var(--font-statement);
    font-size: 24px;
    font-weight: 600;
    font-stretch: 100%;
}

.geography-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
    gap: clamp(42px, 7vw, 100px);
    align-items: end;
    padding-top: clamp(30px, 4vw, 48px);
}

.geography-summary-label {
    margin: 0 0 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-coral-bright);
}

.geography-summary h3 {
    margin: 0 0 7px;
    font-family: var(--font-statement);
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 600;
    line-height: 1;
    text-transform: none;
    color: var(--color-heading);
    font-stretch: 100%;
}

.geography-communities,
.geography-summary > p {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-body);
}

.geography-summary > p { max-width: 46ch; }

.geography .esri-view,
.geography .esri-view-surface,
.geography .esri-view-root { outline: 0; }
.geography .esri-attribution { background: rgba(247, 241, 232, 0.86); color: #474c4e; }
.geography .esri-attribution__sources { font-size: 10px; }
.geography .esri-ui-corner { margin: 0; }

@media (max-width: 820px) {
    .geography-header,
    .geography-summary { grid-template-columns: 1fr; }
    .geography-header > p:last-child { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 14px; }
    .geography-map { height: clamp(500px, 86vw, 640px); }
}

@media (max-width: 560px) {
    .geography { padding: 0; }
    .geography-controls { justify-content: space-between; gap: 20px; }
    .geography-controls button { font-size: 12px; }
    .geography-map { height: 560px; }
    .geography-map-caption { left: 14px; bottom: 28px; padding: 12px 14px; }
}

/* ---------- Team page editorial ---------- */

.team-page {
    background: #fff;
}

/* This page lays out on --home-max-width, so the bar has to as well or the
   mark sits 40px right of where it does on the homepage. */
.team-page .header-inner {
    max-width: var(--home-max-width);
    padding-inline: var(--home-side-padding);
}

.team-feature-inner,
.team-officers-inner {
    width: min(var(--home-max-width), 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
    box-sizing: border-box;
}

.team-kicker {
    margin: 0 0 14px;
    font: 600 13px/1 var(--font-utility);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

.team-feature {
    position: relative;
    background: #fff;
    padding-block: clamp(56px, 6vw, 86px) clamp(28px, 3vw, 44px);
}

.team-feature-inner {
    display: grid;
    grid-template-columns: minmax(340px, 1.08fr) minmax(280px, 0.82fr) minmax(300px, 0.95fr);
    gap: clamp(30px, 4vw, 58px);
    align-items: start;
}

.team-feature-photo {
    position: relative;
    z-index: 1;
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #332f2d;
}

.team-feature-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 36%;
}

.team-feature-intro {
    position: relative;
    z-index: 1;
    padding-block: clamp(24px, 3vw, 42px);
}

.team-hawaii-art {
    position: absolute;
    z-index: 0;
    top: 31%;
    right: clamp(0px, 6vw, 100px);
    width: min(58%, 980px);
    max-width: none;
    height: auto;
    transform: translateY(-50%) rotate(24deg);
    transform-origin: center;
    opacity: 0.16;
    pointer-events: none;
}

.team-feature-intro h1,
.team-officers h2 {
    margin: 0;
    font-family: var(--font-statement);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    font-stretch: 100%;
}

.team-feature-intro h1 {
    max-width: 18ch;
    font-family: var(--font-utility);
    font-size: clamp(24px, 2.25vw, 32px);
    font-weight: 700;
    line-height: 1.08;
    color: var(--color-heading);
    font-stretch: 100%;
}

.team-role {
    margin: 10px 0 22px;
    font: 600 14px/1.3 var(--font-utility);
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

.team-feature-intro > p:not(.team-kicker) {
    max-width: 56ch;
    margin-bottom: 18px;
    font: 400 18px/1.6 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.team-conversation {
    padding: 13px 22px;
    border-radius: 0;
    background: var(--color-coral-bright);
    color: #fff;
}

.team-long-bio {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    columns: 2;
    column-gap: clamp(42px, 7vw, 92px);
    padding-top: clamp(24px, 3vw, 42px);
    border-top: 0;
}

.team-long-bio p {
    break-inside: avoid;
    margin: 0 0 18px;
    font: 400 17px/1.66 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.team-officers {
    padding-block: 0 var(--space-section-sm);
    background: #fff;
}

.team-officers h2 {
    margin-bottom: clamp(42px, 5vw, 70px);
    font-size: clamp(36px, 4.6vw, 64px);
}

.team-officer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 42px);
}

.team-officer {
    min-width: 0;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(41, 79, 86, 0.18);
    background: #fff;
    align-self: start;
}

.team-officer > img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
}

.team-officer:nth-child(1) > img { object-position: center 45%; }
.team-officer:nth-child(2) > img { object-position: center 30%; }
.team-officer:nth-child(3) > img { object-position: center 24%; }

.team-officer-copy {
    padding: 22px 0 0;
}

.team-officer-copy > summary {
    display: block;
    cursor: pointer;
    list-style: none;
}

.team-officer-copy > summary::-webkit-details-marker { display: none; }

.team-officer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.team-officer h3 {
    margin: 0;
    font-family: var(--font-statement);
    font-size: clamp(23px, 2.1vw, 29px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-heading);
    font-stretch: 100%;
}

.team-officer-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(41, 79, 86, 0.09);
    transition: background 0.2s ease;
}

.team-officer-toggle::before,
.team-officer-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 17px;
    height: 1px;
    background: #000;
    transform: translate(-50%, -50%);
}

.team-officer-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform 0.2s ease;
}

.team-officer-copy[open] .team-officer-toggle::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.team-officer-copy > summary:hover .team-officer-toggle {
    background: rgba(41, 79, 86, 0.16);
}

.team-officer .team-role {
    display: block;
    margin: 12px 0 0;
    font: 700 14px/1.35 var(--font-utility);
    color: var(--color-teal);
    font-stretch: 100%;
}

.team-officer-bio {
    padding-top: 18px;
}

.team-officer-bio p {
    margin: 0 0 16px;
    font: 400 16px/1.62 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.team-officer-bio p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .team-page .primary-nav.is-open a { color: var(--color-ink); text-shadow: none; }
    .team-feature-inner { grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr); gap: 30px; }
    .team-hawaii-art { width: min(58%, 520px); right: -60px; }
    .team-officer-grid { grid-template-columns: 1fr; }
    .team-officer { display: grid; grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr); column-gap: 28px; align-items: start; }
    .team-officer > img { height: 100%; }
    .team-officer-copy { padding-top: 0; }
}

@media (max-width: 680px) {
    .team-feature-inner { grid-template-columns: 1fr; }
    .team-feature-photo { width: min(100%, 420px); }
    .team-feature-intro { padding-inline: 0; }
    .team-hawaii-art { width: min(70%, 420px); right: -70px; opacity: 0.1; }
    .team-long-bio { columns: 1; }
    .team-officer { display: block; }
    .team-officer > img { height: auto; }
    .team-officer-copy { padding-top: 22px; }
}

/* ==========================================================================
   Who We Are — the About page. An intro card overlapping the opening
   photograph, then the founding story as a statement beside its body copy.
   ========================================================================== */

.about-page {
    background: #fff;
}

/* This page lays out on --home-max-width, so the bar has to as well. */
.about-page .header-inner {
    max-width: var(--home-max-width);
    padding-inline: var(--home-side-padding);
}

.about-story-inner {
    width: min(var(--home-max-width), 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
    box-sizing: border-box;
}

.about-story {
    background: #fff;
    /* the same block padding the other interior sections open on */
    padding-block: var(--space-section);
}

.about-story-inner {
    display: grid;
    grid-template-columns: minmax(240px, 0.82fr) minmax(320px, 1.18fr);
    column-gap: clamp(48px, 7vw, 116px);
}

.about-statement {
    margin: 0;
    max-width: 30ch;
    font-family: var(--font-statement);
    font-size: clamp(24px, 2.4vw, 34px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.28;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

/* The statement is short and the column beside it runs long, so the
   photograph fills the space the statement leaves rather than the column
   sitting half empty. */
.about-story-side {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 3vw, 44px);
}

.about-story-figure {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.about-story-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The array sits left of centre in the photograph and this crop shows 69%
       of its width, so the window sits well left of centre to bring the array
       into the middle of the frame. Tuned against the rendered result. */
    object-position: 18% 55%;
}

.about-body p {
    margin: 0 0 16px;
    font: 400 18px/1.6 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.about-body-close {
    font-weight: 600 !important;
    color: var(--color-ink) !important;
}

.about-team-cta {
    margin-top: 14px;
    padding: 13px 26px;
    border-radius: var(--radius-btn);
    background: var(--color-coral-bright);
    color: #fff;
}

@media (max-width: 860px) {
    .about-story-inner { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
    .about-story-figure { aspect-ratio: 16 / 9; }
    .about-statement { max-width: 30ch; }
}

/* Why Sunfish — the case for the investment, on a mint ground, with the
   photograph set against an offset coral block. */

.why-sunfish {
    background-color: #fff;
    background-image: linear-gradient(122deg,
        rgba(41, 79, 86, 0) 0%,
        rgba(41, 79, 86, 0.10) 18%,
        rgba(45, 105, 122, 0.44) 54%,
        rgba(41, 79, 86, 0.9) 100%);
    padding-block: var(--space-section);
}

.why-sunfish-inner {
    width: min(var(--home-max-width), 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(320px, 1.06fr) minmax(280px, 0.94fr);
    column-gap: clamp(48px, 7vw, 112px);
    align-items: start;
}

.why-sunfish-title {
    margin: 0;
    font-family: var(--font-utility);
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-heading);
    font-stretch: 100%;
}

.why-sunfish-statement {
    margin: 12px 0 26px;
    font-family: var(--font-statement);
    font-size: clamp(17px, 1.5vw, 21px);
    font-style: italic;
    font-weight: 400;
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

.why-sunfish-copy p:not(.why-sunfish-statement) {
    margin: 0 0 16px;
    font: 400 18px/1.6 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.why-sunfish-list {
    margin: 0 0 20px;
    padding-left: 22px;
    list-style: disc;
}

.why-sunfish-list li {
    margin-bottom: 5px;
    font: 400 18px/1.6 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.why-sunfish-figure {
    position: relative;
    margin: 0;
    padding: 0;
}

.why-sunfish-figure::before {
    content: none;
}

.why-sunfish-figure img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 860px) {
    .why-sunfish-inner { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
    .why-sunfish-figure { width: min(100%, 460px); }
}

/* Our Role — how the work is done. The four principles and the photograph
   run down the wide column; the position statement sits in the narrow one. */

.role {
    background: #fff;
    padding-block: var(--space-section);
}

.role-inner {
    width: min(var(--home-max-width), 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(320px, 1.24fr) minmax(260px, 0.76fr);
    column-gap: clamp(48px, 7vw, 108px);
    align-items: start;
}

.role-title {
    margin: 0 0 22px;
    font-family: var(--font-utility);
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-heading);
    font-stretch: 100%;
}

.role-statement {
    margin: 0 0 clamp(28px, 3.2vw, 46px);
    max-width: 24ch;
    font-family: var(--font-statement);
    font-size: clamp(18px, 1.7vw, 24px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-heading);
    font-stretch: 100%;
}

.role-principles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px) clamp(28px, 3.4vw, 52px);
    margin: 0 0 clamp(32px, 4vw, 54px);
    padding: 0;
    list-style: none;
}

.role-principles h3 {
    margin: 0 0 7px;
    font: 700 clamp(13px, 1.05vw, 15px)/1.35 var(--font-utility);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

.role-principles p {
    margin: 0;
    font: 400 clamp(15px, 1.02vw, 17px)/1.55 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.role-figure {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.role-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

/* The rule tops the narrow column only, so it reads as that column's opening
   rather than a divider across the section. */
.role-aside {
    padding-top: clamp(18px, 2vw, 30px);
}

.role-aside-statement {
    margin: 0 0 clamp(20px, 2.4vw, 32px);
    font-family: var(--font-statement);
    font-size: clamp(17px, 1.55vw, 22px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.32;
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

.role-aside p:not(.role-aside-statement) {
    margin: 0 0 16px;
    font: 400 18px/1.6 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

@media (max-width: 860px) {
    .role-inner { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
    .role-principles { grid-template-columns: minmax(0, 1fr); }
}

/* Purpose, Mission, Vision — centred over the coastline, washed back so the
   photograph reads as ground rather than picture. The wash is lightest at the
   top and lifts toward the water at the bottom. */

.purpose {
    position: relative;
    background-image:
        linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.88) 12%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.8) 100%),
        url("haw1-65.webp");
    /* Size the wash to the box itself rather than letting it inherit cover:
       at some widths cover lands the gradient a fraction of a pixel low and
       the photograph shows through as a hairline along the top edge. */
    background-repeat: no-repeat;
    background-size: 100% 100%, cover;
    background-position: center top, center bottom;
    padding-block: var(--space-section);
}

.purpose-inner {
    width: min(var(--home-max-width), 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
    box-sizing: border-box;
    text-align: center;
}

.purpose-block + .purpose-block {
    margin-top: clamp(44px, 5vw, 74px);
}

.purpose-title {
    margin: 0 0 18px;
    font-family: var(--font-statement);
    font-size: clamp(24px, 2.4vw, 33px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

.purpose-block p {
    max-width: 96ch;
    margin: 0 auto 12px;
    font: 400 18px/1.6 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.purpose-block p:last-child { margin-bottom: 0; }

/* What We Believe — the five principles, each numbered, under the opening
   statement. */

.believe {
    background: #fff;
    padding-block: var(--space-section);
}

.believe-inner {
    width: min(var(--home-max-width), 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
    box-sizing: border-box;
}

.believe-title {
    margin: 0 0 14px;
    font-family: var(--font-utility);
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-heading);
    font-stretch: 100%;
}

.believe-statement {
    margin: 0 0 18px;
    font-family: var(--font-statement);
    font-size: clamp(18px, 1.7vw, 24px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

.believe-intro {
    max-width: 72ch;
    margin: 0 0 clamp(36px, 4.4vw, 62px);
    font: 400 18px/1.6 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

/* Counter rather than list-item markers, so the number can carry its own
   type and sit above the heading. */
.believe-list {
    counter-reset: believe;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(30px, 3.6vw, 54px) clamp(30px, 3.6vw, 56px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.believe-list li {
    counter-increment: believe;
}

.believe-list li::before {
    content: counter(believe, decimal-leading-zero);
    display: block;
    margin-bottom: 10px;
    font: 400 clamp(22px, 2.1vw, 30px)/1 var(--font-statement);
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

.believe-list h3 {
    margin: 0 0 8px;
    font: 700 clamp(14px, 1.1vw, 16px)/1.35 var(--font-utility);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-heading);
    font-stretch: 100%;
}

.believe-list p {
    margin: 0;
    font: 400 clamp(15px, 1.02vw, 17px)/1.58 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

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

@media (max-width: 680px) {
    .believe-list { grid-template-columns: minmax(0, 1fr); }
}

/* Rooted in Hawaiʻi — the closing argument. The olelo noeau opens it, the
   commitment sits centred between two photographs, and the vow closes it. */

.hawaii {
    background: #f6f7f7;
    padding-block: var(--space-section);
}

/* The vow opens the page on white; the story below it keeps the tint, so the
   two read as separate sections rather than one long band. */
.hawaii-intro {
    background: var(--color-white);
}

.hawaii-inner {
    width: min(var(--home-max-width), 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
    box-sizing: border-box;
}


.hawaii-open-figure {
    width: min(64%, 860px);
    margin: clamp(-28px, -2vw, -10px) 0 clamp(48px, 6vw, 84px) auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.hawaii-open-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
}

.hawaii-begins {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(300px, 1.2fr);
    column-gap: clamp(48px, 7vw, 112px);
    align-items: start;
    margin-bottom: clamp(56px, 7vw, 96px);
}

.hawaii-begins-title {
    margin: 0;
    max-width: 20ch;
    font-family: var(--font-utility);
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-heading);
    font-stretch: 100%;
}

.hawaii-begins-body p {
    margin: 0 0 16px;
    font: 400 18px/1.6 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.hawaii-begins-body p:last-child { margin-bottom: 0; }

.hawaii-commitment {
    text-align: center;
    margin-bottom: clamp(48px, 6vw, 84px);
}

.hawaii-commitment h3 {
    margin: 0 0 16px;
    font-family: var(--font-statement);
    font-size: clamp(23px, 2.3vw, 32px);
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

.hawaii-commitment > p {
    max-width: 68ch;
    margin: 0 auto clamp(32px, 4vw, 52px);
    font: 400 18px/1.6 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.hawaii-audiences {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 34px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.where-we-work-page .hawaii-audiences li {
    font: 400 clamp(18px, 1.45vw, 22px)/1.3 var(--font-statement);
    color: var(--color-teal);
    font-stretch: 100%;
}

/* Full bleed: the band is the width of the viewport, not the content column. */
.hawaii-band {
    margin: 0 0 clamp(56px, 7vw, 96px);
    aspect-ratio: 16 / 7;
    overflow: hidden;
}

.hawaii-band img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 52%;
}

.hawaii-close {
    text-align: center;
}

.hawaii-vow {
    max-width: 26ch;
    margin: 0 auto clamp(30px, 3.6vw, 48px);
    font-family: var(--font-statement);
    font-size: clamp(26px, 2.8vw, 40px);
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: -0.01em;
    color: var(--color-ink);
    font-stretch: 100%;
}

.hawaii-promises {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(24px, 4vw, 64px);
    margin: 0 0 clamp(28px, 3.4vw, 44px);
    padding: 0;
    list-style: none;
}

.hawaii-promises li {
    font-family: var(--font-statement);
    font-size: clamp(17px, 1.6vw, 23px);
    font-style: italic;
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

.hawaii-coda {
    max-width: 30ch;
    margin: 0 auto;
    font: 400 clamp(17px, 1.35vw, 21px)/1.45 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

@media (max-width: 900px) {
    .hawaii-begins { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
    .hawaii-begins-title { max-width: none; }
    .hawaii-audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hawaii-open-figure { width: 100%; margin-top: 26px; }
}

@media (max-width: 560px) {
    .hawaii-audiences { grid-template-columns: minmax(0, 1fr); }
    .hawaii-band { aspect-ratio: 4 / 3; }
}

/* What's in a name — the sunfish as the argument. The opening runs centred,
   the pairs sit on a cream card, and the closing puts the fish beside the copy. */

.name {
    background: #fff;
    padding-block: var(--space-section);
}

.name-inner {
    width: min(var(--home-max-width), 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
    box-sizing: border-box;
}

.name-open {
    text-align: center;
    margin-bottom: clamp(48px, 6vw, 84px);
}

.name-eyebrow {
    margin: 0 0 14px;
    font: 600 13px/1 var(--font-utility);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

.name-title {
    margin: 0 0 24px;
    font-family: var(--font-statement);
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-heading);
    font-stretch: 100%;
}

.name-lede {
    max-width: 46ch;
    margin: 0 auto;
    font: 400 clamp(17px, 1.35vw, 21px)/1.5 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.name-lede-close {
    margin-top: clamp(30px, 4vw, 54px);
    font-family: var(--font-statement);
    font-size: clamp(18px, 1.8vw, 25px);
    line-height: 1.3;
    color: var(--color-heading);
    font-stretch: 100%;
}

.name-worlds {
    padding: 0;
}

.name-worlds-title {
    margin: 0 0 clamp(28px, 3.2vw, 44px);
    font: 600 13px/1 var(--font-utility);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-heading);
    font-stretch: 100%;
}

/* Four ordinary CSS circles using the measured 575 × 540 composition. */
.name-venn {
    position: relative;
    width: min(575px, 100%);
    aspect-ratio: 575 / 540;
    margin: 0 auto;
}

.name-circle {
    position: absolute;
    width: 52.174%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9.74%;
    box-sizing: border-box;
    border: 2px solid;
    border-radius: 50%;
    background: transparent;
    text-align: center;
}

.name-circle-top { left: 23.826%; top: 0; border-color: var(--color-brown); color: var(--color-brown); }
.name-circle-left { left: 0; top: 44.444%; border-color: var(--color-teal); color: var(--color-heading); }
.name-circle-right { left: 47.652%; top: 44.444%; border-color: var(--color-teal-accent); color: var(--color-teal-accent); }
.name-circle-top .name-circle-copy { transform: translateY(-22%); }
.name-circle-left .name-circle-copy,
.name-circle-right .name-circle-copy { transform: translateY(24%); }

.name-circle-copy strong,
.name-circle-copy span { display: block; }

.name-circle-copy strong {
    margin-bottom: 10px;
    font: 900 clamp(14px, 2.7vw, 21px)/1.08 var(--font-condensed);
    letter-spacing: .05em;
    text-transform: uppercase;
    font-stretch: 75%;
}

.name-circle-copy span {
    font: 400 clamp(13px, 2.25vw, 19px)/1.25 var(--font-system);
}

.name-circle-center {
    z-index: 5;
    left: 39.478%;
    top: 42.963%;
    width: 20.87%;
    padding: 2.78%;
    border-color: var(--color-coral-bright);
    background: var(--color-coral-bright);
    color: var(--color-white);
}

.name-circle-center strong {
    font: 700 clamp(11px, 2vw, 16px)/1 var(--font-display);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-stretch: 75%;
}

.name-connect {
    max-width: 54ch;
    margin: clamp(48px, 6vw, 84px) auto clamp(48px, 6vw, 84px);
    text-align: center;
    font: 400 clamp(17px, 1.35vw, 21px)/1.5 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.name-connect em {
    display: block;
    margin-top: 12px;
    font-family: var(--font-statement);
    font-size: clamp(19px, 1.9vw, 26px);
    font-style: italic;
    line-height: 1.25;
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

.name-close {
    display: grid;
    grid-template-columns: minmax(240px, 488px) minmax(280px, 480px);
    column-gap: clamp(44px, 6vw, 92px);
    align-items: center;
    justify-content: center;
    width: min(1060px, 100%);
    margin-inline: auto;
}

.name-close-figure {
    margin: 0;
    /* the photograph's own proportions: it is a wide reef shot, and cropping
       it back to the portrait frame the previous image filled would lose the
       reef the sunfish is moving along */
    aspect-ratio: 1737 / 905;
    overflow: hidden;
}

.name-close-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.name-close-lead {
    margin: 0 0 16px;
    font-family: var(--font-statement);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    line-height: 1.25;
    color: var(--color-heading);
    font-stretch: 100%;
}

.name-knowing {
    margin: clamp(22px, 2.6vw, 34px) 0 0;
    padding: 0;
    list-style: none;
}

.name-knowing li {
    margin-bottom: 7px;
    font: 400 clamp(16px, 1.2vw, 19px)/1.5 var(--font-utility);
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

@media (max-width: 860px) {
    .name-close { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
    .name-close-figure { width: min(100%, 420px); }
    .name-pair-labels { font-size: 11px; letter-spacing: 0.06em; }
}

/* What success looks like — the claim, the six things an investment leaves
   behind, and the line about stewardship that closes the page's argument. */

.success {
    background: #fff;
    padding-block: var(--space-section);
}

.success-inner {
    width: min(var(--home-max-width), 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
    box-sizing: border-box;
}

.success-eyebrow {
    margin: 0 0 clamp(22px, 2.6vw, 34px);
    font: 600 13px/1 var(--font-utility);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-heading);
    font-stretch: 100%;
}

.success-eyebrow-second {
    margin-top: clamp(56px, 7vw, 96px);
}

.success-open {
    display: grid;
    grid-template-columns: minmax(280px, 1.04fr) minmax(280px, 0.96fr);
    column-gap: clamp(48px, 7vw, 112px);
    align-items: start;
}

.success-title {
    margin: 0;
    max-width: 18ch;
    font-family: var(--font-statement);
    font-size: clamp(26px, 2.8vw, 40px);
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-heading);
    font-stretch: 100%;
}

.success-open-body p {
    margin: 0 0 16px;
    font: 400 18px/1.6 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.success-open-body p:last-child { margin-bottom: 0; }

.success-outcomes {
    counter-reset: outcome;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(32px, 4vw, 56px) clamp(30px, 3.6vw, 56px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.success-outcomes li {
    counter-increment: outcome;
}

.success-outcomes li::before {
    content: counter(outcome, decimal-leading-zero);
    display: block;
    margin-bottom: 10px;
    font: 400 clamp(22px, 2.1vw, 30px)/1 var(--font-statement);
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

/* The rule sits under the label rather than over the item, separating the
   name of the outcome from its description. */
.success-outcomes h3 {
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(41, 79, 86, 0.22);
    font: 600 clamp(13px, 1.05vw, 15px)/1.35 var(--font-utility);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-heading);
    font-stretch: 100%;
}

.success-outcomes p {
    margin: 0;
    font: 400 clamp(15px, 1.02vw, 17px)/1.58 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.success-close {
    margin-top: clamp(56px, 7vw, 100px);
    text-align: center;
}

.success-close-lead {
    max-width: 22ch;
    margin: 0 auto clamp(22px, 2.6vw, 34px);
    font-family: var(--font-statement);
    font-size: clamp(24px, 2.6vw, 36px);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--color-ink);
    font-stretch: 100%;
}

.success-close-coda {
    max-width: 26ch;
    margin: 0 auto;
    font-family: var(--font-statement);
    font-size: clamp(18px, 1.8vw, 25px);
    font-style: italic;
    line-height: 1.3;
    color: var(--color-heading);
    font-stretch: 100%;
}

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

@media (max-width: 860px) {
    .success-open { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
    .success-title { max-width: none; }
}

@media (max-width: 640px) {
    .success-outcomes { grid-template-columns: minmax(0, 1fr); }
}

/* How We Work closes with a quiet editorial spread: concise copy on the left,
   a tall place-based photograph on the right. */
.how-we-work-page .success {
    background: var(--color-white);
}

.how-we-work-page .success-feature {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
    gap: clamp(54px, 7vw, 110px);
    align-items: stretch;
}

.how-we-work-page .success-feature-media {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    /* Stretches to whatever the copy beside it comes to, so the photograph
       fills the column; the image crops into it rather than the frame bending
       to the picture. */
    align-self: stretch;
}

.how-we-work-page .success-feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Sized to match .role-title and .believe-title, the page's other section
   headings, which it was running half again larger than. */
.how-we-work-page .success-title {
    max-width: 16ch;
    margin: 0 0 clamp(38px, 4vw, 56px);
    font-family: var(--font-utility);
    font-size: clamp(26px, 2.6vw, 36px);
    line-height: 1.1;
    color: var(--color-heading);
    font-stretch: 100%;
}

.how-we-work-page .success-open-body {
    margin-bottom: clamp(26px, 3vw, 38px);
}

.how-we-work-page .success-open-body p,
.how-we-work-page .success-outcomes p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-body);
}

.how-we-work-page .success-outcomes {
    display: block;
    margin: 0 0 clamp(28px, 3vw, 40px);
    padding-left: 20px;
    list-style: disc;
}

.how-we-work-page .success-outcomes li {
    margin-bottom: 9px;
}

.how-we-work-page .success-outcomes li::before { content: none; }

.how-we-work-page .success-outcomes li::marker {
    color: var(--color-coral-bright);
}

.how-we-work-page .success-outcomes p {
    display: block;
}

.how-we-work-page .success-close {
    margin: 0;
    padding: 0;
    background: none;
    text-align: left;
}

.how-we-work-page .success-close-lead,
.how-we-work-page .success-close-coda {
    max-width: 42ch;
    margin: 0 0 10px;
    font: 400 18px/1.6 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

@media (max-width: 900px) {
    .how-we-work-page .success-feature {
        grid-template-columns: 1fr;
    }
    .how-we-work-page .success-feature-media {
        height: min(110vw, 620px);
    }
}


/* ==========================================================================
   Noto type system - preview
   Four voices, mapped onto the tokens the site already routes everything
   through: Noto Sans 900 for display, Noto Serif for reading, Noto Serif at a
   condensed width and 300 for editorial headings, Noto Sans 600 for the
   controls. These rules only carry the weights; the families are on the
   tokens above, so nothing here has to name a face.
   ========================================================================== */

/* Display: the big statements. */
.project-card-title,
.focus-intro h1.focus-statement,
.focus-intro h2.focus-statement,
.signup-heading,
.return-title,
.return-body::before,
.return-questions li,
.partner-title,
.partner-row::before,
.partner-row-name,
.partner-statement,
.rooted-statement,
.rooted-olelo blockquote,
.rooted-pull,
.rooted-climax,
.whoweare-title,
.engage-title,
.member-name,
.home-hero-title,
.model-title,
.model-num,
.model-step-text,
.cta-band-copy h2,
.hub-title {
    font-weight: 900;
    letter-spacing: -0.03em;
}

/* Editorial: lighter, narrower, set close. */
.why-closing,
.home-hero-title,
.rooted-statement,
.home-page .home-hero-title,
.home-page .return-questions li,
.home-page .partner-row-name,
.home-page .rooted-climax,
.home-page .cta-band-copy h2,
.cta-band--pattern .cta-band-copy h2,
.home-page .model-visual-steps li,
.home-page .focus-intro h2.focus-statement,
.geography-header h2,
.geography-map-caption strong,
.geography-summary h3,
.team-feature-intro h1,
.team-officers h2,
.team-officer h3,
.about-statement,
.why-sunfish-statement,
.role-statement,
.role-aside-statement,
.purpose-title,
.believe-statement,
.believe-list li::before,
.hawaii-commitment h3,
.where-we-work-page .hawaii-audiences li,
.hawaii-vow,
.hawaii-promises li,
.name-title,
.name-lede-close,
.name-connect em,
.name-close-lead,
.success-title,
.success-outcomes li::before,
.success-close-lead,
.success-close-coda,
.intro-band-claim {
    font-weight: 300;
    font-stretch: 87.5%;
    letter-spacing: -0.03em;
}

/* Controls and anything enumerated. */
h1,
h2,
h3,
h4,
.why-title,
.return-title,
.cta-band-copy h2,
.partner-title,
.partner-statement,
.rooted-pull,
.rooted-climax,
.rooted-olelo blockquote,
.model-title,
.hub-title,
.focus-statement,
.model-visual-steps li,
.model-capacity,
.model-mission-callout,
.return-questions li,
.partner-row-name,
.return-eyebrow,
.partner-eyebrow,
.rooted-eyebrow,
.whoweare-eyebrow,
.focus-eyebrow,
.model-cta-eyebrow,
.why-label,
.return-questions li::before,
.home-page .rooted-statement,
.name-circle-copy span,
.hero-2-heading,
.section-heading,
.brief-heading,
.values-heading,
.closing-heading,
.plain-heading,
.page-hero-heading,
.legal-body h2 {
    font-weight: 600;
}

/* Navigation and buttons take one voice whatever the component said. */
.primary-nav > a,
.nav-dropdown-toggle,
.btn,
.nav-action,
.contact-submit,
.engage-submit,
.engage-donate,
.cta-band-button,
.about-team-cta,
.footer-nav a {
    font-family: var(--font-nav);
    font-weight: 500;
    letter-spacing: 0;
    font-stretch: 75%;
}

/* The hero claim, to the display spec. */
.home-page .home-hero-title {
    font-family: var(--font-display);
    font-size: var(--display-hero);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    font-stretch: 75%;
}

/* Crimson Pro needed the okina pulled in; Noto sets it on a normal advance, so
   the correction would crush it against the letter that follows. */
.okina {
    margin-inline: 0;
}

/* The Rooted passage is the claim the homepage builds to, so it carries the
   display weight rather than the editorial one it inherits from
   --font-statement. Noto Serif is requested up to 900 for it, so this is the
   real cut and not a synthesised bold. */
.home-page .rooted-statement,
.rooted-statement {
    font-weight: 900;
}

/* These two close the page above a form and a button, so they read as sans
   labels on the actions rather than as display statements. */
.engage-title {
    font-weight: 600;
}

/* Once the page moves the bar lifts off the top edge: inset from the sides,
   rounded like the buttons and shadowed, so it reads as floating above the
   page rather than fixed to it. It stays flush while the page is at rest. */
/* The hero holds the whole window, the bar being over it rather than above
   it, so the claim and the drawing get the room drawn for them. */
.home-page .home-hero-media {
    height: 100vh;
    height: 100svh;
}

/* A line of copy under the claim, sized well below it so it reads as a
   subtitle rather than a second statement. */
.home-page .home-hero-lede {
    max-width: 46ch;
    margin: clamp(18px, 2vw, 26px) 0 0;
    font-family: var(--font-utility);
    font-size: clamp(17px, 1.3vw, 21px);
    font-weight: 400;
    line-height: 1.55;
    color: var(--color-white);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
    font-stretch: 100%;
}

.home-page .home-hero-inner {
    display: block;
    align-content: center;
}

/* ---------- Focus cards as photographs ----------
   The six areas read as pictures with their name set on them, rather than as
   coloured panels of copy. The label sits on a gradient rather than the bare
   photograph so it stays legible whatever the image behind it does. */
.focus-card {
    position: relative;
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-btn);
    overflow: hidden;
    background: var(--color-teal-deep);
    aspect-ratio: 5 / 3;
}

/* Scoped past the decorative-icon rules, which size any img in a focus card
   to a small mark pinned to the corner. */
.focus-card .focus-card-photo,
.home-page .focus-card .focus-card-photo {
    position: absolute;
    inset: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    opacity: 1;
    object-fit: cover;
    object-position: center;
}

.focus-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 62%;
    background: linear-gradient(180deg, rgba(13, 50, 56, 0) 0%, rgba(13, 50, 56, 0.62) 62%, rgba(13, 50, 56, 0.82) 100%);
    pointer-events: none;
}

.focus-card h3 {
    position: absolute;
    z-index: 1;
    left: clamp(16px, 1.8vw, 24px);
    right: clamp(16px, 1.8vw, 24px);
    bottom: clamp(14px, 1.6vw, 20px);
    margin: 0;
    padding: 0;
    border: 0;
    /* the editorial voice: the light condensed serif, sized up a little because
       300 at label size goes faint over a photograph */
    font-family: var(--font-statement);
    font-size: clamp(19px, 1.7vw, 25px);
    font-weight: 300;
    font-stretch: 87.5%;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-white);
}

/* the coloured grounds and the decorative icons went with the copy */
.focus-card p,
.focus-card img:not(.focus-card-photo) {
    display: none;
}

.home-page .focus-card {
    min-height: 0;
    padding: 0;
    border-radius: var(--radius-btn);
    box-shadow: none;
}

/* The Model heading joins the display voice. Scoped to the page as well,
   because .home-page .model-title sets the face and weight of its own. */
.model-title,
.home-page .model-title {
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    font-stretch: 75%;
}

/* The two Rooted passages are the claims the pages build to, set in caps. */
.rooted-statement,
.home-page .rooted-statement,
.whoweare-title,
.home-page .whoweare-title {
    text-transform: uppercase;
}

/* The closing pair go back to the serif they were set in. */
.engage-title {
    font-family: var(--font-utility);
    font-weight: 400;
    font-stretch: 100%;
}

/* ---------- One radius across the pictures and the fields ----------
   The focus cards set the corner the rest of the site now follows, so every
   photograph, figure and input carries the same one. */
.about-story-figure,
.contact-figure-crop,
.name-close-figure,
.why-photo,
.why-callout,
.why-sunfish-figure,
.success-feature-media,
.model-visual,
.partner-figure,
.hub-inner,
.team-conversation,
.about-hero-photo,
.home-page .focus-card,
.team-officer > img,
.engage-figure,
figure.plain-figure {
    border-radius: var(--radius-btn);
    overflow: hidden;
}

.about-story-figure img,
.name-close-figure img,
.why-sunfish-figure img,
.partner-figure img,
.success-feature-media img,
.model-visual > img {
    border-radius: inherit;
}

/* Fields match the pictures rather than sitting square beside them. */
.field input,
.field textarea,
.engage-field input,
#cc-main .cm__btn,
#cc-main .pm__btn {
    border-radius: var(--radius-btn);
}

/* ---------- The closing block becomes one panel ----------
   Heading and copy on the left, the form on the right, both inside a single
   rounded ground. The markup is shared by ten pages, so the signup wrapper is
   dissolved with display: contents and its children are placed on the panel's
   own grid rather than the markup being rewritten ten times. */
.engage {
    background: var(--color-white);
    border-top: 0;
    padding-block: var(--space-section-sm);
}

.engage-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
    column-gap: clamp(36px, 5vw, 80px);
    row-gap: clamp(16px, 1.8vw, 24px);
    align-items: start;
    padding: clamp(34px, 4.5vw, 68px);
    border-radius: clamp(18px, 2.2vw, 30px);
    background: var(--color-teal);
    color: var(--color-white);
}

.engage-signup {
    display: contents;
}

.engage-signup > .engage-title {
    grid-column: 1;
    grid-row: 1;
}

.engage-signup > p {
    grid-column: 1;
    grid-row: 2;
    max-width: 42ch;
}

.engage-form {
    grid-column: 2;
    grid-row: 1 / span 2;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

/* No rule down the middle: the panel is the container now. */
.engage-support {
    grid-column: 1;
    grid-row: 3;
    padding-left: 0;
    border-left: 0;
    margin-top: clamp(18px, 2vw, 28px);
}

.engage-support > p {
    max-width: 42ch;
}

.engage-title,
.engage-signup > p,
.engage-support > p,
.engage-field label {
    color: var(--color-white);
}

.engage-field input {
    background: var(--color-white);
    border-color: transparent;
    color: var(--color-ink);
}

/* Teal on teal would vanish, so the action takes the accent. */
.engage-submit {
    justify-self: start;
    background: var(--color-coral-bright);
    color: var(--color-white);
}

.engage-submit:hover {
    background: var(--color-coral-bright-hover);
}

@media (max-width: 860px) {
    .engage-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .engage-form {
        grid-column: 1;
        grid-row: auto;
    }

    .engage-support {
        grid-column: 1;
        grid-row: auto;
    }
}

/* The banners take the same corner as everything else. The model callout is
   the exception: it sits inside the photograph, which rounds it. */
.home-page .hub-title,
.home-page .hub-outro,
.hub-intro,
.hub-photo,
.hub-photo img {
    border-radius: var(--radius-btn);
}

/* ---------- The closing panel takes the accent ground ----------
   Dark type on the bright ground rather than white: white on this orange
   measures 3.05 to 1, the ink 5.39, and the reference sets its own type dark
   for the same reason. */
.engage-inner {
    background: var(--color-cream);
}

.engage-title,
.engage-signup > p,
.engage-support > p,
.engage-field label {
    color: var(--color-heading);
}

.engage-inner {
    background: var(--color-cream);
}

.engage-field input {
    border-color: transparent;
}

/* Charcoal on the cream. */
.engage-submit {
    background: var(--color-charcoal);
    color: var(--color-white);
}

.engage-submit:hover {
    background: var(--color-charcoal-hover);
    color: var(--color-white);
}

/* The giving block comes out of the panel: the newsletter stands alone. */
.engage-support {
    display: none;
}

/* The intro band takes the warm gray the hub section runs on. Its copy turns
   white with it: black measures 4.16 to 1 on this ground, white 5.04. */
.intro-band {
    background: #786c6d;
}

.intro-band-inner,
.intro-band-inner p {
    color: var(--color-white);
}

/* 6. No frame around the photograph: the picture stands on its own. */
.home-page .hub-photo {
    border: 0;
}

/* ---------- Closing panel: white type, tighter box, bordered fields -------- */

/* Held inside the content width. It ran on --home-max-width with its own
   padding, which made it wider than the copy on every other section; now it
   stops well short of that measure so the panel reads as an aside closing the
   page rather than one more full width band. */
.engage-inner {
    max-width: min(var(--container-standard), calc(var(--container-wide) - (2 * var(--home-side-padding))));
}

.engage-title,
.engage-signup > p,
.engage-support > p,
.engage-field label,
.engage-fineprint {
    color: var(--color-heading);
}

/* The fields carry a hairline the way the reference's do, so they read as
   fields rather than as white gaps in the panel. */
.engage-field input {
    border: 1px solid rgba(28, 32, 33, 0.55);
}

.engage-fineprint {
    /* inside the form's own single column, not the panel's second one */
    grid-column: 1;
    max-width: 52ch;
    margin: 4px 0 0;
    font-family: var(--font-utility);
    font-size: 13px;
    line-height: 1.5;
    font-stretch: 100%;
}

.engage-fineprint a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Button typography ----------
   Semibold, not bold: 600 is the weight the institutional systems this is
   modelled on use for controls, and 700 read heavier than the rest of the
   page wanted. The main actions sit at 18px with a little tracking; the
   utility controls sit at 16px with none. */
.btn,
.engage-submit,
.contact-submit,
.cta-band-button,
.about-team-cta,
.partner-cta,
.whoweare-cta,
.model-contact-button,
.engage-donate,
.btn-coral,
.btn-teal {
    font-family: var(--font-nav);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    font-stretch: 75%;
}

.nav-action,
.cookie-settings {
    font-family: var(--font-nav);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: normal;
    font-stretch: 75%;
}

/* The band takes the white ground, so the claim reads as the page's opening
   statement rather than a tinted strip under the hero. */
.intro-band {
    background: var(--color-white);
}

.intro-band-inner,
.intro-band-inner p {
    color: var(--color-body);
}

/* The button scale, last so the per-section rules cannot walk it back:
   18px semibold for the main actions, 16px for the utility controls. */
.btn,
.btn-coral,
.btn-teal,
.engage-submit,
.engage-donate,
.contact-submit,
.cta-band-button,
.home-page .cta-band-button,
.cta-band--pattern .cta-band-button,
.about-team-cta,
.partner-cta,
.whoweare-cta,
.model-contact-button,
.intro-band-actions .btn-teal {
    font-family: var(--font-nav);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: none;
    font-stretch: 75%;
}

.nav-action,
.cookie-settings {
    font-family: var(--font-nav);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    font-stretch: 75%;
}

/* ---------- The resilience section on the light gray ----------
   Its copy was white for the warm gray it used to sit on; white measures
   1.17 to 1 on this ground, so the type turns dark with it (ink is 14.04).
   The outro keeps its white, since that band brings its own orange. */
.home-page .hub {
    background: #ededed;
}

.home-page .hub-title,
.home-page .hub-intro p,
.home-page .hub-list li,
.home-page .hub-cue {
    color: var(--color-heading) !important;
}

.home-page .hub-outro,
.home-page .hub-outro p {
    color: var(--color-white) !important;
}

/* The three pictures were stacked flush; they read as one column of separate
   photographs with a gap between them. */
.why-collage {
    gap: clamp(10px, 1.2vw, 16px);
}

/* The olelo noeau returns to the coral, set in the serif. It sits over the
   photograph, so it keeps the firmer shadow that made it legible there. */
.home-page .rooted-olelo blockquote,
.rooted-olelo blockquote {
    font-family: var(--font-statement);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--color-coral-bright);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 6px 26px rgba(0, 0, 0, 0.45);
    font-stretch: 100%;
}

/* The copy sat a row away from its heading because the form spans the panel
   and was stretching the rows it crossed. Explicit rows keep the heading and
   its paragraph at their own height and give the slack to the row below. */
.engage-inner {
    grid-template-rows: auto auto 1fr;
    align-content: start;
}

.engage-signup > p {
    margin-top: 0;
}

.engage-form {
    grid-row: 1 / -1;
}

/* Charcoal, not black. */
.engage-submit {
    background: #343B3C;
}

.engage-submit:hover {
    background: #454C4E;
}

/* No eyebrows on the homepage: each section leads with its own statement. */
.home-page .focus-eyebrow,
.home-page .model-cta-eyebrow,
.home-page .partner-eyebrow,
.home-page .return-eyebrow,
.home-page .rooted-eyebrow,
.home-page .whoweare-eyebrow {
    display: none;
}

/* The banner fades through the deep teal instead of the pale mint, so the
   title can carry white: 13.7 to 1 at the dark end, 4.86 at the light. */
.home-page .hub-title {
    background: linear-gradient(90deg,
        rgba(13, 50, 56, 0.96) 0%,
        rgba(41, 79, 86, 0.94) 55%,
        rgba(53, 123, 133, 0.92) 100%);
    color: var(--color-white) !important;
}

/* ---------- Who We Are on the teal, with the signup lapping its edge -------
   The section carries the institutional ground so the cream panel below can
   overlap it and be seen doing so. Its type turns with the ground. */
.home-page .whoweare {
    background: var(--color-teal);
    padding-top: var(--section-lg);
    padding-bottom: calc(var(--section-md) + var(--section-overlap));
}

.home-page .whoweare-title,
.home-page .whoweare-body p {
    color: var(--color-white);
}

/* The panel rides up over the section's bottom edge. The band itself goes
   transparent, otherwise its own ground would cover what the panel is meant
   to be lapping. */
.home-page .engage {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--section-overlap));
    padding-top: 0;
    background: transparent;
}

/* ---------- The CTA bands keep their ground, at the content measure --------
   They were bleeding the full viewport. The teal and the mountain mark stay;
   only the width comes in, so they line up with every other section. */
/* The ground and its mark run the full width of the page; only the copy inside
   is held to the content measure. */
.home-page .cta-band,
.cta-band--pattern {
    width: auto;
    max-width: none;
    margin-inline: 0;
    border-radius: 0;
    background: var(--color-teal-deep);
}

.home-page .cta-band-inner,
.cta-band--pattern .cta-band-inner {
    width: 100%;
    /* a step in from the page measure: the band's ground runs the full width,
       so its copy does not need to reach as far as the sections' does */
    max-width: calc(var(--home-max-width) - 120px);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
}

.home-page .cta-band-copy h2,
.cta-band--pattern .cta-band-copy h2,
.home-page .cta-band-copy p,
.cta-band--pattern .cta-band-copy p {
    color: var(--color-white);
}

/* The directory below runs on the same measure as the rest of the page. */
.home-page .partner-body {
    max-width: none;
}

/* The olelo noeau: sentence case, italic, in the light blue. */
.home-page .rooted-olelo blockquote,
.rooted-olelo blockquote {
    font-family: var(--font-statement);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-ice);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 6px 26px rgba(0, 0, 0, 0.45);
    font-stretch: 100%;
}

/* Meet the Team goes white on the teal. */
.whoweare-cta,
.home-page .whoweare-cta {
    background: var(--color-white);
    color: var(--color-teal);
}

.whoweare-cta:hover,
.home-page .whoweare-cta:hover {
    background: var(--color-cream);
    color: var(--color-teal);
}

/* The band the signup sits in is white, but its top edge has to stay clear so
   the panel can still lap the teal above it. The page ground behind is the
   site cream, which is what was showing through while the whole band was
   transparent. */
.home-page .engage {
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0) var(--section-overlap),
        var(--color-white) var(--section-overlap));
}

/* The footer drops its coral rail and the sunfish mark behind it. */
.site-footer {
    border-top: 0;
}

.site-footer::before {
    content: none;
}

/* The mark in the CTA band reads the other way round. */
.home-page .cta-band::before,
.cta-band--pattern::before {
    transform: scaleX(-1);
}

/* The title loses its banner and sits as plain type on the section ground. */
.home-page .hub-title {
    width: auto;
    margin-left: 0;
    padding: 0;
    background: none;
    color: var(--color-heading) !important;
}

/* The orange block was sitting flush against the photograph above it; the same
   small gap the cards below are set on. */
.home-page .hub-inner {
    gap: clamp(12px, 1.2vw, 16px) clamp(42px, 5vw, 72px);
}

/* The mark in Who We Are reads the other way round. */
.whoweare::before {
    transform: translateY(-50%) scaleX(-1);
}

/* ---------- The footer on the deep teal ----------
   Back to the institutional ground it opened on. The cream type reads at 13.5
   to 1 there. */
.site-footer {
    background: var(--color-teal-deep);
    color: var(--color-cream);
}

.site-footer p,
.site-footer li,
.site-footer small,
.footer-nav a,
.footer-legal,
.footer-legal-link,
.footer-social a {
    color: var(--color-cream);
}

.footer-nav a:hover,
.footer-legal-link:hover,
.footer-legal-link:focus-visible,
.footer-social a:hover {
    color: var(--color-coral-bright);
}

.footer-legal-link::before {
    background: rgba(247, 241, 232, 0.4);
}

.site-footer svg {
    fill: var(--color-cream);
}

/* The resilience section runs on the page measure like the rest, and the
   orange block gives up its overhang so it lines up with the photograph. */
.home-page .hub-inner {
    width: 100%;
    max-width: var(--home-max-width);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
}

.home-page .hub-outro {
    --hub-outro-overhang: 0px;
    width: 100%;
    margin-left: 0;
}

/* The section carried 20px of its own side padding on top of the inner's
   gutter, which set it in from the page measure by that much. */
.home-page .hub {
    padding-inline: 0;
}

/* The block was set a size up from the copy around it; back to the site's
   reading size. */
.home-page .hub-outro p,
.hub-outro p {
    font-size: 18px;
    line-height: 1.6;
}

/* The photographs these pages carry take the same corner as the rest.
   .team-hawaii-art is left square: it is a transparent islands drawing, not a
   photograph, so there is no edge for a radius to round. */
.team-feature-photo,
.role-figure,
.hawaii-open-figure {
    border-radius: var(--radius-btn);
    overflow: hidden;
}

.team-feature-photo img,
.role-figure img,
.hawaii-open-figure img {
    border-radius: inherit;
}

/* Set exactly as the copy beside it: the same serif, weight, size and leading,
   so the block reads as the section's own voice rather than a second one. */
.home-page .hub-outro p,
.hub-outro p {
    font-family: var(--font-utility);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.45;
    letter-spacing: normal;
    font-stretch: 100%;
}

/* ---------- The serif headings share one weight ----------
   They were split across 400 and 600; 400 is the one they settle on. The
   editorial headings keep their own 300, which the type system sets for the
   condensed cut. */
.hub-title,
.home-page .hub-title,
.why-title,
.return-title,
.partner-title,
.engage-title,
.role-title,
.believe-title,
.why-sunfish-title,
.home-page .why-title,
.home-page .return-title,
.home-page .partner-title,
.home-page .engage-title,
.partner-statement,
.home-page .partner-statement {
    font-weight: 400;
}

/* Keep the homepage's primary section headings typographically uniform with
   The Sunfish Model while allowing each section to retain its own color. */
.home-page .return-title,
.home-page .partner-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: var(--display-md);
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    font-stretch: 75%;
}

.home-page .why-title {
    font-family: var(--font-statement);
    font-weight: 400;
    font-size: var(--display-sm);
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: none;
    font-stretch: 100%;
}

/* ---------- Rooted in West Oahu, on the orange ----------
   The one full-width field of the signature colour on the site, and the page
   can carry it now that the orange is the muted value rather than the bright
   one it was when this band last held it. */
.home-page .whoweare {
    background: var(--color-coral-bright);
}

.home-page .whoweare-title,
.home-page .whoweare-body p {
    color: var(--color-white);
}

.home-page .whoweare::before {
    opacity: 0.13;
}

/* The action stays white, which reads on the orange without competing with it. */
.home-page .whoweare-cta {
    padding: 15px 34px;
    border: 0;
    border-radius: var(--radius-btn);
    background: var(--color-white);
    color: var(--color-teal-deep);
    text-decoration: none;
}

.home-page .whoweare-cta:hover {
    background: var(--color-cream);
    color: var(--color-teal-deep);
}

/* ---------- Where We Work: the commitment leads, then copy beside the photo
   The commitment block moves above and stays centred; the opening copy and the
   photograph become one two-column pair rather than the picture sitting beside
   the olelo. */
.hawaii-story .hawaii-commitment {
    margin-bottom: clamp(48px, 6vw, 84px);
}

.hawaii-story .hawaii-begins {
    grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.05fr);
    column-gap: clamp(48px, 6vw, 92px);
    align-items: center;
}

.hawaii-story .hawaii-begins-copy {
    display: grid;
    gap: clamp(18px, 2vw, 26px);
}

.hawaii-story .hawaii-begins-title {
    max-width: 20ch;
}

.hawaii-story .hawaii-open-figure {
    width: 100%;
    margin: 0;
}

@media (max-width: 860px) {
    .hawaii-story .hawaii-begins {
        grid-template-columns: minmax(0, 1fr);
        row-gap: clamp(24px, 4vw, 36px);
    }
}

/* ---------- Interior page opening rhythm ----------
   Subpages begin close to the header on one shared offset. The Team page
   keeps its existing composition, which already uses the intended spacing. */
body:not(.home-page):not(.team-page) > main > section:first-child,
body:not(.home-page):not(.team-page) > .contact-feature {
    padding-top: clamp(36px, 4vw, 56px);
}

body:not(.home-page):not(.team-page) > .plain > .plain-inner {
    padding-top: clamp(36px, 4vw, 56px);
}

/* ---------- Founding Stewards heading hierarchy ----------
   One page-title scale, one section-title scale, and one subsection scale keep
   the long page readable without headings changing size arbitrarily. */
.founding-stewards-page .stewards-banner h1 {
    font-size: clamp(32px, 2.8vw, 42px);
}

.founding-stewards-page .stewards-commitment-copy > h3,
.founding-stewards-page .stewards-inkind-copy > h2 {
    font-size: clamp(23px, 2vw, 27px);
    line-height: 1.15;
}

.stewards-sunbear-logo {
    display: block;
    width: min(210px, 56%);
    height: auto;
    margin: 34px 0 24px;
}


/* ---------- Founding Stewards: the two steward columns ----------
   The steward we have and the steward we are looking for, side by side across
   a coral hairline that becomes a horizontal rule when the columns stack. */
.stewards-partners {
    background: var(--color-white);
    padding: clamp(56px, 6vw, 88px) 0 clamp(64px, 7vw, 104px);
}

.stewards-partners-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(36px, 5vw, 76px);
    width: min(1240px, 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
}

/* the rule is carried by the second column, so it leaves with the stack */
.stewards-partners-inner > .stewards-partner-column + .stewards-partner-column {
    padding-left: clamp(28px, 4vw, 60px);
    border-left: 1px solid var(--color-coral-tint);
}

.founding-stewards-page .stewards-partner-column h2 {
    margin: 0 0 24px;
    font-family: var(--font-display);
    font-size: clamp(23px, 2vw, 27px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-heading);
    font-stretch: 75%;
}

.stewards-partner-column p {
    margin: 0 0 18px;
    font: 400 16px/1.5 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.stewards-partner-column .stewards-partner-claim {
    margin: 4px 0 clamp(24px, 3vw, 32px);
    font-family: var(--font-statement);
    font-size: clamp(19px, 1.8vw, 23px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.35;
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

.stewards-partner-cta {
    display: inline-flex;
    padding: 14px 24px;
    border-radius: var(--radius-btn);
    background: var(--color-coral-bright);
    color: var(--color-white);
}

.stewards-partner-cta:hover {
    background: var(--color-coral-bright-hover);
}

/* ---------- Founding Stewards: other ways to partner ----------
   The invitation on the left, the levels of partnership on the right, each on
   the coral rail the site uses for anything enumerated. */
.stewards-ways {
    background: var(--color-band);
    padding: clamp(64px, 7vw, 100px) 0;
}

.stewards-ways-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(36px, 5vw, 80px);
    width: min(1240px, 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
}

.founding-stewards-page .stewards-ways-copy h2 {
    margin: 0 0 22px;
    font-family: var(--font-display);
    font-size: clamp(26px, 2.3vw, 32px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-heading);
    font-stretch: 75%;
}

.stewards-ways-copy p {
    margin: 0 0 18px;
    font: 400 16px/1.55 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

.stewards-ways-copy p:last-child { margin-bottom: 0; }

.stewards-ways-copy .stewards-ways-lead {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-ink);
}

.stewards-ways-roles {
    display: grid;
    align-content: start;
    gap: clamp(22px, 2.6vw, 32px);
    margin: 0;
    padding-top: 8px;
}

/* each level is named rather than labelled: the serif at its lightest, set
   large and in the case it is written in, with nothing holding it */
.stewards-way dt {
    font-family: var(--font-utility);
    font-size: clamp(21px, 1.9vw, 26px);
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-teal);
    font-stretch: 100%;
}

.stewards-way dd {
    margin: 10px 0 0;
    font: 400 16px/1.55 var(--font-utility);
    color: var(--color-body);
    font-stretch: 100%;
}

@media (max-width: 860px) {
    .stewards-partners-inner,
    .stewards-ways-inner { grid-template-columns: minmax(0, 1fr); }

    .stewards-partners-inner > .stewards-partner-column + .stewards-partner-column {
        padding-left: 0;
        padding-top: clamp(30px, 5vw, 44px);
        border-left: 0;
        border-top: 1px solid var(--color-coral-tint);
    }

    .stewards-ways-roles { padding-top: 0; }
}


/* ---------- The homepage's three statements take the opening voice ----------
   The partner belief, the dollar returned to the mission and the resilience
   hub are the same kind of sentence as the claim that opens the page, so they
   are set the same way: the condensed serif at its lightest, not the bold. */
.home-page .partner-statement,
.home-page .why-title,
.home-page .hub-title {
    font-family: var(--font-statement);
    font-weight: 300;
    font-stretch: 87.5%;
    letter-spacing: -0.03em;
}


/* ---------- One colour across the headings ----------
   The statements that were still set in the institutional teal join the rest:
   every heading on the site now carries the ink. Teal keeps its grounds, its
   rails and its labels. */
.model-title,
.why-title,
.return-title,
.partner-title,
.stewards-way dt,
.home-page .model-title,
.home-page .why-title,
.home-page .return-title,
.home-page .partner-title {
    color: var(--color-heading);
}


/* ---------- The bar comes back when the reader turns round ----------
   It scrolls off with the page like any other block. Once it is past its own
   height it detaches, waits above the fold, and slides in the moment the
   reader scrolls up. The body carries its height while it is detached, so
   nothing shifts when it leaves the flow. */
.site-header.is-floating {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    transform: translateY(-100%);
    transition: transform 0.28s ease, background-color 0.25s ease;
}

.site-header.is-floating.is-visible {
    transform: translateY(0);
}

/* Held for the frame in which the bar changes footing, so that the swap
   between sitting in the page and hanging above it is never animated: only
   the arriving and the leaving are. */
.site-header.is-still {
    transition: none;
}


@media (prefers-reduced-motion: reduce) {
    .site-header.is-floating { transition: background-color 0.25s ease; }
}

/* ---------- Navigation and buttons ----------
   One voice for everything you click, last so no per-section rule can walk it
   back: Noto Sans on its condensed width. The bar sits at 600 and the buttons
   keep the 500 they were set at; the width is stated with the family, since
   the condensed cut is an axis of Noto Sans rather than a family of its own. */
.btn,
.btn-coral,
.btn-teal,
.btn-plain,
.nav-action,
.contact-submit,
.engage-submit,
.engage-donate,
.cta-band-button,
.home-page .cta-band-button,
.cta-band--pattern .cta-band-button,
.about-team-cta,
.partner-cta,
.whoweare-cta,
.model-contact-button,
.stewards-partner-cta,
.stewards-partnership-donate,
.stewards-giving-button,
.stewards-invitation-button {
    font-family: var(--font-nav);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    font-stretch: 75%;
}

/* The bar itself, at the weight it is specified to hold. */
.primary-nav > a,
.nav-dropdown-toggle {
    font-family: var(--font-nav);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    font-stretch: 75%;
}

/* The footer links and the cookie control take the same family, but keep the
   smaller sizes their own components set: neither is a button or a bar item. */
.footer-nav a,
.cookie-settings {
    font-family: var(--font-nav);
    font-weight: 500;
    font-stretch: 75%;
}


/* ---------- The dropdown's own voice ----------
   The items under About are page names rather than actions, so they are set
   in the serif at its lightest instead of the bar's own voice. */
.nav-dropdown-menu a {
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-weight: 400;
    letter-spacing: 0;
}


/* ---------- The quiet action ----------
   An invitation to read on rather than a commitment: the label and a rule
   under it, nothing else. Two classes deep so it lands after the per-page
   button colours, which are set that way too. */
.btn.btn-plain {
    padding: 0 0 5px;
    border: 0;
    border-bottom: 2px solid rgba(70, 82, 84, 0.45);
    border-radius: 0;
    background: transparent;
    background-image: none;
    box-shadow: none;
    color: var(--color-ink);
}

.btn.btn-plain:hover {
    border-bottom-color: var(--color-coral-bright);
    background: transparent;
    color: var(--color-coral-bright);
}


/* ---------- Founding Stewards: the close ----------
   The page ends on the invitation itself rather than the list of roles. */
.stewards-invitation {
    padding: var(--section-lg) 0 var(--section-sm);
    background: var(--color-white);
}

.stewards-invitation-inner {
    width: min(940px, 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
    text-align: center;
}

.stewards-invitation-statement {
    margin: 0 0 24px;
    font-family: var(--font-statement);
    font-size: clamp(22px, 2.2vw, 29px);
    font-style: italic;
    line-height: 1.2;
    color: var(--color-coral-bright);
    font-stretch: 100%;
}

.stewards-invitation h2 {
    margin: 0 0 38px;
    font-family: var(--font-display);
    font-size: clamp(30px, 2.5vw, 34px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-heading);
    font-stretch: 75%;
}

.stewards-invitation-inner > p:not(.stewards-invitation-statement),
.stewards-invitation-vow p {
    max-width: 76ch;
    margin: 0 auto 26px;
    font: 400 17px/1.5 var(--font-system);
    color: var(--color-body);
}

.stewards-invitation-vow {
    margin: 38px 0 42px;
}

.stewards-invitation-vow p {
    margin-bottom: 18px;
}

.stewards-invitation-button {
    padding: 15px 26px;
    border-radius: var(--radius-btn);
    background: var(--color-coral-bright);
    color: var(--color-white);
}

.stewards-invitation-button:hover {
    background-color: var(--color-coral-bright-hover);
    color: var(--color-white);
}

@media (max-width: 520px) {
    .stewards-invitation {
        padding-block: 72px 96px;
    }

    .stewards-invitation-inner > p:not(.stewards-invitation-statement),
    .stewards-invitation-vow p {
        font-size: 16px;
    }
}


/* ---------- The two enumerated lists on the homepage ----------
   The measured questions and the directory of who we seek to partner with sit
   in the editorial group above, which sets 300. They read as a list rather
   than a passage, so they come up a step. Everything else there is unchanged. */
.home-page .return-questions li,
.home-page .partner-row-name {
    font-weight: 400;
}


/* ---------- The bar runs the full width of the viewport ----------
   It had been laid out on the page measure, which left the mark and the
   donate block floating inboard of the edges on a wide screen. The bar now
   spans the viewport: the mark sits on the left inset, the nav stays centred
   on the bar itself, and the donate block runs flush to the right edge at the
   full height of the header, so it reads as part of the bar rather than a
   button placed on it. Page-specific measures are folded in here, since every
   page now shares the one bar. */
.header-inner,
.home-page .header-inner,
.founding-stewards-page .header-inner,
.team-page .header-inner,
.about-page .header-inner {
    max-width: none;
    width: 100%;
    padding-left: var(--home-side-padding);
    padding-right: 0;
}

.header-actions {
    align-self: stretch;
    gap: 0;
}

/* The block, not a button: square, full-bleed to the right, full bar height. */
.nav-action {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    height: var(--header-h);
    padding: 0 clamp(26px, 3vw, 48px);
    border-radius: 0;
}

/* The toggle keeps its own inset so it is not pushed against the edge when it
   replaces the donate block. */
@media (max-width: 900px) {
    .header-inner,
    .home-page .header-inner,
    .founding-stewards-page .header-inner,
    .team-page .header-inner,
    .about-page .header-inner {
        padding-right: var(--home-side-padding);
    }

    .header-actions { gap: 14px; }

    .nav-action {
        height: auto;
        align-self: center;
        padding: 12px 22px;
        border-radius: var(--radius-btn);
    }
}


/* ---------- Which voice a heading takes, across the subpages ----------
   One rule decides it. If the heading could stand in a table of contents --
   a page title, a section label, a framework, a list of principles, a name,
   an institutional declaration -- it is structure, and it takes the condensed
   sans. If it is a thought, a proverb, a reflection or a narrative turn, it
   stays in the serif and is not listed here.

   The subpages had drifted almost entirely into the serif, which is why they
   read softer than the homepage and than Founding Stewards, the one subpage
   already holding both voices. Sizes are left where each page set them: only
   the face, the weight and the case change. */

/* Page and section titles, and the declarations that anchor a page. */
.about-statement,
.why-sunfish-title,
.name-title,
.role-title,
.purpose-title,
.believe-title,
.hawaii-begins-title {
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-weight: 900;
    font-style: normal;
    text-transform: uppercase;
    color: var(--color-heading);
}

/* The principles and the tenets: brand statements set as a framework, so they
   carry authority rather than reading as literary lines. */
.role-principles h3,
.believe-list h3 {
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-weight: 700;
    text-transform: uppercase;
    font-style: normal;
    color: var(--color-heading);
}

/* Names identify rather than reflect. The person the page leads on carries
   the display weight; the officers sit a step under it and keep their own
   case, since a roster reads as names and not as headlines. */
.team-feature-intro h1 {
    font-family: var(--font-statement);
    font-stretch: 100%;
    font-weight: 600;
    text-transform: none;
}

/* Names read as names: the serif, at the weight it holds elsewhere on the
   page. The role under each takes the structural sans instead, so the pair
   separates by voice rather than by size alone. */
.team-officer h3 {
    font-family: var(--font-statement);
    font-stretch: 100%;
    font-weight: 600;
    text-transform: none;
}

.team-officer .team-role,
.team-role {
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* ---------- The mark's pattern, very quietly, behind the bar ----------
   Anchored to the right and cropped by the header's own box, so it reads as a
   texture in the ground rather than a graphic placed on it. Held far below
   the contact band's 0.09, since this sits under navigation that has to stay
   legible on every page: at 0.06 it is felt before it is read. The bar is
   already positioned, so the layer needs no stacking of its own beyond
   sitting under the content, which takes the layer above it. */

/* The donate action closes the partnership column on its right edge rather
   than its left, so it reads as the end of the passage above it instead of
   starting a new one. A flex box of its own width, pushed over by its margin,
   since an inline element has nothing for auto margins to work against. */
.stewards-partnership-donate {
    display: flex;
    width: fit-content;
    margin-left: auto;
}


/* ---------- Explore Sunfish: where to go when the page is finished ----------
   The secondary navigation that closes every subpage. It sits after the page
   has told its story and before the closing panel, offers three destinations
   rather than a menu, and says why each one is worth the visit. Its heading
   changes with the page it sits on, so it reads as edited into each ending
   rather than pasted onto all of them.

   It is also the structural sans moment the serif-led subpages were missing:
   the heading and the card titles in the condensed face, the descriptions in
   the serif that carries the rest of their copy. */
.explore {
    /* Plain white, with nothing laid behind it: the pictures are what carry
       the band, and a ground or a pattern under them only competed. */
    background: var(--color-white);
    /* It sits between a section that has just closed and the panel that
       follows, and both bring their own space. Two large steps meeting made a
       gap wider than any single section's, so this takes the compact one. */
    padding-block: var(--section-sm);
}

.explore-inner {
    width: min(var(--container-wide), 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
}

.explore-heading {
    margin: 0 0 clamp(34px, 3.6vw, 52px);
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-size: var(--display-md);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-heading);
}

.explore-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 3.2vw, 46px);
}

/* No rule, no box: the three columns are held by the gap between them and by
   the weight of their titles, so the band reads as one composition. */
.explore-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.explore-card-title {
    margin: 0 0 12px;
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.005em;
    text-transform: none;
    color: var(--color-heading);
}

/* The title carries the link, and the link covers the card, so the whole
   column is a target without nesting anything inside an anchor. */
.explore-card-title a {
    color: inherit;
    text-decoration: none;
}



.explore-card-title a:focus-visible {
    outline: 2px solid var(--color-heading);
    outline-offset: 4px;
}

.explore-card-copy {
    margin: 0 0 clamp(18px, 2vw, 24px);
    font: 400 17px/1.55 var(--font-utility);
    font-stretch: 100%;
    color: var(--color-body);
}

/* The label and a rule under it, in the same dark as the title. It is the
   card's own cue rather than a second action, so it takes no colour of its
   own and no ornament. */
.explore-card-cue {
    margin-top: auto;
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-heading);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}

.explore-card:hover .explore-card-cue {
    text-decoration-thickness: 2px;
}

@media (max-width: 860px) {
    .explore-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(34px, 7vw, 46px);
    }
}


/* The second word of each purpose heading turns: the sans states which of the
   three it is, the serif carries the word itself. Set upright case rather
   than the heading's caps, since the point of the change is that it reads as
   a different voice and not as a continuation of the label. */
/* The label stays in sentence case, not caps, and the word beside it is set
   lower case in the serif: Our purpose, read as a phrase, rather than OUR
   PURPOSE read as a sign. Both halves carry the coral -- the change between
   them is one of voice and weight, not of colour. */
.purpose-title {
    text-transform: none;
    color: var(--color-coral-bright);
}

.purpose-title em {
    font-family: var(--font-statement);
    font-stretch: 100%;
    font-size: 1.12em;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-coral-bright);
}


/* ---------- Explore: the destination's own picture leads the card ----------
   One image taken from the page being linked to, so the card previews the
   place rather than illustrating it. No ground, no border, no shadow: the
   picture, the title, the sentence and the cue, in that order. */
.explore-card-media {
    display: block;
    margin-bottom: clamp(16px, 1.8vw, 22px);
    border-radius: 10px;
    overflow: hidden;
}

.explore-card-media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /* The team card is the one portrait among landscapes; taking the crop from
       the upper part of the frame keeps a face out of the bottom edge. */
    object-position: center 30%;
    transition: transform 0.35s ease;
}

.explore-card:hover .explore-card-media img {
    transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
    .explore-card-media img { transition: none; }
    .explore-card:hover .explore-card-media img { transform: none; }
}


/* ---------- Multiplying the investment, on its own ----------
   The flow had been the tail of the commitment column, which set it in half
   the page beside unrelated copy. It is the argument the section is making,
   so it takes a band of its own: the six steps centred on a reading measure,
   with room either side, and the sand ground to separate it from the white
   above and below it. */
.stewards-multiply {
    background: var(--color-white);
    padding-block: var(--section-lg);
}

.stewards-multiply .stewards-flow-inner {
    width: min(var(--container-wide), 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
}

.stewards-multiply .stewards-flow-inner > h2 {
    margin: 0 0 clamp(34px, 3.6vw, 48px);
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-size: var(--display-md);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-heading);
}


/* ---------- In Kind Expertise ----------
   The twelve capabilities had been a single column of bullets running down
   the side of the page, which made a short list look long and left the copy
   beside it unbalanced. The passage leads, the capabilities follow it across
   three columns, and the whole band sits on the page measure. */
.stewards-inkind {
    background: var(--color-white);
    padding-block: var(--section-lg);
}

/* What a steward gives, then what the giving sets off: one argument in two
   parts. Two large steps meeting held them 240 apart, further than any two
   sections on the page, which read as a break rather than a breath. */
.stewards-inkind {
    padding-bottom: var(--section-sm);
}

.stewards-inkind + .stewards-multiply {
    padding-top: var(--section-sm);
}

.stewards-inkind-inner {
    width: min(var(--container-standard), 100%);
    margin-inline: auto;
    padding-inline: var(--home-side-padding);
}

.stewards-inkind-head {
    max-width: 68ch;
}

.stewards-inkind-head h2 {
    margin: 0 0 22px;
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-size: var(--display-md);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-heading);
}

.stewards-inkind-head p {
    margin: 0 0 18px;
    font: 400 17px/1.55 var(--font-utility);
    font-stretch: 100%;
    color: var(--color-body);
}

.stewards-inkind-cue {
    margin: clamp(30px, 3.4vw, 44px) 0 clamp(18px, 2vw, 24px);
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-heading);
}

.stewards-inkind-list ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(28px, 3vw, 48px);
    row-gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stewards-inkind-list li {
    position: relative;
    padding-left: 20px;
    font: 400 16px/1.5 var(--font-utility);
    font-stretch: 100%;
    color: var(--color-body);
}

/* A coral disc, drawn rather than set as a character, so its size and its
   seat on the first line do not move with the font. */
.stewards-inkind-list li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-coral-bright);
}


/* ---------- Multiplying the investment ----------
   The six steps had been pills on coloured rings joined by arrow glyphs --
   four accent colours and a widget's worth of ornament for what is a plain
   sequence. They are set as a numbered progression instead: the ordinal
   large in the condensed face, the step named under it, the consequence in
   the serif. No pills, no rings, no arrows, and one accent colour. */
.stewards-flow-inner ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(30px, 3.6vw, 62px);
    row-gap: clamp(48px, 5.4vw, 78px);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: steward-flow;
}

.stewards-flow-inner li {
    counter-increment: steward-flow;
}

.stewards-flow-inner li::before {
    content: counter(steward-flow, decimal-leading-zero);
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-size: clamp(34px, 3.4vw, 48px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-coral-bright);
}

.stewards-flow-inner li strong,
.stewards-flow-inner li span {
    display: block;
}

.stewards-flow-inner li strong {
    margin-bottom: 8px;
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-size: clamp(17px, 1.75vw, 22px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--color-heading);
}

.stewards-flow-inner li span {
    font: 400 16px/1.5 var(--font-utility);
    font-stretch: 100%;
    color: var(--color-body);
}

@media (max-width: 860px) {
    .stewards-inkind-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stewards-flow-inner ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .stewards-inkind-list ul,
    .stewards-flow-inner ol { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- The bar on white ----------
   The ground goes back to white, the mark shows its dark cut, the navigation
   takes the charcoal, and the pattern is painted through as a mask so it
   reads in the charcoal rather than in the teal it was drawn with. The action
   block keeps the orange: it is the one thing on the bar that is asking for
   something. */
.site-header {
    background: var(--color-white);
    /* A light ground needs its edge stated where a dark one did not. */
    box-shadow:
        0 1px 2px rgba(13, 50, 56, 0.06),
        0 6px 18px rgba(13, 50, 56, 0.04);
}

.primary-nav > a,
.nav-dropdown-toggle {
    color: var(--color-heading);
}

/* The one orange, not a deeper cut of it: nothing in the interface should be
   carrying a second version of the brand colour. */
.primary-nav > a:hover,
.primary-nav > a.is-active,
.nav-dropdown-toggle:hover {
    color: var(--color-coral-bright);
}

.menu-toggle {
    border-color: rgba(28, 32, 33, 0.18);
    color: var(--color-heading);
}

/* Two marks are carried, cross-faded. On the light ground it is the dark one,
   in both the resting and the floating state. */
.brand-logo-light { opacity: 0; }
.brand-logo-dark { opacity: 1; }

/* The drawer is a white panel under the bar; its links keep the ink they
   already carry, stated here so the bar's colour cannot reach them. */
@media (max-width: 900px) {
    .menu-ready .primary-nav.is-open > a,
    .menu-ready .primary-nav.is-open .nav-dropdown-toggle {
        color: var(--color-ink);
    }

    .menu-ready .primary-nav.is-open > a.is-active {
        color: var(--color-coral-bright);
    }
}


/* The mark is the link now, so it needs the affordance the text link had. */
.stewards-sunbear-link {
    display: inline-block;
    transition: opacity 0.2s ease;
}

.stewards-sunbear-link:hover,
.stewards-sunbear-link:focus-visible {
    opacity: 0.72;
}


/* ---------- The hero's own action ----------
   Under the supporting line and flush with it, so the claim, the line and
   the action all start on the same edge. */
.home-page .home-hero-actions {
    max-width: 46ch;
    margin-top: clamp(22px, 2.4vw, 32px);
    display: flex;
    justify-content: flex-start;
}

/* The site's own blue rather than the orange, which the strip above the page
   and the block on the bar are both already carrying. Sized up: it is the
   hero's single action and it sits under a claim set at eighty. */
.home-page .home-hero-donate {
    padding: 19px 46px;
    border-radius: var(--radius-btn);
    /* Flat orange. It is the one thing on the page being asked for, so it
       takes the signature colour and nothing else: no gradient, no shadow,
       no second blue competing with the deep teal further down. */
    background: var(--color-coral-bright);
    font-size: clamp(18px, 1.5vw, 21px);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-white);
}

.home-page .home-hero-donate:hover {
    background: var(--color-coral-bright-hover);
    color: var(--color-white);
}


/* ---------- The hero opens on the olelo noeau ----------
   The saying carries the claim and the English carries its meaning, set the
   way the site sets the pair everywhere else: the serif for the words, the
   condensed sans under them for the reading. The title's own display rule is
   overridden here rather than edited, so every other page that leans on it is
   untouched. */
.home-page .home-hero-title {
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-size: var(--display-hero);
    font-weight: 900;
    line-height: 1.06;
    /* Caps close up on their own, so the tracking the lowercase wanted
       comes back toward nothing. */
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.home-page .home-hero-olelo {
    display: block;
    color: var(--color-white);
}

/* Set well under the saying so it reads as the translation rather than a
   second claim, and in the structural voice, which is what it is doing. */
.home-page .home-hero-translation {
    display: block;
    margin-top: clamp(14px, 1.6vw, 22px);
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-size: clamp(15px, 1.35vw, 20px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-white);
}


/* ---------- The olelo noeau ----------
   One treatment wherever a saying appears in the body of a page: the words in
   the serif, italic, and the reading under them in the structural sans, small
   and in caps, so it is read as a translation rather than as a second line of
   the saying. Nothing is drawn above it: the space around it and the change
   of voice are what set it apart. The banner on Founding Stewards and the
   passage in Rooted carry their own placements and keep them; this is for the
   sayings set into a page's own column. */
.olelo {
    margin: 0 0 clamp(30px, 3.4vw, 44px);
    max-width: 46ch;
}

.olelo blockquote {
    margin: 0;
    font-family: var(--font-statement);
    font-stretch: 100%;
    font-size: clamp(20px, 2vw, 27px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.22;
    color: var(--color-heading);
}

.olelo figcaption {
    margin-top: 10px;
    font-family: var(--font-condensed);
    font-stretch: 75%;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-slate);
}


/* The mark stretches to the bar so its divider can run the full height. The
   logos inside are placed from the centre, so nothing moves with it. */
.home-page .site-header:not(.is-floating) .brand {
    box-sizing: content-box;
    align-self: stretch;
    height: auto;
    padding-right: clamp(20px, 2.4vw, 40px);
    border-right: 1px solid rgba(255, 255, 255, 0.30);
}

/* ---------- The bar over the hero ----------
   No ground while the photograph is under it, closed by a hairline along its
   foot so it still reads as a bar rather than as type floating on a picture,
   and divided after the mark by a second hairline. Nothing is marked as
   current while the bar is sitting on the photograph -- the six items read as
   one row. Moving into it brings the whole bar back to its ordinary colours,
   the current item included, so nothing has to be read off a photograph at
   the moment it is being used. */
.home-page .site-header:not(.is-floating) {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow: none;
}

.home-page .site-header:not(.is-floating) .primary-nav > a,
.home-page .site-header:not(.is-floating) .nav-dropdown-toggle {
    color: var(--color-white);
    text-shadow: 0 1px 10px rgba(4, 20, 24, 0.8);
}

.home-page .site-header:not(.is-floating) .menu-toggle {
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--color-white);
}

/* Over the photograph the mark shows the cut drawn for dark grounds -- the
   wordmark in white, the sunfish in its orange -- rather than being flattened
   to one colour. Once the bar detaches it takes the cut drawn for light
   grounds instead. */
.home-page .site-header:not(.is-floating) .brand-logo-light {
    opacity: 1;
}

.home-page .site-header:not(.is-floating) .brand-logo-dark {
    opacity: 0;
}

/* The block keeps its fill over the photograph: it is the one thing on the
   bar being asked for, and an outline would lose it against the picture. Its
   hover is restated here because this rule outranks the plain one, and
   without it the block would stop darkening over the hero. */
.home-page .site-header:not(.is-floating) .nav-action {
    background: var(--color-coral-bright);
    color: var(--color-white);
}

.home-page .site-header:not(.is-floating) .nav-action:hover,
.home-page .site-header:not(.is-floating) .nav-action:focus-visible {
    background: var(--color-coral-bright-hover);
    color: var(--color-white);
}


/* ---------- The bar answers the pointer ----------
   The moment the pointer is anywhere in it, the transparent bar resolves to
   the ground it carries everywhere else: white, the mark in its own colours,
   the items in the ink, the current one in the orange. It is being used at
   that moment rather than looked past, and nothing should have to be read off
   a photograph while it is. */
.home-page .site-header:not(.is-floating):hover {
    background: var(--color-white);
    border-bottom-color: rgba(41, 79, 86, 0.12);
}

.home-page .site-header:not(.is-floating):hover .primary-nav > a,
.home-page .site-header:not(.is-floating):hover .nav-dropdown-toggle {
    color: var(--color-heading);
    text-shadow: none;
}

.home-page .site-header:not(.is-floating):hover .primary-nav > a:hover,
.home-page .site-header:not(.is-floating):hover .primary-nav > a.is-active {
    color: var(--color-coral-bright);
}

.home-page .site-header:not(.is-floating):hover .brand {
    border-right-color: rgba(28, 32, 33, 0.14);
}

.home-page .site-header:not(.is-floating):hover .brand-logo-light {
    opacity: 0;
}

.home-page .site-header:not(.is-floating):hover .brand-logo-dark {
    opacity: 1;
}

.home-page .site-header:not(.is-floating):hover .menu-toggle {
    border-color: rgba(28, 32, 33, 0.18);
    color: var(--color-heading);
}


/* ---------- The ask on the bar takes the navy ----------
   Everywhere else the orange asks for a commitment, but on the bar it sat
   beside the mark and competed with it. The block takes the institutional
   teal instead, deepening to the footer's teal under the pointer. Restated
   for the transparent bar over the hero, which sets the block itself. */
.nav-action,
.home-page .site-header:not(.is-floating) .nav-action {
    background: var(--color-teal);
    color: var(--color-white);
}

.nav-action:hover,
.nav-action:focus-visible,
.home-page .site-header:not(.is-floating) .nav-action:hover,
.home-page .site-header:not(.is-floating) .nav-action:focus-visible {
    background: var(--color-teal-deep);
    color: var(--color-white);
}