/* ============================================================
   Homepage (below the hero): app/pages/home.php
   Sections: fact strip + What We Offer, A Day at OCA (polaroid mosaic), Our Programs (growth cards),
   Meet Our Teachers (the page's one loud band, cards straddling its edge), What Families Say
   (review carousel), closing photo CTA.
   Everything is scoped to body.page-home or to home-only class names.
   Section titles keep the default brown, as on every inner page; colour comes from the marigold
   hand-underline and the doodles, never from a whole heading. Section links are .btn--outline-ocean,
   so the red Enroll buttons stay the only filled ones.
   ============================================================ */

body.page-home {
    --home-card-shadow: 0 1px 2px rgba(98, 42, 20, .08), 0 16px 36px -18px rgba(98, 42, 20, .34);
}
.home-nowrap { white-space: nowrap; }

/* Centred action row under a section's content */
body.page-home .home-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin: clamp(2rem, 4vw, 3rem) 0 0;
}

/* Paragraphs read better without lonely last words */
:where(body.page-home main) p { text-wrap: pretty; }   /* zero specificity: subtitles keep their balance */

/* ------------------------------------------------------------
   1. Fact strip, floating over the hero's wave
   ------------------------------------------------------------ */
/* flow-root stops the strip's negative top margin collapsing through the section, which would drag the
   whole sunshine section up over the hero and hide its wave; now only the card rises. */
body.page-home .home-offer { padding-top: 0; display: flow-root; }

.fact-strip {
    /* Clear the hero wave (same clamp as hero.css --hero-wave-h; the photo edge sits ~60% of the way up it)
       and then float a little further over the photo, so the card straddles the edge instead of kissing it. */
    --fs-overlap: calc(clamp(46px, 7vw, 100px) * .6 + clamp(26px, 3vw, 44px));
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1060px;
    margin: calc(-1 * var(--fs-overlap)) auto clamp(3.5rem, 6.5vw, 5.5rem);
    padding: .9rem 1rem;
    list-style: none;
    background: var(--color-white);
    border-radius: 24px;
    box-shadow: var(--home-card-shadow);
}
/* Top-aligned, so every value shares one line even when a label wraps */
.fact-strip__item {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    min-width: 0;
    padding: .55rem 1.1rem;
}
.fact-strip__item > span { padding-top: .1rem; }
.fact-strip__item + .fact-strip__item {
    border-left: 2px dashed rgba(98, 42, 20, .13);
}
.fact-strip__item .icon {
    flex: none;
    width: 46px;
    height: 46px;
}
.fact-strip__value {
    display: block;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-brown);
}
.fact-strip__label {
    display: block;
    font-size: .9rem;
    line-height: 1.35;
    color: var(--color-text-light);
}
@media (max-width: 899px) {
    .fact-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 640px;
        padding: .5rem;
    }
    .fact-strip__item { padding: .8rem .9rem; }
    .fact-strip__item + .fact-strip__item { border-left: 0; }
    .fact-strip__item:nth-child(even) { border-left: 2px dashed rgba(98, 42, 20, .13); }
    .fact-strip__item:nth-child(n+3) { border-top: 2px dashed rgba(98, 42, 20, .13); }
}
@media (max-width: 479px) {
    .fact-strip { border-radius: 20px; }
    .fact-strip__item {
        flex-direction: column;
        align-items: center;
        gap: .4rem;
        padding: .8rem .35rem .75rem;
        text-align: center;
    }
    .fact-strip__item > span { padding-top: 0; }
    .fact-strip__item .icon { width: 40px; height: 40px; }
    .fact-strip__value { font-size: 1.02rem; }
    .fact-strip__label { font-size: .84rem; }
}

/* ------------------------------------------------------------
   2. What We Offer
   ------------------------------------------------------------ */
/* Keep the curly arrow clear of the page edge on mid widths */
@media (max-width: 1099px) {
    .home-offer .doodle--point-r { display: none; }
}
/* Four features: 4 across on wide screens, 2 x 2 on tablets (.feature-grid--4), icon beside text on phones */
.home-offer__grid { max-width: 1160px; }
@media (max-width: 600px) {
    .home-offer__grid .feature { padding-block: .7rem; }
}
/* The curriculum card leads: a white card with the old site's full ABEKA paragraph and, under a dashed
   rule, its Parent Handbook credit as a small italic attribution. From 601px it spans the row above the
   other four points (4 across from 1100px, 2 x 2 on tablets): icon and title on the left, the text at a
   readable measure on the right. Phones: first in the list, icon beside the title. */
