/* ============================================================
   OCA Design System
   Oceans Christian Academy — Coastal Christian Warmth
   ============================================================ */

/* --- Fonts ------------------------------------------------- */
@font-face {
    font-family: 'Amatic SC';
    src: url('/assets/fonts/amatic-sc-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    src: url('/assets/fonts/nunito-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    src: url('/assets/fonts/nunito-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    src: url('/assets/fonts/nunito-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* Noto Serif (SIL OFL 1.1, Google Fonts v33, Latin subset): the old site's text face, used as an accent. */
@font-face {
    font-family: 'Noto Serif';
    src: url('/assets/fonts/noto-serif-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Serif';
    src: url('/assets/fonts/noto-serif-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Serif';
    src: url('/assets/fonts/noto-serif-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- Tokens ------------------------------------------------ */
:root {
    --color-ocean:    #3E79B5;
    --color-ocean-dark: #2D5A8A;
    --color-ocean-light: #5A9AD4;
    --color-red:      #ED3F27;
    --color-red-dark: #C8321E;
    --color-brown:    #622A14;
    --color-brown-light: #7A3D24;
    --color-marigold: #FFAF1C;
    --color-marigold-light: #FFD166;
    --color-gold:     #D9A441;
    --color-gold-text: #8A5F12;   /* gold for text: 5.6:1 on white, 5.3:1 on sunshine */
    --color-red-btn:  #D2341D;    /* button red: white text 4.9:1 (brand #ED3F27 is only 3.9:1) */
    --color-red-btn-hover: #B42C18;
    --color-text:     #4A3F3A;
    --color-text-light: #6B605A;  /* 5.2:1+ on white, sand, seafoam */
    --color-cream:    #FDF8F0;
    --color-sand:     #F5EDE0;
    --color-seafoam:  #E8F4F0;
    --color-seafoam-dark: #D0E8E0;
    --color-sky:      #EBF5FF;
    --color-sunshine:  #FFF8E7;
    --color-coral-bg: #FFF0ED;
    --color-white:    #FFFFFF;
    --color-gray-100: #F8F6F4;
    --color-gray-200: #EDE8E4;
    --color-gray-300: #D5CEC8;
    --color-gray-600: #8A7E78;

    /* Slightly deeper pastel tints for icon circles that sit on a same-hue section */
    --tint-sun:   #FFE8B3;
    --tint-coral: #FFDDD5;
    --tint-sky:   #DCEBFA;
    --tint-sea:   #D5EEE4;
    --tint-lilac: #EADFFB;

    /* Focus: --focus-ring is a two-tone box-shadow (white + navy) that reads on light,
       blue and photo backgrounds; --focus-color is the outline colour used by :focus-visible
       (navy on light sections, switched to white inside dark/photo areas below). */
    --focus-color: #1F4E80;
    --focus-ring: 0 0 0 3px #FFFFFF, 0 0 0 6px #1F4E80;

    --font-display: 'Amatic SC', cursive;
    --font-body:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Accent only (sublines, leads, quotes); body copy, UI, buttons, forms and nav stay Nunito.
       Only 400 normal + 400 italic are loaded: never set serif text heavier than 400. */
    --font-serif:   'Noto Serif', Georgia, 'Times New Roman', serif;

    --fs-xs:   0.75rem;
    --fs-sm:   0.9rem;
    --fs-base: 1.05rem;
    --fs-md:   1.15rem;
    --fs-lg:   1.3rem;
    --fs-xl:   1.6rem;
    --fs-2xl:  2.2rem;
    --fs-3xl:  2.8rem;
    --fs-4xl:  3.5rem;
    --fs-hero: 4.5rem;

    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    --radius-sm:  0.375rem;
    --radius-md:  0.75rem;
    --radius-lg:  1rem;
    --radius-xl:  1.5rem;
    --radius-full: 9999px;  /* circle on square boxes, pill on wide ones (never 50%) */
    --radius-pill: 999px;

    --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg:  0 8px 30px rgba(0,0,0,0.12);
    --shadow-xl:  0 16px 50px rgba(0,0,0,0.15);

    --max-width:  1200px;
    --container-gutter: clamp(16px, 3.2vw, 40px);
    --header-height: 230px;          /* transparent header: 200px logo + 15px air (120px below 1024) */
    --header-condensed-h: 76px;      /* slim solid header after the hero */
    --footer-wave-h: clamp(44px, 6vw, 96px);
    --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* --- Reset ------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
/* Drawer open: lock page scroll */
html.nav-open,
html.nav-open body {
    overflow: hidden;
}
/* Anchor targets clear the condensed fixed header */
[id] {
    scroll-margin-top: calc(var(--header-condensed-h) + var(--space-md));
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: var(--color-ocean);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    color: var(--color-ocean-dark);
}

ul, ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    color: var(--color-brown);
    text-wrap: balance;
}
p, li, dd, blockquote {
    text-wrap: pretty;
}

address {
    font-style: normal;
}

::selection {
    background: var(--color-marigold-light);
    color: var(--color-brown);
}

/* Long unbroken strings (email addresses) must never widen the page on phones */
a[href^="mailto:"] {
    overflow-wrap: anywhere;
}

/* --- Focus ------------------------------------------------- */
:focus-visible {
    outline: 3px solid var(--focus-color);
    outline-offset: 3px;
}
/* Dark, blue and photo areas get a white ring */
.site-header,
.hero,
.page-hero,
.section--ocean,
.section--confetti-ocean,
.section--brown,
.section--confetti-brown,

.site-footer,
.lightbox {
    --focus-color: #FFFFFF;
}
/* ...except light surfaces inside them */
.site-header.is-condensed,
.site-nav-mobile,
.card {
    --focus-color: #1F4E80;
}
main:focus {
    outline: none;
}

/* --- Utility ----------------------------------------------- */
/* Side gutter grows with the viewport: 16px on phones, about 25px at 768, 33px at 1024 and
   40px from 1250px. max-width grows by the same amount, so the content column is still
   1168px wide on large screens. */
.container {
    width: 100%;
    max-width: calc(var(--max-width) + 2 * var(--container-gutter) - 2 * var(--space-md));
    margin: 0 auto;
    padding: 0 var(--container-gutter);
}

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

.skip-link {
    position: absolute;
    top: 0;
    left: var(--space-md);
    z-index: 1000;
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-brown);
    color: var(--color-white);
    border-radius: var(--radius-pill);
    font-weight: 700;
    transform: translateY(-150%);
}
.skip-link:focus {
    transform: translateY(var(--space-sm));
    color: var(--color-white);
    --focus-color: #FFFFFF;
    box-shadow: 0 0 0 3px var(--color-marigold);
}

.text-center { text-align: center; }
.text-ocean  { color: var(--color-ocean); }
.text-red    { color: var(--color-red); }
.text-brown  { color: var(--color-brown); }
.text-marigold { color: var(--color-marigold); }

/* --- Display headings (Amatic SC) -------------------------- */
.display-heading {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-brown);
}

/* Section H2: ~40px on phones, 64px on desktop, always clearly above card H3s */
.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);
    line-height: 1.1;
    text-align: center;
    color: var(--color-brown);
    margin-bottom: var(--space-2xl);   /* title straight to content: 3rem */
    letter-spacing: 0.02em;
    text-wrap: balance;
}
/* Title followed by a subtitle: keep them together (48 + -32 = 16px), the subtitle carries the 3rem */
.section-title + .section-subtitle {
    margin-top: calc(var(--space-md) - var(--space-2xl));
}

.section-title--ocean { color: var(--color-ocean); }   /* large text: 4.3:1+ on the pastel sections */
.section-title--red { color: var(--color-red); }       /* large text: 3.6:1+ on white/cream */
.section-title--marigold,
.section-title--gold { color: var(--color-gold-text); }

/* Sublines under the hand-lettered titles: Noto Serif italic, the old site's face as an accent */
.section-subtitle {
    text-align: center;
    color: var(--color-text-light);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-lg);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto var(--space-2xl);
    text-wrap: balance;
}

/* Hand-drawn marker stroke under a heading word */
.hand-underline {
    position: relative;
    display: inline-block;
    z-index: 0;
}
.hand-underline::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: -4%;
    bottom: -0.06em;
    width: 108%;
    height: 0.32em;
    max-height: 16px;
    min-height: 9px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5c26-3.2 52-5.6 79-5.3 22 .2 41 2.4 63 2.1 30-.4 58-3.4 92-2.8' fill='none' stroke='%23FFAF1C' stroke-width='6.5' stroke-linecap='round'/%3E%3Cpath d='M22 13.2c40-2.6 86-3.4 128-2.2 26 .7 50 .3 72-1.4' fill='none' stroke='%23FFAF1C' stroke-width='3' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    opacity: 0.85;
    pointer-events: none;
}

/* --- Buttons ----------------------------------------------- */
/* Button system (all pills, all 44px+ tall, all AA):
   .btn--primary    red, white text. Enroll actions only, one per block.
   .btn--secondary  ocean fill, white text (alias: .btn--ocean).
   .btn--outline-ocean  ocean outline on light backgrounds.
   .btn--outline    white outline on blue/brown/photo backgrounds.
   .btn--light      white fill, brown text, for a second action on dark bands.
   .link-arrow      tertiary text link with an arrow.
   Sizes: .btn--sm, .btn--lg; .btn--block for full width. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: 44px;
    padding: 0.8em 1.7em;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-align: center;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease,
                transform .2s var(--ease-out), box-shadow .2s ease;
}
.btn svg {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
}
.btn:hover {
    transform: translateY(-2px);
}
.btn:active {
    transform: translateY(0);
    transition-duration: .05s;
}

.btn--primary {
    background: var(--color-red-btn);
    color: var(--color-white);
    border-color: var(--color-red-btn);
    box-shadow: 0 6px 16px -8px rgba(178, 40, 20, 0.75);
}
.btn--primary:hover {
    background: var(--color-red-btn-hover);
    border-color: var(--color-red-btn-hover);
    color: var(--color-white);
    box-shadow: 0 12px 22px -10px rgba(150, 34, 16, 0.75);
}

.btn--secondary,
.btn--ocean {
    background: var(--color-ocean);
    color: var(--color-white);
    border-color: var(--color-ocean);
    box-shadow: 0 6px 16px -9px rgba(31, 78, 128, 0.8);
}
.btn--secondary:hover,
.btn--ocean:hover {
    background: var(--color-ocean-dark);
    border-color: var(--color-ocean-dark);
    color: var(--color-white);
    box-shadow: 0 12px 22px -10px rgba(31, 78, 128, 0.7);
}

.btn--outline {
    background: transparent;
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.9);
}
.btn--outline:hover {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-brown);
}

.btn--outline-ocean {
    background: transparent;
    color: var(--color-ocean-dark);
    border-color: var(--color-ocean);
}
.btn--outline-ocean:hover {
    background: var(--color-ocean-dark);
    border-color: var(--color-ocean-dark);
    color: var(--color-white);
}

.btn--light {
    background: var(--color-white);
    color: var(--color-brown);
    border-color: var(--color-white);
    box-shadow: 0 6px 16px -9px rgba(0, 0, 0, 0.35);
}
.btn--light:hover {
    background: var(--color-cream);
    border-color: var(--color-cream);
    color: var(--color-brown);
}

.btn--sm {
    padding: 0.55em 1.3em;
    font-size: var(--fs-sm);
}

.btn--lg {
    padding: 0.95em 2.3em;
    font-size: 1.2rem;
}

.btn--block {
    display: flex;
    width: 100%;
}

/* Two-tone ring so a focused button reads on photos, blue bands and white alike */
.btn.btn:focus-visible {
    outline: 3px solid transparent;
    outline-offset: 0;
    box-shadow: var(--focus-ring);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-height: 44px;
    font-weight: 800;
    color: var(--color-ocean-dark);
}
.link-arrow::after {
    content: '\2192';
    transition: transform .2s var(--ease-out);
}
.link-arrow:hover {
    color: var(--color-ocean-dark);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.link-arrow:hover::after {
    transform: translateX(3px);
}

/* --- Event Banner ------------------------------------------ */
/* One clickable marigold strip; brown text 6.1:1. A scalloped hem hangs over the hero
   so the announcement reads as a separate ribbon, not part of the blue hero. */
.event-banner {
    position: relative;
    z-index: 101;               /* above the transparent header so the hem shows */
    background: var(--color-marigold);
    color: var(--color-brown);
    font-size: var(--fs-sm);
    --focus-color: var(--color-brown);
}
.event-banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 7px;
    background: radial-gradient(circle at 9px 0, var(--color-marigold) 6.5px, transparent 7px) 0 0 / 18px 7px repeat-x;
    pointer-events: none;
}
.event-banner__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.65rem;
    min-height: 44px;
    padding: 0.35rem var(--space-md);
    color: var(--color-brown);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}
