/* =====================================================================
   about-polish.css

   Ambient color + interaction layer for the /about/ singleton. Scoped to
   the pattern's outer `id="about"` anchor and to `body.page-about` for
   the hero override. Touches things the strict-native pattern can't
   express on its own:

     1. Section heading underline — teal→grape gradient bar under
        centered h2s. Pure ::after.
     2. Milestones → horizontal timeline. Strips the white-card chrome
        from the outer container and the paper chrome from the three
        inner columns; replaces with a connecting line + colored dots
        on a teal-soft gradient band. Differentiates milestones
        (chronological progression) from values (parallel concepts).
     3. Photo gallery — soft shadow, rounded corners, hover zoom.
     4. Values cards → solid gradient cards (teal / grape / teal-grape
        blend) with white text. Mirrors the Thrive "WHY CHOOSE" card
        row at MM brand saturation. The biggest color moment.
     5. Page hero — body.page-about override punches the overlay from
        the default teal-800/grape-700 dark wash to a brighter
        teal-500/grape-500 saturation so the About page reads more
        vibrant from the first viewport.
     6. "Not a franchise" callout → full-bleed band. The contained
        teal-soft card becomes an edge-to-edge image band with a
        teal/grape gradient overlay, white text vertically centered.
        Adds a hero-scale break in the page rhythm and breaks the
        small-card repetition between gallery → callout → values.
     7. Section breathing room — bigger blockGap between major
        children of #about so the page doesn't feel cramped.
     8. Scroll-reveal — gentle fade-up as each major block enters.

   All overrides use `!important` against block-attribute inline styles.
   Editor preview will still show the original paper/white cards
   (Katherine sees the pre-polish version when editing); live + saved
   preview reflect this stylesheet. When the pattern is rebuilt to bake
   these visuals in natively, drop the !important and shrink scope.

   Reduced-motion users get the final state with no animation.
===================================================================== */


/* --------------------------------------------------------------------
   1. Section heading underline — gradient bar under centered h2s.
   -------------------------------------------------------------------- */

#about h2.wp-block-heading.has-text-align-center::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        var(--wp--preset--color--teal) 0%,
        var(--wp--preset--color--grape) 100%
    );
}


/* --------------------------------------------------------------------
   2. Milestones → horizontal timeline.

   Targets the FIRST `.wp-block-group.has-white-background-color` direct
   child of #about (the milestones container). The values block uses
   <aside> so it's reachable via `aside.wp-block-group` and is excluded
   here.
   -------------------------------------------------------------------- */

#about > div.wp-block-group.has-white-background-color {
    /* Full-bleed light-teal band. Viewport escape (calc(50% - 50vw))
       recenters to the viewport regardless of constrained parents —
       same technique as the franchise/team photo bands. Inner content
       is re-centered at ~1180px via the padding-inline max() below. */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: linear-gradient(
        135deg,
        var(--wp--preset--color--teal-100) 0%,
        var(--wp--preset--color--teal-50) 100%
    ) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding-top: var(--wp--preset--spacing--16) !important;
    padding-bottom: var(--wp--preset--spacing--16) !important;
    padding-left: max(var(--wp--preset--spacing--6), calc((100% - 1180px) / 2)) !important;
    padding-right: max(var(--wp--preset--spacing--6), calc((100% - 1180px) / 2)) !important;
}

/* The columns inside become timeline markers, not cards. */
#about > div.wp-block-group.has-white-background-color > .wp-block-columns {
    position: relative;
    padding-top: 36px;
}

/* Connecting line — sits behind the dot row at ~50% of the column. */
#about > div.wp-block-group.has-white-background-color > .wp-block-columns::before {
    content: "";
    position: absolute;
    top: 48px;
    left: 14%;
    right: 14%;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--wp--preset--color--teal) 0%,
        var(--wp--preset--color--grape) 50%,
        var(--wp--preset--color--teal-700) 100%
    );
    z-index: 0;
}

@media (max-width: 781px) {
    /* Stacked on mobile — kill the horizontal line. */
    #about > div.wp-block-group.has-white-background-color > .wp-block-columns::before {
        display: none;
    }
}

/* Each milestone column: strip paper bg + border + radius. Centered
   text. The dot sits above the year numeral and overlaps the line. */
#about > div.wp-block-group.has-white-background-color > .wp-block-columns > .wp-block-column {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* padding-top clears the dot (which bottoms out at column ~23px) and
       leaves ~20px before the year numeral. */
    padding: 44px 16px 12px !important;
    text-align: center;
    position: relative;
}