.home-offer__grid .home-offer__lead {
    background: var(--color-white);
    border-radius: 26px;
    box-shadow: var(--home-card-shadow);
    text-align: left;
}
.home-offer__lead .feature__text strong { color: var(--color-brown); font-weight: 800; }
.home-offer__source {
    margin: 1rem 0 0;
    padding-top: .8rem;
    border-top: 1.5px dashed rgba(98, 42, 20, .16);
    font-family: var(--font-serif);   /* a real italic for the citation (Nunito italic isn't loaded) */
    font-size: .86rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--color-text-light);
}
@media (min-width: 601px) {
    .home-offer__grid .home-offer__lead {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 14rem) minmax(0, 44rem);
        grid-template-rows: auto auto;
        justify-content: center;
        align-content: center;
        margin-bottom: .25rem;
        padding: clamp(1.75rem, 3vw, 2.4rem) clamp(1.5rem, 4vw, 3rem);
    }
    .home-offer__lead .feature__icon { grid-area: 1 / 1; align-self: end; margin: 0 auto .7rem; }
    .home-offer__lead .feature__title { grid-area: 2 / 1; align-self: start; margin: 0; text-align: center; }
    .home-offer__lead-body {
        grid-area: 1 / 2 / 3 / 3;
        align-self: center;
        margin-left: clamp(1.5rem, 3.5vw, 3rem);
        padding-left: clamp(1.5rem, 3.5vw, 3rem);
        border-left: 2px dashed rgba(98, 42, 20, .13);
    }
}
@media (min-width: 601px) {
    .home-offer__grid .feature:not(.home-offer__lead) { padding-block: var(--space-lg) var(--space-md); }
}
/* Phones: icon beside the title, the paragraph full width under them */
@media (max-width: 600px) {
    .home-offer__grid .home-offer__lead {
        align-items: center;
        margin-bottom: .5rem;
        padding: 1.1rem 1.1rem 1.25rem;
    }
    .home-offer__lead .feature__icon { grid-row: auto; }
    .home-offer__lead .feature__title { margin: 0; }
    .home-offer__lead-body { grid-column: 1 / -1; margin-top: .75rem; }
}
/* Character (peekaboo, decor.css .char--peek): a baby eagle (the crest's eagle) pops up from behind
   the faith card's top-right corner, clear of the centred subtitle, waves and ducks back down; hovering
   the card brings it up again. Below 940px the subtitle reaches over the card's corners: not shown. */
.home-offer__grid .home-offer__lead { position: relative; }
.home-offer__lead .home-offer__pal {
    position: absolute;
    bottom: 100%;
    right: clamp(1.5rem, 4vw, 3.25rem);
    width: 92px;
}
@media (max-width: 939px) {
    .home-offer__lead .home-offer__pal { display: none; }
}

/* ------------------------------------------------------------
   3. A Day at OCA: polaroid mosaic on seafoam
   ------------------------------------------------------------ */
.home-life__mosaic {
    max-width: 1080px;
    margin: 0 auto;
}
.home-life__mosaic .polaroid img { background: var(--color-seafoam-dark); }
.home-life .doodle--tr { --dy: clamp(1.5rem, 3vw, 3rem); }

/* ------------------------------------------------------------
   4. Our Programs: seedling, sprout, tree
   ------------------------------------------------------------ */
.growth-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
    max-width: 1120px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.growth-card {
    --pc-tint: var(--tint-sky);
    --pc-ink: var(--ink-sky);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 0 clamp(1.25rem, 2vw, 1.75rem) 1.5rem;
    text-align: center;
    background: var(--color-white);
    border: 1px solid rgba(98, 42, 20, .07);
    border-radius: 26px;
    box-shadow: var(--home-card-shadow);
}
/* Wrappers only matter on tablets (side panel); elsewhere the card is one column */
.growth-card__id, .growth-card__body { display: contents; }
/* Tinted cap with a hand-cut wavy hem */
.growth-card__cap {
    align-self: stretch;
    height: 92px;
    margin: 0 calc(-1 * clamp(1.25rem, 2vw, 1.75rem));
    border-radius: 25px 25px 0 0;
    background: var(--pc-tint);
    -webkit-mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - 13px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 14'%3E%3Cpath d='M0 0h96v4c-8 0-9.6 8.6-16 8.6S72 4.8 64 4.8 56.6 12 48 12s-8.8-7.4-16-7.4S24 12.6 16 12.6 8 4 0 4z'/%3E%3C/svg%3E") bottom left / 96px 14px repeat-x;
    mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - 13px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 14'%3E%3Cpath d='M0 0h96v4c-8 0-9.6 8.6-16 8.6S72 4.8 64 4.8 56.6 12 48 12s-8.8-7.4-16-7.4S24 12.6 16 12.6 8 4 0 4z'/%3E%3C/svg%3E") bottom left / 96px 14px repeat-x;
}
/* Medallion, as on /programs: a solid disc in the class colour with a white ring, a Nunito age number
   (Amatic's 4 reads as a "Ч") and the plant sticker on its shoulder. Tilts use transform, so the
   sticker's hover wiggle (the rotate property) still works. */