.event-banner__link:hover {
    color: var(--color-brown);
}
/* The link fills the whole strip, so the default outside ring would fall off-canvas or under
   the hem: draw it inside the marigold instead (brown on marigold 6.1:1). */
.event-banner__link {
    border-radius: 10px;
}
.event-banner__link:focus-visible {
    outline: 3px solid var(--color-brown);
    outline-offset: -6px;
}
.event-banner__icon {
    flex-shrink: 0;
}
.event-banner__title {
    font-weight: 800;
}
.event-banner__date-short {
    display: none;
}
.event-banner__cta {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.85em;
    border-radius: var(--radius-pill);
    background: var(--color-brown);
    color: var(--color-white);
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .2s ease, transform .2s var(--ease-out);
}
.event-banner__arrow {
    margin-left: 0.35em;
    transition: transform .2s var(--ease-out);
}
.event-banner__link:hover .event-banner__cta,
.event-banner__link:focus-visible .event-banner__cta {
    background: #4A1E0D;
}
.event-banner__link:hover .event-banner__arrow,
.event-banner__link:focus-visible .event-banner__arrow {
    transform: translateX(3px);
}
@media (max-width: 600px) {
    .event-banner__link {
        flex-wrap: nowrap;
        gap: 0.45rem;
        white-space: nowrap;
        padding-inline: var(--space-sm);
    }
    .event-banner__date,
    .event-banner__time {
        display: none;
    }
    .event-banner__date-short {
        display: inline;
    }
}
@media (max-width: 359px) {
    .event-banner__icon { display: none; }
    .event-banner { font-size: 0.82rem; }
}

/* --- Header ------------------------------------------------ */
/* The header is transparent and overlays the hero/page-hero (they pull up by --header-height).
   Its height comes from the token, never from its content, so there is no seam. */
.site-header {
    position: relative;
    z-index: 100;
}
/* The drawer, its X and the dim overlay all live inside the header's stacking context.
   While the drawer is open, lift that whole context above the event banner (101), so the
   banner can't paint over the X and the drawer head, and the overlay dims the banner too. */
html.nav-open .site-header {
    z-index: 102;
}

.site-header__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--header-height);
    padding-block: 0;
    /* The split nav hugs the centred logo and needs every pixel between 1024 and 1250px,
       so the header keeps the narrow gutter (the phone/menu buttons sit on the page gutter). */
    padding-inline: var(--space-md);
    position: relative;
}

.site-header__logo {
    display: block;
    text-decoration: none;
    flex-shrink: 0;
    border-radius: var(--radius-md);
}
.site-header__logo picture {
    display: block;
}
.site-header__logo img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.28));
    transition: transform .3s var(--ease-out);
}
.site-header__logo:hover img {
    transform: rotate(-2deg) scale(1.02);
}

/* Soft navy scrim behind the transparent desktop nav, so the white links keep >= 4.5:1 over
   bright patches of any page-hero photo or the plain hero's sun glow. It fades out just below
   the header, so it reads as shade rather than a band. ::after because the condensed bar
   uses ::before. The homepage slider has its own scrim (hero.css). */
@media (min-width: 1024px) {
    body:not(.page-home) .site-header:not(.is-condensed)::after {
        content: '';
        position: absolute;
        inset: 0 0 auto 0;
        height: calc(var(--header-height) + 24px);
        background: linear-gradient(180deg, rgba(10, 26, 48, 0.36) 0%, rgba(10, 26, 48, 0) 100%);
        pointer-events: none;
        z-index: -1;
    }
}

/* Spacer that holds the header's place while it is fixed (condensed) */
.header-spacer {
    display: none;
    height: var(--header-height);
}

