/* ============================================================
   Inner pages: About, Teachers, Programs
   Every rule is scoped to body.page-about / .page-teachers /
   .page-programs or to a class only these pages use, so nothing
   here leaks into the homepage or the other page sheets.
   Builds on decor.css (doodles, dividers, frames, polaroids).
   ============================================================ */

/* --- Shared ------------------------------------------------- */
/* Leads in Noto Serif, the old site's text face, as an accent (its taller x-height reads a step bigger
   than Nunito, hence the smaller size). Only weight 400 is loaded: emphasis is brown italic, never bold. */
:is(.page-about, .page-teachers, .page-programs) .inner-lead {
    max-width: 46rem;
    margin: 0 auto;
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, .97rem + .4vw, 1.22rem);
    line-height: 1.8;
    text-align: center;
    color: var(--color-text-light);
    text-wrap: pretty;
}
:is(.page-about, .page-teachers, .page-programs) .inner-lead strong { color: var(--color-brown); font-weight: 400; font-style: italic; }
/* Long centred blocks are hard to read on phones */
@media (max-width: 600px) {
    :is(.page-about, .page-teachers, .page-programs) .inner-lead {
        text-align: left;
        line-height: 1.75;
    }
}
/* Section title straight to content: at least 2rem everywhere on these pages */
:is(.page-about, .page-teachers, .page-programs) .section-title { margin-bottom: max(2rem, var(--space-2xl)); }
:is(.page-about, .page-teachers, .page-programs) .section-title + .section-subtitle { margin-top: calc(var(--space-md) - max(2rem, var(--space-2xl))); }

/* Page heroes (page_hero()): balanced subtitle lines, no one-word orphans */
:is(.page-about, .page-teachers, .page-programs) .page-hero__subtitle { text-wrap: balance; }
/* These photos are bright (white shirts, blue rug, lit ceilings): a soft extra scrim behind the
   text keeps white subtitles >= 4.5:1 and titles >= 3.5:1 at the brightest pixel (measured). */
:is(.page-about, .page-teachers, .page-programs) .page-hero__overlay {
    background:
        radial-gradient(ellipse 50% 42% at 50% 60%, rgba(10, 26, 48, .3) 0%, rgba(10, 26, 48, 0) 100%),
        linear-gradient(rgba(10, 26, 48, .12), rgba(10, 26, 48, .12)),
        var(--overlay-warm-navy);
}

/* /programs hero: 481-1000px screens at 1x load the tall 1000x1150 mobile crop into a wide, short
   hero, where a flush-top position would leave the teacher under the wave. Pull it up so her face
   sits beside the title (the wide desktop crop barely moves at these widths). */
@media (min-width: 481px) and (max-width: 1000px) {
    .page-programs .page-hero__img { --programs-hero-pos: center 32%; }
}

/* CTA with two buttons */
:is(.page-about, .page-teachers, .page-programs) .cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
}
/* The ocean confetti's lighter stars and white hearts sit right under the CTA copy: on the base
   #3E79B5 the 20px body text drops to about 3.7:1 over them. Deep ocean keeps white at 7.1:1
   (about 5.3:1 over the brightest motif). The incoming dividers on About and Programs use the
   same fill. */
:is(.page-about, .page-programs) .cta-banner.section--confetti-ocean { background-color: var(--color-ocean-dark); }
/* About CTA character (peekaboo, decor.css .char--peek): a manatee surfacing through the story
   section's layered waves, waving, and dipping back under. Its box sits on the banner's top edge, where
   the dark front wave is lowest (about 3/4 across), and clips the lower third, so only its head and
   flippers come up out of the water. Hovering the banner brings it up again. */
.page-about .about-cta__pal {
    position: absolute;
    bottom: calc(100% + clamp(44px, 7.5vw, 120px) * .05);
    left: 72%;
    width: clamp(84px, 8vw, 116px);
    aspect-ratio: 104 / 72;
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
}
.page-about .about-cta__pal .char { width: 100%; }

/* ============================================================
   ABOUT
   ============================================================ */