.growth-card__badge {
    --pc-ring: var(--color-white);
    position: relative;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    margin: -58px 0 1.1rem;
    border-radius: 50%;
    background: var(--pc-medal, var(--pc-ink));
    color: var(--pc-digit, #fff);
    box-shadow: 0 0 0 6px var(--pc-ring), 0 12px 22px -10px rgba(98, 42, 20, .45);
    transform: rotate(-7deg);
}
.growth-card__num {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 3.4rem;
    line-height: 1;
    letter-spacing: -.02em;
    translate: -2px .02em;
}
.growth-card__plant {
    position: absolute;
    right: -34px;
    bottom: -10px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--color-white), 0 8px 16px -8px rgba(98, 42, 20, .45);
    transform: rotate(21deg);   /* 14deg on screen, after the medallion's -7deg */
}
.growth-card__name {
    margin: 0 0 .4rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 1.8rem + 1vw, 2.6rem);
    line-height: 1.05;
    color: var(--color-brown);
}
/* "4-Year-Olds": the age in Nunito, sized to sit on the Amatic capitals */
.home-num {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: .8em;
    letter-spacing: 0;
    margin-right: .04em;
}
.growth-card__link {
    color: inherit;
    text-decoration: none;
}
.growth-card__link:hover { color: inherit; }
/* The whole card is the link's hit area */
.growth-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 26px;
}
.growth-card__link:focus-visible { outline: none; }
.growth-card:has(.growth-card__link:focus-visible) {
    outline: 3px solid var(--focus-color, #1F4E80);
    outline-offset: 4px;
}
.growth-card__ages {
    display: inline-block;
    margin: 0 0 1rem;
    padding: .28em 1em;
    border-radius: var(--radius-pill, 999px);
    background: var(--pc-tint);
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--color-brown);
}
.growth-card__desc {
    margin: 0 0 1.25rem;
    font-size: .98rem;
    line-height: 1.65;
    color: var(--color-text);
}
.growth-card__facts {
    align-self: stretch;
    margin: auto 0 0;
    text-align: left;
}
.growth-card__facts > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    padding: .55rem 0;
    border-top: 1.5px dashed rgba(98, 42, 20, .14);
    font-size: .92rem;
}
.growth-card__facts dt { color: var(--color-text-light); }
.growth-card__facts dd {
    margin: 0;
    font-weight: 700;
    color: var(--color-brown);
    text-align: right;
}
.growth-card__more {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    margin-top: 1rem;
    font-weight: 800;
    font-size: .95rem;
    color: var(--pc-ink);
}
.growth-card--sun .growth-card__more { color: var(--color-gold-text, #8A5F12); }
.growth-card__more::after {
    content: '\2192';
    transition: translate .25s var(--ease-soft, ease);
}
.growth-card:hover .growth-card__more::after { translate: 4px 0; }

/* Practical notes under the cards: days and age cut-off, after care, limited spaces */
.home-programs__notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem clamp(1.25rem, 2.6vw, 2.25rem);
    max-width: 1120px;
    margin: clamp(1.75rem, 3vw, 2.25rem) auto 0;
    padding: 1.1rem clamp(1.1rem, 2.2vw, 1.75rem);
    list-style: none;
    border: 2px dashed rgba(98, 42, 20, .14);
    border-radius: 22px;
}
.home-programs__notes li {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    min-width: 0;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--color-text);
}
.home-programs__notes .icon { flex: none; width: 44px; height: 44px; }
.home-programs__notes li > span { padding-top: .1rem; }
@media (max-width: 899px) {
    .home-programs__notes { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
}
.home-programs__notes + .home-actions { margin-top: 1.5rem; align-items: center; column-gap: var(--space-xl); }

@media (max-width: 899px) {
    .growth-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 720px;
        row-gap: 1.5rem;
    }
}
/* Tablets: the age panel sits on the left with a wavy hem, the details on the right */
@media (min-width: 600px) and (max-width: 899px) {
    .growth-card {
        flex-direction: row;
        align-items: stretch;
        padding: 0;
        text-align: left;
    }
    .growth-card__id {
        position: relative;
        display: flex;
        flex: 0 0 216px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1.75rem 1.5rem 1.75rem 1rem;
        text-align: center;
        background: var(--pc-tint);
        border-radius: 25px 0 0 25px;
        -webkit-mask:
            linear-gradient(#000 0 0) left / calc(100% - 13px) 100% no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 96'%3E%3Cpath d='M0 0v96h4c0-8 8.6-9.6 8.6-16S4.8 72 4.8 64 12 56.6 12 48s-7.4-8.8-7.4-16S12.6 24 12.6 16 4 8 4 0z'/%3E%3C/svg%3E") right top / 14px 96px repeat-y;
        mask:
            linear-gradient(#000 0 0) left / calc(100% - 13px) 100% no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 96'%3E%3Cpath d='M0 0v96h4c0-8 8.6-9.6 8.6-16S4.8 72 4.8 64 12 56.6 12 48s-7.4-8.8-7.4-16S12.6 24 12.6 16 4 8 4 0z'/%3E%3C/svg%3E") right top / 14px 96px repeat-y;
    }
    .growth-card__cap { display: none; }
    .growth-card__badge { margin: 0 0 .9rem; }
    .growth-card__ages { margin: 0; background: var(--color-white); }
    .growth-card__body {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-width: 0;
        padding: 1.5rem 1.75rem 1.1rem 1.25rem;
    }
    .growth-card__desc { margin-bottom: 1rem; }
    .growth-card__more { align-self: flex-start; margin-top: .6rem; }
}
/* Phones: compact header row, the description lives on /programs */
@media (max-width: 599px) {
    .growth-grid { row-gap: 1.25rem; }
    .growth-card {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr);
        column-gap: 1rem;
        align-items: center;
        padding: 1.25rem 1.1rem 1.1rem;
        text-align: left;
    }
    .growth-card__cap, .growth-card__desc { display: none; }
    /* No tinted cap on phones: the ring turns pastel so the disc still has its halo on white */
    .growth-card__badge {
        --pc-ring: var(--pc-tint);
        grid-row: span 2;
        width: 74px;
        height: 74px;
        margin: 5px 0 5px 5px;
        box-shadow: 0 0 0 5px var(--pc-ring), 0 8px 18px -10px rgba(98, 42, 20, .45);
    }
    .growth-card__num { font-size: 2.5rem; }
    .growth-card__plant { width: 36px; height: 36px; right: -14px; bottom: -8px; box-shadow: 0 0 0 3px var(--color-white), 0 6px 12px -6px rgba(98, 42, 20, .45); }
    .growth-card__name { align-self: end; margin: 0; font-size: 2.1rem; }
    .growth-card__ages { justify-self: start; align-self: start; margin: .3rem 0 0; font-size: .85rem; }
    .growth-card__facts { grid-column: 1 / -1; margin-top: 1rem; }
    .growth-card__more { grid-column: 1 / -1; margin-top: .6rem; }
}

/* ------------------------------------------------------------
   5. Meet Our Teachers: marigold squiggle band, cards straddle its edge
   ------------------------------------------------------------ */
.home-team {
    --team-overlap: clamp(112px, 12vw, 172px);
    position: relative;
    background: var(--color-white);
}
.home-team__band {
    position: relative;
    isolation: isolate;
    padding: calc(var(--space-4xl) + 20px) 0 calc(var(--team-overlap) + clamp(2rem, 3.5vw, 3rem));
}
.home-team__band .section-subtitle { margin-bottom: 0; }
/* Keep the hand-drawn marker shape on the band (just in white) */
.home-team__band .hand-underline::after {
    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='%23FFFFFF' 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='%23FFFFFF' stroke-width='3' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    opacity: .85;
}
.home-team__band .doodle--point-l { --doodle-rotate: 8deg; }
.home-team__body {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--team-overlap));
}
/* The whole team (5): one row of five on desktop; 3 + 2 on tablets and 2 + 2 + 1 on phones, with the
   short last row centred (half-column offsets on a doubled track count). */