/* --- Nav --------------------------------------------------- */
.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-nav__list a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    color: var(--color-white);
    font-weight: 700;
    font-size: var(--fs-md);
    position: relative;
    transition: color 0.25s;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 0 12px rgba(0,0,0,0.25);
    border-radius: var(--radius-md);
}
/* Hand-drawn marigold swoosh under hover/active/focus */
.site-nav__list a::after {
    content: '';
    position: absolute;
    left: var(--space-md);
    right: var(--space-md);
    bottom: 1px;
    height: 7px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.2c9-2 19-3.1 29-2.9 9 .2 18 1 27 .4' fill='none' stroke='%23FFAF1C' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s var(--ease-out);
}
.site-nav__list a:hover {
    color: var(--color-white);
}
.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after,
.site-nav__list a.active::after {
    transform: scaleX(1);
}
.site-nav__list a.active {
    color: var(--color-white);
}

.site-nav__cta {
    font-size: var(--fs-base);
    padding: 0.55em 1.35em;
    white-space: nowrap;
}

/* Round 44px header buttons (phone + menu) */
.header-call,
.nav-toggle {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--color-white);
    background: rgba(255,255,255,0.14);
    border: 1.5px solid rgba(255,255,255,0.6);
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* Both sit on the content gutter, so they line up with the page copy below */
.header-call {
    left: var(--container-gutter);
    transform: translateY(-50%);
}
.header-call svg {
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}
.header-call:hover {
    color: var(--color-white);
    background: rgba(255,255,255,0.26);
}
.nav-toggle {
    right: var(--container-gutter);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 0;
    cursor: pointer;
    z-index: 110;
}
.nav-toggle__bar {
    display: block;
    width: 20px;
    height: 2.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
}
.nav-toggle__bar:nth-child(2) {
    width: 15px;
    margin-left: 5px;
}
/* Open: the toggle becomes the drawer's close X, pinned in its own row above the links */
.nav-toggle[aria-expanded="true"] {
    position: fixed;
    top: var(--space-md);
    right: var(--space-md);
    transform: none;
    color: var(--color-brown);
    background: var(--color-sand);
    border-color: transparent;
    box-shadow: none;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* Desktop split nav: Home/About/Programs/Teachers | logo | Tuition/Gallery/Contact + Enroll */
@media (min-width: 1024px) {
    .site-nav__left {
        flex: 1;
        justify-content: flex-end;
        padding-right: var(--space-lg);
    }
    .site-nav__right-group {
        display: flex;
        align-items: center;
        flex: 1;
        padding-left: var(--space-lg);
        gap: var(--space-md);
    }
    .nav-toggle,
    .header-call,
    .site-nav-mobile { display: none; }
}
/* Compact tier: same type size, tighter padding, so the 200px logo still fits at 1024 */
@media (min-width: 1024px) and (max-width: 1199px) {
    .site-nav__list a { padding: var(--space-sm) 0.6rem; }
    .site-nav__list a::after { left: 0.6rem; right: 0.6rem; }
    .site-nav__left { padding-right: var(--space-sm); }
    .site-nav__right-group { padding-left: var(--space-sm); gap: var(--space-sm); }
    .site-nav__cta { padding: 0.5em 1.05em; }
}

/* Phone/tablet header + drawer */
@media (max-width: 1023px) {
    :root {
        --header-height: 120px;
    }
    .site-header__inner {
        justify-content: center;
    }
    .site-header__logo img {
        width: 90px;
        height: 90px;
    }
    .site-nav__left,
    .site-nav__right-group {
        display: none;
    }

    /* Drawer: a branded mini-hub. Closed = off-canvas, hidden, no shadow, no tab stops. */
    .site-nav-mobile {
        position: fixed;
        top: 0;
        right: 0;
        width: min(340px, 88vw);
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        background:
            radial-gradient(120% 60% at 100% 0%, rgba(255,175,28,0.14), transparent 60%),
            var(--color-cream);
        box-shadow: none;
        visibility: hidden;
        transform: translateX(100%);
        transition: transform .35s var(--ease-out), visibility 0s linear .35s, box-shadow .35s ease;
        padding: var(--space-md) var(--space-lg) var(--space-lg);
        z-index: 105;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    }
    .site-nav-mobile.is-open {
        transform: translateX(0);
        visibility: visible;
        box-shadow: -18px 0 50px rgba(40, 20, 10, 0.28);
        transition: transform .35s var(--ease-out), box-shadow .35s ease;
    }
    /* Head row: logo + tagline on the left, the X (fixed toggle) on the right */
    .site-nav-mobile__head {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        min-height: 60px;
        padding-right: 56px;
        margin-bottom: var(--space-md);
    }
    .site-nav-mobile__logo {
        width: 60px;
        height: 60px;
        filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
    }
    .site-nav-mobile__tagline {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.75rem;
        line-height: 1;
        color: var(--color-ocean);
        white-space: nowrap;
    }
    .site-nav-mobile__list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .site-nav-mobile__list li {
        border-bottom: 1.5px dashed rgba(98, 42, 20, 0.14);
    }
    .site-nav-mobile__list a {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        min-height: 50px;
        padding: 0.3rem var(--space-sm);
        color: var(--color-brown);
        font-weight: 800;
        font-size: 1.2rem;
        border-radius: var(--radius-md);
        transition: color .2s ease, background-color .2s ease;
    }
    .site-nav-mobile__list a::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--color-gray-300);
        flex-shrink: 0;
        transition: background-color .2s ease, transform .2s var(--ease-out);
    }
    .site-nav-mobile__list a:hover {
        color: var(--color-ocean-dark);
        background: rgba(255, 255, 255, 0.7);
    }
    .site-nav-mobile__list a:hover::before {
        background: var(--color-marigold);
        transform: scale(1.3);
    }
    .site-nav-mobile__list a.active {
        color: var(--color-ocean-dark);
    }
    .site-nav-mobile__list a.active::before {
        background: var(--color-red);
        transform: scale(1.3);
    }
    .site-nav-mobile__list a:focus-visible {
        outline-offset: -3px;
    }
    .site-nav-mobile__cta {
        margin-top: var(--space-lg);
        font-size: 1.1rem;
    }
    .site-nav-mobile__contact {
        display: grid;
        gap: 2px;
        margin-top: var(--space-lg);
        padding: var(--space-sm) var(--space-sm);
        background: var(--color-white);
        border-radius: var(--radius-lg);
        box-shadow: 0 1px 0 rgba(98,42,20,0.06), 0 8px 20px -14px rgba(98,42,20,0.35);
    }
    .site-nav-mobile__contact a {
        display: grid;
        grid-template-columns: 22px 1fr;
        align-items: center;
        gap: 0.65rem;
        min-height: 44px;
        padding: 0.25rem var(--space-sm);
        color: var(--color-text);
        font-weight: 600;
        font-size: var(--fs-sm);
        line-height: 1.35;
        border-radius: var(--radius-md);
    }
    .site-nav-mobile__contact a:hover {
        color: var(--color-ocean-dark);
        background: var(--color-sky);
    }
    .site-nav-mobile__contact svg {
        color: var(--color-ocean);
    }
    .site-nav-mobile__church {
        margin-top: auto;
        padding-top: var(--space-lg);
        font-size: 0.8125rem;
        color: var(--color-text-light);
        text-align: center;
    }

    /* Drawer links rise in one after another (motion-safe only) */
    @media (prefers-reduced-motion: no-preference) {
        .site-nav-mobile__list li,
        .site-nav-mobile__cta,
        .site-nav-mobile__contact {
            opacity: 0;
            transform: translateX(16px);
            transition: opacity .3s ease, transform .35s var(--ease-out);
        }
        .site-nav-mobile.is-open .site-nav-mobile__list li,
        .site-nav-mobile.is-open .site-nav-mobile__cta,
        .site-nav-mobile.is-open .site-nav-mobile__contact {
            opacity: 1;
            transform: none;
            transition-delay: calc(80ms + var(--i, 0) * 35ms);
        }
        .site-nav-mobile.is-open .site-nav-mobile__cta { --i: 7; }
        .site-nav-mobile.is-open .site-nav-mobile__contact { --i: 9; }
    }

    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(40, 22, 12, 0.45);
        z-index: 104;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }
    .nav-overlay.is-visible {
        opacity: 1;
        pointer-events: auto;
    }
}
@media (max-width: 380px) {
    .site-nav-mobile {
        width: 92vw;
        padding-inline: var(--space-md);
    }
}