/* Cancel hover-lift inherited from the value-card hover rule below;
   timeline markers aren't cards. */
#about > div.wp-block-group.has-white-background-color > .wp-block-columns > .wp-block-column:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* The dot — sized 20px, white core, colored ring (per column via
   `currentColor`). */
#about > div.wp-block-group.has-white-background-color > .wp-block-columns > .wp-block-column::before {
    content: "";
    position: absolute;
    /* Centered on the connecting line. The line lives on the columns
       wrapper at top:48px (center 49px). The dot lives on the column,
       whose top edge is already 36px down (the wrapper's padding-top),
       so a 20px dot at top:3px sits at 36+3..36+23 = wrapper 39..59px —
       centered at 49px, dead on the line. */
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px currentColor, var(--wp--preset--shadow--sm);
    z-index: 1;
}

/* Per-column color sets `currentColor` for the dot ring. */
#about > div.wp-block-group.has-white-background-color > .wp-block-columns > .wp-block-column:nth-child(1) {
    color: var(--wp--preset--color--teal);
}
#about > div.wp-block-group.has-white-background-color > .wp-block-columns > .wp-block-column:nth-child(2) {
    color: var(--wp--preset--color--grape);
}
#about > div.wp-block-group.has-white-background-color > .wp-block-columns > .wp-block-column:nth-child(3) {
    color: var(--wp--preset--color--teal-700);
}

/* Centered heading + body inside each column. The year numeral
   inherits its color from the column-level `color`. */
#about > div.wp-block-group.has-white-background-color > .wp-block-columns h3.wp-block-heading,
#about > div.wp-block-group.has-white-background-color > .wp-block-columns p {
    text-align: center;
}


/* --------------------------------------------------------------------
   3. Photo gallery — soft shadow, rounded corners, hover zoom.
   -------------------------------------------------------------------- */

#about .wp-block-gallery .wp-block-image {
    border-radius: 20px !important; /* beat the inline 16px on the figure */
    border: 5px solid #fff;
    outline: 1px solid var(--wp--preset--color--line);
    box-shadow:
        0 16px 40px -18px rgba(95, 44, 117, 0.40),
        0 2px 8px rgba(14, 63, 58, 0.10);
    overflow: hidden;
    transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 320ms ease-out;
}

#about .wp-block-gallery .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

#about .wp-block-gallery .wp-block-image:hover {
    transform: translateY(-4px);
    box-shadow:
        0 26px 56px -18px rgba(95, 44, 117, 0.48),
        0 4px 12px rgba(14, 63, 58, 0.12);
}

#about .wp-block-gallery .wp-block-image:hover img {
    transform: scale(1.05);
}


/* --------------------------------------------------------------------
   4. Values cards → light brand-color cards (no imagery).

   Targets the <aside> direct child (the values block). The three cards
   use a light tint of each of the three main brand colors — teal /
   grape / apricot — with dark text, a brand-colored heading, and a
   matching top accent. Content is top-aligned with an even rhythm.
   -------------------------------------------------------------------- */

#about > aside.wp-block-group {
    /* Strip white card chrome on the outer aside — let cards float. */
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    /* Breathing room below the cards / "Read more" pill before the
       full-bleed team band (which sits flush via its margin-top:0). */
    padding-bottom: clamp(56px, 7vw, 88px) !important;
}

/* Wider gap between cards. */
#about > aside.wp-block-group .wp-block-columns {
    gap: clamp(20px, 2vw, 32px) !important;
}

#about > aside.wp-block-group .wp-block-columns > .wp-block-column {
    border: 1px solid var(--wp--preset--color--line) !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 30px -18px rgba(14, 63, 58, 0.22) !important;
    color: var(--wp--preset--color--ink-2) !important;

    /* Top-aligned content with an even gap; min-height keeps a tidy
       minimum footprint while equal-height columns handle the rest. */
    padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 36px) !important;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;

    overflow: hidden;
    transition:
        transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 240ms ease-out;
}

/* Reset block-gap / inline margins so the flex gap owns the rhythm. */
#about > aside.wp-block-group .wp-block-columns > .wp-block-column > * {
    margin-block: 0 !important;
}

/* Color-only cards now — keep the inline figure images hidden. */
#about > aside.wp-block-group .wp-block-columns > .wp-block-column > figure.wp-block-image {
    display: none !important;
}

