/* ==========================================================================
   CJBO — Central Jersey Business Organization
   Design tokens derived from the supplied template:
   red #d91217 and navy #23488f sampled from 02_Homepage.psd, type scale from
   "home page font.txt" (Bebas Neue display / Open Sans body / serif navigation).
   ========================================================================== */

:root {
  /* ── Brand ──────────────────────────────────────────────────────────────
     Sampled from the logo: the ring and lettering are #001f4d, the arrow and
     rope border are ~#c8860d, and the awning is a small #b30000.

     Note the inversion from the old palette. Red was the primary; in this mark
     red is a few dozen pixels on an awning, while navy is over a third of the
     artwork. Navy therefore becomes the primary and gold the accent — using red
     for buttons and the footer again would fight the logo rather than extend it.
     ──────────────────────────────────────────────────────────────────────── */

  /* Primary — navy. Lifted slightly off the logo's #001f4d so large fills read
     as deliberate colour rather than near-black on a phone screen. */
  --navy: #0a2a5e;          /* 13.95:1 on white */
  --navy-dark: #04193c;     /* hover, footer */
  --navy-mid: #1d4585;      /* borders, gradient stops */
  --navy-wash: #eef3fb;     /* tinted panel backgrounds */

  /* Accent — gold. Sampled #c8860d. Bright enough to carry a CTA, but see the
     text rule below: it does NOT pass contrast under white text. */
  --gold: #c8860d;          /* 3.06:1 on white — fills and borders only */
  --gold-dark: #a06a00;     /* hover */
  --gold-ink: #7d5200;      /* 6.82:1 — use this when gold must be TEXT */
  --gold-wash: #fdf6e7;

  /* Gold buttons take ink text, never white: white-on-gold is 3.06:1 and fails
     WCAG AA. Ink-on-gold is 5.88:1 and passes. */
  --on-gold: #101722;

  /* Red — demoted to a small accent, matched to the awning. Keep it for
     genuine emphasis (required-field markers, destructive actions), not
     for primary buttons. */
  --red: #b3161c;           /* 6.89:1 on white */
  --red-dark: #8d1015;
  --red-wash: #fdeceb;

  /* ── Neutrals ───────────────────────────────────────────────────────────
     Warmed a touch toward the navy so greys sit under the brand rather than
     beside it. */
  --ink: #101722;           /* 17.98:1 */
  --body: #464f5e;          /*  8.27:1 */
  --muted: #6a7383;         /*  4.78:1 — passes AA for body text */
  --line: #e2e6ee;
  --line-soft: #eef0f5;
  --surface: #ffffff;
  --wash: #f6f7fa;
  --bar: #f1f3f7;           /* top bar */
  --bar-ink: #525a68;

  /* ── Feedback ───────────────────────────────────────────────────────────
     Error moved away from brand red so a validation message is never mistaken
     for a brand element — they were the same hue before. */
  --ok: #1b7f4b;
  --ok-wash: #e9f6ef;
  --warn: #8a5a00;          /* aligned to the gold family */
  --warn-wash: #fdf4e0;
  --err: #c0271f;
  --err-wash: #fdeceb;

  /* ── Type ───────────────────────────────────────────────────────────────
     Unchanged. The logo's lettering is a condensed serif-ish sans, and Bebas
     Neue already sits close enough for display use. */
  --display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Lucida Fax", "Bookman Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* ── Rhythm ─────────────────────────────────────────────────────────── */
  --band: clamp(3.5rem, 7vw, 6rem);
  --gutter: clamp(1rem, 4vw, 2rem);
  --shell: 1180px;

  /* ── Surface treatment ──────────────────────────────────────────────────
     Shadows tinted navy instead of neutral grey; on a navy-led page a grey
     shadow reads slightly muddy. */
  --radius: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(10, 42, 94, .07), 0 2px 6px rgba(10, 42, 94, .05);
  --shadow-md: 0 4px 12px rgba(10, 42, 94, .10), 0 12px 28px rgba(10, 42, 94, .07);
  --shadow-lg: 0 10px 30px rgba(10, 42, 94, .14), 0 24px 60px rgba(10, 42, 94, .11);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    /* Guards against any single wide child forcing a horizontal scrollbar on phones. */
    overflow-x: hidden;
    background: var(--surface);
    color: var(--body);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .6em;
    color: var(--ink);
    line-height: 1.15;
}