/* --- Condensed header (after the hero) ---------------------- */
.site-header.is-condensed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .site-header.is-condensed {
        /* `top`, not transform: a transform would re-parent the fixed drawer/overlay */
        animation: header-drop .4s var(--ease-out);
    }
}
@keyframes header-drop {
    from { top: calc(-1 * var(--header-condensed-h) - 10px); }
    to   { top: 0; }
}
@keyframes header-rise {
    from { top: 0; }
    to   { top: calc(-1 * var(--header-condensed-h) - 10px); }
}
.site-header.is-condensed.is-leaving {
    animation: header-rise .26s ease-in forwards;
    pointer-events: none;
}
.site-header.is-condensed + .header-spacer {
    display: block;
}
/* Solid surface on a pseudo-element: backdrop-filter on the header itself would
   become the containing block for the fixed drawer */
.site-header.is-condensed::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(253, 248, 240, 0.94);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    box-shadow: 0 1px 0 rgba(98, 42, 20, 0.08), 0 10px 24px -16px rgba(98, 42, 20, 0.45);
}
.site-header.is-condensed .site-header__inner {
    height: var(--header-condensed-h);
}
.site-header.is-condensed .site-header__logo img {
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
}
.site-header.is-condensed .site-nav__list a {
    color: var(--color-brown);
    text-shadow: none;
    font-size: 1.05rem;
}
.site-header.is-condensed .site-nav__list a:hover,
.site-header.is-condensed .site-nav__list a.active {
    color: var(--color-ocean-dark);
}
.site-header.is-condensed .site-nav__cta {
    font-size: 0.95rem;
    padding: 0.5em 1.25em;
}
.site-header.is-condensed .header-call,
.site-header.is-condensed .nav-toggle:not([aria-expanded="true"]) {
    color: var(--color-brown);
    background: var(--color-sand);
    border-color: transparent;
    box-shadow: none;
}
.site-header.is-condensed .header-call svg {
    filter: none;
}
@media (max-width: 1023px) {
    .site-header.is-condensed .site-header__logo img {
        width: 56px;
        height: 56px;
    }
    :root { --header-condensed-h: 68px; }
}

/* --- Section spacing --------------------------------------- */
.section {
    padding: var(--space-4xl) 0;
}
.section--cream {
    background: var(--color-cream);
}
.section--sand {
    background: var(--color-sand);
}
.section--seafoam {
    background: var(--color-seafoam);
}
.section--ocean {
    background: var(--color-ocean);
    color: var(--color-white);
}
.section--ocean h2,
.section--ocean h3 {
    color: var(--color-white);
}
.section--brown {
    background: var(--color-brown);
    color: var(--color-white);
}
.section--brown h2,
.section--brown h3 {
    color: var(--color-white);
}
.section--sky {
    background: var(--color-sky);
}
.section--sunshine {
    background: var(--color-sunshine);
}
.section--coral {
    background: var(--color-coral-bg);
}

/* Confetti / sprinkle pattern backdrops — stars, hearts, plus signs, diamonds */
.section--confetti-brown {
    background-color: var(--color-brown);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpolygon points='12,8 14,14 20,14 15,17 17,23 12,20 7,23 9,17 4,14 10,14' fill='%237a3d24' opacity='0.35'/%3E%3Cpath d='M55,15c0-4,4-5,6-2c2-3,6-1,6,2c0,5-6,8-6,8s-6-3-6-8' fill='%23D9A441' opacity='0.25'/%3E%3Ccircle cx='85' cy='20' r='2.5' fill='%237a3d24' opacity='0.3'/%3E%3Cpath d='M30,45h4M32,43v4' stroke='%23D9A441' stroke-width='1.5' stroke-linecap='round' opacity='0.25'/%3E%3Cpolygon points='72,52 74,58 80,58 75,61 77,67 72,63 67,67 69,61 64,58 70,58' fill='%23D9A441' opacity='0.2'/%3E%3Ccircle cx='15' cy='68' r='2' fill='%237a3d24' opacity='0.3'/%3E%3Cpolygon points='55,82 58,76 61,82' fill='%23D9A441' opacity='0.2'/%3E%3Cpath d='M88,76h4M90,74v4' stroke='%237a3d24' stroke-width='1.5' stroke-linecap='round' opacity='0.3'/%3E%3Ccircle cx='42' cy='90' r='1.8' fill='%23D9A441' opacity='0.25'/%3E%3Cpolygon points='93,5 94,8 97,8 95,10 96,13 93,11 90,13 91,10 89,8 92,8' fill='%237a3d24' opacity='0.25'/%3E%3C/svg%3E");
    color: var(--color-white);
}
.section--confetti-brown h2,
.section--confetti-brown h3 {
    color: var(--color-white);
}

.section--confetti-gold {
    background-color: var(--color-marigold);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpolygon points='15,8 17,14 23,14 18,17 20,23 15,20 10,23 12,17 7,14 13,14' fill='%23FFD166' opacity='0.45'/%3E%3Cpolygon points='60,15 63,10 66,15 63,20' fill='%23fff' opacity='0.2'/%3E%3Ccircle cx='88' cy='22' r='2.5' fill='%23FFD166' opacity='0.4'/%3E%3Cpolygon points='38,50 41,44 44,50' fill='%23fff' opacity='0.15'/%3E%3Cpolygon points='75,55 77,61 83,61 78,64 80,70 75,67 70,70 72,64 67,61 73,61' fill='%23fff' opacity='0.15'/%3E%3Ccircle cx='12' cy='65' r='2' fill='%23FFD166' opacity='0.4'/%3E%3Cpolygon points='52,82 55,77 58,82 55,87' fill='%23FFD166' opacity='0.35'/%3E%3Ccircle cx='85' cy='78' r='1.8' fill='%23fff' opacity='0.15'/%3E%3Cpath d='M28,88h4M30,86v4' stroke='%23FFD166' stroke-width='1.5' stroke-linecap='round' opacity='0.35'/%3E%3Cpolygon points='93,42 94,45 97,45 95,47 96,50 93,48 90,50 91,47 89,45 92,45' fill='%23fff' opacity='0.18'/%3E%3C/svg%3E");
    color: var(--color-brown);
}
.section--confetti-gold h2,
.section--confetti-gold h3 {
    color: var(--color-brown);
}

/* Deep ocean base: white body text stays AA over the lighter motifs and the crest
   (on #3E79B5 it starts at 4.56:1, so any lighter motif pulls it under 4.5) */