/* Per-card: light brand tint + matching top accent. */
#about > aside.wp-block-group .wp-block-columns > .wp-block-column:nth-child(1) {
    background: var(--wp--preset--color--teal-100) !important;
    border-top: 4px solid var(--wp--preset--color--teal) !important;
}
#about > aside.wp-block-group .wp-block-columns > .wp-block-column:nth-child(2) {
    background: var(--wp--preset--color--grape-100) !important;
    border-top: 4px solid var(--wp--preset--color--grape) !important;
}
#about > aside.wp-block-group .wp-block-columns > .wp-block-column:nth-child(3) {
    background: var(--mm-butter-100) !important;
    border-top: 4px solid var(--mm-butter) !important;
}

/* Heading takes the card's brand color. */
#about > aside.wp-block-group .wp-block-columns > .wp-block-column h3.wp-block-heading {
    font-size: clamp(24px, 2.2vw, 30px) !important;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
#about > aside.wp-block-group .wp-block-columns > .wp-block-column:nth-child(1) h3.wp-block-heading {
    color: var(--wp--preset--color--teal-700) !important;
}
#about > aside.wp-block-group .wp-block-columns > .wp-block-column:nth-child(2) h3.wp-block-heading {
    color: var(--wp--preset--color--grape-700) !important;
}
#about > aside.wp-block-group .wp-block-columns > .wp-block-column:nth-child(3) h3.wp-block-heading {
    color: var(--mm-butter-700) !important;
}

/* Lead description. */
#about > aside.wp-block-group .wp-block-columns > .wp-block-column p {
    color: var(--wp--preset--color--ink-2) !important;
    font-size: clamp(15px, 1vw + 12px, 17px) !important;
    line-height: 1.55;
}

/* Bullet list — a touch more separation, comfy line spacing, and
   brand-colored markers. */
#about > aside.wp-block-group .wp-block-columns > .wp-block-column ul.wp-block-list {
    margin-top: 4px !important;
}
#about > aside.wp-block-group .wp-block-columns > .wp-block-column ul.wp-block-list,
#about > aside.wp-block-group .wp-block-columns > .wp-block-column ul.wp-block-list li {
    color: var(--wp--preset--color--ink-2) !important;
}
#about > aside.wp-block-group .wp-block-columns > .wp-block-column ul.wp-block-list li {
    margin-bottom: 7px;
}
#about > aside.wp-block-group .wp-block-columns > .wp-block-column:nth-child(1) ul.wp-block-list li::marker {
    color: var(--wp--preset--color--teal);
}
#about > aside.wp-block-group .wp-block-columns > .wp-block-column:nth-child(2) ul.wp-block-list li::marker {
    color: var(--wp--preset--color--grape);
}
#about > aside.wp-block-group .wp-block-columns > .wp-block-column:nth-child(3) ul.wp-block-list li::marker {
    color: var(--mm-butter-700);
}

#about > aside.wp-block-group .wp-block-columns > .wp-block-column:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 42px -18px rgba(14, 63, 58, 0.30) !important;
}

/* Eyebrow "What we believe" → teal-700 with a leading grape dot accent. */
#about > aside.wp-block-group > p.has-grape-700-color {
    color: var(--wp--preset--color--teal-700) !important;
}
#about > aside.wp-block-group > p.has-grape-700-color::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 9px;
    border-radius: 999px;
    background: var(--wp--preset--color--grape);
    vertical-align: middle;
}


/* --------------------------------------------------------------------
   X. Section breathing room — push major children of #about further
   apart so the page doesn't feel cramped between gallery → callout →
   values → team CTA.
   -------------------------------------------------------------------- */

#about {
    row-gap: var(--wp--preset--spacing--20) !important; /* 80px (was 64) */
    /* Zero #about's own padding-bottom — the team band is full-bleed
       and brings its own internal padding. The section's section-y of
       padding below it just creates a paper strip before the footer. */
    padding-bottom: 0 !important;
}

/* Collapse the chain of bottom spacing between #about and the dark
   footer. Each ancestor of #about contributes a small amount of
   bottom padding/margin which compounds to ~100px of paper strip.
   This stylesheet only enqueues on /about/ so these resets are
   automatically About-only. */
main.wp-block-group,
.wp-block-post-content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.wp-site-blocks > footer.wp-block-template-part {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}


/* --------------------------------------------------------------------
   6. Gradient bands → two matched full-bleed photo bands.

   Two .has-teal-soft-gradient-background direct children of #about:
     · :not(:last-child) — "Not a franchise" callout
     · :last-child       — "Meet the people who teach here" team CTA

   Both render as edge-to-edge photo bands with a teal/grape gradient
   overlay and white type. Different photo + a butter pill (vs. white
   pill on the franchise band) so they read as a partner pair, not
   identical twins. They bookend the values cards.
   -------------------------------------------------------------------- */