p {
    margin: 0 0 1.1em;
}

    p:last-child {
        margin-bottom: 0;
    }

a {
    color: var(--navy);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

    a:hover {
        color: var(--red);
    }

ul, ol {
    margin: 0 0 1.1em;
    padding-left: 1.25rem;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2rem 0;
}

/* Every interactive element keeps a visible focus ring. */
:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 2px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--navy);
    color: #fff;
    padding: .75rem 1.25rem;
    font-weight: 600;
}

    .skip-link:focus {
        left: 0;
        color: #fff;
    }

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

/* --------------------------------------------------------------------------
   Layout shell
   -------------------------------------------------------------------------- */

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.shell--narrow {
    max-width: 760px;
}

.shell--mid {
    max-width: 940px;
}

.band {
    padding-block: var(--band);
}

.band--tight {
    padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

.band--wash {
    background: var(--wash);
}

.band--navy {
    background: var(--navy);
    color: #dce4f3;
}

    .band--navy h1, .band--navy h2, .band--navy h3 {
        color: #fff;
    }

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

.display {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.02;
}

.t-hero {
    font-size: clamp(2.5rem, 7vw, 4.75rem);
}

.t-section {
    font-size: clamp(2rem, 5vw, 3.125rem);
}

.t-sub {
    font-size: clamp(1.5rem, 3.2vw, 1.875rem);
}

.t-card {
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}

.lede {
    font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
    line-height: 1.75;
    color: var(--muted);
}

.eyebrow {
    font-family: var(--display);
    font-size: .9375rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: .5rem;
    display: block;
}

.band--navy .eyebrow {
    color: #ffb3b5;
}

/* Signature motif: two angled strokes meeting at a point, echoing the pair of
   cupped hands in the CJBO logo. Used once per section heading, nowhere else. */
.rule-hands {
    display: block;
    width: 54px;
    height: 12px;
    margin: 1rem 0 1.5rem;
    overflow: visible;
}

    .rule-hands path {
        stroke: var(--red);
        stroke-width: 3;
        stroke-linecap: round;
        fill: none;
    }

.band--navy .rule-hands path {
    stroke: #ff5b5f;
}

.section-head {
    max-width: 720px;
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

    .section-head--center .rule-hands {
        margin-inline: auto;
    }

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

.btn {
    --btn-bg: var(--red);
    --btn-ink: #fff;
    --btn-edge: var(--red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .75rem 1.75rem;
    border: 2px solid var(--btn-edge);
    border-radius: var(--radius);
    background: var(--btn-bg);
    color: var(--btn-ink);
    font-family: var(--sans);
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease);
}

    .btn:hover {
        --btn-bg: var(--red-dark);
        --btn-edge: var(--red-dark);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    .btn:active {
        transform: translateY(0);
        box-shadow: none;
    }

    .btn[disabled], .btn.is-busy {
        opacity: .65;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn--navy {
    --btn-bg: var(--navy);
    --btn-edge: var(--navy);
}

    .btn--navy:hover {
        --btn-bg: var(--navy-dark);
        --btn-edge: var(--navy-dark);
    }

.btn--ghost {
    --btn-bg: transparent;
    --btn-ink: var(--navy);
    --btn-edge: var(--navy);
}

    .btn--ghost:hover {
        --btn-bg: var(--navy);
        --btn-ink: #fff;
        color: #fff;
    }

.btn--light {
    --btn-bg: #fff;
    --btn-ink: var(--red);
    --btn-edge: #fff;
}

    .btn--light:hover {
        --btn-bg: transparent;
        --btn-ink: #fff;
        --btn-edge: #fff;
        color: #fff;
    }

.btn--wide {
    width: 100%;
}

.btn--sm {
    min-height: 40px;
    padding: .5rem 1.1rem;
    font-size: .8125rem;
}

.btn__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    display: none;
}

.btn.is-busy .btn__spinner {
    display: block;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

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

.topbar {
    background: var(--bar);
    color: var(--bar-ink);
    font-size: .75rem;
    border-bottom: 1px solid var(--line);
}

.topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
    gap: .5rem 1.5rem;
    min-height: 38px;
    padding-block: .4rem;
}

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

    .topbar a:hover {
        color: var(--red);
    }

.topbar__item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

    .topbar__item svg {
        width: 13px;
        height: 13px;
        flex: none;
        fill: currentColor;
    }

.masthead {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--line-soft);
    transition: box-shadow .25s var(--ease);
}
    /* NOTE: do not add backdrop-filter, filter, transform, will-change or contain to
   .masthead at mobile widths. Any of them makes it a containing block for
   position: fixed descendants, which traps the nav drawer inside the header
   instead of letting it fill the viewport. The translucent treatment is applied
   in the >=992px block, where the drawer is not fixed. */

    .masthead.is-stuck {
        box-shadow: var(--shadow-sm);
    }

.masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 76px;
    padding-block: .5rem;
}

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

    .brand img {
        width: 100px;
        height: auto;
    }

.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    cursor: pointer;
}

    .nav-toggle span {
        display: block;
        height: 2px;
        background: var(--ink);
        border-radius: 2px;
        transition: transform .25s var(--ease), opacity .2s var(--ease);
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

.nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

/* Drawer-only; the hamburger is the control at desktop widths. */
.nav__head {
    display: none;
}

.nav__list {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__link {
    position: relative;
    display: inline-block;
    padding: .35rem 0;
    font-family: var(--serif);
    font-size: 1.0625rem;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s var(--ease);
}

    .nav__link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: var(--red);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .25s var(--ease);
    }

    .nav__link:hover, .nav__link[aria-current="page"] {
        color: var(--red);
    }

        .nav__link:hover::after, .nav__link[aria-current="page"]::after {
            transform: scaleX(1);
        }

.nav__socials {
    display: flex;
    gap: .4rem;
}

.social-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

    .social-chip svg {
        width: 15px;
        height: 15px;
        fill: currentColor;
    }

    .social-chip:hover {
        background: var(--navy);
        border-color: var(--navy);
        color: #fff;
    }

.nav__cta {
    display: none;
}

/* --------------------------------------------------------------------------
   Hero slider
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    background: var(--navy-dark);
    overflow: hidden;
}

/* Slides stack in a single grid cell rather than being absolutely positioned, so
   the track is always as tall as its tallest slide. Nothing gets clipped when one
   slide has more copy than another, and there is no first-child special case. */
.hero__track {
    display: grid;
    grid-template-areas: "slide";
}

/* Inactive slides stay in the box but must not catch clicks or take focus.
   Opacity alone leaves them hit-testable, which put an invisible slide on top
   of slide 1 and swallowed its buttons. `visibility: hidden` also removes their
   links from the tab order; the delayed transition lets the fade finish first. */
.hero__slide {
    grid-area: slide;
    position: relative;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .8s var(--ease), visibility 0s linear .8s;
}

    .hero__slide.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity .8s var(--ease), visibility 0s linear 0s;
    }