.page-about .about-mission .container { max-width: 54rem; }
.page-about .about-mission__whole {
    max-width: 38rem;
    margin: var(--space-2xl) auto 0;
    font-size: var(--fs-md);
    line-height: 1.75;
    text-align: center;
    color: var(--color-text);
    text-wrap: balance;
}
.page-about .about-mission__whole::before {
    content: '';
    display: block;
    width: 88px;
    height: 14px;
    margin: 0 auto var(--space-lg);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 14' fill='none'%3E%3Cpath d='M3 8.6C8.4 4.2 12.6 3.6 17 7.4s8.8 4.6 13.6.6 9.4-4.2 13.8-.2 9 4.4 13.8.2 9.2-3.8 13.6.4 8.8 3.4 13.2-.8' stroke='%23FFAF1C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-about .about-mission__whole strong { color: var(--color-brown); font-weight: 700; }

/* "Some Things About Us": confirmed facts as tilted medallions (the /programs age-medallion style) */
.page-about .about-facts { margin: var(--space-2xl) auto 0; text-align: center; }
.page-about .about-facts__title {
    margin: 0 0 var(--space-xl);
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem);
    line-height: 1.1;
    color: var(--color-ocean);
}
.page-about .about-facts__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
    max-width: 46rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.page-about .about-facts__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}
.page-about .about-facts__value {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: var(--radius-full, 50%);
    background: var(--fact-bg, var(--color-ocean));
    color: var(--fact-fg, #fff);
    font-family: var(--font-body);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    box-shadow: 0 0 0 6px #fff, 0 0 0 7.5px rgba(98, 42, 20, .07), 0 12px 22px -10px rgba(98, 42, 20, .45);
    rotate: var(--tilt, -5deg);
}
.page-about .about-facts__value--range { font-size: 2.15rem; }
.page-about .about-facts__value--word { font-size: 1.45rem; letter-spacing: .03em; }
.page-about .about-facts__value abbr { text-decoration: none; cursor: help; }
.page-about .about-facts__label {
    max-width: 9.5rem;
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-brown);
    text-wrap: balance;
}
.page-about .about-facts__label small {
    display: block;
    font-size: .92em;
    font-weight: 600;
    color: var(--color-text-light);
}
@media (max-width: 600px) {
    .page-about .about-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
    .page-about .about-facts__value { width: 84px; height: 84px; font-size: 2.3rem; }
    .page-about .about-facts__value--range { font-size: 1.9rem; }
    .page-about .about-facts__value--word { font-size: 1.3rem; }
}

/* --- Pastors + Vision Sunday video ------------------------ */
/* The video is the star: about 75% of the row on wide screens, with the pastors' note as a slim
   column beside it; below 1100px the note drops underneath the full-width video. */