.team-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.6rem);
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.team-grid > li { display: flex; min-width: 0; }
.team-card {
    --focus-color: #1F4E80;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: clamp(1.5rem, 2.6vw, 2.1rem) 1rem 1.5rem;
    text-align: center;
    color: inherit;
    text-decoration: none;
    background: var(--color-white);
    border-radius: 24px;
    box-shadow: var(--home-card-shadow);
}
.team-card:hover { color: inherit; }
.team-card__ring {
    width: min(168px, 74%);
    margin: 12px 0 1.15rem;
}
.team-card__placeholder {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-sand);
    font-family: var(--font-display);
    font-size: 4rem;
    color: var(--color-brown);
}
/* Photos stay level across the row; name (and role, when there is one) centre in the space below,
   so a card without a confirmed role has no empty band at the bottom */
.team-card__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.team-card__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 1.5rem + 1vw, 2.3rem);
    line-height: 1.05;
    color: var(--color-brown);
    text-wrap: balance;
}
.team-card__role {
    margin-top: .35rem;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-ocean-dark);
}
.home-team__body .home-actions { margin-top: clamp(2rem, 3.5vw, 2.75rem); }

@media (min-width: 1024px) {
    .team-card { padding-inline: .75rem; }
    .team-card__ring { width: min(150px, 78%); }
    .team-card__name { font-size: clamp(1.8rem, 1.2rem + .9vw, 2.15rem); }
}
@media (max-width: 1023px) {
    .team-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        max-width: 760px;
    }
    .team-grid > li { grid-column: span 2; }
    .team-grid > li:nth-child(4) { grid-column: 2 / span 2; }
    .home-team { --team-overlap: clamp(104px, 16vw, 140px); }
}
@media (max-width: 599px) {
    .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .team-grid > li:nth-child(4) { grid-column: auto / span 2; }
    .team-grid > li:nth-child(5) { grid-column: 2 / span 2; }
}
@media (max-width: 599px) {
    .team-grid { gap: .9rem; }
    .team-card { padding: 1.2rem .6rem 1.1rem; border-radius: 20px; }
    .team-card__ring { width: min(124px, 80%); margin: 10px 0 .9rem; }
    .team-card__name { font-size: 1.75rem; }
    .team-card__role { font-size: .72rem; letter-spacing: .08em; }
}
/* Six people (Vickie appears only when she opts in, app/data/team.php): one row of six from 1200px,
   3 + 3 from 600px and 2 + 2 + 2 on phones. After the five-person rules, so these win. */