.hero__img {
    width: 100%;
    height: clamp(340px, 46vw, 560px);
    object-fit: cover;
}

.hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 18, 38, .88) 0%, rgba(10, 18, 38, .62) 46%, rgba(10, 18, 38, .18) 100%);
}

.hero__body {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
}

.hero__copy {
    max-width: 620px;
    color: #fff;
}

    /* h1 on slide 1, h2 on the rest — both are slide titles and read identically. */
    .hero__copy h1,
    .hero__copy h2 {
        color: #fff;
        margin-bottom: .35rem;
    }

    .hero__copy .eyebrow {
        color: #ff9d9f;
    }

    .hero__copy p {
        font-size: clamp(1rem, 1.8vw, 1.1875rem);
        color: rgba(255, 255, 255, .9);
        margin-bottom: 1.75rem;
        max-width: 46ch;
    }

.hero__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s var(--ease);
}

    .hero__nav:hover {
        background: rgba(255, 255, 255, .32);
    }

    .hero__nav svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
    }

.hero__nav--prev {
    left: 18px;
}

.hero__nav--next {
    right: 18px;
}

.hero__dots {
    position: absolute;
    right: var(--gutter);
    bottom: 1.25rem;
    display: flex;
    gap: .5rem;
}

.hero__dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: background-color .2s var(--ease), transform .2s var(--ease);
}

    .hero__dot.is-active {
        background: #fff;
        transform: scale(1.15);
    }