.page-about .about-vision__grid {
    display: grid;
    gap: var(--space-2xl);
    align-items: center;
    max-width: 960px;
    margin: 0 auto;
}
@media (min-width: 1100px) {
    .page-about .about-vision > .container { max-width: 1340px; }
    .page-about .about-vision__grid {
        max-width: 1300px;
        grid-template-columns: minmax(0, 4fr) minmax(230px, 1fr);
        gap: clamp(1.75rem, 2.5vw, 2.5rem);
    }
}
.page-about .about-video { margin: 0; }
/* Colour block offset behind the player, like the portrait frames */
.page-about .about-video__stage {
    position: relative;
    isolation: isolate;
    margin: 0 calc(clamp(10px, 1.5vw, 18px) + 4px) calc(clamp(10px, 1.5vw, 18px) + 4px) 0;
}
.page-about .about-video__stage::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--radius-xl);
    background: var(--color-marigold-light);
    translate: clamp(10px, 1.5vw, 18px) clamp(10px, 1.5vw, 18px);
    rotate: 1.5deg;
}
/* The 720p encode and its poster are true 16:9 (letterbox bars cropped off in the encode). */
.page-about .video-embed {
    position: relative;
    height: auto;
    padding: 0;
    aspect-ratio: 16 / 9;
    border: 6px solid #fff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #0F2236;
    box-shadow: 0 14px 30px -12px rgba(16, 36, 59, .45);
}
.page-about .video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0F2236;
    border-radius: calc(var(--radius-xl) - 6px);
}
/* The whole poster is the hit area, with the disc centred on it (Dimitri's call). */
.page-about .about-video__play {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: radial-gradient(circle at 50% 50%, rgba(10, 26, 48, .28) 0%, rgba(10, 26, 48, 0) 55%);
    cursor: pointer;
    --focus-color: #FFFFFF;
}
.page-about .about-video__play[hidden] { display: none; }
.page-about .about-video__play:focus-visible { outline-offset: -8px; }
.page-about .about-video__play-disc {
    display: grid;
    place-items: center;
    width: clamp(64px, 8vw, 88px);
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    background: var(--color-red-btn, #D2341D);
    color: #fff;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .38), 0 14px 30px -8px rgba(0, 0, 0, .5);
    transition: scale .25s var(--ease-soft, ease), box-shadow .25s var(--ease-soft, ease);
}
.page-about .about-video__play-disc svg {
    width: 44%;
    height: auto;
    margin-left: 6%;
    fill: currentColor;
}
.page-about .about-video__play:hover .about-video__play-disc,
.page-about .about-video__play:focus-visible .about-video__play-disc {
    scale: 1.07;
    box-shadow: 0 0 0 11px rgba(255, 255, 255, .45), 0 16px 34px -8px rgba(0, 0, 0, .55);
}
.page-about .about-video__caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: var(--space-md);
    font-size: var(--fs-sm);
    color: var(--color-text);
}
.page-about .about-video__caption strong { color: var(--color-brown); }
.page-about .about-video__link {
    text-decoration: underline;
    text-decoration-color: var(--color-marigold);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.page-about .about-video__link:hover strong,
.page-about .about-video__link:focus-visible strong { color: var(--color-ocean-dark); }
.page-about .about-video__time {
    display: inline-block;
    margin-left: .35rem;
    padding: .05em .65em;
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--color-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.page-about .pastors-note {
    position: relative;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: var(--paper-shadow);
}
.page-about .pastors-note__head {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.page-about .pastors-note__photo { flex: none; width: clamp(92px, 9vw, 112px); margin: 12px; }
.page-about .pastors-note__name {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 1.7rem + 1vw, 2.6rem);
    line-height: 1.02;
    color: var(--color-brown);
}
.page-about .pastors-note__title {
    margin-top: .3rem;
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-ocean-dark);
}
.page-about .pastors-note__quote {
    position: relative;
    margin: 0;
    padding: var(--space-lg) 0 0 2.6rem;
    border-top: 2px dashed var(--color-seafoam-dark);
}
.page-about .pastors-note__quote::before {
    content: '\201C';
    position: absolute;
    left: -.1rem;
    top: .55rem;
    font-family: var(--font-serif);
    font-size: 4.2rem;
    line-height: 1;
    color: var(--color-marigold);
}
/* The pastors' words in Noto Serif italic (a real italic, not Nunito slanted) */
.page-about .pastors-note__quote p {
    font-family: var(--font-serif);
    font-size: var(--fs-base);
    font-style: italic;
    line-height: 1.75;
    color: var(--color-text);
}
@media (max-width: 480px) {
    .page-about .pastors-note__head { gap: var(--space-md); }
    .page-about .pastors-note__quote { padding-left: 0; padding-top: 3.2rem; }
    .page-about .pastors-note__quote::before { top: .6rem; left: 0; }
}
/* Very narrow phones: the name and title get the full card width under the photo */
@media (max-width: 360px) {
    .page-about .pastors-note__head {
        flex-direction: column;
        gap: .5rem;
        text-align: center;
    }
    .page-about .pastors-note__photo { margin: 10px auto 4px; }
    .page-about .pastors-note__quote { padding-top: 3rem; text-align: center; }
    .page-about .pastors-note__quote::before { left: 50%; translate: -50% 0; }
}
/* Slim column beside the 75% video: stack the head, centre everything, keep it about video height */
@media (min-width: 1100px) {
    .page-about .pastors-note { padding: 1.6rem 1.35rem 1.75rem; text-align: center; }
    .page-about .pastors-note__head {
        flex-direction: column;
        gap: .35rem;
        margin-bottom: var(--space-md);
    }
    .page-about .pastors-note__photo { width: 88px; margin: 8px auto 6px; }
    .page-about .pastors-note__name { font-size: clamp(1.85rem, 1.2rem + .8vw, 2.2rem); }
    .page-about .pastors-note__quote { padding: 2.6rem 0 0; }
    .page-about .pastors-note__quote::before { top: .2rem; left: 50%; translate: -50% 0; font-size: 3.6rem; }
    .page-about .pastors-note__quote p { font-size: var(--fs-base); line-height: 1.65; }
}

/* --- Standards: aligned titles, one line each from 1100px -- */
.page-about .about-standards__grid { gap: var(--space-xl) var(--space-lg); }
.page-about .about-standards__grid .feature__icon .icon { width: 100%; height: 100%; }
@media (min-width: 601px) {
    .page-about .about-standards__grid .feature { padding: var(--space-lg) var(--space-md); }
    .page-about .about-standards__grid .feature__title { font-size: clamp(2rem, 2.6vw, 2.5rem); }
    @supports (grid-template-rows: subgrid) {
        /* icon / title / text rows line up across the row even if a title wraps */
        .page-about .about-standards__grid .feature {
            display: grid;
            grid-row: span 3;
            grid-template-rows: subgrid;
            row-gap: 0;
            align-content: start;
        }
        .page-about .about-standards__grid .feature__title { align-self: end; }
    }
}
.page-about .about-standards__grid .feature__text { text-wrap: pretty; }

/* --- How We Started: scrapbook mosaic ---------------------- */
.page-about .about-story__intro { max-width: 50rem; margin: 0 auto var(--space-2xl); }
.page-about .about-story__mosaic { max-width: 1040px; margin: 0 auto; }

/* ============================================================
   TEACHERS
   ============================================================ */
/* --- The team: one big portrait card each -------------------
   Three across from 1024px (5 people = 3 + 2, 6 = 3 + 3), two across below, with an odd last card
   centred. Portraits are about 310px wide on desktop and 290px on tablets; teachers.php serves
   360 / 540 / 720px files (JPEG + WebP) so they stay sharp on 1x to 2x screens. */
.page-teachers .teachers-team .inner-lead { margin-bottom: var(--space-3xl); }
.page-teachers .team-members {
    --gap-x: clamp(1.5rem, 3.4vw, 3rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(2.5rem, 4.5vw, 3.75rem) var(--gap-x);
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.page-teachers .team-member {
    flex: 0 0 calc((100% - 2 * var(--gap-x)) / 3);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    scroll-margin-top: calc(var(--header-condensed-h, 76px) + 1.5rem);
}
@media (max-width: 1023px) {
    .page-teachers .team-members { max-width: 720px; }
    .page-teachers .team-member { flex-basis: calc((100% - var(--gap-x)) / 2); }
}
/* Same margin on both sides whichever way the colour block leans, so photo and name line up */
.page-teachers .team-member__photo.frame-offset {
    width: calc(100% - 2 * (var(--frame-shift) + 6px));
    margin: 0 auto calc(var(--frame-shift) + 1.25rem);
}
.page-teachers .team-member__photo picture { display: block; }
.page-teachers .team-member__photo img {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 6px solid #fff;
    border-radius: var(--frame-radius);
    background: var(--color-sand);
    box-shadow: 0 16px 30px -14px rgba(98, 42, 20, .4);
}
.page-teachers .team-member__placeholder {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    border: 6px solid #fff;
    border-radius: var(--frame-radius);
    background: var(--color-sand);
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--color-brown);
}
.page-teachers .team-member__name {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 1.8rem + 1.2vw, 2.9rem);
    line-height: 1.02;
    color: var(--color-brown);
    text-wrap: balance;
}
.page-teachers .team-member__title {
    margin-top: .6rem;
    padding: .3em 1.05em;
    border-radius: var(--radius-pill);
    background: var(--color-sky);
    color: var(--color-ocean-dark);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.4;
}
.page-teachers .team-member__bio {
    max-width: 30rem;
    margin-top: var(--space-md);
    line-height: 1.7;
    text-wrap: pretty;
}
.page-teachers .team-member__class {
    margin-top: .75rem;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-ocean-dark);
    text-decoration: underline;
    text-decoration-color: var(--color-marigold);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.page-teachers .team-member__class:hover { color: var(--color-red-btn, #D2341D); }
/* Phones: two portraits per row */
@media (max-width: 599px) {
    .page-teachers .team-members { --gap-x: .9rem; row-gap: 2.25rem; }
    .page-teachers .team-member__photo.frame-offset { --frame-shift: 8px; margin-bottom: 1.1rem; }
    .page-teachers .team-member__photo img { border-width: 4px; }
    .page-teachers .team-member__name { font-size: clamp(1.75rem, 7.6vw, 2.1rem); }
    .page-teachers .team-member__title { margin-top: .45rem; padding: .25em .8em; font-size: .8rem; }
    .page-teachers .team-member__class { margin-top: .55rem; font-size: .85rem; }
}
/* Narrow phones (320-374px): keep names, titles and class links on one line where possible */
@media (max-width: 374px) {
    .page-teachers .team-member__name { font-size: 1.6rem; }
    .page-teachers .team-member__title { padding: .2em .65em; font-size: .72rem; letter-spacing: 0; }
    .page-teachers .team-member__class { font-size: .78rem; }
}

/* --- A team you can trust: group photo + what families can count on --- */
.page-teachers .teachers-trust__grid {
    display: grid;
    gap: var(--space-3xl) clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
    max-width: 1180px;
}
.page-teachers .teachers-trust__photo {
    --tilt: -2deg;
    justify-self: center;
    width: min(100%, 580px);
}
.page-teachers .teachers-trust__photo img { aspect-ratio: 3 / 2; }
.page-teachers .teachers-trust .section-title { margin-bottom: var(--space-xl); }
.page-teachers .promise-list {
    display: grid;
    gap: 1.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.page-teachers .promise { display: flex; gap: 1rem; align-items: flex-start; }
.page-teachers .promise .icon { flex: none; width: 52px; height: 52px; }
.page-teachers .promise p { margin: 0; line-height: 1.6; color: var(--color-text); text-wrap: pretty; }
.page-teachers .promise strong { display: block; color: var(--color-brown); font-size: var(--fs-md); line-height: 1.35; }
@media (min-width: 640px) and (max-width: 1023px) {
    .page-teachers .promise-list { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
}
@media (min-width: 1024px) {
    .page-teachers .teachers-trust__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .page-teachers .teachers-trust .section-title { text-align: left; }
}

/* Moments with the team */
.page-teachers .teachers-moments__mosaic { max-width: 1060px; margin: 0 auto; }

/* ============================================================
   PROGRAMS
   ============================================================ */
.page-programs .programs-intro .container { max-width: 54rem; }
/* The Parent Handbook credit under the ABEKA paragraph: a small italic citation tag */
.page-programs .programs-intro__source {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: fit-content;
    max-width: 100%;
    margin: var(--space-xl) auto 0;
    padding: .45rem 1.15rem .45rem .7rem;
    border-radius: 999px;
    background: var(--color-sand);
    font-family: var(--font-serif);   /* a real italic for the citation (Nunito italic isn't loaded) */
    font-size: .88rem;
    font-style: italic;
    line-height: 1.45;
    color: var(--color-text-light);
}
.page-programs .programs-intro__source-icon { flex: none; width: 30px; height: 30px; }
@media (max-width: 600px) {
    .page-programs .programs-intro__source { align-items: flex-start; margin-top: var(--space-lg); padding: .65rem .9rem .65rem .6rem; border-radius: var(--radius-lg); }
}

/* Small class size + limited spaces, right under the ratios */
.page-programs .programs-classes__note {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 1.5rem);
    max-width: 52rem;
    margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
    padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);
    border: 2px dashed rgba(98, 42, 20, .16);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, .6);
}
.page-programs .programs-classes__note-icon { flex: none; width: 64px; height: 64px; }
.page-programs .programs-classes__note p {
    margin: 0;
    font-size: var(--fs-base);
    line-height: 1.7;
    color: var(--color-text);
    text-wrap: pretty;
}
.page-programs .programs-classes__note strong { color: var(--color-brown); }
@media (max-width: 600px) {
    /* The text wraps around the icon instead of running down a narrow column */
    .page-programs .programs-classes__note { display: block; }
    .page-programs .programs-classes__note-icon { float: left; width: 46px; height: 46px; margin: .15rem .8rem .2rem 0; }
}

/* --- Class cards with age medallions ---------------------- */
.page-programs .program-grid {
    max-width: 1140px;
    margin: 0 auto;
    padding-top: 58px;
    gap: 92px var(--space-xl);
    align-items: stretch;
}
.page-programs .program-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 76px clamp(1.25rem, 2.4vw, 2rem) clamp(1.5rem, 2.4vw, 2rem);
    border-top: 0;
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: var(--paper-shadow);
    text-align: center;
}
.page-programs .program-card__medal {
    position: absolute;
    top: -50px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    border-radius: var(--radius-full);
    background: var(--medal-bg, var(--color-ocean));
    color: var(--medal-fg, #fff);
    box-shadow: 0 0 0 6px #fff, 0 12px 22px -10px rgba(98, 42, 20, .45);
    rotate: -7deg;
}
.page-programs .program-card__age {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 3.4rem;
    line-height: 1;
    letter-spacing: -.02em;
    translate: -2px .02em;
}
.page-programs .program-card__medal .program-card__icon {
    position: absolute;
    right: -46px;
    bottom: -12px;
    width: 58px;
    height: 58px;
    margin: 0;
    border-radius: var(--radius-full);
    box-shadow: 0 0 0 4px #fff, 0 8px 16px -8px rgba(98, 42, 20, .45);
    rotate: 14deg;
}
/* About 34px on phones (below the 40px section H2), about 50px on desktop */
.page-programs .program-card__name {
    font-size: clamp(2.1rem, 1.5rem + 1.8vw, 3.1rem);
    line-height: 1.05;
    margin-bottom: var(--space-sm);
}
/* "4-Year-Olds": the age in Nunito (Amatic's 4 reads as a "Ч"), as on the homepage cards */
.page-programs .program-card__num {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: .8em;
    letter-spacing: 0;
    margin-right: .04em;
}
.page-programs .program-card__ages {
    display: inline-block;
    margin-bottom: var(--space-lg);
    padding: .28em 1em;
    border-radius: var(--radius-pill);
    background: var(--color-sand);
    color: var(--color-brown);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .02em;
}
.page-programs .program-card__desc {
    flex: 1;
    margin-bottom: var(--space-lg);
    font-size: var(--fs-base);
    line-height: 1.7;
    color: var(--color-text);
    text-wrap: pretty;
}
.page-programs .program-card__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    width: 100%;
    margin: 0;
}
.page-programs .program-card__fact {
    padding: .75rem .35rem .7rem;
    border-radius: var(--radius-md);
    background: var(--color-cream);
    box-shadow: inset 0 0 0 1.5px var(--color-gray-200);
}
.page-programs .program-card__fact dt {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--color-text-light);
}
.page-programs .program-card__fact dd {
    margin: .2rem 0 0;
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-brown);
    font-variant-numeric: tabular-nums;
}
/* Tablet: 2 + 1 centred instead of a lonely card on the left */
@media (min-width: 769px) and (max-width: 1023px) {
    .page-programs .program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-programs .program-grid > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - var(--space-xl) / 2);
    }
}
@media (max-width: 768px) {
    .page-programs .program-grid { max-width: 30rem; }
}
/* 404 character: a crab stands in for the "0" between the 4s, claws up as if holding them. It rises
   once from the digits' baseline and stays (decor.css .char--rise; gallery.css styles the 404 art) */