@media (min-width: 1200px) {
    .team-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1240px; gap: 1.1rem; }
    .team-grid--6 .team-card { padding-inline: .5rem; }
    .team-grid--6 .team-card__ring { width: min(140px, 80%); }
    .team-grid--6 .team-card__name { font-size: clamp(1.75rem, 1.1rem + .8vw, 2rem); }
    .team-grid--6 .team-card__role { font-size: .72rem; letter-spacing: .06em; }
}
@media (min-width: 600px) and (max-width: 1199px) {
    .team-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; }
    .team-grid--6 > li:nth-child(n) { grid-column: auto; }
}
@media (max-width: 599px) {
    .team-grid--6 > li:nth-child(n) { grid-column: span 2; }
}

/* ------------------------------------------------------------
   6. What Families Say: one big speech bubble at a time
   ------------------------------------------------------------ */
.home-reviews .doodle--tl { --doodle-color: var(--color-red); }
.home-reviews__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}
.home-reviews__intro { text-align: center; }
.home-reviews__intro .section-subtitle { margin-bottom: clamp(1.25rem, 3vw, 2rem); }

.review-carousel {
    --review-pad-b: 1.25rem;   /* track's bottom padding: the reviewer row sits on it */
    --review-avatar: 58px;
    --review-pill: 52px;       /* controls: 44px buttons + 4px padding */
    --review-mark: clamp(5.5rem, 4.4rem + 3vw, 7.5rem);   /* quote marks; each pokes out about .28em */
    position: relative;
    width: 100%;
    max-width: 860px;
    min-width: 0;
}
/* Each bubble is as tall as its words, rising from its reviewer like speech. The track keeps the
   tallest slide's height (no jumps while it rotates) and sits every slide on its floor, so each
   reviewer is on the same row as the controls whichever review is showing (or opened up). */