/* --------------------------------------------------------------------------
   Founder cards
   -------------------------------------------------------------------------- */

.founders {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.founder {
    position: relative;
    padding: 4.25rem 1.25rem 1.5rem;
    margin-top: 3.75rem;
    border-radius: var(--radius-lg);
    background: var(--navy);
    color: #d8e1f4;
    text-align: center;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

    .founder:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

.founder__photo {
    position: absolute;
    top: -3.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: 112px;
    height: 112px;
    border-radius: 50%;
    border: 5px solid #fff;
    object-fit: cover;
    box-shadow: var(--shadow-sm);
}

.founder__name {
    font-family: var(--sans);
    font-size: 1.1875rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: .15rem;
}

.founder__role {
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #a9bde4;
    margin-bottom: 1rem;
}

.founder__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 40px;
    padding: .45rem 1.1rem;
    border: 2px solid #fff;
    border-radius: var(--radius);
    background: #fff;
    color: var(--navy);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s var(--ease), color .2s var(--ease);
}

    .founder__link:hover {
        background: transparent;
        color: #fff;
    }

/* --------------------------------------------------------------------------
   What we do — dark band over the supplied services background
   -------------------------------------------------------------------------- */

.services {
    position: relative;
    background: #1e1424 url("/img/services-bg.jpg") center / cover no-repeat;
    color: #e8e9ee;
}

    .services::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(16, 12, 24, .9), rgba(16, 12, 24, .82));
    }

    .services > * {
        position: relative;
    }

    .services h2, .services h3 {
        color: #fff;
    }

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

.service {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.service__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 2px solid rgba(255, 255, 255, .28);
    border-radius: var(--radius);
    color: #fff;
}

    .service__icon svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.75;
    }

.service h3 {
    font-family: var(--display);
    font-size: 1.375rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .35rem;
}

.service p {
    font-size: .9375rem;
    color: #c3c6d1;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

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

.card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

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

.card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--wash);
}

    .card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s var(--ease);
    }

.card:hover .card__media img {
    transform: scale(1.04);
}

.card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem;
}

    .card__body > :last-child {
        margin-top: auto;
    }

.card__title {
    font-family: var(--display);
    font-size: 1.375rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

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

        .card__title a:hover {
            color: var(--red);
        }

.card__meta {
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: .6rem;
}

.card__text {
    font-size: .9375rem;
    margin-bottom: 1.25rem;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--navy);
}

    .link-arrow svg {
        width: 14px;
        height: 14px;
        fill: currentColor;
        transition: transform .2s var(--ease);
    }

    .link-arrow:hover svg {
        transform: translateX(3px);
    }

/* --------------------------------------------------------------------------
   Pricing (membership tiers and sponsorship levels)
   -------------------------------------------------------------------------- */

.tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.tier {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem 1.75rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

    .tier:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

.tier--featured {
    border-color: var(--navy);
    box-shadow: var(--shadow-md);
}

.tier__flag {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: .3rem .85rem;
    border-radius: 99px;
    background: var(--navy);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tier__name {
    font-family: var(--display);
    font-size: 1.75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .25rem;
}

.tier__price {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    margin-bottom: .75rem;
}

.tier__amount {
    font-family: var(--display);
    font-size: 3rem;
    line-height: 1;
    color: var(--red);
}

.tier__period {
    font-size: .8125rem;
    color: var(--muted);
}

.tier__tagline {
    font-size: .9375rem;
    color: var(--muted);
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--line-soft);
}

.tier__inherits {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: .75rem;
}

.tier__benefits {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    font-size: .9375rem;
}

    .tier__benefits li {
        position: relative;
        padding-left: 1.6rem;
        margin-bottom: .6rem;
    }

        .tier__benefits li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .55em;
            width: 9px;
            height: 5px;
            border-left: 2px solid var(--red);
            border-bottom: 2px solid var(--red);
            transform: rotate(-45deg);
        }

.tier__foot {
    margin-top: auto;
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .5rem;
}

.gallery__item {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--wash);
}

    .gallery__item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s var(--ease);
    }

    .gallery__item::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 55%, rgba(10, 14, 24, .72));
        opacity: 0;
        transition: opacity .3s var(--ease);
    }

    .gallery__item:hover img {
        transform: scale(1.06);
    }

    .gallery__item:hover::after {
        opacity: 1;
    }