.section--confetti-ocean {
    background-color: var(--color-ocean-dark);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='380' viewBox='0 0 560 380'%3E%3Cg transform='translate(58 64) rotate(-14) scale(1.3)'%3E%3Cpath d='M0-13c2.6 6.4 4.6 8 11.6 8.6-5.6 3.5-6.4 5.8-4.2 12.7-5.6-4.3-8.3-4.4-14.2 0 2.4-7 1.4-9.2-4.4-12.9 7.2-.5 8.8-2.1 11.2-8.4z' fill='%238FC1EA' opacity='0.26'/%3E%3Ccircle cx='-.2' cy='.6' r='1.1' fill='%232D5A8A' opacity='.35'/%3E%3C/g%3E%3Cg transform='translate(196 38) rotate(-9) scale(1.05)'%3E%3Cpath d='M-18 1.5c3.2-5.4 7.6-5.8 11.4-.6 3.6 5 8 4.8 11.6-.2 3.6-5 8-5.2 11.4.2' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' opacity='0.15'/%3E%3C/g%3E%3Cg transform='translate(352 92) rotate(14) scale(1.15)'%3E%3Cg opacity='0.3'%3E%3Cpath d='M-11 .4c4.6-7.6 13.4-8 19.6-.6-6 7.6-15 7.2-19.6.6z' fill='%238FC1EA'/%3E%3Cpath d='M8.2-.2l7.4-5.6-1.6 5.8 1.8 5.4z' fill='%238FC1EA'/%3E%3Ccircle cx='-4.6' cy='-1.4' r='1.3' fill='%232D5A8A'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(488 40) rotate(8) scale(0.85)'%3E%3Cpath d='M.2-9.5c.9 6 2.4 7.8 8.8 9.2-6.3 1.2-7.8 2.9-8.9 9.3-1-6.2-2.8-8-9.1-9.1 6.5-1.3 8-3.2 9.2-9.4z' fill='%23FFD166' opacity='0.26'/%3E%3C/g%3E%3Cg transform='translate(132 188) rotate(22) scale(1.2)'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' opacity='0.16'%3E%3Cpath d='M-12.5 5.5c-1.8-9.4 5-17.2 12.6-17.4 7.8.1 14.2 8 12.3 17.6z'/%3E%3Cpath d='M0 5.5-.6-10.8M-6.4 5.6-4.3-9.4M6.2 5.4 4.6-9.3M-11 2.6-8.6-5.6M10.6 2.4 8.7-5.8'/%3E%3Cpath d='M-4.3 5.6l1 4.2h6.4l1-4.3'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(268 156) rotate(-18) scale(0.95)'%3E%3Cpath d='M.4 8.6C-7.8 2.8-11 -2.6-7.6-7c2.6-3.2 6.2-2.4 7.9.8 1.8-3.4 5.8-4.2 8.1-.9 3 4.6-.6 10.2-8 15.7z' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linejoin='round' opacity='0.2'/%3E%3C/g%3E%3Cg transform='translate(452 196) rotate(6) scale(0.85)'%3E%3Cpath d='M.3-9.2-.2 10M-5.6-3.1l11.2.3' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' opacity='0.12'/%3E%3C/g%3E%3Cg transform='translate(36 286) rotate(0) scale(1.0)'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.6' opacity='0.17'%3E%3Ccircle cx='-4' cy='4' r='4.2'/%3E%3Ccircle cx='4.6' cy='-3' r='2.8'/%3E%3Ccircle cx='-1.4' cy='-8.4' r='1.7'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(228 300) rotate(-7) scale(1.1)'%3E%3Cg fill='none' stroke='%238FC1EA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' opacity='0.24'%3E%3Cpath d='M-11 3.6h22.4l-4 5.2H-7.2z'/%3E%3Cpath d='M.6 3.4V-11.6l8.4 12.2H.6M-.6-6.6-7.8 1.6h7'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(396 300) rotate(0) scale(1.0)'%3E%3Cg fill='none' stroke='%23FFD166' stroke-width='1.9' stroke-linecap='round' opacity='0.2'%3E%3Ccircle cx='0' cy='0' r='5.4'/%3E%3Cpath d='M0-9.6v-3.4M0 9.8v3.2M-9.7 0h-3.3M9.6.2h3.4M-6.9-6.8-9.2-9.1M7-6.7l2.3-2.4M-6.8 7-9.1 9.3M6.9 6.9l2.4 2.3'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(516 340) rotate(10) scale(0.95)'%3E%3Cpath d='M-11 1.2c3.4-4.6 7.2-4.8 10.6.2 3.4-5 7.4-4.8 10.8-.4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'/%3E%3C/g%3E%3Cg transform='translate(312 232) rotate(0) scale(1.2)'%3E%3Ccircle r='1.9' fill='%238FC1EA' opacity='0.3'/%3E%3C/g%3E%3Cg transform='translate(84 360) rotate(-12) scale(0.6)'%3E%3Cpath d='M.2-9.5c.9 6 2.4 7.8 8.8 9.2-6.3 1.2-7.8 2.9-8.9 9.3-1-6.2-2.8-8-9.1-9.1 6.5-1.3 8-3.2 9.2-9.4z' fill='%23ffffff' opacity='0.2'/%3E%3C/g%3E%3Cg transform='translate(530 132) rotate(0) scale(1)'%3E%3Ccircle r='1.9' fill='%23ffffff' opacity='0.2'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='270' viewBox='0 0 330 270'%3E%3Cg transform='translate(262 18) rotate(-24) scale(0.85)'%3E%3Cg fill='none' stroke='%238FC1EA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' opacity='0.22'%3E%3Cpath d='M-12.5 5.5c-1.8-9.4 5-17.2 12.6-17.4 7.8.1 14.2 8 12.3 17.6z'/%3E%3Cpath d='M0 5.5-.6-10.8M-6.4 5.6-4.3-9.4M6.2 5.4 4.6-9.3M-11 2.6-8.6-5.6M10.6 2.4 8.7-5.8'/%3E%3Cpath d='M-4.3 5.6l1 4.2h6.4l1-4.3'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(46 38) rotate(0) scale(1)'%3E%3Ccircle r='1.9' fill='%238FC1EA' opacity='0.32'/%3E%3C/g%3E%3Cg transform='translate(120 120) rotate(6) scale(0.7)'%3E%3Cpath d='M-18 1.5c3.2-5.4 7.6-5.8 11.4-.6 3.6 5 8 4.8 11.6-.2 3.6-5 8-5.2 11.4.2' fill='none' stroke='%238FC1EA' stroke-width='2.2' stroke-linecap='round' opacity='0.24'/%3E%3C/g%3E%3Cg transform='translate(300 210) rotate(20) scale(0.7)'%3E%3Cpath d='M0-13c2.6 6.4 4.6 8 11.6 8.6-5.6 3.5-6.4 5.8-4.2 12.7-5.6-4.3-8.3-4.4-14.2 0 2.4-7 1.4-9.2-4.4-12.9 7.2-.5 8.8-2.1 11.2-8.4z' fill='%23ffffff' opacity='0.12'/%3E%3Ccircle cx='-.2' cy='.6' r='1.1' fill='%232D5A8A' opacity='.35'/%3E%3C/g%3E%3Cg transform='translate(60 222) rotate(12) scale(0.6)'%3E%3Cpath d='M.4 8.6C-7.8 2.8-11 -2.6-7.6-7c2.6-3.2 6.2-2.4 7.9.8 1.8-3.4 5.8-4.2 8.1-.9 3 4.6-.6 10.2-8 15.7z' fill='none' stroke='%23F7A493' stroke-width='1.9' stroke-linejoin='round' opacity='0.32'/%3E%3C/g%3E%3Cg transform='translate(186 248) rotate(0) scale(0.55)'%3E%3Cpath d='M.2-9.5c.9 6 2.4 7.8 8.8 9.2-6.3 1.2-7.8 2.9-8.9 9.3-1-6.2-2.8-8-9.1-9.1 6.5-1.3 8-3.2 9.2-9.4z' fill='%23FFD166' opacity='0.26'/%3E%3C/g%3E%3Cg transform='translate(210 18) rotate(0) scale(0.8)'%3E%3Ccircle r='1.9' fill='%23ffffff' opacity='0.22'/%3E%3C/g%3E%3C/svg%3E");
    background-position: 0 0, 171px 133px;
    color: var(--color-white);
}
.section--confetti-ocean h2,
.section--confetti-ocean h3 {
    color: var(--color-white);
}

/* --- Hero -------------------------------------------------- */
.hero {
    position: relative;
    background-color: var(--color-ocean);
    background-image: var(--hero-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 650px;
    display: flex;
    align-items: center;
    margin-top: calc(-1 * var(--header-height));
    padding: calc(var(--header-height) + var(--space-xl)) 0 var(--space-3xl);
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(45,90,138,0.75) 0%, rgba(62,121,181,0.6) 50%, rgba(45,90,138,0.8) 100%);
    z-index: 1;
}
.hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}
.hero__badge {
    display: inline-block;
    background: var(--color-red);
    color: var(--color-white);
    padding: var(--space-xs) var(--space-xl);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    margin-bottom: var(--space-lg);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: rotate(-2deg);
    box-shadow: 0 4px 15px rgba(237,63,39,0.35);
}
.hero__title {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 10vw, 6.5rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--space-lg);
    color: var(--color-white);
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.hero__title .word-play { color: var(--color-marigold-light); }
.hero__title .word-learn { color: var(--color-white); }
.hero__title .word-grow { color: #FF7F6E; }

.hero__text {
    font-size: var(--fs-lg);
    color: rgba(255,255,255,0.95);
    margin-bottom: var(--space-xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
}
.hero__wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    z-index: 3;
}
.hero__wave svg {
    display: block;
    width: 100%;
}

@media (max-width: 768px) {
    .hero {
        background-image: var(--hero-img-sm, var(--hero-img));
        padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-2xl);
        min-height: auto;
    }
}