.review-track {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: 2.6rem 0 var(--review-pad-b);
    border-radius: 12px;
}
html.js .review-track { scrollbar-width: none; }
html.js .review-track::-webkit-scrollbar { display: none; }
.review-track:focus-visible { outline-offset: -3px; }
.review-slide {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0 14px;
    scroll-snap-align: center;
}
.review-bubble {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(2.4rem, 4.4vw, 3.25rem) clamp(1.4rem, 4.4vw, 3.4rem) clamp(1.6rem, 3vw, 2.3rem);
    background: var(--color-white);
    border-radius: 30px;
    box-shadow: 0 1px 2px rgba(31, 78, 128, .1), 0 18px 36px -20px rgba(31, 78, 128, .45);
}
/* Speech-bubble tail, bottom left, pointing at the reviewer */
.review-bubble::after {
    content: '';
    position: absolute;
    left: clamp(2.2rem, 5vw, 3.6rem);
    bottom: -25px;
    width: 42px;
    height: 28px;
    background: var(--color-white);
    clip-path: path('M0 0H42C33 6 22 15 5 28C10 17 10 8 0 0Z');
    filter: drop-shadow(0 6px 5px rgba(31, 78, 128, .12));
}
/* Marks stay Georgia Bold (a system face with a real bold; Noto Serif ships 400 only) */
.review-bubble__mark {
    position: absolute;
    top: -.36em;
    left: clamp(1rem, 3.6vw, 2.4rem);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: var(--review-mark);
    font-weight: 700;
    line-height: 1;
    color: var(--color-marigold);
    text-shadow: 0 3px 0 rgba(98, 42, 20, .08);
    pointer-events: none;
    user-select: none;
}
/* The closing mark is the opening one turned half a turn about the bubble's centre: same glyph, size,
   colour and offset, at the bottom right, straddling the edge under the last line (the bubble's bottom
   padding keeps it off the words; "Read more" sits at the left). The shadow is flipped so that after
   the turn it still falls downwards. */
.review-bubble__mark--close {
    top: auto;
    left: auto;
    bottom: -.36em;
    right: clamp(1rem, 3.6vw, 2.4rem);
    rotate: 180deg;
    text-shadow: 0 -3px 0 rgba(98, 42, 20, .08);
}
/* Families' words in Noto Serif: upright for the longer reviews (easiest to read at length), italic
   for the short ones, which are set big like a pull quote. Noto Serif's x-height is about 10% taller
   than Nunito's, so the sizes are a step smaller than the sans they replace. */
.review-bubble__quote {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.02rem, .96rem + .25vw, 1.14rem);
    line-height: 1.75;
    color: var(--color-text);
}
.review-bubble__quote p + p { margin-top: .85em; }
.review-slide--medium .review-bubble__quote {
    font-size: clamp(1.06rem, .96rem + .45vw, 1.26rem);
    line-height: 1.68;
}
.review-slide--short .review-bubble__quote {
    font-size: clamp(1.24rem, 1.06rem + .8vw, 1.56rem);
    font-style: italic;
    line-height: 1.55;
    color: var(--color-brown);
    text-wrap: balance;
}
/* A one-liner ("My grandkids go here and love it!") is set biggest, in a compact bubble */
.review-slide--tiny .review-bubble {
    padding-top: clamp(2.6rem, 4vw, 3rem);
    padding-bottom: clamp(1.7rem, 3vw, 2.2rem);
}
.review-slide--tiny .review-bubble__quote {
    font-size: clamp(1.45rem, 1.14rem + 1.2vw, 1.95rem);
    line-height: 1.35;
}
/* In the carousel the track keeps the tallest review's height and stands every slide on its floor, so
   the shorter bubbles get a floor height (words centred in it): a one-liner doesn't leave a tall empty
   band above it. Without JS each bubble is just as tall as its words. */
html.js .review-bubble {
    justify-content: center;
    min-height: 13rem;
}
/* Folded long reviews (JS only; without JS every word is visible) */
html.js .review-bubble__quote.is-clamped {
    max-height: calc(1.75em * 7);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 3.2em), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 3.2em), transparent);
}
.review-bubble__more {
    align-self: flex-start;
    min-height: 44px;
    margin: .25rem 0 -.6rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .98rem;
    font-weight: 800;
    color: var(--color-ocean-dark);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--color-marigold);
    text-underline-offset: 5px;
    cursor: pointer;
}
.review-bubble__more:hover { color: var(--color-brown); }
.review-bubble__more[hidden] { display: none; }

.review-author {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: var(--review-avatar);
    margin-top: 2.2rem;
    padding-left: clamp(1.1rem, 3.6vw, 2.4rem);
}
.review-author__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--review-avatar);
    height: var(--review-avatar);
    border-radius: 50%;
    border: 3px solid var(--color-white);
    box-shadow: 0 0 0 2.5px var(--color-marigold), 0 6px 14px -8px rgba(31, 78, 128, .5);
    object-fit: cover;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}