.gallery__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: .75rem;
    color: #fff;
    font-size: .8125rem;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.gallery__item:hover .gallery__caption,
.gallery__item:focus-visible .gallery__caption {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.quotes {
    position: relative;
    text-align: center;
}

.quote {
    display: none;
    max-width: 700px;
    margin-inline: auto;
}

    .quote.is-active {
        display: block;
        animation: fade .5s var(--ease);
    }

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.quote__text {
    font-size: clamp(1.0625rem, 2vw, 1.3125rem);
    line-height: 1.65;
    color: var(--body);
    margin-bottom: 1.25rem;
}

.quote__who {
    font-size: .875rem;
    color: var(--muted);
}

    .quote__who strong {
        display: block;
        color: var(--ink);
        font-size: 1rem;
    }

.quotes__dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 2rem;
}

.quotes__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cdd2db;
    cursor: pointer;
    transition: background-color .2s var(--ease), transform .2s var(--ease);
}

    .quotes__dot.is-active {
        background: var(--red);
        transform: scale(1.2);
    }

/* --------------------------------------------------------------------------
   CTA strip
   -------------------------------------------------------------------------- */

.cta-strip {
    background: var(--red);
    color: #fff;
    text-align: center;
}

    .cta-strip h2 {
        color: #fff;
    }

    .cta-strip p {
        color: rgba(255, 255, 255, .92);
        max-width: 56ch;
        margin-inline: auto;
    }

    .cta-strip .btn-row {
        justify-content: center;
        margin-top: 1.75rem;
    }

/* --------------------------------------------------------------------------
   Page header (interior pages)
   -------------------------------------------------------------------------- */

.page-head {
    padding-block: clamp(2.75rem, 6vw, 4.25rem);
    background: var(--navy);
    color: #cdd9f0;
}

    .page-head h1 {
        color: #fff;
        margin-bottom: .5rem;
    }

    .page-head p {
        max-width: 62ch;
        color: #cdd9f0;
        margin: 0;
    }

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 .85rem;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
    color: #9db0d6;
}

    .crumbs a {
        color: #cdd9f0;
        text-decoration: none;
    }

        .crumbs a:hover {
            color: #fff;
            text-decoration: underline;
        }

    .crumbs li + li::before {
        content: "/";
        margin-right: .4rem;
        color: #6f88bb;
    }

/* --------------------------------------------------------------------------
   Prose
   -------------------------------------------------------------------------- */

.prose {
    max-width: 68ch;
}

    .prose h2 {
        margin-top: 2.25rem;
    }

    .prose h3 {
        margin-top: 1.75rem;
    }

    .prose > :first-child {
        margin-top: 0;
    }

    .prose img {
        border-radius: var(--radius-lg);
        margin-block: 1.75rem;
    }

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

.split__media img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 100%;
}

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.fact__num {
    display: block;
    font-family: var(--display);
    font-size: clamp(2.25rem, 5vw, 3rem);
    line-height: 1;
    color: var(--red);
}

.fact__label {
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-card {
    padding: clamp(1.5rem, 4vw, 2.75rem);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 2.25rem;
}

    .fieldset:last-of-type {
        margin-bottom: 1.5rem;
    }

.fieldset__legend {
    display: block;
    width: 100%;
    padding: 0 0 .75rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--line-soft);
    font-family: var(--display);
    font-size: 1.375rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink);
}

    .fieldset__legend span {
        display: block;
        font-family: var(--sans);
        font-size: .8125rem;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        color: var(--muted);
        margin-top: .25rem;
    }

.grid-form {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
}

.f-12 {
    grid-column: span 12;
}

.f-8 {
    grid-column: span 8;
}

.f-6 {
    grid-column: span 6;
}

.f-4 {
    grid-column: span 4;
}

.f-3 {
    grid-column: span 3;
}

.field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .field label {
        margin-bottom: .4rem;
        font-size: .875rem;
        font-weight: 600;
        color: var(--ink);
    }

        .field label .req {
            color: var(--red);
            margin-left: .15rem;
        }

.field__hint {
    order: 3;
    margin-top: .35rem;
    font-size: .8125rem;
    color: var(--muted);
}