/* === 6a. Franchise band — full-bleed photo hero ==================== */

#about > .wp-block-group.has-teal-soft-gradient-background:not(:last-child) {
    /* True viewport escape: 50%-50vw recenters the element to the
       viewport regardless of how deeply it's nested in constrained
       parents. The section's contentSize caps inner content at 1280px,
       so simply zeroing the section's padding isn't enough. */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;

    /* Gradient overlay + class photo. Light tint so the photo carries
       the visual weight; type stays legible via heavier text-shadow.
       Source is 1200x900 landscape — fits the wide band cleanly without
       awkward center-cropping. Kindermusik Level 2 class scene; not
       duplicated anywhere else on the page. */
    background-color: transparent !important;
    background-image:
        linear-gradient(135deg,
            rgba(64, 176, 160, 0.55) 0%,
            rgba(122, 58, 150, 0.52) 60%,
            rgba(31, 122, 112, 0.60) 100%),
        url('https://1qg74ywqg2.rke.spinupwp.site/wp-content/uploads/2026/05/kindermusik20level202.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    min-height: 420px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(64px, 8vw, 112px) clamp(24px, 5vw, 64px) !important;
    box-shadow: var(--wp--preset--shadow--md) !important;
}

/* White type on the photo band — heavy text-shadow needed since the
   gradient is light. */
#about > .wp-block-group.has-teal-soft-gradient-background:not(:last-child) > p.has-teal-700-color {
    color: rgba(255, 255, 255, 0.96) !important;
    text-shadow: 0 1px 8px rgba(14, 63, 58, 0.60), 0 1px 3px rgba(0, 0, 0, 0.40);
}

#about > .wp-block-group.has-teal-soft-gradient-background:not(:last-child) > h2.wp-block-heading {
    color: #fff !important;
    /* Two-layer shadow: a soft ambient halo + a tight dark drop so the
       headline stays legible regardless of what part of the photo it
       sits over (faces vs. background). */
    text-shadow: 0 2px 32px rgba(14, 63, 58, 0.65), 0 1px 4px rgba(0, 0, 0, 0.45);
    max-width: 820px;
}

/* Underline accent → butter on the dark band. */
#about > .wp-block-group.has-teal-soft-gradient-background:not(:last-child) h2.wp-block-heading.has-text-align-center::after {
    background: var(--wp--preset--color--butter) !important;
    width: 56px;
    height: 4px;
}

/* "Try a class" button → white pill on the dark band. */
#about > .wp-block-group.has-teal-soft-gradient-background:not(:last-child) .wp-block-button__link {
    margin-top: 28px;
    padding: 14px 32px;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--wp--preset--color--teal-800) !important;
    font-family: var(--wp--preset--font-family--outfit, "Outfit", sans-serif);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 20px rgba(14, 63, 58, 0.22);
    transition:
        transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 220ms ease-out,
        background-color 220ms ease-out,
        color 220ms ease-out;
}

#about > .wp-block-group.has-teal-soft-gradient-background:not(:last-child) .wp-block-button__link:hover,
#about > .wp-block-group.has-teal-soft-gradient-background:not(:last-child) .wp-block-button__link:focus-visible {
    background: var(--wp--preset--color--butter) !important;
    color: var(--wp--preset--color--ink) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(14, 63, 58, 0.32);
}

#about > .wp-block-group.has-teal-soft-gradient-background:not(:last-child) .wp-block-button__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}


/* === 6b. Team CTA band — full-bleed photo band ====================
   Mirrors the franchise band so the page reads as a pair of dramatic
   bands bookending the values cards. Different photo + a butter pill
   (vs. white pill on the franchise band) so they aren't identical. */

#about > .wp-block-group.has-teal-soft-gradient-background:last-child {
    /* True viewport escape — same technique as §6a. */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    /* No gap above (sits flush against values aside) or below (flush
       against the footer). The section/main/post-content padding resets
       below handle the bottom side; this just zeros the top. */
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;

    /* Different gradient direction + photo so the two bands feel like
       a partner pair, not duplicates. Preschool group photo shows a
       full class moment — fits the "people who teach here" beat. Light
       tint so the photo carries the visual weight. */
    background-color: transparent !important;
    background-image:
        linear-gradient(135deg,
            rgba(31, 122, 112, 0.58) 0%,
            rgba(122, 58, 150, 0.52) 60%,
            rgba(64, 176, 160, 0.60) 100%),
        url('https://1qg74ywqg2.rke.spinupwp.site/wp-content/uploads/2026/05/Preschool-1024x768.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    min-height: 420px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(64px, 8vw, 112px) clamp(24px, 5vw, 64px) !important;
    box-shadow: var(--wp--preset--shadow--md) !important;
}