.page-404 .nf__art svg.nf__pal {
    width: .9em;
    margin-inline: -.04em;
    translate: 0 -.1em;
}
/* Character (peekaboo, decor.css .char--peek): a little dino pops up from behind the 2-Year-Olds
   card's outer corner, waves and ducks back down; hovering the card brings it up again. The grid's
   58px top padding plus the subtitle's margin leave it clear room above the card at every width. */
.page-programs .program-card__pal {
    position: absolute;
    bottom: 100%;
    left: clamp(.75rem, 2vw, 1.5rem);
    width: 84px;
}
@media (max-width: 600px) {
    .page-programs .program-card__pal { width: 72px; }
}

/* --- Every class includes (band--squiggle) ---------------- */
.page-programs .includes-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
/* 8 items: 2 x 4 on tablets, 4 x 2 on desktop (no orphans) */
@media (min-width: 600px) {
    .page-programs .includes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .page-programs .includes-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.page-programs .include-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: 0 1px 2px rgba(98, 42, 20, .1), 0 12px 24px -14px rgba(98, 42, 20, .45);
    rotate: -.5deg;
}
.page-programs .include-card:nth-child(even) { rotate: .6deg; }
.page-programs .include-card:nth-child(3n) { rotate: -.2deg; }
.page-programs .include-card__icon { flex: none; width: 56px; height: 56px; }
.page-programs .programs-includes .include-card__title {
    margin: .15rem 0 .25rem;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-brown);
}
.page-programs .programs-includes .include-card__text {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--color-text);
}
.page-programs .programs-includes__more {
    margin-top: var(--space-xl);
    text-align: center;
    font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
    .page-programs .include-card { rotate: none; }
}

/* --- A peek inside ---------------------------------------- */
.page-programs .programs-peek__mosaic { max-width: 1120px; margin: 0 auto; }