.input, .select, .textarea {
    width: 100%;
    min-height: 48px;
    padding: .7rem .85rem;
    border: 1px solid #ccd2dc;
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem; /* 16px keeps iOS from zooming on focus */
    line-height: 1.5;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

    .input::placeholder, .textarea::placeholder {
        color: #9aa2b1;
    }

    .input:focus, .select:focus, .textarea:focus {
        outline: 0;
        border-color: var(--navy);
        box-shadow: 0 0 0 3px rgba(35, 72, 143, .16);
    }

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

.select {
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7382' d='M8 11L3 5.5h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 14px;
}

    /* Invalid state, applied by the validator */
    .input.is-invalid, .select.is-invalid, .textarea.is-invalid {
        border-color: var(--err);
        background-color: #fffafa;
    }

        .input.is-invalid:focus, .select.is-invalid:focus, .textarea.is-invalid:focus {
            box-shadow: 0 0 0 3px rgba(195, 35, 31, .15);
        }

.field-error {
    order: 4;
    display: none;
    margin-top: .35rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--err);
}

    .field-error.is-shown {
        display: block;
    }

/* Choice cards — used for tier and sponsorship level selection */
.choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .75rem;
}

.choice {
    position: relative;
    display: block;
}

    .choice input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.choice__box {
    display: block;
    height: 100%;
    padding: 1.1rem 1.15rem;
    border: 2px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    cursor: pointer;
    transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}

    .choice__box:hover {
        border-color: #b9c2d4;
    }

.choice input:checked + .choice__box {
    border-color: var(--navy);
    background: var(--navy-wash);
    box-shadow: 0 0 0 1px var(--navy);
}

.choice input:focus-visible + .choice__box {
    outline: 3px solid var(--navy);
    outline-offset: 2px;
}

.choice__name {
    display: block;
    font-family: var(--display);
    font-size: 1.25rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink);
}

.choice__price {
    display: block;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--red);
    margin-block: .15rem .25rem;
}

.choice__note {
    display: block;
    font-size: .8125rem;
    color: var(--muted);
    line-height: 1.5;
}

/* Checkbox rows */
.check {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    cursor: pointer;
}

    .check input {
        flex: none;
        width: 22px;
        height: 22px;
        margin: 1px 0 0;
        accent-color: var(--navy);
        cursor: pointer;
    }

    .check span {
        font-size: .9375rem;
        color: var(--body);
    }

/* Form-level alerts */
.alert {
    display: flex;
    gap: .75rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
    border: 1px solid;
    border-radius: var(--radius);
    font-size: .9375rem;
}

    .alert svg {
        flex: none;
        width: 20px;
        height: 20px;
        margin-top: 2px;
        fill: currentColor;
    }

    .alert p {
        margin: 0;
    }

    .alert ul {
        margin: .5rem 0 0;
        padding-left: 1.1rem;
    }

.alert--error {
    background: var(--err-wash);
    border-color: #f3c2c0;
    color: #8f1a17;
}

.alert--ok {
    background: var(--ok-wash);
    border-color: #b7ddc7;
    color: #14603a;
}

.alert--info {
    background: var(--navy-wash);
    border-color: #c3d1ec;
    color: var(--navy-dark);
}

.alert--warn {
    background: var(--warn-wash);
    border-color: #ecd9a8;
    color: #7a5500;
}

.form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line-soft);
}

.form-foot__note {
    font-size: .8125rem;
    color: var(--muted);
    flex: 1 1 240px;
    margin: 0;
}

/* The honeypot must be reachable by bots but never by people or screen readers. */
.hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Confirmation panel
   -------------------------------------------------------------------------- */

.receipt {
    max-width: 640px;
    margin-inline: auto;
    padding: clamp(2rem, 5vw, 3rem);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.receipt__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    background: var(--ok-wash);
    color: var(--ok);
}

    .receipt__tick svg {
        width: 32px;
        height: 32px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.5;
    }

.receipt__ref {
    display: inline-block;
    padding: .6rem 1.25rem;
    margin-block: 1.25rem;
    border: 1px dashed #c3cbd8;
    border-radius: var(--radius);
    background: var(--wash);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ink);
}