/* White type on the photo band — heavy text-shadow needed since the
   gradient is light. */
#about > .wp-block-group.has-teal-soft-gradient-background:last-child > h2.wp-block-heading,
#about > .wp-block-group.has-teal-soft-gradient-background:last-child > p {
    color: #fff !important;
    text-shadow: 0 2px 32px rgba(14, 63, 58, 0.65), 0 1px 4px rgba(0, 0, 0, 0.45);
    max-width: 820px;
}

/* Underline accent → butter, matches §6a so the two bands rhyme. */
#about > .wp-block-group.has-teal-soft-gradient-background:last-child h2.wp-block-heading.has-text-align-center::after {
    background: var(--wp--preset--color--butter) !important;
    width: 56px;
    height: 4px;
}

/* "Meet our team" button → butter pill so the two CTAs are visually
   linked but not identical (franchise band uses a white pill). */
#about > .wp-block-group.has-teal-soft-gradient-background:last-child .wp-block-button__link {
    margin-top: 28px;
    padding: 14px 32px;
    border-radius: 999px !important;
    background: var(--wp--preset--color--butter) !important;
    color: var(--wp--preset--color--ink) !important;
    border: 0 !important;
    font-family: var(--wp--preset--font-family--outfit, "Outfit", sans-serif);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 20px rgba(14, 63, 58, 0.28);
    transition:
        transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 220ms ease-out,
        background-color 220ms ease-out,
        color 220ms ease-out;
}

#about > .wp-block-group.has-teal-soft-gradient-background:last-child .wp-block-button__link:hover,
#about > .wp-block-group.has-teal-soft-gradient-background:last-child .wp-block-button__link:focus-visible {
    background: #fff !important;
    color: var(--wp--preset--color--teal-800) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(14, 63, 58, 0.32);
}

#about > .wp-block-group.has-teal-soft-gradient-background:last-child .wp-block-button__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}


/* --------------------------------------------------------------------
   5. Page hero override — punch the gradient on body.page-about.

   Default hero overlay is teal-800/grape-700 at .82/.78 — dark, lets
   the photo dominate. For About we want the Thrive feel: brighter
   teal-500/grape-500 at higher saturation so the gradient reads as
   the hero's main color, with the photo as ambient texture.
   -------------------------------------------------------------------- */

/* This stylesheet only enqueues on is_page('about'), so .mm-page-hero
   in this file is implicitly About-only — no body-class qualifier.
   Light overlay — photo dominates, color is a tint, not a wash. */
.mm-page-hero::before {
    background: linear-gradient(
        135deg,
        rgba(64, 176, 160, 0.58) 0%,
        rgba(128, 64, 160, 0.52) 60%,
        rgba(244, 209, 106, 0.18) 100%
    );
}

/* With a lighter gradient the white headline needs more shadow to stay
   readable against the photo's variable brightness. */
.mm-page-hero__headline {
    text-shadow: 0 2px 32px rgba(14, 63, 58, 0.55), 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}
.mm-page-hero__body {
    text-shadow: 0 1px 16px rgba(14, 63, 58, 0.55), 0 1px 4px rgba(0, 0, 0, 0.30) !important;
}


/* --------------------------------------------------------------------
   6. Scroll-reveal — fade-up as each major child of #about enters.
      Paired with about-reveal.js, which sets data-mm-reveal and
      toggles .is-mm-revealed via IntersectionObserver.
   -------------------------------------------------------------------- */

#about [data-mm-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
}

#about [data-mm-reveal].is-mm-revealed {
    opacity: 1;
    transform: none;
}