.review-author__avatar--sun { background: var(--tint-sun); color: #8A5F12; }
.review-author__avatar--sky { background: var(--tint-sky); color: #2D5A8A; }
.review-author__avatar--coral { background: var(--tint-coral); color: #B42C18; }
.review-author__avatar--sea { background: var(--tint-sea); color: #22694A; }
.review-author__avatar--lilac { background: var(--tint-lilac); color: #5F4590; }
.review-author__who { display: flex; flex-direction: column; min-width: 0; }
.review-author__name {
    font-style: normal;
    font-weight: 800;
    font-size: 1.08rem;
    color: var(--color-brown);
}

.home-reviews__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    margin-top: 1.25rem;
}
.home-reviews__google { font-size: 1rem; }

/* Controls: a small pill like the hero's, in white. From 600px it sits on the reviewer's row, at the
   right of the bubble: every slide stands on the track's floor, so the row lines up for each review. */
.review-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    width: fit-content;
    padding: 4px;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-white);
    box-shadow: 0 1px 2px rgba(31, 78, 128, .12), 0 10px 22px -14px rgba(31, 78, 128, .55);
}
.review-controls[hidden] { display: none; }
.review-controls__btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-ocean-dark);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.review-controls__btn:hover { background: var(--color-sky); color: var(--color-brown); }
.review-controls__btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.review-controls__toggle .icon-play { display: none; fill: currentColor; stroke-width: 1.6; }
.review-controls__toggle.is-paused .icon-play { display: block; }
.review-controls__toggle.is-paused .icon-pause { display: none; }
.review-controls__count {
    min-width: 4.2em;
    font-size: .95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--color-brown);
}
@media (min-width: 600px) {
    .review-controls {
        position: absolute;
        z-index: 1;
        right: 14px;   /* the slide's side padding: flush with the bubble's right edge */
        bottom: calc(var(--review-pad-b) + (var(--review-avatar) - var(--review-pill)) / 2);
    }
    /* a long name wraps before it could reach the controls */
    html.js .review-author { padding-right: 14.5rem; }
    html.js .review-bubble { min-height: 16.5rem; }
    /* The closing mark hangs over the controls: drop the row by the mark's overhang plus clear air,
       and stretch the bubble's tail to match so it still points right at the reviewer */
    .review-author { margin-top: calc(var(--review-mark) * .28 + 1rem); }
    .review-bubble::after {
        bottom: -33px;
        height: 36px;
        clip-path: path('M0 0H42C33 8 22 19 5 36C10 22 10 10 0 0Z');
    }
}

/* Desktop: heading on the left, the bubble on the right */
@media (min-width: 1024px) {
    .home-reviews__layout {
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        grid-template-rows: 1fr auto auto 1fr;
        grid-template-areas: ". carousel" "intro carousel" "actions carousel" ". carousel";
        column-gap: clamp(2.5rem, 5vw, 4.5rem);
        justify-items: stretch;
        align-items: start;
    }
    .home-reviews__intro { grid-area: intro; text-align: left; }
    .home-reviews__intro .section-title { text-align: left; }
    .home-reviews__intro .section-subtitle { margin-left: 0; margin-bottom: 0; text-align: left; }
    .review-carousel { grid-area: carousel; justify-self: end; }
    .home-reviews__actions { grid-area: actions; align-items: flex-start; margin-top: 1rem; }
    .home-reviews .doodle--tl { --dx: clamp(1rem, 3vw, 3rem); }
}
@media (max-width: 599px) {
    /* the next review peeks in, which says "swipe"; the reviewers line up along the floor */
    .review-track { gap: .5rem; margin: 0 calc(-1 * var(--space-md)); padding-inline: var(--space-md); scroll-padding-inline: var(--space-md); }
    .review-slide { flex-basis: 90%; padding: 0 6px; }
    .review-bubble { border-radius: 24px; }
    html.js .review-bubble__quote.is-clamped { max-height: calc(1.75em * 9); }
    .review-author { margin-top: 2rem; }
    /* No room beside a name on a phone: the controls get their own row, centred under the reviewers */
    .review-controls { margin: .5rem auto 0; }
}
/* Without JS there are no controls and nothing folds, so the carousel becomes a short stacked list:
   three reviews (home.php picks the shorter ones), each bubble as tall as its words, and the
   "Read all our reviews on Google" link for the rest. */