.receipt__steps {
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
    text-align: left;
    counter-reset: step;
}

    .receipt__steps li {
        position: relative;
        padding-left: 2.5rem;
        margin-bottom: 1rem;
        font-size: .9375rem;
        counter-increment: step;
    }

        .receipt__steps li::before {
            content: counter(step);
            position: absolute;
            left: 0;
            top: -1px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--navy);
            color: #fff;
            font-family: var(--display);
            font-size: .9375rem;
        }

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

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: start;
}

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

    .detail-list li {
        display: flex;
        gap: .9rem;
        padding-block: 1rem;
        border-bottom: 1px solid var(--line-soft);
    }

        .detail-list li:last-child {
            border-bottom: 0;
        }

    .detail-list svg {
        flex: none;
        width: 20px;
        height: 20px;
        margin-top: 3px;
        fill: var(--red);
    }

    .detail-list strong {
        display: block;
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: .15rem;
    }

    .detail-list a {
        color: var(--ink);
        text-decoration: none;
    }

        .detail-list a:hover {
            color: var(--red);
            text-decoration: underline;
        }

.map-frame {
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--wash);
}

    .map-frame iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }

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

.footer {
    background: var(--red);
    color: rgba(255, 255, 255, .92);
    font-size: .875rem;
}

    .footer a {
        color: rgba(255, 255, 255, .92);
        text-decoration: none;
    }

        .footer a:hover {
            color: #fff;
            text-decoration: underline;
        }

.footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 2.5rem;
    padding-block: clamp(2.75rem, 6vw, 4rem);
}

.footer__title {
    font-family: var(--display);
    font-size: 1.5rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1.25rem;
}

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

    .footer__list li {
        margin-bottom: .6rem;
    }

.footer__list--icons li {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
}

.footer__list--icons svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 4px;
    fill: currentColor;
}

/* Same chips as the header, recoloured for the red band. */
.footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.5rem;
}

    .footer__socials .social-chip {
        border-color: rgba(255, 255, 255, .45);
        color: #fff;
    }

        .footer__socials .social-chip:hover {
            background: #fff;
            border-color: #fff;
            color: var(--red);
        }

.subscribe {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
}

    .subscribe input {
        flex: 1;
        min-width: 0;
        min-height: 46px;
        padding: .6rem .85rem;
        border: 0;
        border-radius: var(--radius);
        font-family: var(--sans);
        font-size: 1rem;
        color: var(--ink);
    }

        .subscribe input:focus {
            outline: 3px solid rgba(255, 255, 255, .7);
            outline-offset: 1px;
        }

    .subscribe button {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border: 0;
        border-radius: var(--radius);
        background: var(--navy);
        color: #fff;
        cursor: pointer;
        transition: background-color .2s var(--ease);
    }

        .subscribe button:hover {
            background: var(--navy-dark);
        }

        .subscribe button svg {
            width: 17px;
            height: 17px;
            fill: currentColor;
        }

.subscribe-msg {
    margin-top: .65rem;
    font-size: .8125rem;
    min-height: 1.2em;
}

    .subscribe-msg.is-error {
        color: #ffe0e0;
        font-weight: 600;
    }