/* --------------------------------------------------------------------
   7. Reduced-motion fallback — kill transitions + transforms.
   -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    #about .wp-block-gallery .wp-block-image,
    #about .wp-block-gallery .wp-block-image img,
    #about > aside.wp-block-group .wp-block-columns > .wp-block-column {
        transition: none;
    }

    #about > aside.wp-block-group .wp-block-columns > .wp-block-column:hover {
        transform: none;
    }

    #about .wp-block-gallery .wp-block-image:hover,
    #about .wp-block-gallery .wp-block-image:hover img {
        transform: none;
    }

    #about [data-mm-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =====================================================================
   8. DESIGNED COVER (about-only).

   The universal .mm-page-hero is a static photo + gradient wash with no
   entrance motion (the #about reveal observer never reaches it — the
   hero is a sibling rendered *before* #about). This block turns the
   About cover into a designed hero:

     · staggered entrance — eyebrow → headline → lede rise + fade on load
     · two soft floating glow orbs (teal + butter) for ambient color/depth
     · a gentle pulse ring on the eyebrow dot

   All motion is gated behind prefers-reduced-motion: no-preference, so
   reduced-motion + no-JS users get the full static cover immediately.
   Scoped to .mm-page-hero, which is About-only here (this sheet only
   enqueues on is_page('about')).
   ===================================================================== */

/* Establish a clean stacking + clipping context for the decorative
   layers. overflow:hidden is already set on .mm-page-hero. */
.mm-page-hero {
    isolation: isolate;
}

/* --- Floating ambient orbs. Pure CSS radial glows on the inner's
   pseudo-elements; z-index:-1 keeps them behind the headline/lede but
   (because .mm-page-hero__inner is a z:2 stacking context) above the
   gradient wash, so they read as soft colored light. --------------- */
.mm-page-hero__inner::before,
.mm-page-hero__inner::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(6px);
}

/* Teal orb, upper-left. */
.mm-page-hero__inner::before {
    width: clamp(220px, 32vw, 400px);
    height: clamp(220px, 32vw, 400px);
    top: clamp(-120px, -8vw, -60px);
    left: clamp(-160px, -10vw, -80px);
    background: radial-gradient(
        circle,
        rgba(112, 192, 192, 0.45) 0%,
        rgba(112, 192, 192, 0) 70%
    );
}

/* Butter orb, lower-right. */
.mm-page-hero__inner::after {
    width: clamp(200px, 28vw, 360px);
    height: clamp(200px, 28vw, 360px);
    bottom: clamp(-130px, -9vw, -70px);
    right: clamp(-150px, -9vw, -70px);
    background: radial-gradient(
        circle,
        rgba(244, 209, 106, 0.42) 0%,
        rgba(244, 209, 106, 0) 70%
    );
}

/* --- Motion: entrance + ambient float + dot pulse. Reduced-motion
   users skip all of this and see the final state. ------------------ */
@media (prefers-reduced-motion: no-preference) {

    /* Staggered entrance — children start low + transparent, rise in. */
    .mm-page-hero__eyebrow,
    .mm-page-hero__headline,
    .mm-page-hero__body {
        opacity: 0;
        animation: mm-hero-rise 720ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    }
    .mm-page-hero__eyebrow  { animation-delay: 80ms; }
    .mm-page-hero__headline { animation-delay: 220ms; }
    .mm-page-hero__body     { animation-delay: 400ms; }

    @keyframes mm-hero-rise {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Slow ambient drift on the orbs. */
    .mm-page-hero__inner::before {
        animation: mm-orb-float-a 15s ease-in-out infinite alternate;
    }
    .mm-page-hero__inner::after {
        animation: mm-orb-float-b 19s ease-in-out infinite alternate;
    }
    @keyframes mm-orb-float-a {
        from { transform: translate(0, 0); }
        to   { transform: translate(26px, 20px); }
    }
    @keyframes mm-orb-float-b {
        from { transform: translate(0, 0); }
        to   { transform: translate(-22px, -24px); }
    }

    /* Eyebrow dot pulse ring. */
    .mm-page-hero__eyebrow-dot {
        animation: mm-dot-pulse 2.4s ease-out infinite;
    }
    @keyframes mm-dot-pulse {
        0%   { box-shadow: 0 0 0 0 rgba(66, 174, 154, 0.55); }
        70%  { box-shadow: 0 0 0 6px rgba(66, 174, 154, 0); }
        100% { box-shadow: 0 0 0 0 rgba(66, 174, 154, 0); }
    }
}


/* =====================================================================
   9. INTRO STORY — editorial two-column with founder portrait.

   The intro was five flat paragraphs on cream — the weakest moment on
   the page. This turns it into a magazine-style "founder's story":

     · left  — the story copy, with a teal drop-cap leading the first
       (lede-sized) paragraph and the closing "Welcome to the family"
       line set apart as a warm sign-off.
     · right — Ms. Katherine's studio portrait, framed, with a
       "Founder" caption pill, filling the full height of the copy.

   Mobile: collapses to a single column with the portrait as a banner
   on top of the copy.

   Targets the first direct child of #about (the 720px intro group).
   The milestones block — the next child — carries
   .has-white-background-color, so :first-child can't collide with it.
   ===================================================================== */

#about > div.wp-block-group:first-child {
    /* Break out of the inline 720px content cap to make room for the
       portrait column. */
    max-width: 1080px !important;
    margin-inline: auto;
    /* Mobile-first: a flex column so the portrait can be ordered above
       the copy on narrow screens. */
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--5);
}