/* --- Cards ------------------------------------------------- */
.card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
}
/* Only clickable cards lift: add .card--link (or use an <a href> card) */
.card--link,
a.card[href] {
    color: inherit;
    transition: transform .25s var(--ease-out), box-shadow .25s ease;
}
a.card[href] {
    display: block;
}
.card--link:hover,
a.card[href]:hover {
    color: inherit;
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
/* Accent bar along the top of a rounded card without the tapering "crescent" a
   border-top makes: set style="--accent: #hex" and add .card--accent (no border-top). */
.card--accent {
    background:
        linear-gradient(var(--accent, var(--color-ocean)) 0 0) top / 100% 6px no-repeat,
        var(--card-bg, var(--color-white));
}

.card-grid {
    display: grid;
    gap: var(--space-xl);
}
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* --- Program cards ----------------------------------------- */
.program-card {
    border-top: 4px solid var(--color-ocean);
    text-align: center;
}
.program-card__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-md);
}
.program-card__name {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    color: var(--color-brown);
    margin-bottom: var(--space-sm);
}
.program-card__ages {
    color: var(--color-text-light);
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-bottom: var(--space-md);
}
.program-card__desc {
    font-size: var(--fs-sm);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}
.program-card__detail {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--color-gray-200);
    font-size: var(--fs-sm);
}
.program-card__detail-label {
    color: var(--color-text-light);
}

/* --- Staff cards ------------------------------------------- */
.staff-card {
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
}
.staff-card__photo {
    width: 200px;
    height: 200px;
    border-radius: var(--radius-full);
    object-fit: cover;
    margin: 0 auto var(--space-md);
    border: 4px solid var(--color-sand);
}
.staff-card__placeholder {
    width: 200px;
    height: 200px;
    border-radius: var(--radius-full);
    margin: 0 auto var(--space-md);
    background: var(--color-sand);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    font-size: var(--fs-sm);
    border: 4px solid var(--color-gray-200);
}
.staff-card__name {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    color: var(--color-brown);
    margin-bottom: var(--space-xs);
}
.staff-card__title {
    color: var(--color-ocean);
    font-weight: 600;
    font-size: var(--fs-sm);
    margin-bottom: var(--space-md);
}
.staff-card__bio {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    line-height: 1.7;
}

/* --- Pricing table ----------------------------------------- */
.price-card {
    text-align: center;
    position: relative;
}
.price-card--featured {
    border: 2px solid var(--color-ocean);
}
.price-card--featured::before {
    content: 'Most Popular';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-ocean);
    color: var(--color-white);
    padding: 2px 16px;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.price-card__name {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    color: var(--color-brown);
}
.price-card__price {
    font-size: var(--fs-4xl);
    font-weight: 700;
    color: var(--color-ocean);
    margin: var(--space-md) 0;
}
.price-card__price span {
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--color-text-light);
}
.price-card__details {
    text-align: left;
}
.price-card__details li {
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--color-gray-200);
    font-size: var(--fs-sm);
    display: flex;
    align-items: start;
    gap: var(--space-sm);
}
.price-card__details li::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: var(--color-seafoam);
    border-radius: var(--radius-full);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%233E79B5'%3E%3Cpath d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
}

/* --- Features / Why OCA ------------------------------------ */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
    max-width: 1000px;
    margin: 0 auto;
}
@media (min-width: 960px) {
    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.feature-grid--4 {
    max-width: var(--max-width);
}
@media (min-width: 600px) {
    .feature-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
    .feature-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.feature {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    border-radius: var(--radius-lg);
}
/* Pastel icon circle sits in a white ring with a soft shadow, so it still reads
   on a section of the same tint (sunshine on sunshine, coral on cream...). */
.feature__icon {
    width: 84px;
    height: 84px;
    margin: 0 auto var(--space-lg);
    padding: 6px;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 0 0 1px rgba(98, 42, 20, 0.07), 0 10px 20px -12px rgba(98, 42, 20, 0.45);
    color: var(--color-ocean);
}
.feature__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
.feature__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem);
    line-height: 1.05;
    color: var(--color-ocean);
    margin-bottom: var(--space-sm);
    text-wrap: balance;
}
.feature-grid--4 .feature__title {
    font-size: clamp(2rem, 1.2rem + 1.2vw, 2.4rem);
}
.feature__text {
    font-size: var(--fs-base);
    color: var(--color-text);
    line-height: 1.7;
}
/* Phones: icon beside the text keeps the liked circles and halves the section height */
@media (max-width: 600px) {
    .feature-grid {
        gap: var(--space-sm);
    }
    .feature {
        display: grid;
        grid-template-columns: 68px 1fr;
        column-gap: var(--space-md);
        align-items: start;
        text-align: left;
        padding: var(--space-md) 0;
    }
    .feature__icon {
        width: 68px;
        height: 68px;
        padding: 5px;
        margin: 0;
        grid-row: span 2;
    }
    .feature__title {
        margin-top: 0.2rem;
        margin-bottom: var(--space-xs);
    }
}

/* --- Forms ------------------------------------------------- */
.form-group {
    margin-bottom: var(--space-lg);
}
.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--color-text);
    font-size: var(--fs-sm);
}
.form-label .required {
    color: var(--color-red);
}
.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 0.75em 1em;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--color-text);
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    transition: border-color 0.2s;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-ocean);
    box-shadow: 0 0 0 3px rgba(62, 121, 181, 0.15);
}
.form-textarea {
    resize: vertical;
    min-height: 120px;
}
.form-checkbox-group {
    display: flex;
    align-items: start;
    gap: var(--space-sm);
}
.form-checkbox-group input[type="checkbox"] {
    margin-top: 0.3em;
    accent-color: var(--color-ocean);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.form-checkbox-group label {
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.form-help {
    font-size: var(--fs-xs);
    color: var(--color-text-light);
    margin-top: var(--space-xs);
}
.form-error {
    font-size: var(--fs-xs);
    color: var(--color-red);
    margin-top: var(--space-xs);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}
.form-success {
    background: var(--color-seafoam);
    border: 2px solid var(--color-ocean);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    text-align: center;
}
.form-success h3 {
    color: var(--color-ocean);
    margin-bottom: var(--space-sm);
}

/* --- Page hero --------------------------------------------- */
.page-hero {
    background: linear-gradient(135deg, var(--color-ocean) 0%, var(--color-ocean-dark) 100%);
    background-size: cover;
    background-position: center;
    margin-top: calc(-1 * var(--header-height));
    padding: calc(var(--header-height) + var(--space-lg)) 0 var(--space-3xl);
    text-align: center;
    position: relative;
}
.page-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: var(--color-white);
    margin-bottom: var(--space-md);
    text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.page-hero__subtitle {
    font-family: var(--font-serif);   /* italic accent, like .section-subtitle */
    font-style: italic;
    font-size: var(--fs-lg);
    color: rgba(255,255,255,0.9);
    max-width: 600px;
    margin: 0 auto;
}
.page-hero__wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
}
.page-hero__wave svg {
    display: block;
    width: 100%;
}

/* --- About page pastors ------------------------------------ */
.pastors-card {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-md);
}
.pastors-card__photo {
    width: 200px;
    height: 200px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    flex-shrink: 0;
}
.pastors-card__name {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.7rem + 1.2vw, 2.8rem);
    color: var(--color-brown);
    margin-bottom: var(--space-sm);
}
.pastors-card__title {
    color: var(--color-ocean);
    font-weight: 600;
    margin-bottom: var(--space-md);
}
@media (max-width: 600px) {
    .pastors-card {
        flex-direction: column;
        text-align: center;
    }
    .pastors-card__photo {
        width: 150px;
        height: 150px;
    }
}

/* --- FAQ accordion ----------------------------------------- */
.faq-item {
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    overflow: hidden;
}
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    background: var(--color-white);
    border: none;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-brown);
    cursor: pointer;
    text-align: left;
    gap: var(--space-md);
}
.faq-question:hover {
    background: var(--color-gray-100);
}
.faq-question::after {
    content: '+';
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--color-ocean);
    flex-shrink: 0;
    transition: transform 0.2s;
}
.faq-item.is-open .faq-question::after {
    content: '\2212';
}
.faq-answer {
    padding: 0 var(--space-lg) var(--space-lg);
    display: none;
    color: var(--color-text-light);
    line-height: 1.8;
}
.faq-item.is-open .faq-answer {
    display: block;
}