.footer__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .25);
    font-size: .8125rem;
}

    .footer__base ul {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

/* --------------------------------------------------------------------------
   Scroll reveal — opt-in, and skipped entirely under reduced motion
   -------------------------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}

    .reveal.is-in {
        opacity: 1;
        transform: none;
    }

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

@media (min-width: 992px) {
    .hero__nav {
        display: flex;
    }
}

/* Below 992px the navigation collapses into the drawer. */
@media (max-width: 991.98px) {
    .nav {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 120;
        width: min(320px, 86vw);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1.25rem;
        background: #fff;
        box-shadow: -8px 0 30px rgba(20, 24, 31, .18);
        transform: translateX(100%);
        transition: transform .3s var(--ease);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

        .nav.is-open {
            transform: none;
        }

    /* The open drawer sits on top of the hamburger, so it needs its own close
     control. Escape and a backdrop tap both still work. */
    .nav__head {
        display: flex;
        justify-content: flex-end;
        margin-bottom: .25rem;
    }

    .nav__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: #fff;
        color: var(--ink);
        cursor: pointer;
        transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
    }

        .nav__close svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
        }

        .nav__close:hover {
            background: var(--red);
            border-color: var(--red);
            color: #fff;
        }

    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

        .nav__list li {
            border-bottom: 1px solid var(--line-soft);
        }

    .nav__link {
        display: block;
        padding: .9rem .25rem;
        font-size: 1.125rem;
    }

        .nav__link::after {
            display: none;
        }

    .nav__cta {
        display: block;
        margin-top: 1.25rem;
    }

    .nav__socials {
        margin-top: 1.25rem;
        justify-content: center;
    }

    /* .masthead has z-index: 100, which makes it a stacking context — so the
     drawer's z-index: 120 only ranks it *within* the header, at an effective
     100 against the page. A backdrop above 100 therefore paints over the drawer
     itself. Keeping the backdrop below 100 puts it under the header and under
     the drawer, while still covering the page content. */
    .nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 90;
        background: rgba(12, 16, 24, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s var(--ease), visibility .3s var(--ease);
    }

        .nav-backdrop.is-open {
            opacity: 1;
            visibility: visible;
        }

    body.nav-open {
        overflow: hidden;
    }

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

@media (min-width: 992px) {
    .nav-toggle {
        display: none;
    }

    .nav-backdrop {
        display: none;
    }

    /* Safe here: above this width the nav is a normal flex row, not a fixed drawer,
     so making the header a containing block has nothing to trap. */
    .masthead {
        background: rgba(255, 255, 255, .97);
        backdrop-filter: saturate(1.4) blur(8px);
    }
}

@media (max-width: 767.98px) {
    .topbar {
        display: none;
    }

    .masthead__inner {
        min-height: 66px;
    }

    .brand img {
        width: 158px;
    }

    /* Two columns at tablet, single column at phone. */
    .f-8, .f-6, .f-4, .f-3 {
        grid-column: span 12;
    }

    /* On a phone the copy is taller than any sensible image height, so the image
     goes behind and the copy sets the height. Previously the body was absolutely
     positioned over a fixed-height image, and at 320px the buttons fell outside it. */
    .hero__img {
        position: absolute;
        inset: 0;
        height: 100%;
    }

    .hero__scrim {
        background: linear-gradient(180deg, rgba(10, 18, 38, .55) 0%, rgba(10, 18, 38, .88) 100%);
    }

    .hero__body {
        position: relative;
        inset: auto;
        align-items: flex-end;
        min-height: 26rem;
        padding-block: 2.25rem 3.75rem;
    }

    /* .hero__copy p would otherwise beat .t-hero on specificity — keep both here. */
    .hero__copy h1,
    .hero__copy h2 {
        font-size: clamp(1.875rem, 8.5vw, 2.75rem);
    }

    .hero__copy p {
        font-size: .9375rem;
        margin-bottom: 1.5rem;
    }

    .hero__dots {
        left: var(--gutter);
        right: auto;
        bottom: 1.5rem;
    }

    .founders {
        gap: 4.5rem 1.25rem;
    }

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

    .footer__base {
        justify-content: center;
        text-align: center;
    }

        .footer__base ul {
            justify-content: center;
        }
}

/* Between 576 and 768 the short fields can still pair up. */
@media (min-width: 576px) and (max-width: 767.98px) {
    .f-6 {
        grid-column: span 6;
    }

    .f-4 {
        grid-column: span 6;
    }

    .f-3 {
        grid-column: span 6;
    }
}

/* 320px–430px: the narrowest phones in common use. */
@media (max-width: 430px) {
    :root {
        --gutter: 1rem;
    }

    .btn {
        width: 100%;
    }

    .btn-row .btn {
        width: 100%;
    }

    .btn--sm {
        width: auto;
    }

    .founder__link, .link-arrow {
        width: auto;
    }

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

    .receipt__ref {
        font-size: .9375rem;
        word-break: break-all;
    }

    .form-foot {
        flex-direction: column;
        align-items: stretch;
    }
}

@media print {
    .masthead, .topbar, .footer, .hero, .nav-toggle, .btn {
        display: none !important;
    }

    body {
        color: #000;
    }

    .band {
        padding-block: 1rem;
    }
}

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

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        /* Also zero the delays, or the hero's deferred visibility switch still waits. */
        transition-delay: 0s !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}