/* Kill the flow-layout block-gap margins now that gap handles spacing. */
#about > div.wp-block-group:first-child > p {
    margin-block: 0 !important;
    max-width: none !important;
}

/* Lede first paragraph + teal drop cap. */
#about > div.wp-block-group:first-child > p:first-of-type {
    font-size: clamp(19px, 0.6vw + 17px, 23px) !important;
    line-height: 1.5 !important;
    color: var(--wp--preset--color--ink) !important;
}
#about > div.wp-block-group:first-child > p:first-of-type::first-letter {
    float: left;
    margin: 6px 14px 0 0;
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: 3.6em;
    line-height: 0.72;
    color: var(--wp--preset--color--teal-700);
}

/* Closing line ("Welcome to the family.") → warm sign-off. */
#about > div.wp-block-group:first-child > p:last-of-type {
    margin-top: var(--wp--preset--spacing--2) !important;
    padding-top: clamp(16px, 2vw, 24px) !important;
    border-top: 1px solid var(--wp--preset--color--line);
    font-family: var(--mm-font-display) !important;
    font-size: clamp(18px, 0.5vw + 16px, 22px) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--wp--preset--color--teal-700) !important;
}

/* Mobile-first: relative container so the caption pill can anchor over
   the video corner at any breakpoint. */
#about > div.wp-block-group:first-child {
    position: relative;
}

/* Founder video — a real core Video block in the page content (so it's
   editable + accessible). Framed to match the page's photo language;
   its poster keeps the same still as the old portrait until played. */
#about > div.wp-block-group:first-child .wp-block-video {
    order: -2; /* video first (above copy) on mobile */
    width: 100%;
    margin: 0;
    /* Frame matches the reel's native ratio (1280×2276 ≈ 9:16) so the
       video fills it edge-to-edge with no crop. */
    aspect-ratio: 1280 / 2276;
    border-radius: 22px;
    border: 6px solid #fff;
    outline: 1px solid var(--wp--preset--color--line);
    box-shadow:
        0 20px 48px -16px rgba(95, 44, 117, 0.45),
        0 2px 8px rgba(14, 63, 58, 0.10);
    overflow: hidden;
    background-color: var(--wp--preset--color--grape-100);
}
#about > div.wp-block-group:first-child .wp-block-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* ratio matches the frame → no actual cropping */
    border-radius: inherit;
}

/* Founder caption pill — anchored over the video's top corner, clear of
   the playback controls. pointer-events:none so it never blocks the
   video. */
#about > div.wp-block-group:first-child::before {
    content: "Ms. Katherine \2014 Founder";
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    pointer-events: none;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--wp--preset--color--grape-700);
    font-family: var(--mm-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow: 0 6px 18px rgba(95, 44, 117, 0.28);
}

@media (min-width: 880px) {
    /* Reserve a right gutter; the video is taken out of flow and pinned
       to the top of it, sized by width × its native aspect-ratio. */
    #about > div.wp-block-group:first-child {
        padding-right: clamp(290px, 34%, 392px);
    }
    /* Video: absolute, top-right; height follows the inherited 9:16
       aspect-ratio (no stretch, no crop). */
    #about > div.wp-block-group:first-child .wp-block-video {
        position: absolute;
        top: 0;
        right: 0;
        width: clamp(260px, 30%, 348px);
    }
    /* Caption: top-right of the video on desktop. */
    #about > div.wp-block-group:first-child::before {
        top: 20px;
        left: auto;
        right: 20px;
    }
}


/* =====================================================================
   10. TIMELINE — bolder milestones + staggered reveal.

   The milestones (2003 / 2011 / 2015) already render as a horizontal
   timeline (band + connecting line + dots, §2). This makes the year
   numerals read as real milestones and pops the three markers in one
   after another as the timeline scrolls into view.
   ===================================================================== */

/* Bigger, bolder year numerals (the year is the first <p> in each
   milestone column). */