html:not(.js) .review-track {
    display: grid;
    gap: clamp(4rem, 6vw, 4.75rem);   /* room for the next bubble's quote mark */
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
}
html:not(.js) .review-slide:not(.review-slide--pick) { display: none; }
@media (min-width: 1024px) {
    html:not(.js) .home-reviews__layout {
        grid-template-rows: auto auto 1fr;
        grid-template-areas: "intro carousel" "actions carousel" ". carousel";
    }
}

/* ------------------------------------------------------------
   7. Closing CTA: photo split on ocean (the footer wave laps over its bottom)
   ------------------------------------------------------------ */
.home-cta {
    --focus-color: #FFFFFF;
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    padding: clamp(4rem, 7vw, 6rem) 0 calc(clamp(4rem, 7vw, 6rem) + var(--footer-wave-h, 72px));
    color: var(--color-white);
    /* The top edge is flat ocean, the exact fill of the reviews wave above, so there is no seam; it
       deepens downwards. Sunlight glows behind the photo only, never behind the white copy. */
    --cta-deepen: linear-gradient(180deg, #3E79B5 0%, #3E79B5 6%, #33689F 55%, #2D5A8A 100%);
    background:
        radial-gradient(ellipse 34% 52% at 26% 46%, rgba(255, 209, 102, .2) 0%, rgba(255, 209, 102, 0) 70%),
        var(--cta-deepen);
}
@media (max-width: 899px) {
    .home-cta {
        background:
            radial-gradient(ellipse 70% 22% at 50% 20%, rgba(255, 209, 102, .2) 0%, rgba(255, 209, 102, 0) 70%),
            var(--cta-deepen);
    }
}
.home-cta__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
    max-width: 1120px;
}
.home-cta__photo { position: relative; }
.home-cta__polaroid {
    max-width: 520px;
    margin-left: auto;
    box-shadow: 0 2px 4px rgba(8, 22, 42, .25), 0 26px 44px -18px rgba(8, 22, 42, .6);
}
.home-cta__sparkle {
    position: absolute;
    top: -26px;
    right: -14px;
    z-index: 3;
}
.home-cta .doodle--tr { --dy: clamp(2rem, 4vw, 3.5rem); --dx: clamp(1rem, 4vw, 4rem); }.home-cta__event {
    display: inline-flex;
    align-items: center;
    gap: .2em;
    min-height: 40px;
    margin-bottom: 1.1rem;
    padding: .35em 1.1em;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-marigold);
    color: var(--color-brown);
    font-size: .92rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 16px -10px rgba(8, 22, 42, .6);
    transition: translate .25s var(--ease-soft, ease), background-color .2s ease;
}
.home-cta__event:hover { color: var(--color-brown); background: var(--color-marigold-light); translate: 0 -2px; }
.home-cta__event:focus-visible { outline-color: #fff; }
.home-cta__title {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.7rem, 1.9rem + 3vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: .02em;
    color: var(--color-white);
    text-wrap: balance;
}
.home-cta__text {
    max-width: 30em;
    margin: 0;
    font-size: clamp(1.1rem, 1rem + .35vw, 1.28rem);
    line-height: 1.6;
    color: var(--color-white);
}
.home-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: 2rem;
}
.home-cta__call {
    margin: 1.4rem 0 0;
    font-size: 1rem;
    color: var(--color-white);
}
.home-cta__call a {
    color: var(--color-white);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: var(--color-marigold-light);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.home-cta__call a:hover { color: var(--color-marigold-light); }

@media (max-width: 899px) {
    .home-cta__grid {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }
    .home-cta__photo { width: min(100%, 440px); }
    .home-cta__polaroid { margin: 0 auto; }
    .home-cta__text { margin-inline: auto; }
    .home-cta__buttons { justify-content: center; }
}
.home-cta__event-short { display: none; }
@media (max-width: 479px) {
    .home-cta__event-long { display: none; }
    .home-cta__event-short { display: inline; }
    .home-cta__photo { width: calc(100% - 20px); }
    .home-cta__polaroid { --tilt: -2deg; }
    .home-cta__buttons .btn { flex: 1 1 100%; }
    .home-cta__sparkle { right: -8px; top: -22px; width: 38px; }
}

/* ------------------------------------------------------------
   Reduced motion: no autoplay (JS), no nudges
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .growth-card__more::after, .home-cta__event { transition: none; }
    .growth-card:hover .growth-card__more::after, .home-cta__event:hover { translate: none; }
    .review-track { scroll-behavior: auto; }
}