/* --- CTA Banner -------------------------------------------- */
.cta-banner {
    position: relative;
    isolation: isolate;
    overflow-x: clip;          /* the crest bleeds off the edge without widening the page */
    text-align: center;
    padding: var(--space-4xl) var(--space-md) calc(var(--space-4xl) + var(--footer-wave-h));
}
/* Big faint eagle crest bleeding off the right edge (decorative pseudo-element). It is a solid
   crest-shaped cut-out in the band's own colour (masked by the logo's alpha), with the crest drawn
   faintly on top through a veil of that colour, so the band's doodle pattern never shows through it. */
.cta-banner { --cta-bg: var(--color-ocean); --cta-veil: 87%; }
.section--confetti-ocean { --cta-bg: var(--color-ocean-dark); }
.section--confetti-brown { --cta-bg: var(--color-brown); }
.section--confetti-gold { --cta-bg: var(--color-marigold); --cta-veil: 90%; }
.cta-banner::after {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
    width: min(46vw, 500px);
    aspect-ratio: 1;
    right: max(-9vw, -120px);
    top: calc(50% - var(--footer-wave-h) / 2);
    transform: translateY(-50%) rotate(-9deg);
    background:
        linear-gradient(color-mix(in srgb, var(--cta-bg) var(--cta-veil), transparent), color-mix(in srgb, var(--cta-bg) var(--cta-veil), transparent)),
        url('/assets/img/logo-mono-640.webp') center / contain no-repeat var(--cta-bg);
    -webkit-mask: url('/assets/img/logo-mono-640.webp') center / contain no-repeat;
    mask: url('/assets/img/logo-mono-640.webp') center / contain no-repeat;
}
/* White-text confetti bands: the lighter stars and hearts under the copy pull the body text
   below 4.5:1, so a soft scrim in the band's own colour (inherit) tones the pattern down under
   the copy column and fades out towards the edges, where the full pattern still shows.
   (On the gold band the motifs are lighter than the base under dark text, so it needs none.) */
.cta-banner:is(.section--confetti-ocean, .section--confetti-brown)::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: calc(var(--space-4xl) - var(--space-xl));
    bottom: calc(var(--space-4xl) + var(--footer-wave-h) - var(--space-xl));
    left: 50%;
    width: min(100%, 900px);
    transform: translateX(-50%);
    background-color: inherit;
    -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
    pointer-events: none;
}
@media (max-width: 600px) {
    /* Phones: tuck the crest into the bottom-right corner, clear of the copy */
    .cta-banner::after {
        width: 230px;
        right: -88px;
        top: auto;
        bottom: calc(var(--footer-wave-h) - 70px);
        transform: rotate(-9deg);
    }
    .cta-banner { --cta-veil: 90%; }
}
.cta-banner__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
    line-height: 1.1;
    color: var(--color-white);
    margin-bottom: var(--space-md);
    text-wrap: balance;
}
.cta-banner__text {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-xl);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}

/* --- Map --------------------------------------------------- */
.map-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.map-container iframe {
    width: 100%;
    height: 400px;
    border: 0;
}

/* --- Footer ------------------------------------------------ */
/* The wave overlays the bottom of the preceding section, so that section's
   background (never the white body) shows through the wave's troughs. */
.site-footer {
    position: relative;
}
.footer-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 3px);   /* overlap the brown block so no anti-aliased seam shows */
    height: var(--footer-wave-h);
    pointer-events: none;
}
.footer-wave svg {
    display: block;
    width: 100%;
    height: 100%;
}
/* Two-tone layered wave: a lighter brown swell peeks above the front wave */
.footer-wave__back  { fill: var(--color-brown-light); }
.footer-wave__front { fill: var(--color-brown); }

/* Brown with a faint scattered "pixel" texture (a nod to the old site's patterned brown band) */
.footer-main {
    background-color: var(--color-brown);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23ffffff' fill-opacity='.045'%3E%3Crect x='8' y='14' width='6' height='6' rx='1.2' transform='rotate(8 11 17)'/%3E%3Crect x='70' y='6' width='5' height='5' rx='1'/%3E%3Crect x='44' y='52' width='7' height='7' rx='1.4' transform='rotate(-10 47 55)'/%3E%3Crect x='98' y='44' width='5' height='5' rx='1'/%3E%3Crect x='18' y='86' width='5' height='5' rx='1' transform='rotate(14 20 88)'/%3E%3Crect x='82' y='92' width='7' height='7' rx='1.4'/%3E%3C/g%3E%3Cg fill='%23FFAF1C' fill-opacity='.07'%3E%3Crect x='30' y='30' width='4' height='4' rx='.8'/%3E%3Crect x='104' y='102' width='4' height='4' rx='.8'/%3E%3Crect x='60' y='100' width='4' height='4' rx='.8' transform='rotate(20 62 102)'/%3E%3C/g%3E%3C/svg%3E");
    color: rgba(255,255,255,0.86);
    padding: var(--space-3xl) 0 var(--space-2xl);
}

/* 1 column on phones, 2x2 on tablets, 4 across from 1100px */
.footer-grid {
    display: grid;
    gap: var(--space-2xl) var(--space-xl);
    grid-template-columns: 1fr;
}
@media (min-width: 600px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .footer-grid { grid-template-columns: 1.15fr 0.85fr 1.25fr 1fr; }
}

.footer-logo {
    width: 132px;
    height: 132px;
    margin-bottom: var(--space-md);
}
/* Oceans Unite "OU" mark beside the ministry line, which sits close under the crest */
.footer-church {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: rgba(255,255,255,0.8);
}
.footer-brand .footer-logo { margin-bottom: .35rem; }
.footer-church--bottom { display: none; }
.footer-church picture { flex: none; }
.footer-church__icon {
    display: block;
    width: 53px;
    height: 44px;
    opacity: .92;
}
.footer-church a {
    color: var(--color-marigold-light);
    font-weight: 700;
}
.footer-church a:hover {
    color: var(--color-white);
}

.footer-heading {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    line-height: 1.1;
    color: var(--color-marigold);
    margin-bottom: var(--space-md);
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: rgba(255,255,255,0.86);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: color 0.2s;
}
.footer-links a:hover {
    color: var(--color-marigold-light);
}

.footer-contact {
    display: grid;
    gap: var(--space-xs);
    font-size: var(--fs-sm);
}
.footer-contact__line {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 0.6rem;
    align-items: start;
    padding: 0.3rem 0;
    color: rgba(255,255,255,0.86);
    line-height: 1.5;
}
.footer-contact__line svg {
    margin-top: 0.1rem;
    color: var(--color-marigold);
}
.footer-contact__line:hover {
    color: var(--color-white);
}
/* Address: two lines in the columns, one line (with its comma) on phones */
.footer-contact__comma {
    display: none;
}
@media (pointer: coarse) {
    .footer-contact__line {
        min-height: 44px;
        align-items: center;
    }
    .footer-contact__line svg {
        margin-top: 0;
    }
}

.footer-social {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}
.footer-social a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--color-white);
    background: rgba(255,255,255,0.1);
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.18);
    transition: background-color .2s ease, color .2s ease, transform .2s var(--ease-out);
}
.footer-social a:hover {
    background: var(--color-marigold);
    color: var(--color-brown);
    transform: translateY(-2px);
}

.footer-hours__days {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}
.footer-hours__list {
    font-size: var(--fs-sm);
}
.footer-hours__list div {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.4rem;
    padding: 0.2rem 0;
}
.footer-hours__list dt {
    font-weight: 700;
    color: var(--color-marigold-light);
}
.footer-hours__list dt::after {
    content: ':';
}

.footer-review-btn {
    margin-top: var(--space-lg);
}

.footer-bottom {
    background: #4E200F;
    padding: var(--space-xl) 0 var(--space-lg);
    text-align: center;
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.78);
    border-top: 1px solid rgba(255,175,28,0.22);
}
.footer-bottom p {
    margin-bottom: var(--space-xs);
}
.footer-acsi {
    margin-bottom: var(--space-sm) !important;
}
.footer-acsi a {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.85rem;
    min-height: 44px;
    color: var(--color-white);
    font-weight: 700;
    font-size: var(--fs-sm);
    text-decoration: underline;
    text-decoration-color: rgba(255,175,28,0.55);
    text-underline-offset: 4px;
}
.footer-acsi a:hover {
    color: var(--color-marigold-light);
}
.footer-acsi__logo {
    display: block;
    height: 34px;
    width: auto;
    flex-shrink: 0;
    transition: opacity .2s ease;
}
.footer-acsi a:hover .footer-acsi__logo { opacity: .85; }
.footer-dcf {
    font-weight: 700;
    color: rgba(255,255,255,0.92);
}
.footer-disclaimer {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}
.footer-legal-links {
    margin-top: var(--space-sm);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: var(--space-sm);
}
.footer-legal-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-xs);
    color: rgba(255,255,255,0.86);
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.3);
    text-underline-offset: 3px;
}
.footer-legal-links a:hover {
    color: var(--color-white);
}