#about > div.wp-block-group.has-white-background-color > .wp-block-columns > .wp-block-column > p:first-of-type {
    font-size: clamp(40px, 3.6vw, 60px) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em;
}

/* Staggered fade-up of the three markers, keyed off .is-mm-revealed
   (about-reveal.js adds it to the container). Gating the hidden state
   inside no-preference means reduced-motion users always see the
   markers — no JS-dependent invisibility for them. */
@media (prefers-reduced-motion: no-preference) {
    #about > div.wp-block-group.has-white-background-color > .wp-block-columns > .wp-block-column {
        opacity: 0;
        transform: translateY(16px);
        transition:
            opacity 560ms cubic-bezier(0.2, 0.7, 0.2, 1),
            transform 560ms cubic-bezier(0.2, 0.7, 0.2, 1);
    }
    #about > div.wp-block-group.has-white-background-color.is-mm-revealed > .wp-block-columns > .wp-block-column {
        opacity: 1;
        transform: none;
    }
    #about > div.wp-block-group.has-white-background-color.is-mm-revealed > .wp-block-columns > .wp-block-column:nth-child(2) {
        transition-delay: 130ms;
    }
    #about > div.wp-block-group.has-white-background-color.is-mm-revealed > .wp-block-columns > .wp-block-column:nth-child(3) {
        transition-delay: 260ms;
    }
}


/* =====================================================================
   11. VALUES CARDS — staggered rise-in.

   Extends the page's entrance rhythm to the three gradient value cards
   (Community / Creativity / Confidence). Uses the individual `translate`
   property for the rise (not `transform`) so it composes with — and
   never blocks — the card's existing `transform: translateY(-4px)`
   hover lift. Keyed off .is-mm-revealed (about-reveal.js). Reduced-motion
   users are excluded by the media query, so the cards stay visible.
   ===================================================================== */

@media (prefers-reduced-motion: no-preference) {
    #about > aside.wp-block-group:not(.is-mm-revealed) .wp-block-columns > .wp-block-column {
        opacity: 0;
        translate: 0 22px;
    }
    #about > aside.wp-block-group.is-mm-revealed .wp-block-columns > .wp-block-column {
        animation: mm-card-rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
    #about > aside.wp-block-group.is-mm-revealed .wp-block-columns > .wp-block-column:nth-child(2) {
        animation-delay: 130ms;
    }
    #about > aside.wp-block-group.is-mm-revealed .wp-block-columns > .wp-block-column:nth-child(3) {
        animation-delay: 260ms;
    }
    @keyframes mm-card-rise {
        from { opacity: 0; translate: 0 22px; }
        to   { opacity: 1; translate: 0 0; }
    }
}


/* =====================================================================
   12. "Read more about our values" link → outlined pill CTA.

   The values block closes on a plain uppercase text link. Promote it to
   a grape outlined pill with a CSS arrow (::after, per the no-wp:html
   convention). The :hover color is forced with !important to beat the
   global block-styles `a:hover { color: teal-800 }` that would otherwise
   green the label.
   ===================================================================== */

#about > aside.wp-block-group > p:last-child {
    margin-top: clamp(10px, 2vw, 22px) !important;
}
#about > aside.wp-block-group > p:last-child a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 28px;
    border-radius: 999px;
    border: 2px solid var(--wp--preset--color--grape);
    color: var(--wp--preset--color--grape-700);
    text-decoration: none;
    transition:
        background-color 200ms ease-out,
        color 200ms ease-out,
        transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 200ms ease-out;
}
#about > aside.wp-block-group > p:last-child a::after {
    content: "\2192"; /* → */
    font-size: 1.1em;
    line-height: 1;
    transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
#about > aside.wp-block-group > p:last-child a:hover,
#about > aside.wp-block-group > p:last-child a:focus-visible {
    background: var(--wp--preset--color--grape);
    color: #fff !important; /* beat global a:hover { color: teal-800 } */
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(95, 44, 117, 0.28);
}
#about > aside.wp-block-group > p:last-child a:hover::after,
#about > aside.wp-block-group > p:last-child a:focus-visible::after {
    transform: translateX(3px);
}
#about > aside.wp-block-group > p:last-child a:focus-visible {
    outline: 2px solid var(--wp--preset--color--grape-700);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    #about > aside.wp-block-group > p:last-child a,
    #about > aside.wp-block-group > p:last-child a::after {
        transition: none;
    }
    #about > aside.wp-block-group > p:last-child a:hover {
        transform: none;
    }
}