/* ============================================================
   Homepage hero slider ("sunlit coastal scrapbook")
   Markup: app/pages/home.php (the <!-- Hero --> section). Behaviour: assets/js/hero.js.
   Overrides the legacy .hero rules in style.css.

   Layers inside .hero (one stacking context):
     0-1  slide photo, overlay, paper plane and the other slides' pencil sketches
          (.hero-slide__media; the active slide on top)
     2    ambient doodles: sun and gulls        (.hero__ambient)
     3    slide text, wave                      (.hero__content, .hero__wave)
     4    controls                              (.hero__controls)
   Without JS, slide 1 shows on its own, the controls stay hidden and nothing loops
   (the endless doodle loops need .hero--js, which hero.js adds with the pause button).
   Per-slide knobs (inline style on .hero-slide): --pos (desktop focal point), --pos-sm and
   --align-sm (focal point and copy anchoring at <= 768px), --kb-origin (Ken Burns drift),
   --fl-x / --fl-y (where the plane parks), --shade (overlay).
   Layouts: >= 1024px copy on the left over a full-bleed photo; <= 1023px centred copy over
   the photo. At <= 768px the photo keeps a light wash and the dark pool sits only behind
   the eyebrow, headline and paragraph (.hero__copy), so more of each photo shows.
   ============================================================ */

.hero {
    --hero-navy: 18 42 76;                       /* rgb() triplet for the scrims */
    --hero-wave-h: clamp(46px, 7vw, 100px);
    --hero-controls-h: 48px;
    /* How far the homepage fact strip (home.css .fact-strip --fs-overlap) rises over the hero; keep in sync */
    --hero-lift: calc(var(--hero-wave-h) * .6 + clamp(26px, 3vw, 44px));
    --hero-spring: cubic-bezier(.34, 1.56, .64, 1);
    --hero-out: cubic-bezier(.22, 1, .36, 1);
    --hero-fade: 1s;

    position: relative;
    display: block;
    min-height: 0;
    margin-top: calc(-1 * var(--header-height));
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background: #1B3554;                         /* behind the photo until it paints */
    background-image: none;
    color: var(--color-white);
}

/* --- Slides --------------------------------------------------- */
.hero__slides {
    display: grid;
    min-height: clamp(680px, 86vh, 760px);
    padding: calc(var(--header-height) + .5rem) 0 calc(var(--hero-lift) + 1.25rem + var(--hero-controls-h) + 2.5rem);
    /* hero.js handles horizontal swipes; without this the browser reads a sideways pan as
       its own back/forward gesture and leaves the page. Vertical scroll and zoom still work. */
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: contain;
}

.hero-slide {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    min-width: 0;
    visibility: hidden;
}
.hero-slide.is-active,
.hero-slide.is-leaving {
    visibility: visible;
}

.hero-slide__inner {
    min-width: 0;
}
/* The outgoing slide's words fade quickly while the next photo cross-fades in */
.hero-slide.is-leaving .hero-slide__inner {
    opacity: 0;
    transition: opacity .35s ease;
}

/* --- Photo + overlay ------------------------------------------ */
.hero-slide__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    opacity: 0;
    background: #1B3554;
}
/* Slides 2+ stay display:none (so their lazy images are not fetched) until hero.js primes them */
.hero-slide:not(.is-active):not(.is-leaving):not(.is-primed) .hero-slide__media {
    display: none;
}
.hero-slide.is-active .hero-slide__media {
    z-index: 1;
    opacity: 1;
    transition: opacity var(--hero-fade) ease;
}
.hero-slide.is-leaving .hero-slide__media {
    opacity: 1;
}

.hero-slide__media picture,
.hero-slide__media img {
    display: block;
    width: 100%;
    height: 100%;
}
.hero-slide__media img {
    position: absolute;
    inset: 0;
    max-width: none;
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
    transform: scale(1);
    transform-origin: var(--kb-origin, 50% 50%);
    /* Snap back to scale(1) only once the slide is fully hidden */
    transition: transform 0s linear calc(var(--hero-fade) + .2s);
}

/* Warm navy scrims: a dark pool behind the words, a top band so the white nav reads,
   a soft floor for the controls; the rest of the photo keeps its colour.
   Tablet/phone (centred text) first, desktop (left text) below. */
.hero-slide__media::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: var(--shade, 1);
    background:
        radial-gradient(ellipse 62% 50% at 50% 52%, rgb(var(--hero-navy) / .82) 0%, rgb(var(--hero-navy) / .62) 55%, rgb(var(--hero-navy) / 0) 100%),
        linear-gradient(180deg, rgb(var(--hero-navy) / .74) 0%, rgb(var(--hero-navy) / .3) 30%, rgb(var(--hero-navy) / .24) 70%, rgb(var(--hero-navy) / .6) 100%);
}

/* --- Text ----------------------------------------------------- */
.hero .hero__content {
    position: relative;
    z-index: 3;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}
.hero__copy {
    position: relative;
}