/* Phones: one left-aligned column that ends the page quickly (the header already carries the
   crest and the page has just closed with a CTA). The crest steps aside, the
   ministry line becomes a one-line eyebrow, quick links sit in a 3 x 2 grid, and the social
   icons and the Google button ride on their section's heading row. Tap targets stay 44px. */
@media (max-width: 599px) {
    .footer-main {
        padding: var(--space-xl) 0 1.75rem;
    }
    .footer-grid {
        row-gap: 1.625rem;
    }
    .footer-brand,
    .footer-church__br {
        display: none;
    }
    .footer-church__icon { width: 40px; height: 33px; }
    .footer-bottom .footer-church--bottom {
        display: flex;
        gap: .6rem;
        margin-bottom: var(--space-sm);
        font-size: var(--fs-sm);
    }
    .footer-heading {
        font-size: 1.9rem;
        margin-bottom: var(--space-sm);
    }

    .footer-links {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        column-gap: var(--space-xl);
    }
    .footer-links a {
        min-height: 44px;
    }

    /* Heading row with an action on the right: "Contact Us  (f) (ig)", "Hours  [Reviews on Google]" */
    .footer-col--contact,
    .footer-hours {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: var(--space-md);
    }
    .footer-col--contact > *,
    .footer-hours > * {
        grid-column: 1 / -1;
    }
    .footer-col--contact > .footer-heading,
    .footer-hours > .footer-heading {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 0;
    }
    .footer-col--contact > .footer-social,
    .footer-hours > .footer-review-btn {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }
    .footer-col--contact > .footer-contact {
        margin-top: var(--space-xs);
        gap: 0;
    }
    .footer-contact__comma {
        display: inline;
    }
    .footer-contact__br {
        display: none;
    }
    .footer-hours__days {
        margin-top: var(--space-sm);
        margin-bottom: 0;
    }
    .footer-hours__list div {
        padding: 0.1rem 0;
    }

    /* Bottom band follows the same left edge */
    .footer-bottom {
        text-align: left;
        padding: 1.125rem 0 0.75rem;
    }
    .footer-bottom p {
        margin-bottom: 0.3rem;
    }
    .footer-acsi {
        margin-bottom: var(--space-xs) !important;
    }
    .footer-acsi a {
        justify-content: flex-start;
    }
    .footer-disclaimer {
        margin-inline: 0;
    }
    .footer-legal-links {
        justify-content: flex-start;
        margin-top: var(--space-xs);
        margin-left: calc(-1 * var(--space-xs));
    }
}
/* From 360px the six quick links fit three to a row */
@media (min-width: 360px) and (max-width: 599px) {
    .footer-links {
        grid-template-columns: repeat(3, max-content);
        justify-content: space-between;
        column-gap: var(--space-md);
    }
}

/* --- Alert / notice ---------------------------------------- */
.alert {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    font-size: var(--fs-sm);
}
.alert--success {
    background: var(--color-seafoam);
    border: 1px solid var(--color-ocean);
    color: var(--color-ocean-dark);
}
.alert--error {
    background: #FEF2F2;
    border: 1px solid var(--color-red);
    color: var(--color-red-dark);
}
.alert--info {
    background: #F0F7FF;
    border: 1px solid var(--color-ocean-light);
    color: var(--color-ocean-dark);
}

/* --- Content prose ----------------------------------------- */
.prose {
    max-width: 700px;
    margin: 0 auto;
}
.prose h2 {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}
.prose h3 {
    font-size: var(--fs-lg);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}
.prose p {
    margin-bottom: var(--space-md);
}
.prose ul, .prose ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-xl);
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li {
    margin-bottom: var(--space-xs);
}
.prose strong {
    color: var(--color-brown);
}
.prose a {
    color: var(--color-ocean-dark);
    text-decoration: underline;
    text-decoration-color: rgba(62, 121, 181, 0.45);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.prose a:hover {
    text-decoration-color: currentColor;
}

/* --- Teacher profiles (teachers page) ---------------------- */
.teacher-section {
    padding: var(--space-3xl) 0;
}
.teacher-profile {
    display: flex;
    align-items: center;
    gap: var(--space-3xl);
    max-width: 900px;
    margin: 0 auto;
}
.teacher-profile--reverse {
    flex-direction: row-reverse;
}
.teacher-profile__photo {
    flex: 0 0 280px;
}
.teacher-profile__photo img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    object-fit: cover;
    aspect-ratio: 4/5;
}
.teacher-profile__placeholder {
    width: 100%;
    aspect-ratio: 4/5;
    border-radius: var(--radius-lg);
    background: var(--color-sand);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    font-size: var(--fs-lg);
    box-shadow: var(--shadow-md);
}
.teacher-profile__name {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.5rem);
    color: var(--color-brown);
    margin-bottom: var(--space-xs);
}
.teacher-profile__title {
    color: var(--color-ocean);
    font-weight: 600;
    font-size: var(--fs-lg);
    margin-bottom: var(--space-lg);
}
.teacher-profile__bio {
    font-size: var(--fs-md);
    color: var(--color-text-light);
    line-height: 1.8;
}
@media (max-width: 768px) {
    .teacher-profile,
    .teacher-profile--reverse {
        flex-direction: column;
        text-align: center;
    }
    .teacher-profile__photo {
        flex: none;
        max-width: 250px;
        margin: 0 auto;
    }
}

/* --- Video embed ------------------------------------------- */
.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--color-sand);
}

/* --- Responsive tweaks ------------------------------------- */
/* (--header-height for <1024px lives in the phone/tablet header block above) */
@media (max-width: 768px) {
    :root {
        --space-4xl: 3.5rem;
        --space-3xl: 2.5rem;
    }
    .card-grid--3 {
        grid-template-columns: 1fr;
    }
}

/* --- Reduced motion ---------------------------------------- */
/* Global safety net: no animation loops, no smooth scrolling, no movement on hover. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
    .btn:hover,
    .btn:active,
    .card--link:hover,
    a.card[href]:hover,
    .footer-social a:hover,
    .site-header__logo:hover img {
        transform: none;
    }
}

@media (max-width: 480px) {
    .hero__buttons {
        flex-direction: column;
    }
    .hero__buttons .btn {
        width: 100%;
    }
}

/* --- Print ------------------------------------------------- */
@media print {
    .site-header,
    .header-spacer,
    .skip-link,
    .event-banner,
    .nav-toggle,
    .footer-wave,
    .hero__overlay {
        display: none;
    }
    .hero,
    .page-hero {
        margin-top: 0;
    }
    body {
        font-size: 12pt;
        color: #000;
    }
}

/* --- Back to top ------------------------------------------ */
.to-top {
    position: fixed;
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 85;                      /* under the header (100) and the phone action bar (90) */
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--color-ocean);
    color: #fff;
    box-shadow: 0 10px 22px -10px rgba(16, 36, 59, .55);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    translate: 0 14px;
    transition: opacity .25s ease, translate .25s ease, visibility 0s linear .25s, background-color .2s ease;
}
.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition: opacity .25s ease, translate .25s ease, visibility 0s, background-color .2s ease;
}
.to-top:hover { background: var(--color-ocean-dark); }
.to-top:focus-visible { outline: 3px solid var(--color-marigold); outline-offset: 3px; }
.to-top[hidden] { display: none; }
html.nav-open .to-top { visibility: hidden; opacity: 0; }
@media (max-width: 768px) {
    /* Sit above the fixed Call / Directions / Enroll bar on the pages that have one */
    body:has(.mobile-actions) .to-top { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    .to-top { width: 44px; height: 44px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .to-top, .to-top.is-visible { translate: none; transition: opacity .01s, visibility 0s; }
}
@media print { .to-top { display: none !important; } }