.hero .hero__badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .3em;
    margin: 0 0 var(--space-md);
    padding: .12em .9em .1em;
    background: var(--color-red-btn, #D2341D);
    color: var(--color-white);
    border-radius: var(--radius-pill, 999px);
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transform: rotate(-3deg);
    box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .55);
    animation: none;
}
/* Stitched-patch edge */
.hero .hero__badge::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1.5px dashed rgba(255, 255, 255, .55);
    border-radius: inherit;
    pointer-events: none;
}
.hero__badge-arrow {
    width: .62em;
    height: .62em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s var(--hero-out);
}
a.hero__badge {
    transition: transform .25s var(--hero-out), box-shadow .25s ease, background-color .2s ease;
}
a.hero__badge:hover {
    color: var(--color-white);
    background: var(--color-red-btn-hover, #B42C18);
    transform: rotate(-1.5deg) translateY(-2px);
    box-shadow: 0 14px 24px -10px rgba(0, 0, 0, .6);
}
a.hero__badge:hover .hero__badge-arrow {
    transform: translateX(3px);
}
a.hero__badge:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 4px;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    margin: 0 0 .35rem;
    color: var(--color-marigold-light, #FFD166);
    font-size: clamp(.9rem, .85rem + .25vw, 1.05rem);
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgb(12 30 58 / .8), 0 0 12px rgb(12 30 58 / .6);
}
/* Little hand-drawn dash before the eyebrow */
.hero__eyebrow::before {
    content: '';
    width: 1.9em;
    height: .5em;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 10'%3E%3Cpath d='M2 6.2c6-3 11.5-3.4 17.6-1.2 5.6 2 10.6 1.6 16.4-1.8' fill='none' stroke='%23FFD166' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hero .hero__title {
    margin: 0 0 var(--space-md);
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: clamp(3rem, 1.5rem + 7.5vw, 7rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: .01em;
    text-wrap: balance;
    text-shadow: 0 0 2px rgb(12 30 58 / .85), 0 0 12px rgb(12 30 58 / .75), 0 4px 28px rgb(12 30 58 / .6);
}
.hero .hero__title--sub {
    font-size: clamp(3rem, 1.6rem + 5.2vw, 6.1rem);
    line-height: 1;
}

.hero__word {
    position: relative;
    display: inline-block;
}
.hero .hero__title .word-play { color: var(--color-marigold-light, #FFD166); }
.hero .hero__title .word-learn { color: var(--color-white); }
.hero .hero__title .word-grow { color: #FFAE9C; }        /* warm coral, AA-large on the scrim */
.hero .hero__title .hero__word--accent { color: var(--color-marigold-light, #FFD166); }

/* Hand-drawn underline under the accent word */
.hero__scribble {
    position: absolute;
    left: -3%;
    bottom: -.04em;
    width: 106%;
    height: .17em;
    overflow: visible;
    pointer-events: none;
}
.hero__scribble path {
    fill: none;
    stroke: var(--color-marigold, #FFAF1C);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}
.hero__word--accent .hero__scribble path {
    stroke: #FF9A85;
}

/* Small doodle tucked after the last word (sparkle, stars, heart, arrow) */
.hero__flourish {
    position: absolute;
    left: 100%;
    top: -.06em;
    width: .34em;
    height: .34em;
    margin-left: .06em;
    pointer-events: none;
}
.hero__flourish svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.hero__flourish .fill { fill: var(--color-marigold-light, #FFD166); }
.hero__flourish .line {
    fill: none;
    stroke: var(--color-marigold-light, #FFD166);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hero__flourish--stars { width: .44em; top: -.12em; }
.hero__flourish--heart { top: .02em; }
.hero__flourish--heart .line { stroke: #FFAE9C; fill: rgb(255 174 156 / .28); }
.hero__flourish--arrow { width: .4em; height: .4em; top: -.14em; margin-left: .02em; }

.hero .hero__text {
    max-width: 36em;
    margin: 0 auto var(--space-xl);
    color: var(--color-white);
    font-size: clamp(1.05rem, .96rem + .38vw, 1.28rem);
    line-height: 1.6;
    text-wrap: pretty;
    text-shadow: 0 1px 2px rgb(12 30 58 / .7), 0 0 16px rgb(12 30 58 / .55);
}

.hero__nowrap {
    white-space: nowrap;
}

.hero .hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    justify-content: center;
}
.hero .btn--lg {
    padding: .9em 2em;
    font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem);
}
/* Outline button: a light navy glass so it stays legible on any photo */
.hero .btn--outline {
    background: rgb(var(--hero-navy) / .28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.hero .btn--outline:hover {
    background: var(--color-white);
}
.hero .btn--light {
    color: var(--color-ocean-dark, #2D5A8A);
}
.hero .btn--light::after {
    content: '\2192';
    content: '\2192' / '';                       /* decorative: keep it out of the link name */
    transition: transform .2s var(--hero-out);
}
.hero .btn--light:hover {
    color: var(--color-ocean-dark, #2D5A8A);
}
.hero .btn--light:hover::after {
    transform: translateX(3px);
}

/* --- Ambient doodles ------------------------------------------ */
.hero__ambient {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 2;
    width: min(var(--max-width, 1200px), 100%);
    transform: translateX(-50%);
    pointer-events: none;
}
.hero-doodle {
    position: absolute;
}
.hero-doodle svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.hero-doodle--sun {
    top: calc(var(--header-height) + 4px);
    right: 6px;
    width: 64px;
}
.hero-doodle--sun .sun-disc {
    fill: rgb(255 209 102 / .9);
    stroke: var(--color-marigold, #FFAF1C);
    stroke-width: 2.5;
}
.hero-doodle--sun .sun-rays {
    fill: none;
    stroke: var(--color-marigold-light, #FFD166);
    stroke-width: 3;
    stroke-linecap: round;
}
.hero-doodle--sun svg {
    filter: drop-shadow(0 0 10px rgb(255 190 80 / .45));
}

.hero-doodle--gull {
    display: none;
    transition: opacity .6s ease;
}
.hero-doodle--gull path {
    fill: none;
    stroke: #FFFDF6;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hero-doodle--gull svg {
    filter: drop-shadow(0 1px 2px rgb(12 30 58 / .5));
}
/* Slide 2 parks its paper plane up here, so the gulls step aside. On slide 3 a child fills
   the top right, so the sun steps aside as well. */
.hero-doodle--sun {
    transition: opacity .6s ease;
}
.hero[data-slide="2"] .hero-doodle--gull,
.hero[data-slide="3"] .hero-doodle--gull,
.hero[data-slide="3"] .hero-doodle--sun {
    opacity: 0;
}

/* Paper plane + looping dashed trail. One per slide (inside the slide's media, above its
   overlay), parked clear of faces by --fl-x (from the content's left edge) and --fl-y. */
.hero-flight {
    display: none;
    position: absolute;
    z-index: 2;
    left: calc(max(0px, (100% - var(--max-width, 1200px)) / 2) + var(--hero-inset, 0px) + var(--fl-x, 700px));
    top: var(--fl-y, 500px);
    width: 300px;
    height: 100px;
    pointer-events: none;
}
.hero-flight__trail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 1px 2px rgb(12 30 58 / .5));
}
.hero-flight__trail path {
    fill: none;
    stroke: #FFFDF6;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-dasharray: 7 9;
}
.hero-flight__plane {
    position: absolute;
    right: -30px;
    top: -18px;
    width: 52px;
    transform: rotate(-12deg);
}
.hero-flight__plane svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 3px 4px rgb(12 30 58 / .45));
}
.hero-flight__plane .plane-body {
    fill: #FFFDF6;
    stroke: var(--color-ocean, #3E79B5);
    stroke-width: 2.2;
    stroke-linejoin: round;
}
.hero-flight__plane .plane-line {
    fill: none;
    stroke: var(--color-ocean, #3E79B5);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hero-slide__media::after {
    z-index: 1;
}

/* --- Pencil sketches (slides 1, 3, 4) ------------------------------
   Slide 2 has the paper plane; the others each get a sketch in the same line language: the
   trail's cream pencil line with the doodles' soft navy shadow, dashed where it suits, at most a
   faint fill. Slide 1 ABC blocks, slide 3 a cross with short rays and a soft glow, slide 4 a
   little cluster of stars. Like the plane they live in the slide's photo layer, under the words.
   Placement, checked against every face in the photos (see the notes per slide):
     >= 1024px  just right of the text column (690px wide, from the content's left edge, the same
                origin the plane uses), level with the lower half of the copy; slide 4's stars sit
                up in the top-right "sky" where the sun usually is (the sun and gulls step aside).
     769-1023   the copy is centred, so the sketch sits in the bottom-right corner beside the
                controls (slides 1 and 3) or top right (slide 4).
     <= 768     slide 1 sits out below 641px (the copy fills the screen); slide 3 moves to the top
                right above the copy at <= 480px; slide 4 stays top right.
   The draw-in is in the motion section; at rest, without JS and under reduced motion every line
   is simply drawn. */
.hero-art {
    /* The content's left edge (see .hero-slide__inner and .container) */
    --art-cl: calc(max(0px, (100% - (var(--max-width, 1200px) + 2 * var(--container-gutter, 16px) - 2 * var(--space-md, 16px))) / 2) + var(--container-gutter, 16px) + var(--hero-inset, 0px));
    --art-w: 120px;
    position: absolute;
    z-index: 2;
    width: var(--art-w);
    pointer-events: none;
}
.hero-art__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 1px 2px rgb(12 30 58 / .7));   /* the trail's shadow, a touch firmer for lighter patches */
}
.hero-art .art-d {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}
.hero-art .art-dash {
    stroke-dasharray: 6 7;
}
.hero-art .art-dash--faint {
    stroke-dasharray: 3 5;
    opacity: .55;
}
.hero-art .art-tw {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}
/* The cross's glow: a soft cream disc behind it (HTML, so the drawing needs no gradient ids) */
.hero-art__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 86%;
    aspect-ratio: 1;
    margin: -43% 0 0 -43%;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 246 222 / .34) 0, rgb(255 240 205 / .13) 42%, rgb(255 240 205 / 0) 70%);
    opacity: .75;
}

/* >= 1024px: right of the text column, with the sketch's foot level with the top of the slider
   controls (so it never meets them, even where it sits above their left end) */
.hero-art--blocks,
.hero-art--cross {
    left: calc(var(--art-cl) + 690px + var(--art-x, 28px));
    bottom: calc(var(--hero-lift) + 1.25rem + var(--hero-controls-h) + 16px);
}
.hero-art--blocks { --art-w: 132px; --art-x: 30px; }
/* Slide 3: the boy's face is right beside the headline, so the cross sits lower, by the book */
.hero-art--cross { --art-w: 116px; --art-x: 22px; }
/* Slide 4: the children fill the space beside the words, so the stars sit up in the sky */
.hero-art--stars {
    --art-w: 200px;
    top: calc(var(--header-height) - 4px);
    /* out towards the edge on wide screens, where the braided girl's face comes closer */
    right: max(14px, (100% - var(--max-width, 1200px)) / 2 - 30px);
}
.hero[data-slide="4"] .hero-doodle--gull,
.hero[data-slide="4"] .hero-doodle--sun {
    opacity: 0;
}

/* 769-1023px: centred copy; bottom right beside the controls, top right for the stars */
@media (max-width: 1023px) {
    .hero-art--blocks,
    .hero-art--cross {
        bottom: calc(var(--hero-lift) + 1.25rem);
    }
    /* Clear of the centred buttons (two, about 400px across, on slide 1; one, about 190px, on slide 3) */
    .hero-art--blocks { --art-w: 104px; left: calc(50% + 214px); }
    .hero-art--cross { --art-w: 96px; left: calc(50% + 150px); }
    .hero-art--stars { --art-w: 170px; top: calc(var(--header-height) + 6px); right: 14px; }
}
@media (max-width: 768px) {
    .hero-art--blocks { --art-w: 88px; }
    .hero-art--cross { --art-w: 88px; }
    .hero-art--stars { --art-w: 128px; top: calc(var(--header-height) + 12px); right: 10px; }
}
@media (max-width: 640px) {
    .hero-art--blocks { display: none; }
}
/* Phones: the buttons fill the width, so the cross goes top right, above the copy (clear of the
   girl's face on the left; the boys are off to the right of the crop) */
@media (max-width: 480px) {
    .hero-art--cross {
        --art-w: 76px;
        left: auto;
        right: 12px;
        top: calc(var(--header-height) + 26px);
        bottom: auto;
    }
    .hero-art--stars { --art-w: 116px; }
}
/* Narrow phones: the copy starts higher, so the cross tucks up under the header */
@media (max-width: 374px) {
    .hero-art--cross { --art-w: 68px; top: calc(var(--header-height) + 2px); }
}

/* --- Controls ------------------------------------------------- */
.hero__controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--hero-lift) + 1.25rem);
    z-index: 4;
    pointer-events: none;
}
.hero__controls[hidden] {
    display: none;
}
.hero__controls-inner {
    display: flex;
    justify-content: center;
}
.hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgb(255 255 255 / .22);
    border-radius: var(--radius-pill, 999px);
    background: rgb(var(--hero-navy) / .55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 20px -12px rgb(0 0 0 / .6);
    pointer-events: auto;
}
.hero__ctrl {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-white);
    cursor: pointer;
    transition: background-color .2s ease;
}
.hero__ctrl:hover {
    background: rgb(255 255 255 / .16);
}
.hero__ctrl svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hero__ctrl--toggle .icon-play { display: none; }
.hero.is-stopped .hero__ctrl--toggle .icon-play { display: block; }
.hero.is-stopped .hero__ctrl--toggle .icon-pause { display: none; }
.hero__ctrl--toggle .icon-play path { fill: currentColor; stroke-width: 2; }
.hero__ctrl--toggle[hidden] { display: none; }

.hero__dots {
    display: flex;
    align-items: center;
}
.hero__dot {
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 42px;
    padding: 0 4px;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: none;
    cursor: pointer;
}
.hero__dot-track {
    position: relative;
    display: block;
    width: 10px;
    height: 10px;
    overflow: hidden;
    border-radius: var(--radius-pill, 999px);
    background: rgb(255 255 255 / .55);
    transition: width .35s var(--hero-out), background-color .2s ease;
}
.hero__dot:hover .hero__dot-track {
    background: rgb(255 255 255 / .85);
}
.hero__dot[aria-current="true"] .hero__dot-track {
    width: 34px;
    background: rgb(255 255 255 / .38);
}
.hero__dot-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--color-marigold-light, #FFD166);
    transform: scaleX(0);
    transform-origin: left center;
}
.hero__dot[aria-current="true"] .hero__dot-fill {
    transform: scaleX(1);
}
/* Autoplay progress: hero.js advances when this animation ends */
.hero.is-autoplay .hero__dot[aria-current="true"] .hero__dot-fill {
    animation: hero-progress var(--hero-interval, 7s) linear both;
}
.hero.is-paused .hero__dot-fill {
    animation-play-state: paused !important;
}

.hero .hero__ctrl:focus-visible,
.hero .hero__dot:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: -3px;
    box-shadow: inset 0 0 0 6px rgb(var(--hero-navy) / .9);
}

/* --- Wave into "What We Offer" -------------------------------- */
.hero .hero__wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 3;
    width: 100%;
    height: var(--hero-wave-h);
    pointer-events: none;
}
.hero .hero__wave svg {
    display: block;
    width: 100%;
    height: 100%;
}
/* Sea foam, a marigold sand line, then the sunshine section */
.hero__wave .wave-back { fill: var(--color-seafoam-dark, #D0E8E0); opacity: .9; }
.hero__wave .wave-mid { fill: var(--color-marigold, #FFAF1C); }
.hero__wave .wave-front { fill: var(--color-sunshine, #FFF8E7); }

/* --- Breakpoints ---------------------------------------------- */
@media (min-width: 640px) {
    .hero-doodle--sun { width: 84px; right: 14px; }
}

/* Desktop: text on the left, the photo's subject on the right */
@media (min-width: 1024px) {
    /* From 1024px to about 1300px the page gutter is narrower than the split nav's inset, so
       the copy steps in by up to 1.75rem (it lines up with "Home" at 1024px) and eases back to
       the plain container edge as the container's side margins grow. The text pool and the
       paper plane follow it. */
    .hero {
        --hero-inset: max(0px, 1.75rem - max(0px, (100vw - (var(--max-width, 1200px) + 2 * var(--container-gutter, 16px) - 2 * var(--space-md, 16px))) / 2));
    }
    .hero .hero-slide__inner {
        padding-left: calc(var(--container-gutter, 16px) + var(--hero-inset));
    }
    .hero .hero__content {
        max-width: 690px;
        margin: 0;
        text-align: left;
    }
    .hero .hero__text { max-width: 33em; }
    .hero .hero__text { margin-left: 0; }
    /* Slide 2: a shorter measure keeps the line clear of the graduates' faces */
    #hero-slide-2 .hero__text { max-width: 26em; }
    .hero .hero__buttons { justify-content: flex-start; }
    /* Controls sit bottom-right over the photo, clear of the text column */
    .hero__slides { padding-bottom: calc(var(--hero-lift) + 3.25rem); }
    .hero__controls { bottom: calc(var(--hero-lift) + 1.25rem); }
    .hero__controls-inner { justify-content: flex-end; }

    .hero-slide__media::after {
        background:
            linear-gradient(180deg, rgb(var(--hero-navy) / .7) 0, rgb(var(--hero-navy) / .42) 150px, rgb(var(--hero-navy) / .12) 240px, rgb(var(--hero-navy) / 0) 320px),
            radial-gradient(ellipse 34% 105px at 74% calc(var(--header-height) / 2), rgb(var(--hero-navy) / .58) 0%, rgb(var(--hero-navy) / .42) 60%, rgb(var(--hero-navy) / 0) 100%),
            radial-gradient(ellipse 620px 64% at calc(max(0px, (100% - var(--max-width, 1200px)) / 2) + 330px + var(--hero-inset, 0px)) 60%, rgb(var(--hero-navy) / .86) 0%, rgb(var(--hero-navy) / .64) 52%, rgb(var(--hero-navy) / 0) 100%),
            linear-gradient(90deg, rgb(var(--hero-navy) / .58) 0%, rgb(var(--hero-navy) / .34) 36%, rgb(var(--hero-navy) / .08) 62%, rgb(var(--hero-navy) / .04) 100%),
            linear-gradient(0deg, rgb(var(--hero-navy) / .5) 0, rgb(var(--hero-navy) / 0) 34%);
    }

    .hero-doodle--sun {
        top: calc(var(--header-height) + 2px);
        right: 8px;
        width: 100px;
    }
    .hero-doodle--gull { display: block; }
    .hero-doodle--gull-1 { top: calc(var(--header-height) - 22px); right: 112px; width: 40px; }
    .hero-doodle--gull-2 { top: calc(var(--header-height) + 4px); right: 156px; width: 30px; }
}

/* Wide enough for slide 2's plane to sit beside the text column */
@media (min-width: 1200px) {
    .hero-flight { display: block; }
}

@media (max-width: 1023px) {
    .hero__slides {
        min-height: 620px;
        padding-top: calc(var(--header-height) + 1.25rem);
    }
}

@media (max-width: 768px) {
    .hero__slides {
        min-height: 600px;
        padding-top: calc(var(--header-height) + .75rem);
    }
    .hero-slide__media img {
        object-position: var(--pos-sm, 50% 50%);
    }
    /* Each slide can anchor its copy to the top or bottom (--align-sm), so the children's
       faces in its photo sit in the clear part rather than behind the words */
    .hero-slide {
        align-items: var(--align-sm, center);
    }
    /* Only a light wash over the photo: a band for the header buttons, a floor for the
       controls. The dark pool sits right behind the words (.hero__copy::before), so the
       photo shows around the badge, the buttons and the edges. */
    .hero-slide__media::after {
        background: linear-gradient(180deg,
            rgb(var(--hero-navy) / .58) 0,
            rgb(var(--hero-navy) / .22) calc(var(--header-height) + 12px),
            rgb(var(--hero-navy) / .16) 55%,
            rgb(var(--hero-navy) / .5) 100%);
    }
    /* A soft pool: the blur fades it out beyond the copy, while every line of text still
       sits on the full-strength middle (the inset is about twice the blur radius). */
    .hero__copy::before {
        content: '';
        position: absolute;
        inset: -2.25rem -2rem;
        z-index: -1;
        border-radius: 2.5rem;
        background: rgb(var(--hero-navy) / .74);
        filter: blur(18px);
        pointer-events: none;
    }
    /* The outline button is outside the pool: a darker glass keeps its label legible */
    .hero .btn--outline {
        background: rgb(var(--hero-navy) / .66);
    }
    .hero .hero__title { margin-bottom: .75rem; }
    .hero .hero__text { margin-bottom: var(--space-lg); }
}

@media (max-width: 640px) {
    .hero__slides { min-height: 0; }
}

/* Slide 1 (the first impression): a sunlit entrance. A warm soft-light glow over the wall
   and balloons, and lighter shade wherever there are no words; the pools behind the copy and
   the nav band stay as dark as on the other slides, so the text keeps AA. */
#hero-slide-1 .hero-slide__media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse 42% 75% at 80% 32%, rgb(255 186 104 / .6), rgb(255 186 104 / 0) 72%);
    mix-blend-mode: soft-light;
    pointer-events: none;
}
/* 769-1023px: the centred headline sits where the glow would be, so it stays off there, and
   the brighter wall behind "Grow." gets a slightly wider pool */
@media (min-width: 769px) and (max-width: 1023px) {
    #hero-slide-1 .hero-slide__media::before { display: none; }
    #hero-slide-1 .hero-slide__media::after {
        background:
            radial-gradient(ellipse 66% 50% at 50% 50%, rgb(var(--hero-navy) / .84) 0%, rgb(var(--hero-navy) / .66) 55%, rgb(var(--hero-navy) / 0) 100%),
            linear-gradient(180deg, rgb(var(--hero-navy) / .74) 0%, rgb(var(--hero-navy) / .3) 30%, rgb(var(--hero-navy) / .2) 70%, rgb(var(--hero-navy) / .5) 100%);
    }
}
@media (min-width: 1024px) {
    #hero-slide-1 .hero-slide__media::after {
        background:
            linear-gradient(180deg, rgb(var(--hero-navy) / .7) 0, rgb(var(--hero-navy) / .42) 150px, rgb(var(--hero-navy) / .12) 240px, rgb(var(--hero-navy) / 0) 320px),
            radial-gradient(ellipse 34% 105px at 74% calc(var(--header-height) / 2), rgb(var(--hero-navy) / .58) 0%, rgb(var(--hero-navy) / .42) 60%, rgb(var(--hero-navy) / 0) 100%),
            radial-gradient(ellipse 700px 66% at calc(max(0px, (100% - var(--max-width, 1200px)) / 2) + 330px + var(--hero-inset, 0px)) 60%, rgb(var(--hero-navy) / .86) 0%, rgb(var(--hero-navy) / .72) 55%, rgb(var(--hero-navy) / 0) 100%),
            linear-gradient(90deg, rgb(var(--hero-navy) / .56) 0%, rgb(var(--hero-navy) / .32) 36%, rgb(var(--hero-navy) / .08) 60%, rgb(var(--hero-navy) / 0) 72%),
            linear-gradient(0deg, rgb(var(--hero-navy) / .36) 0, rgb(var(--hero-navy) / 0) 26%);
    }
}
@media (max-width: 768px) {
    #hero-slide-1 .hero-slide__media::after {
        background: linear-gradient(180deg,
            rgb(var(--hero-navy) / .5) 0,
            rgb(var(--hero-navy) / .12) calc(var(--header-height) + 12px),
            rgb(var(--hero-navy) / .08) 55%,
            rgb(var(--hero-navy) / .42) 100%);
    }
}

@media (max-width: 480px) {
    .hero .hero__buttons {
        flex-direction: column;
        align-items: stretch;
        max-width: 340px;
        margin-inline: auto;
    }
    .hero .hero__buttons .btn { width: 100%; }
    .hero-doodle--sun { display: none; }
}

/* Small phones: slides 2-4's headlines can fill the line, leaving no room for the doodle
   after the last word (it would hang off the screen edge), so it sits out. Slide 1's fits. */
@media (max-width: 400px) {
    .hero .hero__title--sub .hero__flourish {
        display: none;
    }
}

/* --- Motion (all of it opts in; reduced motion gets a still hero) ---- */
@media (prefers-reduced-motion: no-preference) {
    /* Ken Burns: hero.js adds .hero--js, so the first slide starts at scale(1) and drifts in */
    .hero--js .hero-slide.is-active .hero-slide__media img {
        transform: scale(1.06);
        transition: transform 9s cubic-bezier(.3, .1, .3, 1);
    }

    /* Entrance choreography (about 1.2s) */
    .hero-slide.is-active .hero__badge {
        animation: hero-badge-drop .75s var(--hero-spring) .1s both;
    }
    .hero-slide.is-active .hero__eyebrow {
        animation: hero-rise .5s var(--hero-out) .15s both;
    }
    .hero-slide.is-active .hero__word {
        animation: hero-word-pop .6s var(--hero-spring) calc(.28s + var(--i, 0) * .1s) both;
    }
    .hero-slide.is-active .hero__scribble path {
        animation: hero-draw .55s ease-out .85s both;
    }
    .hero-slide.is-active .hero__text {
        animation: hero-rise .55s var(--hero-out) .6s both;
    }
    .hero-slide.is-active .hero__buttons {
        animation: hero-rise .55s var(--hero-out) .72s both;
    }
    /* Pop in once (on the span), then a gentle loop (on the svg, which the pause button stops).
       Every endless loop below needs .hero--js: without JS there is no pause button, so the
       doodles stay still after their one-shot entrance (WCAG 2.2.2). */
    .hero-slide.is-active .hero__flourish {
        animation: hero-pop .5s var(--hero-spring) 1s both;
    }
    .hero--js .hero-slide.is-active .hero__flourish svg {
        animation: hero-twinkle 2.6s ease-in-out 1.6s infinite alternate;
    }
    .hero--js .hero-slide.is-active .hero__flourish--heart svg {
        animation: hero-beat 2.4s ease-in-out 1.6s infinite;
    }
    .hero--js .hero-slide.is-active .hero__flourish--arrow svg {
        animation: hero-nudge 2.2s ease-in-out 1.6s infinite alternate;
    }

    /* Ambient layer: transforms and opacity only */
    .hero--js .hero-doodle--sun svg {
        animation: hero-spin 70s linear infinite;
    }
    .hero--js .hero-doodle--gull-1 svg {
        animation: hero-glide 6.5s ease-in-out infinite alternate;
    }
    .hero--js .hero-doodle--gull-2 svg {
        animation: hero-glide 8s ease-in-out -3s infinite alternate-reverse;
    }
    /* The plane flies in along its trail as each slide enters, then drifts */
    .hero-slide.is-active .hero-flight__trail {
        animation: hero-trail-reveal 1.3s cubic-bezier(.45, .05, .35, 1) .45s both;
    }
    .hero-slide.is-active .hero-flight__plane {
        animation: hero-plane-in 1.3s cubic-bezier(.45, .05, .35, 1) .45s both;
    }
    .hero--js .hero-slide.is-active .hero-flight__plane svg {
        animation: hero-drift 7s ease-in-out 1.75s infinite;
    }

    /* Pencil sketches: drawn on line by line once the headline has landed, like the plane's
       trail, then still. Only with hero.js (without it the sketch is simply there). Like the
       rest of the choreography this hangs off .is-active, so it redraws whenever the slide returns.
       --art-in is when drawing starts; .art-d--1 to --5 are drawn in that order. */
    .hero-art { --art-in: 1s; }
    .hero--js .hero-slide.is-active .hero-art .art-d {
        animation: hero-draw .55s ease-in-out var(--art-in) both;
    }
    .hero--js .hero-slide.is-active .hero-art .art-d--2 { animation-delay: calc(var(--art-in) + .35s); }
    .hero--js .hero-slide.is-active .hero-art .art-d--3 { animation-delay: calc(var(--art-in) + .7s); }
    .hero--js .hero-slide.is-active .hero-art .art-d--4 { animation-delay: calc(var(--art-in) + 1.05s); }
    .hero--js .hero-slide.is-active .hero-art .art-d--5 { animation-delay: calc(var(--art-in) + 1.2s); }
    /* The faint fills, the dashed lines and the dots fade in under the pencil lines */
    .hero--js .hero-slide.is-active .hero-art :is(.art-fill, .art-dash, .art-dots) {
        animation: hero-fade .9s ease-out calc(var(--art-in) + .4s) both;
    }
    .hero--js .hero-slide.is-active .hero-art .art-dash--faint {
        animation: hero-fade-faint .9s ease-out calc(var(--art-in) + 1.1s) both;
    }
    /* Cross: the outline, then the pencil shading, then the rays; then the glow brightens once and settles */
    .hero--js .hero-slide.is-active .hero-art--cross .art-d--1 { animation-duration: .9s; }
    .hero--js .hero-slide.is-active .hero-art--cross .art-d--2 { animation-delay: calc(var(--art-in) + .75s); }
    .hero--js .hero-slide.is-active .hero-art--cross .art-d--3 { animation-duration: .8s; animation-delay: calc(var(--art-in) + .95s); }
    .hero--js .hero-slide.is-active .hero-art__glow {
        animation: hero-glow 2.2s ease-in-out calc(var(--art-in) + 1.4s) both;
    }
    /* Stars: a slow, gentle twinkle on three of them (a loop, so the pause button stops it) */
    .hero--js .hero-slide.is-active .hero-art .art-tw {
        animation: hero-twinkle-soft 2.8s ease-in-out calc(var(--art-in) + 1.8s) infinite alternate;
    }
    .hero--js .hero-slide.is-active .hero-art .art-tw--2 { animation-duration: 3.4s; animation-delay: calc(var(--art-in) + 2.6s); }
    .hero--js .hero-slide.is-active .hero-art .art-tw--3 { animation-duration: 3.1s; animation-delay: calc(var(--art-in) + 3.3s); }

    /* Pause button (WCAG 2.2.2) and an off-screen hero freeze the ambient loops too
       (.hero--js keeps these at least as specific as the loop rules above) */
    .hero--js.is-stopped .hero__ambient svg,
    .hero--js.is-stopped .hero-slide .hero__flourish svg,
    .hero--js.is-stopped .hero-slide .hero-flight__plane svg,
    .hero--js.is-stopped .hero-slide .hero-art .art-tw,
    .hero--js.is-offscreen .hero__ambient svg,
    .hero--js.is-offscreen .hero-slide .hero__flourish svg,
    .hero--js.is-offscreen .hero-slide .hero-flight__plane svg,
    .hero--js.is-offscreen .hero-slide .hero-art .art-tw {
        animation-play-state: paused;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero { --hero-fade: .35s; }
    .hero-slide.is-leaving .hero-slide__inner { transition: none; }
}

@keyframes hero-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes hero-badge-drop {
    0%   { opacity: 0; transform: translateY(-34px) rotate(-14deg) scale(.92); }
    55%  { opacity: 1; transform: translateY(4px) rotate(1.5deg) scale(1.02); }
    78%  { transform: translateY(-2px) rotate(-4.5deg); }
    100% { opacity: 1; transform: translateY(0) rotate(-3deg); }
}
@keyframes hero-word-pop {
    0%   { opacity: 0; transform: translateY(.32em) scale(.72) rotate(-4deg); }
    60%  { opacity: 1; transform: translateY(-.04em) scale(1.05) rotate(1deg); }
    100% { opacity: 1; transform: none; }
}
@keyframes hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes hero-draw {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}
@keyframes hero-pop {
    0%   { opacity: 0; transform: scale(.2) rotate(-40deg); }
    70%  { opacity: 1; transform: scale(1.18) rotate(8deg); }
    100% { opacity: 1; transform: none; }
}
@keyframes hero-twinkle {
    from { transform: scale(1) rotate(0); opacity: 1; }
    to   { transform: scale(.74) rotate(22deg); opacity: .7; }
}
@keyframes hero-beat {
    0%, 60%, 100% { transform: scale(1); }
    15% { transform: scale(1.16); }
    30% { transform: scale(.96); }
    45% { transform: scale(1.08); }
}
@keyframes hero-nudge {
    from { transform: translate(0, 0); }
    to   { transform: translate(3px, -4px); }
}
@keyframes hero-spin {
    to { transform: rotate(360deg); }
}
@keyframes hero-glide {
    0%   { transform: translate(0, 0) rotate(-4deg); }
    50%  { transform: translate(7px, -6px) rotate(3deg); }
    100% { transform: translate(14px, 2px) rotate(-2deg); }
}
@keyframes hero-trail-reveal {
    from { clip-path: inset(-12px 100% -12px -12px); }
    to   { clip-path: inset(-12px -12px -12px -12px); }
}
@keyframes hero-plane-in {
    0%   { opacity: 0; transform: translate(-280px, 62px) rotate(-4deg); }
    12%  { opacity: 1; }
    45%  { transform: translate(-140px, 30px) rotate(6deg); }
    100% { opacity: 1; transform: rotate(-12deg); }
}
@keyframes hero-drift {
    0%   { transform: translate(0, 0) rotate(0); }
    25%  { transform: translate(5px, -6px) rotate(4deg); }
    50%  { transform: translate(10px, -1px) rotate(-2deg); }
    75%  { transform: translate(4px, 5px) rotate(-6deg); }
    100% { transform: translate(0, 0) rotate(0); }
}
@keyframes hero-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes hero-fade-faint {
    from { opacity: 0; }
    to   { opacity: .55; }
}
/* The cross's glow: brightens once, then settles to its resting .75 */
@keyframes hero-glow {
    0%   { opacity: 0; transform: scale(.7); }
    45%  { opacity: 1; transform: scale(1.06); }
    100% { opacity: .75; transform: none; }
}
@keyframes hero-twinkle-soft {
    from { transform: scale(1); opacity: 1; }
    to   { transform: scale(.82) rotate(8deg); opacity: .6; }
}

@media print {
    .hero__controls,
    .hero__ambient,
    .hero__wave { display: none; }
    .hero-slide:not(:first-child) { display: none; }
}