/*
|--------------------------------------------------------------------------
| TINY HUMANS™ — Main Stylesheet
|--------------------------------------------------------------------------
|
| Template Forge #018
| Childcare & Early Learning Center
|
| Design direction:
| - Warm editorial childcare
| - Asymmetric layouts
| - Playful paper-cut collage
| - Authentic photography
| - Parent-first usability
| - Humor in the copy, not in usability
|
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
    --color-cream: #fff7e8;
    --color-paper: #fffdf8;
    --color-graphite: #292a2c;
    --color-blue: #4d72d8;
    --color-blue-dark: #3559bd;
    --color-red: #e95c50;
    --color-butter: #f4cf63;
    --color-green: #82b784;
    --color-purple: #8b72b6;
    --color-soft-blue: #dfe7fb;
    --color-soft-red: #f9d7d2;
    --color-soft-yellow: #fff0b7;
    --color-border: rgba(41, 42, 44, 0.16);

    --font-display:
        "Arial Rounded MT Bold",
        "Trebuchet MS",
        Arial,
        sans-serif;

    --font-body:
        Inter,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    --page-width: 1440px;
    --content-width: 1240px;

    --shadow-soft:
        0 24px 70px rgba(41, 42, 44, 0.12);

    --shadow-photo:
        0 28px 70px rgba(41, 42, 44, 0.18);

    --radius-small: 14px;
    --radius-medium: 26px;
    --radius-large: 42px;

    --transition:
        180ms ease;
}


/* ==========================================================================
   RESET / BASE
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    color: var(--color-graphite);
    background: var(--color-cream);

    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;

    overflow-x: hidden;
}


body,
button,
input,
textarea,
select {
    font-family: var(--font-body);
}


img {
    display: block;

    width: 100%;
    max-width: 100%;
}


a {
    color: inherit;

    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


button,
input,
textarea,
select {
    font: inherit;
}


figure,
h1,
h2,
h3,
p {
    margin-top: 0;
}


::selection {
    color: var(--color-paper);
    background: var(--color-blue);
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.skip-link {
    position: fixed;
    z-index: 9999;

    top: 1rem;
    left: 1rem;

    padding: 0.8rem 1rem;

    color: var(--color-paper);
    background: var(--color-graphite);

    font-size: 0.85rem;
    font-weight: 800;

    transform: translateY(-200%);

    transition: transform var(--transition);
}


.skip-link:focus {
    transform: translateY(0);
}


a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--color-red);
    outline-offset: 4px;
}


/* ==========================================================================
   SHARED TYPOGRAPHY
   ========================================================================== */

.eyebrow {
    margin-bottom: 1.15rem;

    color: var(--color-blue);

    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1.2;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


.button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding: 0.8rem 1.25rem;

    border: 0;

    color: var(--color-paper);
    background: var(--color-blue);

    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1;

    text-decoration: none;

    border-radius: 999px;

    cursor: pointer;

    transition:
        transform var(--transition),
        background-color var(--transition),
        box-shadow var(--transition);
}


.button:hover {
    background: var(--color-blue-dark);

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(77, 114, 216, 0.24);
}


.button:active {
    transform: translateY(0);
}


.button--primary {
    padding-inline: 1.45rem;
}


.text-link {
    display: inline-flex;

    align-items: center;
    gap: 0.55rem;

    color: var(--color-graphite);

    font-size: 0.93rem;
    font-weight: 850;

    text-decoration: none;

    transition:
        color var(--transition),
        gap var(--transition);
}


.text-link span {
    color: var(--color-red);

    font-size: 1.15em;
}


.text-link:hover {
    color: var(--color-blue);

    gap: 0.8rem;
}


/* ==========================================================================
   SITE HEADER
   ========================================================================== */

.site-header {
    position: relative;
    z-index: 100;

    background: var(--color-cream);
}


.site-header__inner {
    width: min(
        calc(100% - 3rem),
        var(--content-width)
    );

    min-height: 104px;

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 2rem;
}


/* ==========================================================================
   BRAND
   ========================================================================== */

.brand {
    position: relative;

    display: inline-flex;

    flex-direction: column;

    width: max-content;

    color: var(--color-graphite);

    text-decoration: none;
}


.brand__tiny {
    align-self: flex-start;

    margin-left: 0.15rem;
    margin-bottom: -0.1rem;

    color: var(--color-red);

    font-size: 0.63rem;
    font-weight: 950;

    letter-spacing: 0.2em;
    line-height: 1;

    transform: rotate(-2deg);
}


.brand__humans {
    font-family: var(--font-display);
    font-size: 1.52rem;
    font-weight: 950;
    line-height: 0.95;

    letter-spacing: -0.04em;

    text-transform: uppercase;
}


.brand__mark {
    position: relative;

    top: -0.44em;

    margin-left: 0.08em;

    font-family: var(--font-body);
    font-size: 0.34em;
    font-weight: 900;
}


/* ==========================================================================
   PRIMARY NAVIGATION
   ========================================================================== */

.primary-nav {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: clamp(1.25rem, 2.3vw, 2.3rem);
}


.primary-nav a {
    position: relative;

    padding-block: 0.35rem;

    color: var(--color-graphite);

    font-size: 0.88rem;
    font-weight: 750;

    text-decoration: none;
}


.primary-nav a::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    background: var(--color-butter);

    border-radius: 999px;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform var(--transition);
}


.primary-nav a:hover::after {
    transform: scaleX(1);
}


.button--header {
    min-height: 46px;

    padding-inline: 1.15rem;

    background: var(--color-graphite);
}


.button--header:hover {
    background: var(--color-blue);
}


/* ==========================================================================
   MOBILE NAV BUTTON
   ========================================================================== */

.nav-toggle {
    display: none;

    width: 48px;
    height: 48px;

    padding: 0;

    border: 0;

    background: transparent;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 6px;

    cursor: pointer;
}


.nav-toggle__line {
    display: block;

    width: 24px;
    height: 3px;

    background: var(--color-graphite);

    border-radius: 999px;

    transition:
        transform var(--transition),
        opacity var(--transition);
}


/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
    position: relative;

    min-height: 750px;

    padding:
        clamp(3.5rem, 6vw, 6rem)
        0
        clamp(5rem, 8vw, 8rem);

    isolation: isolate;
}


.hero__inner {
    position: relative;
    z-index: 2;

    width: min(
        calc(100% - 3rem),
        var(--content-width)
    );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.78fr)
        minmax(0, 1.22fr);

    align-items: center;

    gap: clamp(2.5rem, 5vw, 5.5rem);
}


/* ==========================================================================
   HERO COPY
   ========================================================================== */

.hero__content {
    position: relative;
    z-index: 5;

    max-width: 540px;
}


.hero__content .eyebrow {
    margin-bottom: 1.35rem;
}


.hero__title {
    margin-bottom: 1.6rem;

    color: var(--color-graphite);

    font-family: var(--font-display);
    font-size: clamp(4.25rem, 6.3vw, 5.7rem);
    font-weight: 950;
    line-height: 0.87;

    letter-spacing: -0.065em;

    text-transform: uppercase;
}


.hero__title span {
    display: block;

    white-space: nowrap;
}


.hero__title span:last-child {
    color: var(--color-blue);

    transform: translateX(0.18em);
}


.hero__intro {
    max-width: 500px;

    margin-bottom: 1.8rem;

    color: rgba(41, 42, 44, 0.78);

    font-size: clamp(1rem, 1.3vw, 1.1rem);
    line-height: 1.72;
}


.hero__actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 1.4rem;

    margin-bottom: 2rem;
}


.hero__aside {
    position: relative;

    display: inline-block;

    margin: 0;

    padding-left: 1.6rem;

    color: rgba(41, 42, 44, 0.72);

    font-size: 0.84rem;
    font-weight: 650;
}


.hero__aside::before {
    content: "";

    position: absolute;

    top: 0.15rem;
    bottom: 0.15rem;
    left: 0;

    width: 5px;

    background: var(--color-red);

    border-radius: 999px;

    transform: rotate(3deg);
}


.hero__aside strong {
    color: var(--color-graphite);
}


/* ==========================================================================
   HERO COLLAGE
   ========================================================================== */

.hero__visual {
    position: relative;

    min-height: 620px;

    margin-right: -3vw;
}


.hero__photo {
    position: absolute;

    margin: 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--color-soft-blue),
            var(--color-soft-yellow)
        );

    box-shadow: var(--shadow-photo);
}


.hero__photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.hero__photo--main {
    top: 0;
    right: 0;

    width: min(100%, 720px);
    height: 555px;

    border-radius:
        56px
        18px
        68px
        28px;

    transform: rotate(1.1deg);
}


.hero__photo--detail {
    z-index: 4;

    bottom: 0;
    left: -3.8rem;

    width: 245px;
    height: 285px;

    border:
        12px
        solid
        var(--color-paper);

    border-radius:
        22px
        42px
        18px
        38px;

    transform: rotate(-5deg);

    box-shadow:
        0 24px 60px rgba(41, 42, 44, 0.2);
}


/* ==========================================================================
   HERO NOTE
   ========================================================================== */

.hero__note {
    position: absolute;
    z-index: 6;

    right: 2rem;
    bottom: 0.35rem;

    width: 190px;

    padding:
        1.15rem
        1.2rem
        1.25rem;

    color: var(--color-graphite);
    background: var(--color-butter);

    border-radius:
        8px
        18px
        12px
        15px;

    box-shadow:
        0 16px 34px rgba(41, 42, 44, 0.14);

    transform: rotate(3.5deg);
}


.hero__note::before {
    content: "";

    position: absolute;

    top: -8px;
    left: 50%;

    width: 64px;
    height: 18px;

    background:
        rgba(255, 255, 255, 0.5);

    transform:
        translateX(-50%)
        rotate(-2deg);
}


.hero__note-label {
    display: block;

    margin-bottom: 0.3rem;

    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.hero__note-copy {
    display: block;

    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.15;
}


/* ==========================================================================
   HERO DOODLES
   ========================================================================== */

.hero__doodle {
    position: absolute;
    z-index: 7;

    pointer-events: none;
}


.hero__doodle svg {
    display: block;

    width: 100%;
    height: auto;
}


.hero__doodle--line {
    left: -1rem;
    bottom: 9.5rem;

    width: 150px;

    transform: rotate(-6deg);
}


.hero__doodle--line path {
    fill: none;
    stroke: var(--color-blue);
    stroke-width: 6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.hero__doodle--star {
    top: 2.4rem;
    left: -2.1rem;

    width: 64px;

    transform: rotate(-12deg);
}


.hero__doodle--star path {
    fill: var(--color-red);
}


/* ==========================================================================
   HERO BACKGROUND SHAPES
   ========================================================================== */

.hero__shape {
    position: absolute;

    z-index: 0;

    pointer-events: none;
}


.hero__shape--butter {
    top: 6rem;
    right: -7rem;

    width: 310px;
    height: 310px;

    background: var(--color-soft-yellow);

    border-radius:
        54%
        46%
        64%
        36%
        /
        43%
        58%
        42%
        57%;

    transform: rotate(19deg);
}


.hero__shape--red {
    bottom: 6rem;
    left: -4rem;

    width: 140px;
    height: 140px;

    background: var(--color-soft-red);

    border-radius:
        38%
        62%
        48%
        52%
        /
        61%
        43%
        57%
        39%;

    transform: rotate(-24deg);
}


/* ==========================================================================
   IMPORTANT STUFF
   ========================================================================== */

.important-stuff {
    position: relative;

    padding:
        clamp(5rem, 8vw, 8rem)
        0;

    color: var(--color-graphite);
    background: var(--color-paper);

    overflow: hidden;
}


.important-stuff::before {
    content: "";

    position: absolute;

    top: -80px;
    right: 9%;

    width: 180px;
    height: 180px;

    background: var(--color-soft-blue);

    border-radius:
        45%
        55%
        37%
        63%
        /
        54%
        41%
        59%
        46%;

    transform: rotate(20deg);
}


.important-stuff__inner {
    position: relative;
    z-index: 2;

    width: min(
        calc(100% - 3rem),
        var(--content-width)
    );

    margin-inline: auto;
}


.important-stuff h2 {
    max-width: 760px;

    margin-bottom:
        clamp(3rem, 6vw, 5rem);

    font-family: var(--font-display);
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 950;
    line-height: 0.95;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


/* ==========================================================================
   EDITORIAL FACTS
   ========================================================================== */

.important-stuff__facts {
    display: grid;

    grid-template-columns:
        1.18fr
        0.82fr
        1fr
        1.2fr;

    align-items: start;

    gap: clamp(1.5rem, 3.5vw, 4rem);
}


.fact {
    position: relative;

    min-width: 0;

    padding-top: 1.3rem;

    border-top:
        5px
        solid
        var(--color-graphite);
}


.fact:nth-child(1) {
    margin-top: 1.8rem;

    border-color: var(--color-blue);
}


.fact:nth-child(2) {
    border-color: var(--color-red);
}


.fact:nth-child(3) {
    margin-top: 3.5rem;

    border-color: var(--color-green);
}


.fact:nth-child(4) {
    margin-top: 0.7rem;

    border-color: var(--color-purple);
}


.fact__value {
    margin-bottom: 0.4rem;

    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.4vw, 2.6rem);
    font-weight: 950;
    line-height: 1;

    letter-spacing: -0.045em;
}


.fact__label {
    max-width: 220px;

    margin-bottom: 0;

    color: rgba(41, 42, 44, 0.67);

    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.45;
}


.demo-note {
    max-width: 720px;

    margin:
        clamp(3rem, 6vw, 5.5rem)
        0
        0;

    padding-top: 1.1rem;

    border-top:
        1px
        solid
        var(--color-border);

    color: rgba(41, 42, 44, 0.55);

    font-size: 0.7rem;
    line-height: 1.6;
}


/* ==========================================================================
   TEMPORARY FOOTER
   ========================================================================== */

.site-footer {
    padding:
        3rem
        0;

    color: var(--color-paper);
    background: var(--color-graphite);
}


.site-footer__inner {
    width: min(
        calc(100% - 3rem),
        var(--content-width)
    );

    margin-inline: auto;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 2rem;
}


.brand--footer {
    color: var(--color-paper);
}


.site-footer p {
    margin: 0;

    color: rgba(255, 253, 248, 0.67);

    font-size: 0.84rem;
}


/* ==========================================================================
   LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1500px) {

    .hero__visual {
        margin-right: -5vw;
    }

}


/* ==========================================================================
   TABLET / SMALL DESKTOP
   ========================================================================== */

@media (max-width: 1100px) {

    .site-header__inner {
        gap: 1.4rem;
    }


    .primary-nav {
        gap: 1.2rem;
    }


    .primary-nav a {
        font-size: 0.8rem;
    }


    .hero__inner {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        gap: 2rem;
    }


    .hero__title {
        font-size: clamp(3.8rem, 7vw, 4.8rem);
    }


    .hero__visual {
        min-height: 560px;

        margin-right: -2rem;
    }


    .hero__photo--main {
        height: 500px;
    }


    .hero__photo--detail {
        left: -2rem;

        width: 210px;
        height: 245px;
    }


    .hero__note {
        right: 0.5rem;
    }


    .important-stuff__facts {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            3rem
            4rem;
    }


    .fact:nth-child(n) {
        margin-top: 0;
    }

}


/* ==========================================================================
   MOBILE NAV / TABLET PORTRAIT
   ========================================================================== */

@media (max-width: 860px) {

    .site-header__inner {
        min-height: 86px;

        grid-template-columns:
            auto
            1fr
            auto;

        gap: 0.8rem;
    }


    .nav-toggle {
        display: flex;

        justify-self: end;
    }


    .primary-nav {
        position: absolute;

        top: 86px;
        right: 1.5rem;
        left: 1.5rem;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 1rem;

        background: var(--color-paper);

        border:
            1px
            solid
            var(--color-border);

        border-radius: var(--radius-medium);

        box-shadow: var(--shadow-soft);
    }


    .primary-nav.is-open {
        display: flex;
    }


    .primary-nav a {
        padding:
            0.9rem
            0.8rem;

        font-size: 0.95rem;
    }


    .primary-nav a::after {
        display: none;
    }


    .button--header {
        display: none;
    }


    .nav-toggle[aria-expanded="true"]
    .nav-toggle__line:first-child {
        transform:
            translateY(4.5px)
            rotate(45deg);
    }


    .nav-toggle[aria-expanded="true"]
    .nav-toggle__line:last-child {
        transform:
            translateY(-4.5px)
            rotate(-45deg);
    }


    .hero {
        min-height: 0;

        padding-top: 3.2rem;
    }


    .hero__inner {
        grid-template-columns: 1fr;

        gap: 3.5rem;
    }


    .hero__content {
        max-width: 660px;
    }


    .hero__title {
        max-width: 700px;

        font-size: clamp(4rem, 10vw, 5.3rem);
    }


    .hero__visual {
        min-height: 590px;

        width: min(100%, 700px);

        margin:
            0
            auto;
    }


    .hero__photo--main {
        left: 2rem;
        right: 0;

        width: auto;
        height: 525px;
    }


    .hero__photo--detail {
        left: 0;

        width: 225px;
        height: 255px;
    }


    .hero__doodle--star {
        left: 0;
    }


    .hero__note {
        right: 1rem;
    }


    .hero__shape--red {
        bottom: 21rem;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .site-header__inner {
        width:
            min(
                calc(100% - 2rem),
                var(--content-width)
            );
    }


    .brand__humans {
        font-size: 1.28rem;
    }


    .hero {
        padding:
            2.4rem
            0
            5rem;
    }


    .hero__inner {
        width:
            min(
                calc(100% - 2rem),
                var(--content-width)
            );

        gap: 2.8rem;
    }


    .hero__title {
        margin-bottom: 1.3rem;

        font-size: clamp(3.05rem, 14.7vw, 4.3rem);
        line-height: 0.9;
    }


    .hero__title span {
        white-space: normal;
    }


    .hero__title span:last-child {
        transform: none;
    }


    .hero__intro {
        font-size: 0.98rem;
        line-height: 1.66;
    }


    .hero__actions {
        align-items: flex-start;

        flex-direction: column;

        gap: 1rem;
    }


    .button--primary {
        width: 100%;
    }


    .hero__aside {
        padding-left: 1.2rem;
    }


    .hero__visual {
        min-height: 465px;
    }


    .hero__photo--main {
        left: 0.75rem;

        height: 405px;

        border-radius:
            34px
            12px
            40px
            20px;
    }


    .hero__photo--detail {
        bottom: -0.5rem;
        left: -0.25rem;

        width: 155px;
        height: 185px;

        border-width: 8px;
    }


    .hero__note {
        right: -0.1rem;
        bottom: -0.4rem;

        width: 155px;

        padding:
            0.9rem
            1rem;
    }


    .hero__note-copy {
        font-size: 0.86rem;
    }


    .hero__doodle--line {
        display: none;
    }


    .hero__doodle--star {
        top: -1.4rem;
        left: -0.2rem;

        width: 48px;
    }


    .hero__shape--butter {
        top: auto;
        right: -7rem;
        bottom: 3rem;

        width: 230px;
        height: 230px;
    }


    .hero__shape--red {
        display: none;
    }


    .important-stuff {
        padding:
            4.5rem
            0;
    }


    .important-stuff__inner {
        width:
            min(
                calc(100% - 2rem),
                var(--content-width)
            );
    }


    .important-stuff h2 {
        margin-bottom: 2.8rem;

        font-size: clamp(2.7rem, 13vw, 4rem);
    }


    .important-stuff__facts {
        grid-template-columns: 1fr;

        gap: 2rem;
    }


    .fact {
        max-width: 100%;

        padding-top: 1rem;
    }


    .fact__label {
        max-width: none;
    }


    .demo-note {
        margin-top: 3rem;
    }


    .site-footer__inner {
        width:
            min(
                calc(100% - 2rem),
                var(--content-width)
            );

        align-items: flex-start;

        flex-direction: column;

        gap: 1.3rem;
    }

}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 390px) {

    .hero__title {
        font-size: 2.9rem;
    }


    .hero__visual {
        min-height: 425px;
    }


    .hero__photo--main {
        height: 365px;
    }


    .hero__photo--detail {
        width: 140px;
        height: 165px;
    }


    .hero__note {
        width: 145px;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}

/* ==========================================================================
   TH_HERO_MIDWIDTH_FIX_V2
   Stack the editorial hero earlier and keep copy comfortably inset.
   ========================================================================== */

@media (min-width: 861px) and (max-width: 1366px) {

    .hero {
        min-height: 0;
        padding-top: 4rem;
    }

    .hero__inner {
        width: min(calc(100% - 4rem), 1120px);
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 4.5rem;
    }

    .hero__content {
        width: 100%;
        max-width: 800px;
        margin-inline: auto;
    }

    .hero__title {
        max-width: 800px;
        font-size: clamp(4.25rem, 7vw, 5.4rem);
    }

    .hero__intro {
        max-width: 620px;
    }

    .hero__visual {
        width: min(100%, 850px);
        min-height: 620px;
        margin: 0 auto;
    }

    .hero__photo--main {
        left: 2.5rem;
        right: 0;
        width: auto;
        height: 545px;
    }

    .hero__photo--detail {
        left: 0;
        width: 225px;
        height: 260px;
    }

    .hero__note {
        right: 1.25rem;
    }

    .hero__doodle--star {
        left: 0.25rem;
    }

}

/* ==========================================================================
   TH_HEADER_BRAND_VISIBILITY_FIX_V1
   Explicit desktop header placement and brand visibility.
   ========================================================================== */

@media (min-width: 861px) {

    .site-header__inner {
        grid-template-columns:
            max-content
            minmax(0, 1fr)
            max-content;
    }


    .site-header .brand {
        grid-column: 1;

        display: inline-flex !important;

        justify-self: start;

        width: max-content;

        color: var(--color-graphite) !important;

        visibility: visible !important;
        opacity: 1 !important;

        z-index: 3;
    }


    .site-header .brand__tiny {
        display: block;

        color: var(--color-red) !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    .site-header .brand__humans {
        display: block;

        color: var(--color-graphite) !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    .primary-nav {
        grid-column: 2;
    }


    .button--header {
        grid-column: 3;
    }

}

/* ==========================================================================
   TH_HORIZONTAL_OVERFLOW_FIX_V1
   Prevent decorative hero artwork from widening the document.
   ========================================================================== */

html {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden;
}


body {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden;
}


.hero {
    width: 100%;
    max-width: 100%;

    overflow: hidden;
}


.site-header,
main,
.important-stuff,
.site-footer {
    width: 100%;
    max-width: 100%;
}

/* ==========================================================================
   TH_PROGRAMS_PAGE_V1
   Programs page — editorial age-based layout
   ========================================================================== */


/* ==========================================================================
   PROGRAMS HERO
   ========================================================================== */

.programs-hero {
    position: relative;

    padding:
        clamp(3.5rem, 6vw, 6rem)
        0
        clamp(5rem, 8vw, 8rem);

    overflow: hidden;
}


.programs-hero__inner {
    width: min(
        calc(100% - 3rem),
        var(--content-width)
    );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.16fr)
        minmax(340px, 0.84fr);

    align-items: center;

    gap: clamp(3rem, 6vw, 6.5rem);
}


.programs-hero__visual {
    position: relative;

    min-height: 610px;
}


.programs-hero__photo {
    position: absolute;
    z-index: 3;

    inset:
        1.5rem
        0
        0
        0;

    margin: 0;

    overflow: hidden;

    background: var(--color-soft-yellow);

    border-radius:
        26px
        70px
        34px
        56px;

    box-shadow: var(--shadow-photo);

    transform: rotate(-1.1deg);
}


.programs-hero__photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.programs-hero__shape {
    position: absolute;

    pointer-events: none;
}


.programs-hero__shape--blue {
    z-index: 1;

    top: -0.5rem;
    left: -3.5rem;

    width: 190px;
    height: 190px;

    background: var(--color-soft-blue);

    border-radius:
        62% 38% 52% 48%
        /
        42% 61% 39% 58%;

    transform: rotate(-18deg);
}


.programs-hero__shape--yellow {
    z-index: 4;

    right: -2rem;
    bottom: 2rem;

    width: 120px;
    height: 120px;

    background: var(--color-butter);

    border-radius:
        44% 56% 66% 34%
        /
        56% 44% 56% 44%;

    transform: rotate(17deg);
}


.programs-hero__note {
    position: absolute;
    z-index: 6;

    left: 2rem;
    bottom: -1rem;

    width: 210px;

    padding:
        1.15rem
        1.25rem;

    color: var(--color-paper);
    background: var(--color-blue);

    border-radius:
        15px
        9px
        22px
        12px;

    box-shadow:
        0 18px 40px rgba(41, 42, 44, 0.16);

    transform: rotate(-3deg);
}


.programs-hero__note-label {
    display: block;

    margin-bottom: 0.4rem;

    font-size: 0.61rem;
    font-weight: 900;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.programs-hero__note-copy {
    display: block;

    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.15;
}


.programs-hero__content {
    position: relative;
    z-index: 5;
}


.programs-hero__title {
    max-width: 590px;

    margin-bottom: 1.7rem;

    font-family: var(--font-display);
    font-size: clamp(3.8rem, 5.8vw, 5.6rem);
    font-weight: 950;
    line-height: 0.9;

    letter-spacing: -0.06em;

    text-transform: uppercase;
}


.programs-hero__title span {
    display: block;

    color: var(--color-red);
}


.programs-hero__intro {
    max-width: 530px;

    margin-bottom: 1.9rem;

    color: rgba(41, 42, 44, 0.72);

    font-size: 1.05rem;
    line-height: 1.72;
}


/* ==========================================================================
   PROGRAM FINDER
   ========================================================================== */

.program-finder {
    padding:
        clamp(5rem, 8vw, 8rem)
        0;

    background: var(--color-paper);
}


.program-finder__inner {
    width: min(
        calc(100% - 3rem),
        var(--content-width)
    );

    margin-inline: auto;
}


.program-finder__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(280px, 0.85fr);

    gap: clamp(2rem, 6vw, 7rem);

    align-items: end;

    margin-bottom: clamp(3rem, 6vw, 5.5rem);
}


.program-finder__header .eyebrow {
    grid-column: 1 / -1;

    margin-bottom: -1rem;
}


.program-finder__header h2 {
    margin-bottom: 0;

    font-family: var(--font-display);
    font-size: clamp(3.4rem, 6vw, 6rem);
    font-weight: 950;
    line-height: 0.9;

    letter-spacing: -0.06em;

    text-transform: uppercase;
}


.program-finder__header > p:last-child {
    max-width: 430px;

    margin: 0;

    color: rgba(41, 42, 44, 0.67);

    font-size: 1rem;
    line-height: 1.7;
}


.program-finder__list {
    border-top:
        1px
        solid
        var(--color-border);
}


.program-jump {
    display: grid;

    grid-template-columns:
        82px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 1.5rem;

    min-height: 118px;

    padding:
        1.4rem
        1rem;

    border-bottom:
        1px
        solid
        var(--color-border);

    color: var(--color-graphite);

    text-decoration: none;

    transition:
        padding-left var(--transition),
        background-color var(--transition);
}


.program-jump:hover {
    padding-left: 1.8rem;
}


.program-jump--infant:hover {
    background: var(--color-soft-blue);
}


.program-jump--toddler:hover {
    background: var(--color-soft-red);
}


.program-jump--preschool:hover {
    background: var(--color-soft-yellow);
}


.program-jump--prek:hover {
    background:
        color-mix(
            in srgb,
            var(--color-green) 24%,
            var(--color-paper)
        );
}


.program-jump__number {
    color: rgba(41, 42, 44, 0.4);

    font-size: 0.74rem;
    font-weight: 900;

    letter-spacing: 0.13em;
}


.program-jump__content {
    display: flex;

    align-items: baseline;

    gap: clamp(1rem, 3vw, 3rem);
}


.program-jump__content strong {
    min-width: 235px;

    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 950;
    line-height: 1;

    letter-spacing: -0.045em;

    text-transform: uppercase;
}


.program-jump__content small {
    color: rgba(41, 42, 44, 0.58);

    font-size: 0.82rem;
    font-weight: 700;
}


.program-jump__arrow {
    color: var(--color-red);

    font-size: 2rem;

    transition:
        transform var(--transition);
}


.program-jump:hover .program-jump__arrow {
    transform:
        translate(5px, 5px);
}


/* ==========================================================================
   AGE PROGRAM SECTIONS
   ========================================================================== */

.age-program {
    position: relative;

    padding:
        clamp(5rem, 9vw, 9rem)
        0;

    overflow: hidden;
}


.age-program__inner {
    width: min(
        calc(100% - 3rem),
        var(--content-width)
    );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        120px
        minmax(300px, 0.9fr)
        minmax(340px, 1.1fr);

    gap: clamp(2rem, 5vw, 6rem);

    align-items: start;
}


.age-program__number {
    font-family: var(--font-display);
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 950;
    line-height: 0.8;

    letter-spacing: -0.08em;

    opacity: 0.18;
}


.age-program__heading h2 {
    max-width: 500px;

    margin-bottom: 0;

    font-family: var(--font-display);
    font-size: clamp(3rem, 5vw, 5.25rem);
    font-weight: 950;
    line-height: 0.92;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.age-program__copy {
    max-width: 580px;
}


.age-program__lead {
    margin-bottom: 1.4rem;

    font-size: clamp(1.2rem, 1.8vw, 1.55rem);
    font-weight: 750;
    line-height: 1.45;
}


.age-program__copy > p:not(.age-program__lead) {
    color: rgba(41, 42, 44, 0.7);

    line-height: 1.75;
}


.age-program__features {
    margin:
        2rem
        0
        0;

    padding: 0;

    list-style: none;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        1rem
        2rem;
}


.age-program__features li {
    position: relative;

    padding:
        0.85rem
        0
        0.85rem
        1.45rem;

    border-top:
        1px
        solid
        rgba(41, 42, 44, 0.18);

    font-size: 0.87rem;
    font-weight: 750;
}


.age-program__features li::before {
    content: "•";

    position: absolute;

    left: 0;
    top: 0.72rem;

    font-size: 1.2rem;
    line-height: 1;
}


/* ==========================================================================
   AGE-SPECIFIC COLOR WORLDS
   ========================================================================== */

.age-program--infants {
    background: var(--color-soft-blue);
}


.age-program--infants .eyebrow,
.age-program--infants
.age-program__features li::before {
    color: var(--color-blue);
}


.age-program--toddlers {
    background: var(--color-soft-red);
}


.age-program--toddlers .eyebrow,
.age-program--toddlers
.age-program__features li::before {
    color: var(--color-red);
}


.age-program--preschool {
    background: var(--color-soft-yellow);
}


.age-program--preschool .eyebrow,
.age-program--preschool
.age-program__features li::before {
    color: #a47700;
}


.age-program--prek {
    background:
        color-mix(
            in srgb,
            var(--color-green) 26%,
            var(--color-paper)
        );
}


.age-program--prek .eyebrow,
.age-program--prek
.age-program__features li::before {
    color: #507d52;
}


/* ==========================================================================
   ALTERNATING AGE RHYTHM
   ========================================================================== */

.age-program--toddlers
.age-program__heading {
    transform: translateY(2.4rem);
}


.age-program--preschool
.age-program__copy {
    transform: translateY(2.7rem);
}


.age-program--prek
.age-program__heading {
    transform: translateY(1.4rem);
}


/* ==========================================================================
   EVERY PROGRAM
   ========================================================================== */

.every-program {
    padding:
        clamp(5rem, 9vw, 9rem)
        0;

    color: var(--color-paper);
    background: var(--color-graphite);
}


.every-program__inner {
    width: min(
        calc(100% - 3rem),
        var(--content-width)
    );

    margin-inline: auto;
}


.every-program__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 0.7fr);

    gap: clamp(2rem, 6vw, 7rem);

    align-items: end;

    margin-bottom: clamp(4rem, 7vw, 7rem);
}


.every-program__header .eyebrow {
    grid-column: 1 / -1;

    margin-bottom: -1rem;

    color: var(--color-butter);
}


.every-program__header h2 {
    max-width: 750px;

    margin-bottom: 0;

    font-family: var(--font-display);
    font-size: clamp(3.2rem, 5.5vw, 5.7rem);
    font-weight: 950;
    line-height: 0.9;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.every-program__header > p:last-child {
    margin-bottom: 0;

    color: rgba(255, 253, 248, 0.67);

    line-height: 1.7;
}


.every-program__items {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-top:
        1px
        solid
        rgba(255, 255, 255, 0.16);

    border-left:
        1px
        solid
        rgba(255, 255, 255, 0.16);
}


.every-program__item {
    min-height: 260px;

    padding:
        clamp(1.5rem, 3vw, 2.6rem);

    border-right:
        1px
        solid
        rgba(255, 255, 255, 0.16);

    border-bottom:
        1px
        solid
        rgba(255, 255, 255, 0.16);
}


.every-program__icon {
    display: block;

    margin-bottom: 2rem;

    color: var(--color-butter);

    font-size: 2rem;
    line-height: 1;
}


.every-program__item:nth-child(2)
.every-program__icon {
    color: var(--color-red);
}


.every-program__item:nth-child(3)
.every-program__icon {
    color: var(--color-green);
}


.every-program__item:nth-child(4)
.every-program__icon {
    color: var(--color-purple);
}


.every-program__item:nth-child(5)
.every-program__icon {
    color: var(--color-blue);
}


.every-program__item:nth-child(6)
.every-program__icon {
    color: var(--color-butter);
}


.every-program__item h3 {
    margin-bottom: 0.8rem;

    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 950;
    line-height: 1;

    text-transform: uppercase;
}


.every-program__item p {
    max-width: 290px;

    margin-bottom: 0;

    color: rgba(255, 253, 248, 0.64);

    font-size: 0.88rem;
    line-height: 1.65;
}


.every-program .demo-note {
    border-color: rgba(255, 255, 255, 0.14);

    color: rgba(255, 253, 248, 0.46);
}


/* ==========================================================================
   PROGRAMS CTA
   ========================================================================== */

.programs-cta {
    position: relative;

    padding:
        clamp(5rem, 8vw, 8rem)
        0;

    color: var(--color-paper);
    background: var(--color-blue);

    overflow: hidden;
}


.programs-cta::after {
    content: "";

    position: absolute;

    right: -8rem;
    bottom: -11rem;

    width: 380px;
    height: 380px;

    background: var(--color-butter);

    border-radius:
        58% 42% 37% 63%
        /
        41% 61% 39% 59%;

    opacity: 0.95;

    transform: rotate(17deg);
}


.programs-cta__inner {
    position: relative;
    z-index: 2;

    width: min(
        calc(100% - 3rem),
        var(--content-width)
    );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(260px, 0.8fr);

    gap: clamp(3rem, 8vw, 9rem);

    align-items: end;
}


.programs-cta .eyebrow {
    color: var(--color-butter);
}


.programs-cta__copy h2 {
    max-width: 800px;

    margin-bottom: 1.4rem;

    font-family: var(--font-display);
    font-size: clamp(3.4rem, 6vw, 6rem);
    font-weight: 950;
    line-height: 0.9;

    letter-spacing: -0.06em;

    text-transform: uppercase;
}


.programs-cta__copy > p:last-child {
    max-width: 590px;

    margin-bottom: 0;

    color: rgba(255, 253, 248, 0.76);

    font-size: 1.02rem;
    line-height: 1.7;
}


.programs-cta__action {
    display: flex;

    align-items: flex-start;

    flex-direction: column;

    gap: 1rem;
}


.programs-cta__action .button {
    color: var(--color-graphite);
    background: var(--color-paper);
}


.programs-cta__action .button:hover {
    color: var(--color-paper);
    background: var(--color-graphite);
}


.programs-cta__action p {
    margin: 0;

    color: rgba(255, 253, 248, 0.7);

    font-size: 0.78rem;
    font-weight: 750;
}


/* ==========================================================================
   PROGRAMS — TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .programs-hero__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    .programs-hero__visual {
        order: 2;

        width: min(100%, 850px);
        min-height: 580px;

        margin-inline: auto;
    }


    .programs-hero__content {
        order: 1;

        max-width: 760px;

        margin-inline: auto;
    }


    .programs-hero__title {
        max-width: 760px;
    }


    .age-program__inner {
        grid-template-columns:
            90px
            minmax(260px, 0.9fr)
            minmax(300px, 1.1fr);

        gap: 2.5rem;
    }


    .programs-cta__inner {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

}


/* ==========================================================================
   PROGRAMS — TABLET PORTRAIT
   ========================================================================== */

@media (max-width: 860px) {

    .program-finder__header,
    .every-program__header {
        grid-template-columns: 1fr;

        gap: 1.5rem;
    }


    .program-finder__header .eyebrow,
    .every-program__header .eyebrow {
        grid-column: auto;

        margin-bottom: 0;
    }


    .program-jump__content {
        flex-direction: column;

        align-items: flex-start;

        gap: 0.45rem;
    }


    .program-jump__content strong {
        min-width: 0;
    }


    .age-program__inner {
        grid-template-columns:
            80px
            1fr;

        gap:
            2rem
            2.4rem;
    }


    .age-program__heading {
        grid-column: 2;
    }


    .age-program__copy {
        grid-column:
            2
            / -1;

        max-width: 680px;
    }


    .age-program--toddlers
    .age-program__heading,
    .age-program--preschool
    .age-program__copy,
    .age-program--prek
    .age-program__heading {
        transform: none;
    }


    .every-program__items {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ==========================================================================
   PROGRAMS — MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .programs-hero {
        padding:
            2.5rem
            0
            5rem;
    }


    .programs-hero__inner,
    .program-finder__inner,
    .age-program__inner,
    .every-program__inner,
    .programs-cta__inner {
        width:
            min(
                calc(100% - 2rem),
                var(--content-width)
            );
    }


    .programs-hero__title {
        font-size:
            clamp(
                3rem,
                14vw,
                4.2rem
            );
    }


    .programs-hero__visual {
        min-height: 460px;
    }


    .programs-hero__photo {
        inset:
            1rem
            0
            0
            0;

        border-radius:
            22px
            42px
            24px
            34px;
    }


    .programs-hero__note {
        left: 0.7rem;
        bottom: -1rem;

        width: 175px;
    }


    .programs-hero__shape--blue {
        left: -4rem;

        width: 150px;
        height: 150px;
    }


    .programs-hero__shape--yellow {
        right: -2rem;

        width: 90px;
        height: 90px;
    }


    .program-jump {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            auto;

        min-height: 100px;

        gap: 0.8rem;

        padding-inline: 0.2rem;
    }


    .program-jump:hover {
        padding-left: 0.5rem;
    }


    .program-jump__content strong {
        font-size: 2rem;
    }


    .age-program {
        padding:
            4.5rem
            0;
    }


    .age-program__inner {
        grid-template-columns: 1fr;

        gap: 1.4rem;
    }


    .age-program__number,
    .age-program__heading,
    .age-program__copy {
        grid-column: 1;
    }


    .age-program__number {
        font-size: 4.4rem;
    }


    .age-program__heading h2 {
        font-size:
            clamp(
                2.8rem,
                13vw,
                4rem
            );
    }


    .age-program__features {
        grid-template-columns: 1fr;
    }


    .every-program__items {
        grid-template-columns: 1fr;
    }


    .every-program__item {
        min-height: 0;
    }


    .programs-cta__copy h2 {
        font-size:
            clamp(
                3rem,
                13vw,
                4.4rem
            );
    }

}

/* ==========================================================================
   TH_PROGRAMS_PHOTO_BREAK_V1
   Editorial photography break between Infant and Toddler programs.
   ========================================================================== */

.programs-photo-break {
    position: relative;

    padding:
        clamp(4rem, 7vw, 7rem)
        0
        clamp(5rem, 8vw, 8rem);

    background: var(--color-cream);

    overflow: hidden;
}


.programs-photo-break__inner {
    position: relative;

    width: min(
        calc(100% - 3rem),
        var(--content-width)
    );

    margin-inline: auto;
}


.programs-photo-break__figure {
    position: relative;

    width: min(100%, 1080px);

    margin:
        0
        auto
        0
        0;

    transform: rotate(-0.65deg);
}


.programs-photo-break__figure::before {
    content: "";

    position: absolute;

    z-index: 0;

    top: -2.2rem;
    right: -4rem;

    width: 230px;
    height: 230px;

    background: var(--color-soft-yellow);

    border-radius:
        59% 41% 64% 36%
        /
        43% 58% 42% 57%;

    transform: rotate(18deg);
}


.programs-photo-break__figure img {
    position: relative;
    z-index: 2;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    border-radius:
        46px
        18px
        58px
        28px;

    box-shadow:
        0 28px 70px rgba(41, 42, 44, 0.16);
}


.programs-photo-break__caption {
    position: absolute;
    z-index: 5;

    left: clamp(1.5rem, 4vw, 4rem);
    bottom: clamp(-2.3rem, -2vw, -1.3rem);

    width: min(330px, 72%);

    padding:
        1.25rem
        1.4rem
        1.35rem;

    color: var(--color-paper);
    background: var(--color-blue);

    border-radius:
        13px
        24px
        11px
        19px;

    box-shadow:
        0 18px 42px rgba(41, 42, 44, 0.18);

    transform: rotate(2.2deg);
}


.programs-photo-break__label {
    display: block;

    margin-bottom: 0.35rem;

    color: rgba(255, 253, 248, 0.76);

    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.programs-photo-break__caption strong {
    display: block;

    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.5vw, 2.15rem);
    font-weight: 950;
    line-height: 1;

    letter-spacing: -0.04em;

    text-transform: uppercase;
}


.programs-photo-break__aside {
    position: absolute;
    z-index: 6;

    right: 0;
    bottom: 3.5rem;

    width: min(250px, 24vw);

    margin: 0;

    padding:
        1.1rem
        1.2rem;

    color: var(--color-graphite);
    background: var(--color-butter);

    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.45;

    border-radius:
        8px
        16px
        12px
        14px;

    box-shadow:
        0 16px 34px rgba(41, 42, 44, 0.12);

    transform: rotate(-3deg);
}


.programs-photo-break__aside::before {
    content: "";

    position: absolute;

    top: -7px;
    left: 50%;

    width: 58px;
    height: 16px;

    background:
        rgba(255, 255, 255, 0.55);

    transform:
        translateX(-50%)
        rotate(2deg);
}


/* ==========================================================================
   PROGRAMS PHOTO BREAK — TABLET
   ========================================================================== */

@media (max-width: 1000px) {

    .programs-photo-break__figure {
        width: calc(100% - 3rem);
    }


    .programs-photo-break__aside {
        right: 0.5rem;

        width: 220px;
    }

}


/* ==========================================================================
   PROGRAMS PHOTO BREAK — MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .programs-photo-break {
        padding:
            3.5rem
            0
            5.5rem;
    }


    .programs-photo-break__inner {
        width:
            min(
                calc(100% - 2rem),
                var(--content-width)
            );
    }


    .programs-photo-break__figure {
        width: 100%;

        transform: none;
    }


    .programs-photo-break__figure::before {
        top: -1.5rem;
        right: -4.5rem;

        width: 160px;
        height: 160px;
    }


    .programs-photo-break__figure img {
        aspect-ratio: 4 / 3;

        border-radius:
            28px
            12px
            34px
            18px;
    }


    .programs-photo-break__caption {
        left: 0.75rem;
        bottom: -2rem;

        width: min(260px, 78%);

        padding:
            1rem
            1.1rem;

        transform: rotate(1.5deg);
    }


    .programs-photo-break__aside {
        position: relative;

        right: auto;
        bottom: auto;

        width: min(230px, 82%);

        margin:
            4.2rem
            0
            0
            auto;

        transform: rotate(-2deg);
    }

}

/* ==========================================================================
   TH_PROGRAMS_LEARNING_BREAK_V1
   Preschool + Pre-K editorial learning spread.
   ========================================================================== */

.programs-learning-break {
    position: relative;

    padding:
        clamp(5rem, 8vw, 8rem)
        0;

    background: var(--color-paper);

    overflow: hidden;
}


.programs-learning-break::before {
    content: "";

    position: absolute;

    top: -5rem;
    left: -5rem;

    width: 220px;
    height: 220px;

    background:
        color-mix(
            in srgb,
            var(--color-green) 28%,
            var(--color-paper)
        );

    border-radius:
        42% 58% 67% 33%
        /
        57% 38% 62% 43%;

    transform: rotate(-22deg);
}


.programs-learning-break__inner {
    position: relative;
    z-index: 2;

    width: min(
        calc(100% - 3rem),
        var(--content-width)
    );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(280px, 0.72fr)
        minmax(0, 1.28fr);

    align-items: center;

    gap: clamp(3rem, 6vw, 7rem);
}


/* ==========================================================================
   LEARNING BREAK COPY
   ========================================================================== */

.programs-learning-break__copy {
    position: relative;
    z-index: 5;

    max-width: 470px;

    padding-left: clamp(0rem, 2vw, 1.5rem);
}


.programs-learning-break__copy .eyebrow {
    color: var(--color-red);
}


.programs-learning-break__copy h2 {
    margin-bottom: 1.5rem;

    font-family: var(--font-display);
    font-size: clamp(3rem, 5vw, 5.2rem);
    font-weight: 950;
    line-height: 0.9;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.programs-learning-break__copy > p:last-child {
    max-width: 430px;

    margin-bottom: 0;

    color: rgba(41, 42, 44, 0.68);

    font-size: 1rem;
    line-height: 1.75;
}


/* ==========================================================================
   LEARNING BREAK IMAGE
   ========================================================================== */

.programs-learning-break__figure {
    position: relative;

    width: calc(100% + 3vw);

    margin:
        0
        -3vw
        0
        0;

    transform: rotate(0.75deg);
}


.programs-learning-break__figure::before {
    content: "";

    position: absolute;
    z-index: 0;

    right: -2.5rem;
    bottom: -2.8rem;

    width: 180px;
    height: 180px;

    background: var(--color-soft-red);

    border-radius:
        61% 39% 47% 53%
        /
        44% 63% 37% 56%;

    transform: rotate(24deg);
}


.programs-learning-break__figure img {
    position: relative;
    z-index: 2;

    width: 100%;

    aspect-ratio: 16 / 10;

    object-fit: cover;

    border-radius:
        20px
        52px
        24px
        66px;

    box-shadow:
        0 28px 70px rgba(41, 42, 44, 0.16);
}


/* ==========================================================================
   FIELD NOTE
   ========================================================================== */

.programs-learning-break__caption {
    position: absolute;
    z-index: 5;

    right: clamp(1.5rem, 4vw, 4rem);
    bottom: -2rem;

    width: min(300px, 68%);

    padding:
        1.15rem
        1.3rem
        1.3rem;

    color: var(--color-paper);
    background: var(--color-purple);

    border-radius:
        17px
        9px
        22px
        13px;

    box-shadow:
        0 18px 40px rgba(41, 42, 44, 0.18);

    transform: rotate(-2.3deg);
}


.programs-learning-break__caption span {
    display: block;

    margin-bottom: 0.35rem;

    color: rgba(255, 253, 248, 0.76);

    font-size: 0.61rem;
    font-weight: 900;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.programs-learning-break__caption strong {
    display: block;

    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    font-weight: 950;
    line-height: 1.08;

    letter-spacing: -0.035em;

    text-transform: uppercase;
}


/* ==========================================================================
   LITTLE ASIDE NOTE
   ========================================================================== */

.programs-learning-break__aside {
    position: absolute;
    z-index: 6;

    left: clamp(1rem, 3vw, 3rem);
    bottom: -1.4rem;

    width: 205px;

    margin: 0;

    padding:
        1rem
        1.1rem;

    color: var(--color-graphite);
    background: var(--color-butter);

    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1.4;

    border-radius:
        8px
        15px
        10px
        18px;

    box-shadow:
        0 15px 32px rgba(41, 42, 44, 0.12);

    transform: rotate(3deg);
}


.programs-learning-break__aside::before {
    content: "";

    position: absolute;

    top: -7px;
    left: 50%;

    width: 54px;
    height: 15px;

    background:
        rgba(255, 255, 255, 0.55);

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* ==========================================================================
   LEARNING BREAK — TABLET
   ========================================================================== */

@media (max-width: 1000px) {

    .programs-learning-break__inner {
        grid-template-columns:
            minmax(250px, 0.8fr)
            minmax(0, 1.2fr);

        gap: 3rem;
    }


    .programs-learning-break__figure {
        width: 100%;

        margin-right: 0;
    }


    .programs-learning-break__copy h2 {
        font-size:
            clamp(
                2.8rem,
                5.5vw,
                4.3rem
            );
    }

}


/* ==========================================================================
   LEARNING BREAK — TABLET PORTRAIT
   ========================================================================== */

@media (max-width: 860px) {

    .programs-learning-break__inner {
        grid-template-columns: 1fr;

        gap: 3.5rem;
    }


    .programs-learning-break__copy {
        max-width: 650px;

        padding-left: 0;
    }


    .programs-learning-break__figure {
        width: min(100%, 760px);

        margin:
            0
            auto;
    }

}


/* ==========================================================================
   LEARNING BREAK — MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .programs-learning-break {
        padding:
            4.5rem
            0
            6rem;
    }


    .programs-learning-break__inner {
        width:
            min(
                calc(100% - 2rem),
                var(--content-width)
            );

        gap: 2.8rem;
    }


    .programs-learning-break__copy h2 {
        font-size:
            clamp(
                2.8rem,
                13vw,
                4rem
            );
    }


    .programs-learning-break__figure {
        transform: none;
    }


    .programs-learning-break__figure img {
        aspect-ratio: 4 / 3;

        border-radius:
            16px
            32px
            18px
            38px;
    }


    .programs-learning-break__caption {
        right: 0.6rem;
        bottom: -2rem;

        width: min(255px, 78%);

        padding:
            1rem
            1.1rem;

        transform: rotate(-1.5deg);
    }


    .programs-learning-break__aside {
        position: relative;

        left: auto;
        bottom: auto;

        width: min(210px, 75%);

        margin:
            4rem
            auto
            0
            0;

        transform: rotate(2deg);
    }


    .programs-learning-break::before {
        top: -4rem;
        left: -5rem;

        width: 170px;
        height: 170px;
    }

}

/* ==========================================================================
   TH_INFANT_CARE_PAGE_V1
   Infant Care — calm, reassuring, spacious program detail page.
   ========================================================================== */


/* ==========================================================================
   INFANT HERO
   ========================================================================== */

.infant-hero {
    position: relative;

    padding:
        clamp(4rem, 7vw, 7rem)
        0
        clamp(5rem, 8vw, 8rem);

    background:
        linear-gradient(
            180deg,
            var(--color-cream) 0%,
            #eef3ff 100%
        );

    overflow: hidden;
}


.infant-hero::before {
    content: "";

    position: absolute;

    top: 5rem;
    right: -6rem;

    width: 300px;
    height: 300px;

    background: rgba(244, 207, 99, 0.38);

    border-radius:
        57% 43% 39% 61%
        /
        42% 59% 41% 58%;

    transform: rotate(18deg);
}


.infant-hero__inner {
    position: relative;
    z-index: 2;

    width: min(
        calc(100% - 3rem),
        var(--content-width)
    );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.82fr)
        minmax(0, 1.18fr);

    align-items: center;

    gap: clamp(3rem, 7vw, 7rem);
}


.infant-hero__content {
    max-width: 540px;
}


.infant-hero__title {
    margin-bottom: 1.6rem;

    font-family: var(--font-display);
    font-size: clamp(3.8rem, 5.8vw, 5.5rem);
    font-weight: 950;
    line-height: 0.9;

    letter-spacing: -0.06em;

    text-transform: uppercase;
}


.infant-hero__title span {
    display: block;

    color: var(--color-blue);
}


.infant-hero__intro {
    max-width: 520px;

    margin-bottom: 1.9rem;

    color: rgba(41, 42, 44, 0.72);

    font-size: 1.05rem;
    line-height: 1.72;
}


.infant-hero__actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 1.4rem;
}


.infant-hero__visual {
    position: relative;

    min-height: 560px;
}


.infant-hero__photo {
    position: absolute;

    inset:
        0
        0
        1rem
        2rem;

    margin: 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--color-soft-blue),
            var(--color-paper)
        );

    border-radius:
        50% 24px 46% 28px
        /
        18% 42px 22% 46px;

    box-shadow:
        0 26px 65px rgba(41, 42, 44, 0.13);
}


.infant-hero__photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.infant-hero__note {
    position: absolute;
    z-index: 5;

    left: 0;
    bottom: 0;

    width: 190px;

    padding:
        1.05rem
        1.15rem
        1.15rem;

    color: var(--color-graphite);
    background: var(--color-butter);

    border-radius:
        10px
        17px
        12px
        20px;

    box-shadow:
        0 16px 34px rgba(41, 42, 44, 0.13);

    transform: rotate(-3deg);
}


.infant-hero__note::before {
    content: "";

    position: absolute;

    top: -7px;
    left: 50%;

    width: 58px;
    height: 15px;

    background: rgba(255, 255, 255, 0.55);

    transform:
        translateX(-50%)
        rotate(2deg);
}


.infant-hero__note span {
    display: block;

    margin-bottom: 0.25rem;

    font-size: 0.59rem;
    font-weight: 900;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}


.infant-hero__note strong {
    display: block;

    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 950;
    line-height: 1;
}


/* ==========================================================================
   REASSURANCE
   ========================================================================== */

.infant-reassurance {
    padding:
        clamp(5rem, 9vw, 9rem)
        0;

    background: var(--color-paper);
}


.infant-reassurance__inner {
    width: min(
        calc(100% - 3rem),
        1080px
    );

    margin-inline: auto;
}


.infant-reassurance h2 {
    max-width: 900px;

    margin-bottom:
        clamp(3rem, 6vw, 5.5rem);

    font-family: var(--font-display);
    font-size: clamp(3.1rem, 5vw, 5.2rem);
    font-weight: 950;
    line-height: 0.94;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.infant-reassurance__copy {
    width: min(100%, 760px);

    margin-left: auto;

    padding-left:
        clamp(1.5rem, 5vw, 5rem);

    border-left:
        5px
        solid
        var(--color-blue);
}


.infant-reassurance__lead {
    margin-bottom: 1.2rem;

    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 800;
    line-height: 1.4;
}


.infant-reassurance__copy > p:last-child {
    margin-bottom: 0;

    color: rgba(41, 42, 44, 0.67);

    line-height: 1.75;
}


/* ==========================================================================
   INFANT PRIORITIES
   ========================================================================== */

.infant-priorities {
    padding:
        clamp(5rem, 8vw, 8rem)
        0;

    background: var(--color-soft-blue);
}


.infant-priorities__inner {
    width: min(
        calc(100% - 3rem),
        var(--content-width)
    );

    margin-inline: auto;
}


.infant-priorities__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 0.72fr);

    gap: 2rem;

    align-items: end;

    margin-bottom: clamp(3.5rem, 6vw, 6rem);
}


.infant-priorities__header .eyebrow {
    grid-column: 1 / -1;

    margin-bottom: -0.5rem;
}


.infant-priorities__header h2 {
    max-width: 760px;

    margin-bottom: 0;

    font-family: var(--font-display);
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 950;
    line-height: 0.92;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.infant-priorities__list {
    border-top:
        1px
        solid
        rgba(41, 42, 44, 0.18);
}


.infant-priority {
    display: grid;

    grid-template-columns:
        100px
        minmax(0, 1fr);

    gap: clamp(1.5rem, 5vw, 5rem);

    padding:
        clamp(2rem, 4vw, 3.5rem)
        0;

    border-bottom:
        1px
        solid
        rgba(41, 42, 44, 0.18);
}


.infant-priority:nth-child(even) {
    padding-left: clamp(0rem, 8vw, 8rem);
}


.infant-priority__number {
    color: var(--color-blue);

    font-size: 0.72rem;
    font-weight: 900;

    letter-spacing: 0.14em;
}


.infant-priority h3 {
    margin-bottom: 0.6rem;

    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    font-weight: 950;
    line-height: 1;

    letter-spacing: -0.045em;

    text-transform: uppercase;
}


.infant-priority p {
    max-width: 640px;

    margin-bottom: 0;

    color: rgba(41, 42, 44, 0.66);

    line-height: 1.7;
}


/* ==========================================================================
   DAILY ROUTINE
   ========================================================================== */

.infant-routine {
    padding:
        clamp(5rem, 9vw, 9rem)
        0;

    background: var(--color-cream);
}


.infant-routine__inner {
    width: min(
        calc(100% - 3rem),
        var(--content-width)
    );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.95fr);

    align-items: center;

    gap: clamp(3rem, 7vw, 7rem);
}


.infant-routine__visual {
    position: relative;

    min-height: 570px;
}


.infant-routine__visual figure {
    position: absolute;

    inset:
        0
        1rem
        1rem
        0;

    margin: 0;

    overflow: hidden;

    background: var(--color-soft-yellow);

    border-radius:
        28px
        52% 32px
        44%;

    box-shadow:
        0 26px 65px rgba(41, 42, 44, 0.14);

    transform: rotate(-0.7deg);
}


.infant-routine__visual img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.infant-routine__photo-note {
    position: absolute;
    z-index: 5;

    right: 0;
    bottom: -0.5rem;

    width: 210px;

    margin: 0;

    padding:
        1rem
        1.1rem;

    color: var(--color-graphite);
    background: var(--color-butter);

    font-size: 0.77rem;
    font-weight: 850;
    line-height: 1.4;

    border-radius:
        12px
        8px
        17px
        10px;

    box-shadow:
        0 15px 34px rgba(41, 42, 44, 0.13);

    transform: rotate(2.5deg);
}


.infant-routine__content h2 {
    margin-bottom: 1.4rem;

    font-family: var(--font-display);
    font-size: clamp(3rem, 4.8vw, 4.8rem);
    font-weight: 950;
    line-height: 0.92;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.infant-routine__content > p:not(.eyebrow) {
    max-width: 550px;

    margin-bottom: 2.4rem;

    color: rgba(41, 42, 44, 0.67);

    line-height: 1.72;
}


.infant-routine__items {
    border-top:
        1px
        solid
        var(--color-border);
}


.infant-routine__items > div {
    display: grid;

    grid-template-columns:
        110px
        minmax(0, 1fr);

    gap: 1rem;

    padding:
        0.9rem
        0;

    border-bottom:
        1px
        solid
        var(--color-border);
}


.infant-routine__items strong {
    color: var(--color-blue);

    font-size: 0.76rem;
    font-weight: 900;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.infant-routine__items span {
    color: rgba(41, 42, 44, 0.7);

    font-size: 0.87rem;
}


/* ==========================================================================
   DEVELOPMENT
   ========================================================================== */

.infant-development {
    padding:
        clamp(5rem, 9vw, 9rem)
        0;

    background: var(--color-paper);
}


.infant-development__inner {
    width: min(
        calc(100% - 3rem),
        var(--content-width)
    );

    margin-inline: auto;
}


.infant-development__header {
    max-width: 800px;

    margin-bottom: clamp(3.5rem, 7vw, 6rem);
}


.infant-development__header h2 {
    margin-bottom: 1.3rem;

    font-family: var(--font-display);
    font-size: clamp(3.2rem, 5vw, 5.2rem);
    font-weight: 950;
    line-height: 0.92;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.infant-development__header > p:last-child {
    max-width: 620px;

    margin-bottom: 0;

    color: rgba(41, 42, 44, 0.65);

    line-height: 1.7;
}


.infant-development__items {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top:
        1px
        solid
        var(--color-border);
}


.infant-development__items article {
    min-height: 245px;

    padding:
        2rem
        clamp(1rem, 2vw, 2rem);

    border-right:
        1px
        solid
        var(--color-border);
}


.infant-development__items article:last-child {
    border-right: 0;
}


.infant-development__items article > span {
    display: block;

    min-height: 42px;

    margin-bottom: 1.5rem;

    color: var(--color-blue);

    font-size: 1.8rem;
}


.infant-development__items article:nth-child(2) > span {
    color: var(--color-red);
}


.infant-development__items article:nth-child(3) > span {
    color: var(--color-green);
}


.infant-development__items article:nth-child(4) > span {
    color: var(--color-purple);
}


.infant-development__items h3 {
    margin-bottom: 0.7rem;

    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 950;

    text-transform: uppercase;
}


.infant-development__items p {
    margin-bottom: 0;

    color: rgba(41, 42, 44, 0.62);

    font-size: 0.86rem;
    line-height: 1.65;
}


/* ==========================================================================
   FOR THE GROWN-UPS
   ========================================================================== */

.infant-parents {
    padding:
        clamp(5rem, 8vw, 8rem)
        0;

    background:
        color-mix(
            in srgb,
            var(--color-purple) 18%,
            var(--color-cream)
        );
}


.infant-parents__inner {
    width: min(
        calc(100% - 3rem),
        1080px
    );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 0.72fr);

    align-items: end;

    gap: clamp(3rem, 8vw, 8rem);
}


.infant-parents__copy h2 {
    margin-bottom: 1.3rem;

    font-family: var(--font-display);
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 950;
    line-height: 0.92;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.infant-parents__copy > p:last-child {
    max-width: 620px;

    margin-bottom: 0;

    color: rgba(41, 42, 44, 0.67);

    line-height: 1.72;
}


.infant-parents__quote {
    margin: 0;

    padding:
        clamp(1.7rem, 3vw, 2.5rem);

    background: var(--color-paper);

    border-radius:
        18px
        38px
        20px
        28px;

    box-shadow:
        0 20px 48px rgba(41, 42, 44, 0.1);

    transform: rotate(1.5deg);
}


.infant-parents__quote p {
    margin-bottom: 1rem;

    font-family: var(--font-display);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 950;
    line-height: 0.95;

    letter-spacing: -0.045em;

    text-transform: uppercase;
}


.infant-parents__quote footer {
    color: rgba(41, 42, 44, 0.55);

    font-size: 0.76rem;
    font-weight: 750;
}


/* ==========================================================================
   TEMPLATE NOTE
   ========================================================================== */

.infant-demo {
    padding:
        1.5rem
        0;

    background: var(--color-butter);
}


.infant-demo__inner {
    width: min(
        calc(100% - 3rem),
        var(--content-width)
    );

    margin-inline: auto;
}


.infant-demo p {
    margin: 0;

    color: rgba(41, 42, 44, 0.72);

    font-size: 0.69rem;
    line-height: 1.6;
}


/* ==========================================================================
   INFANT CTA
   ========================================================================== */

.infant-cta {
    position: relative;

    padding:
        clamp(5rem, 8vw, 8rem)
        0;

    color: var(--color-paper);
    background: var(--color-blue);

    overflow: hidden;
}


.infant-cta::after {
    content: "";

    position: absolute;

    right: -7rem;
    top: -8rem;

    width: 300px;
    height: 300px;

    background: var(--color-soft-yellow);

    border-radius:
        56% 44% 64% 36%
        /
        38% 61% 39% 62%;

    opacity: 0.95;

    transform: rotate(22deg);
}


.infant-cta__inner {
    position: relative;
    z-index: 2;

    width: min(
        calc(100% - 3rem),
        var(--content-width)
    );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: end;

    gap: clamp(3rem, 8vw, 9rem);
}


.infant-cta .eyebrow {
    color: var(--color-butter);
}


.infant-cta h2 {
    max-width: 780px;

    margin-bottom: 1.2rem;

    font-family: var(--font-display);
    font-size: clamp(3.2rem, 5.5vw, 5.6rem);
    font-weight: 950;
    line-height: 0.9;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.infant-cta__inner > div:first-child > p:last-child {
    max-width: 620px;

    margin-bottom: 0;

    color: rgba(255, 253, 248, 0.74);

    line-height: 1.7;
}


.infant-cta__action {
    display: flex;

    align-items: flex-start;

    flex-direction: column;

    gap: 1.2rem;
}


.infant-cta__action .button {
    color: var(--color-graphite);
    background: var(--color-paper);
}


.infant-cta__action .button:hover {
    color: var(--color-paper);
    background: var(--color-graphite);
}


.infant-cta__action .text-link {
    color: var(--color-paper);
}


.infant-cta__action .text-link span {
    color: var(--color-butter);
}


/* ==========================================================================
   INFANT CARE — TABLET
   ========================================================================== */

@media (max-width: 1000px) {

    .infant-hero__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    .infant-hero__content {
        max-width: 720px;

        margin-inline: auto;
    }


    .infant-hero__visual {
        width: min(100%, 780px);

        margin-inline: auto;
    }


    .infant-priorities__header {
        grid-template-columns: 1fr;
    }


    .infant-priorities__header .eyebrow {
        grid-column: auto;

        margin-bottom: 0;
    }


    .infant-routine__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    .infant-routine__visual {
        width: min(100%, 780px);

        margin-inline: auto;
    }


    .infant-routine__content {
        max-width: 720px;

        margin-inline: auto;
    }


    .infant-development__items {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .infant-development__items article:nth-child(2) {
        border-right: 0;
    }


    .infant-development__items article:nth-child(-n+2) {
        border-bottom:
            1px
            solid
            var(--color-border);
    }


    .infant-parents__inner,
    .infant-cta__inner {
        grid-template-columns: 1fr;
    }


    .infant-parents__quote {
        width: min(100%, 430px);

        margin-left: auto;
    }

}


/* ==========================================================================
   INFANT CARE — MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .infant-hero,
    .infant-reassurance,
    .infant-priorities,
    .infant-routine,
    .infant-development,
    .infant-parents,
    .infant-cta {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }


    .infant-hero__inner,
    .infant-reassurance__inner,
    .infant-priorities__inner,
    .infant-routine__inner,
    .infant-development__inner,
    .infant-parents__inner,
    .infant-demo__inner,
    .infant-cta__inner {
        width:
            min(
                calc(100% - 2rem),
                var(--content-width)
            );
    }


    .infant-hero__title {
        font-size:
            clamp(
                3rem,
                14vw,
                4.2rem
            );
    }


    .infant-hero__visual {
        min-height: 430px;
    }


    .infant-hero__photo {
        inset:
            0
            0
            1rem
            0.7rem;
    }


    .infant-hero__note {
        width: 165px;
    }


    .infant-reassurance h2,
    .infant-priorities__header h2,
    .infant-routine__content h2,
    .infant-development__header h2,
    .infant-parents__copy h2,
    .infant-cta h2 {
        font-size:
            clamp(
                2.8rem,
                13vw,
                4rem
            );
    }


    .infant-reassurance__copy {
        padding-left: 1.3rem;
    }


    .infant-priority,
    .infant-priority:nth-child(even) {
        grid-template-columns:
            48px
            minmax(0, 1fr);

        gap: 1rem;

        padding-left: 0;
    }


    .infant-routine__visual {
        min-height: 430px;
    }


    .infant-routine__visual figure {
        inset:
            0
            0
            1rem
            0;
    }


    .infant-routine__photo-note {
        width: 180px;
    }


    .infant-routine__items > div {
        grid-template-columns: 88px 1fr;
    }


    .infant-development__items {
        grid-template-columns: 1fr;
    }


    .infant-development__items article {
        min-height: 0;

        border-right: 0;
        border-bottom:
            1px
            solid
            var(--color-border);
    }


    .infant-development__items article:last-child {
        border-bottom: 0;
    }


    .infant-parents__quote {
        width: 100%;

        margin-left: 0;
    }


    .infant-cta__action {
        width: 100%;
    }


    .infant-cta__action .button {
        width: 100%;
    }

}

/* ==========================================================================
   TH_HASHLESS_SCROLL_CONTROLS_V1
   Same-page navigation controls without #fragment hrefs.
   ========================================================================== */

button.text-link {
    padding: 0;

    border: 0;

    background: transparent;

    font: inherit;

    cursor: pointer;
}


button.program-jump {
    width: 100%;

    border-right: 0;
    border-left: 0;

    background-color: transparent;

    font: inherit;
    text-align: left;

    cursor: pointer;
}


button.program-jump--infant:hover {
    background: var(--color-soft-blue);
}


button.program-jump--toddler:hover {
    background: var(--color-soft-red);
}


button.program-jump--preschool:hover {
    background: var(--color-soft-yellow);
}


button.program-jump--prek:hover {
    background:
        color-mix(
            in srgb,
            var(--color-green) 24%,
            var(--color-paper)
        );
}

/* ==========================================================================
   TH_TODDLER_HERO_V1
   Toddler Care — energetic editorial hero
   ========================================================================== */

.page-toddler-care main {
    overflow: hidden;
}

.toddler-hero {
    position: relative;
    overflow: hidden;
    background: #FFF7E8;
    color: #292A2C;
}

.toddler-hero::before {
    content: "";
    position: absolute;
    top: 5rem;
    right: -8rem;

    width: 20rem;
    height: 20rem;

    border: 2px solid rgba(233, 92, 80, 0.22);
    border-radius: 50%;

    pointer-events: none;
}

.toddler-hero__inner {
    width: min(1180px, calc(100% - 3rem));
    min-height: 690px;

    margin: 0 auto;
    padding: 5.5rem 0 6rem;

    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(330px, 0.92fr);

    gap: clamp(3rem, 6vw, 7rem);
    align-items: center;
}


/* --------------------------------------------------------------------------
   Hero photography
   -------------------------------------------------------------------------- */

.toddler-hero__visual {
    position: relative;
    min-width: 0;
}

.toddler-hero__photo {
    position: relative;

    height: clamp(440px, 48vw, 610px);
    margin: 0;

    overflow: hidden;

    border-radius:
        44% 56% 38% 62%
        /
        46% 34% 66% 54%;

    background:
        linear-gradient(
            135deg,
            rgba(244, 207, 99, 0.78),
            rgba(233, 92, 80, 0.24)
        );

    transform: rotate(-1.1deg);
}

.toddler-hero__photo::after {
    content: "";

    position: absolute;
    inset: 0;

    border: 1px solid rgba(41, 42, 44, 0.08);
    border-radius: inherit;

    pointer-events: none;
}

.toddler-hero__photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transform:
        scale(1.025)
        rotate(1.1deg);
}


/* --------------------------------------------------------------------------
   Blue scribble
   -------------------------------------------------------------------------- */

.toddler-hero__scribble {
    position: absolute;
    left: -1.4rem;
    bottom: 7%;

    width: 11rem;

    transform: rotate(-8deg);

    pointer-events: none;
}

.toddler-hero__scribble svg {
    width: 100%;
    display: block;
    overflow: visible;
}

.toddler-hero__scribble path {
    fill: none;

    stroke: #4D72D8;
    stroke-width: 6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* --------------------------------------------------------------------------
   Yellow speed note
   -------------------------------------------------------------------------- */

.toddler-hero__note {
    position: absolute;
    right: -1rem;
    bottom: 2.1rem;

    z-index: 2;

    width: 168px;
    min-height: 120px;

    padding: 1.25rem 1.35rem;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #F4CF63;
    color: #292A2C;

    box-shadow:
        0 18px 42px
        rgba(41, 42, 44, 0.15);

    transform: rotate(3deg);
}

.toddler-hero__note span {
    display: block;

    margin-bottom: 0.4rem;

    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;

    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.toddler-hero__note strong {
    display: block;

    font-family:
        "Arial Rounded MT Bold",
        "Trebuchet MS",
        Arial,
        sans-serif;

    font-size: 1.35rem;
    line-height: 1.05;
}


/* --------------------------------------------------------------------------
   Hero copy
   -------------------------------------------------------------------------- */

.toddler-hero__content {
    position: relative;
    z-index: 3;
}

.toddler-hero__content .eyebrow {
    color: #E95C50;
}

.toddler-hero__title {
    max-width: 8.7em;

    margin: 0;

    color: #292A2C;

    font-family:
        "Arial Rounded MT Bold",
        "Trebuchet MS",
        Arial,
        sans-serif;

    font-size:
        clamp(
            3.55rem,
            6vw,
            6.5rem
        );

    font-weight: 900;
    line-height: 0.88;

    letter-spacing: -0.065em;

    text-wrap: balance;
}

.toddler-hero__title span {
    display: block;
    color: #E95C50;
}

.toddler-hero__intro {
    max-width: 35rem;

    margin: 2rem 0 0;

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.15rem
        );

    line-height: 1.75;
}

.toddler-hero__actions {
    margin-top: 2.1rem;

    display: flex;
    flex-wrap: wrap;

    gap: 1rem 1.4rem;

    align-items: center;
}

.toddler-hero button.text-link {
    padding: 0;

    border: 0;

    background: transparent;
    color: #292A2C;

    font: inherit;
    font-weight: 800;

    cursor: pointer;
}


/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {

    .toddler-hero__inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, 0.9fr);

        gap: 3rem;
    }

    .toddler-hero__note {
        right: 0.5rem;
    }

}


/* --------------------------------------------------------------------------
   Stacked hero
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {

    .toddler-hero__inner {
        min-height: 0;

        padding:
            3rem
            0
            5rem;

        grid-template-columns: 1fr;

        gap: 3.5rem;
    }

    .toddler-hero__content {
        order: 1;

        max-width: 680px;
    }

    .toddler-hero__visual {
        order: 2;

        width: min(690px, 100%);

        margin: 0 auto;
    }

    .toddler-hero__photo {
        height: min(68vw, 560px);
        min-height: 420px;
    }

}


/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

    .toddler-hero__inner {
        width: calc(100% - 2rem);

        padding-top: 2.25rem;
    }

    .toddler-hero__title {
        font-size:
            clamp(
                3.25rem,
                17vw,
                5.2rem
            );
    }

    .toddler-hero__photo {
        height: 112vw;

        min-height: 390px;
        max-height: 540px;

        border-radius:
            38% 62% 32% 68%
            /
            40% 34% 66% 60%;
    }

    .toddler-hero__note {
        right: 0;
        bottom: 1.25rem;

        width: 145px;
        min-height: 104px;

        padding: 1rem;
    }

    .toddler-hero__scribble {
        left: -0.7rem;

        width: 8rem;
    }

}


/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

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

    .toddler-hero__photo,
    .toddler-hero__photo img,
    .toddler-hero__note {
        transform: none;
    }

}

/* ==========================================================================
   TH_TODDLER_EDITORIAL_SECTIONS_V1
   Toddler Care — independence statement + development list
   ========================================================================== */


/* ==========================================================================
   TODDLER — INDEPENDENCE STATEMENT
   ========================================================================== */

.toddler-myself {
    position: relative;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    background: var(--color-paper);

    overflow: hidden;
}


.toddler-myself::before {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 24rem;
    height: 24rem;

    border:
        2px
        solid
        rgba(77, 114, 216, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


.toddler-myself::after {
    content: "";

    position: absolute;

    left: -5rem;
    bottom: -8rem;

    width: 17rem;
    height: 17rem;

    background:
        color-mix(
            in srgb,
            var(--color-butter) 42%,
            transparent
        );

    border-radius:
        58% 42% 66% 34%
        /
        42% 60% 40% 58%;

    transform: rotate(17deg);

    pointer-events: none;
}


.toddler-myself__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;
}


.toddler-myself__inner > .eyebrow {
    margin-bottom:
        clamp(3rem, 5vw, 4.5rem);
}


.toddler-myself__layout {
    display: grid;

    grid-template-columns:
        minmax(290px, 0.82fr)
        minmax(0, 1.18fr);

    align-items: center;

    gap:
        clamp(3rem, 7vw, 8rem);
}


.toddler-myself__word {
    position: relative;

    width: max-content;
    max-width: 100%;

    color: var(--color-blue);

    font-family: var(--font-display);

    font-size:
        clamp(
            4.8rem,
            9.2vw,
            8.7rem
        );

    font-weight: 950;
    line-height: 0.76;

    letter-spacing: -0.075em;

    transform: rotate(-4deg);

    isolation: isolate;
}


.toddler-myself__word::before {
    content: "";

    position: absolute;
    z-index: -1;

    right: -1.1rem;
    bottom: -0.5rem;
    left: -0.6rem;

    height: 0.34em;

    background: var(--color-butter);

    transform: rotate(2deg);
}


.toddler-myself__word::after {
    content: "";

    position: absolute;

    right: -2.2rem;
    top: -1.25rem;

    width: 2.8rem;
    height: 2.8rem;

    border:
        7px
        solid
        var(--color-red);

    border-right-color: transparent;
    border-bottom-color: transparent;

    transform: rotate(18deg);

    opacity: 0.9;
}


.toddler-myself__copy {
    max-width: 690px;
}


.toddler-myself__copy h2 {
    max-width: 10.5ch;

    margin:
        0
        0
        2rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3rem,
            5vw,
            5.25rem
        );

    font-weight: 950;
    line-height: 0.92;

    letter-spacing: -0.06em;

    text-wrap: balance;
}


.toddler-myself__copy p {
    max-width: 42rem;

    margin:
        0
        0
        1.15rem;

    color:
        rgba(
            41,
            42,
            44,
            0.72
        );

    font-size:
        clamp(
            1rem,
            1.25vw,
            1.12rem
        );

    line-height: 1.75;
}


.toddler-myself__copy p:first-of-type {
    color: var(--color-graphite);

    font-weight: 650;
}


.toddler-myself__copy p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   TODDLER — CURRENTLY UNDER DEVELOPMENT
   ========================================================================== */

.toddler-growth {
    position: relative;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-paper);
    background: var(--color-graphite);

    overflow: hidden;
}


.toddler-growth::before {
    content: "";

    position: absolute;

    top: -8rem;
    right: -5rem;

    width: 21rem;
    height: 21rem;

    border:
        2px
        solid
        rgba(244, 207, 99, 0.22);

    border-radius:
        57% 43% 49% 51%
        /
        42% 61% 39% 58%;

    transform: rotate(22deg);

    pointer-events: none;
}


.toddler-growth__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;
}


.toddler-growth__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 0.72fr);

    align-items: end;

    gap:
        1.5rem
        clamp(3rem, 7vw, 8rem);

    margin-bottom:
        clamp(3.5rem, 6vw, 5.5rem);
}


.toddler-growth__header .eyebrow {
    grid-column: 1 / -1;

    margin-bottom: 0;

    color: var(--color-butter);
}


.toddler-growth__header h2 {
    max-width: 8ch;

    margin: 0;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.4rem,
            6vw,
            5.8rem
        );

    font-weight: 950;
    line-height: 0.88;

    letter-spacing: -0.065em;

    text-wrap: balance;
}


.toddler-growth__header::after {
    content:
        "Toddlers are basically one long software update.";

    display: block;

    max-width: 22rem;

    padding-top: 1.2rem;

    border-top:
        4px
        solid
        var(--color-red);

    color:
        rgba(
            255,
            253,
            248,
            0.62
        );

    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.6;
}


.toddler-growth__track {
    border-top:
        1px
        solid
        rgba(255, 255, 255, 0.18);
}


.toddler-growth__item {
    position: relative;

    display: grid;

    grid-template-columns:
        84px
        minmax(0, 1fr);

    align-items: center;

    gap: clamp(1.5rem, 3vw, 3rem);

    min-height: 145px;

    padding:
        1.7rem
        0;

    border-bottom:
        1px
        solid
        rgba(255, 255, 255, 0.18);

    transition:
        padding-left var(--transition),
        background-color var(--transition);
}


.toddler-growth__item:hover {
    padding-left: 1rem;

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );
}


.toddler-growth__number {
    display: block;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.55rem,
            2.5vw,
            2.4rem
        );

    font-weight: 950;
    line-height: 1;

    letter-spacing: -0.04em;
}


.toddler-growth__item > div {
    min-width: 0;

    display: grid;

    grid-template-columns:
        minmax(190px, 0.65fr)
        minmax(0, 1.35fr);

    align-items: center;

    gap: clamp(2rem, 5vw, 6rem);
}


.toddler-growth__item h3 {
    margin: 0;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.9rem,
            3vw,
            3rem
        );

    font-weight: 950;
    line-height: 0.95;

    letter-spacing: -0.045em;

    text-transform: uppercase;
}


.toddler-growth__item p {
    max-width: 39rem;

    margin: 0;

    color:
        rgba(
            255,
            253,
            248,
            0.62
        );

    font-size:
        clamp(
            0.95rem,
            1.2vw,
            1.06rem
        );

    line-height: 1.7;
}


.toddler-growth__item:nth-child(1)
.toddler-growth__number {
    color: var(--color-butter);
}


.toddler-growth__item:nth-child(2)
.toddler-growth__number {
    color: var(--color-red);
}


.toddler-growth__item:nth-child(3)
.toddler-growth__number {
    color: #9BC99D;
}


.toddler-growth__item:nth-child(4)
.toddler-growth__number {
    color: #A99AE0;
}


.toddler-growth__item:nth-child(5)
.toddler-growth__number {
    color: #8FA9F0;
}


.toddler-growth__item::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: -1.5rem;

    width: 5px;

    opacity: 0;

    transition: opacity var(--transition);
}


.toddler-growth__item:nth-child(1)::before {
    background: var(--color-butter);
}


.toddler-growth__item:nth-child(2)::before {
    background: var(--color-red);
}


.toddler-growth__item:nth-child(3)::before {
    background: var(--color-green);
}


.toddler-growth__item:nth-child(4)::before {
    background: var(--color-purple);
}


.toddler-growth__item:nth-child(5)::before {
    background: var(--color-blue);
}


.toddler-growth__item:hover::before {
    opacity: 1;
}


/* ==========================================================================
   TODDLER EDITORIAL SECTIONS — TABLET
   ========================================================================== */

@media (max-width: 860px) {

    .toddler-myself {
        padding:
            5.5rem
            0;
    }


    .toddler-myself__layout {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    .toddler-myself__word {
        font-size:
            clamp(
                5rem,
                16vw,
                8rem
            );
    }


    .toddler-myself__copy {
        max-width: 720px;
    }


    .toddler-growth {
        padding:
            5.5rem
            0;
    }


    .toddler-growth__header {
        grid-template-columns: 1fr;

        gap: 2rem;
    }


    .toddler-growth__header .eyebrow {
        grid-column: auto;
    }


    .toddler-growth__header::after {
        max-width: 28rem;
    }


    .toddler-growth__item > div {
        grid-template-columns:
            minmax(160px, 0.55fr)
            minmax(0, 1.45fr);

        gap: 2rem;
    }

}


/* ==========================================================================
   TODDLER EDITORIAL SECTIONS — MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .toddler-myself,
    .toddler-growth {
        padding:
            4.5rem
            0;
    }


    .toddler-myself__inner,
    .toddler-growth__inner {
        width: calc(100% - 2rem);
    }


    .toddler-myself__inner > .eyebrow {
        margin-bottom: 2.5rem;
    }


    .toddler-myself__layout {
        gap: 3rem;
    }


    .toddler-myself__word {
        font-size:
            clamp(
                4.1rem,
                21vw,
                6.5rem
            );
    }


    .toddler-myself__word::after {
        right: -0.5rem;
        top: -1rem;

        width: 2rem;
        height: 2rem;

        border-width: 5px;
    }


    .toddler-myself__copy h2 {
        font-size:
            clamp(
                2.65rem,
                13vw,
                4rem
            );
    }


    .toddler-growth__header h2 {
        font-size:
            clamp(
                3rem,
                15vw,
                4.5rem
            );
    }


    .toddler-growth__item {
        grid-template-columns:
            54px
            minmax(0, 1fr);

        align-items: start;

        gap: 1rem;

        min-height: 0;

        padding:
            1.8rem
            0;
    }


    .toddler-growth__item:hover {
        padding-left: 0;
    }


    .toddler-growth__item::before {
        display: none;
    }


    .toddler-growth__item > div {
        grid-template-columns: 1fr;

        gap: 0.75rem;
    }


    .toddler-growth__item h3 {
        font-size:
            clamp(
                1.7rem,
                8vw,
                2.35rem
            );
    }


    .toddler-growth__item p {
        font-size: 0.95rem;
    }

}

/* ==========================================================================
   TH_TODDLER_MOTION_V1
   Toddler Care — active movement editorial photo break
   ========================================================================== */

.toddler-motion {
    position: relative;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    background: var(--color-cream);

    overflow: hidden;
}


.toddler-motion::before {
    content: "";

    position: absolute;

    right: -7rem;
    bottom: -8rem;

    width: 22rem;
    height: 22rem;

    background:
        color-mix(
            in srgb,
            var(--color-soft-blue) 72%,
            transparent
        );

    border-radius:
        58% 42% 66% 34%
        /
        44% 62% 38% 56%;

    transform: rotate(17deg);

    pointer-events: none;
}


.toddler-motion__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.28fr)
        minmax(300px, 0.72fr);

    align-items: center;

    gap:
        clamp(3rem, 6vw, 7rem);
}


/* --------------------------------------------------------------------------
   Photography
   -------------------------------------------------------------------------- */

.toddler-motion__figure {
    position: relative;

    min-width: 0;

    margin: 0;
}


.toddler-motion__figure img {
    width: 100%;
    height:
        clamp(
            500px,
            48vw,
            650px
        );

    display: block;

    object-fit: cover;
    object-position: center;

    border-radius:
        30px
        78px
        34px
        56px;

    box-shadow:
        0 28px 70px
        rgba(41, 42, 44, 0.16);
}


/* --------------------------------------------------------------------------
   Activity report
   -------------------------------------------------------------------------- */

.toddler-motion__figure figcaption {
    position: absolute;

    left: 2rem;
    bottom: -2rem;

    width:
        min(
            360px,
            calc(100% - 4rem)
        );

    padding:
        1.25rem
        1.4rem
        1.35rem;

    color: var(--color-paper);
    background: var(--color-graphite);

    box-shadow:
        0 18px 42px
        rgba(41, 42, 44, 0.18);

    transform: rotate(-2deg);
}


.toddler-motion__figure figcaption span {
    display: block;

    margin-bottom: 0.45rem;

    color: var(--color-butter);

    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1;

    letter-spacing: 0.15em;
    text-transform: uppercase;
}


.toddler-motion__figure figcaption strong {
    display: block;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.25rem,
            2vw,
            1.7rem
        );

    font-weight: 950;
    line-height: 1.08;
}


/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */

.toddler-motion__copy {
    position: relative;

    max-width: 440px;
}


.toddler-motion__copy .eyebrow {
    color: var(--color-blue);
}


.toddler-motion__copy h2 {
    max-width: 8ch;

    margin:
        0
        0
        1.8rem;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.25rem,
            5vw,
            5.3rem
        );

    font-weight: 950;
    line-height: 0.9;

    letter-spacing: -0.06em;

    text-wrap: balance;
}


.toddler-motion__copy h2::after {
    content: "";

    display: block;

    width: 5.5rem;
    height: 7px;

    margin-top: 1.35rem;

    background: var(--color-red);

    border-radius: 999px;

    transform: rotate(-2deg);
}


.toddler-motion__copy > p:last-child {
    max-width: 36rem;

    margin: 0;

    color:
        rgba(
            41,
            42,
            44,
            0.72
        );

    font-size:
        clamp(
            1rem,
            1.25vw,
            1.1rem
        );

    line-height: 1.75;
}


/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {

    .toddler-motion__inner {
        grid-template-columns: 1fr;

        gap: 5rem;
    }


    .toddler-motion__figure {
        width: min(760px, 100%);
    }


    .toddler-motion__figure img {
        height:
            min(
                68vw,
                610px
            );

        min-height: 460px;
    }


    .toddler-motion__copy {
        max-width: 680px;
    }


    .toddler-motion__copy h2 {
        max-width: 10ch;
    }

}


/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

    .toddler-motion {
        padding:
            4.5rem
            0;
    }


    .toddler-motion__inner {
        width: calc(100% - 2rem);

        gap: 4.5rem;
    }


    .toddler-motion__figure img {
        height: 116vw;

        min-height: 430px;
        max-height: 560px;

        border-radius:
            22px
            52px
            24px
            40px;
    }


    .toddler-motion__figure figcaption {
        left: 1rem;
        bottom: -2.25rem;

        width: calc(100% - 2rem);
    }


    .toddler-motion__copy h2 {
        font-size:
            clamp(
                2.9rem,
                14vw,
                4.4rem
            );
    }

}

/* ==========================================================================
   TH_TODDLER_DAY_V1
   Toddler Care — alternating daily routine path
   ========================================================================== */

.toddler-day {
    position: relative;

    scroll-margin-top: 2rem;

    padding:
        clamp(6.5rem, 10vw, 10rem)
        0;

    color: var(--color-graphite);
    background: var(--color-soft-yellow);

    overflow: hidden;
}


/* --------------------------------------------------------------------------
   Background artwork
   -------------------------------------------------------------------------- */

.toddler-day::before {
    content: "";

    position: absolute;

    top: -9rem;
    left: -8rem;

    width: 24rem;
    height: 24rem;

    border:
        2px
        solid
        rgba(233, 92, 80, 0.22);

    border-radius: 50%;

    pointer-events: none;
}


.toddler-day::after {
    content: "";

    position: absolute;

    right: -7rem;
    bottom: -8rem;

    width: 21rem;
    height: 21rem;

    background:
        color-mix(
            in srgb,
            var(--color-soft-blue) 82%,
            transparent
        );

    border-radius:
        57% 43% 65% 35%
        /
        42% 60% 40% 58%;

    transform: rotate(-16deg);

    pointer-events: none;
}


/* --------------------------------------------------------------------------
   Inner layout
   -------------------------------------------------------------------------- */

.toddler-day__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;
}


/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.toddler-day__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(300px, 0.75fr);

    align-items: end;

    gap:
        1.5rem
        clamp(3rem, 7vw, 8rem);

    margin-bottom:
        clamp(5rem, 8vw, 7.5rem);
}


.toddler-day__header .eyebrow {
    grid-column: 1 / -1;

    margin-bottom: 0;

    color: var(--color-blue);
}


.toddler-day__header h2 {
    max-width: 7.5ch;

    margin: 0;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            6vw,
            6rem
        );

    font-weight: 950;
    line-height: 0.86;

    letter-spacing: -0.065em;

    text-wrap: balance;
}


.toddler-day__header > p:last-child {
    max-width: 31rem;

    margin: 0;

    padding-top: 1.25rem;

    border-top:
        5px
        solid
        var(--color-red);

    color:
        rgba(
            41,
            42,
            44,
            0.7
        );

    font-size:
        clamp(
            1rem,
            1.25vw,
            1.08rem
        );

    line-height: 1.75;
}


/* ==========================================================================
   DAY PATH
   ========================================================================== */

.toddler-day__timeline {
    position: relative;

    width:
        min(
            100%,
            1050px
        );

    margin-inline: auto;

    padding:
        1rem
        0;
}


/* Center route */

.toddler-day__timeline::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 4px;

    background:
        rgba(
            41,
            42,
            44,
            0.16
        );

    border-radius: 999px;

    transform: translateX(-50%);
}


/* --------------------------------------------------------------------------
   Individual stops
   -------------------------------------------------------------------------- */

.toddler-day__stop {
    position: relative;

    width:
        calc(
            50% - 68px
        );

    min-height: 170px;

    padding:
        1.5rem
        0
        2.25rem;

    border-top:
        2px
        solid
        rgba(41, 42, 44, 0.17);
}


/* Left-side stops */

.toddler-day__stop:nth-child(odd) {
    margin-right: auto;

    text-align: right;
}


/* Right-side stops */

.toddler-day__stop:nth-child(even) {
    margin-left: auto;

    text-align: left;
}


/* Horizontal connectors */

.toddler-day__stop::after {
    content: "";

    position: absolute;

    top: 2.25rem;

    width: 68px;
    height: 2px;

    background:
        rgba(
            41,
            42,
            44,
            0.22
        );
}


.toddler-day__stop:nth-child(odd)::after {
    right: -68px;
}


.toddler-day__stop:nth-child(even)::after {
    left: -68px;
}


/* Timeline dots */

.toddler-day__stop::before {
    content: "";

    position: absolute;
    z-index: 3;

    top: 1.82rem;

    width: 18px;
    height: 18px;

    background: var(--color-soft-yellow);

    border:
        5px
        solid
        var(--color-blue);

    border-radius: 50%;
}


.toddler-day__stop:nth-child(odd)::before {
    right: -77px;
}


.toddler-day__stop:nth-child(even)::before {
    left: -77px;
}


/* --------------------------------------------------------------------------
   Numbers
   -------------------------------------------------------------------------- */

.toddler-day__time {
    display: block;

    margin-bottom: 0.7rem;

    color: var(--color-blue);

    font-family: var(--font-display);

    font-size:
        clamp(
            1.55rem,
            2.2vw,
            2.2rem
        );

    font-weight: 950;
    line-height: 1;

    letter-spacing: -0.04em;
}


.toddler-day__stop:nth-child(2)
.toddler-day__time {
    color: var(--color-red);
}


.toddler-day__stop:nth-child(3)
.toddler-day__time {
    color: #5F9362;
}


.toddler-day__stop:nth-child(4)
.toddler-day__time {
    color: var(--color-purple);
}


.toddler-day__stop:nth-child(5)
.toddler-day__time {
    color: var(--color-blue);
}


.toddler-day__stop:nth-child(6)
.toddler-day__time {
    color: #C15A50;
}


.toddler-day__stop:nth-child(7)
.toddler-day__time {
    color: #4F8152;
}


/* Match dots to their stop */

.toddler-day__stop:nth-child(2)::before {
    border-color: var(--color-red);
}


.toddler-day__stop:nth-child(3)::before {
    border-color: var(--color-green);
}


.toddler-day__stop:nth-child(4)::before {
    border-color: var(--color-purple);
}


.toddler-day__stop:nth-child(5)::before {
    border-color: var(--color-blue);
}


.toddler-day__stop:nth-child(6)::before {
    border-color: var(--color-red);
}


.toddler-day__stop:nth-child(7)::before {
    border-color: var(--color-green);
}


/* --------------------------------------------------------------------------
   Activity names
   -------------------------------------------------------------------------- */

.toddler-day__stop strong {
    display: block;

    margin-bottom: 0.8rem;

    font-family: var(--font-display);

    font-size:
        clamp(
            2.25rem,
            4vw,
            3.65rem
        );

    font-weight: 950;
    line-height: 0.9;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   Descriptions
   -------------------------------------------------------------------------- */

.toddler-day__stop p {
    max-width: 390px;

    margin:
        0;

    color:
        rgba(
            41,
            42,
            44,
            0.68
        );

    font-size:
        clamp(
            0.94rem,
            1.15vw,
            1.03rem
        );

    line-height: 1.65;
}


.toddler-day__stop:nth-child(odd) p {
    margin-left: auto;
}


/* --------------------------------------------------------------------------
   Final repeat stop
   -------------------------------------------------------------------------- */

.toddler-day__stop--repeat {
    padding:
        1.6rem
        1.8rem
        1.9rem;

    color: var(--color-paper);
    background: var(--color-graphite);

    border-top: 0;

    transform: rotate(-1.5deg);

    box-shadow:
        0 18px 42px
        rgba(41, 42, 44, 0.12);
}


.toddler-day__stop--repeat strong {
    color: var(--color-paper);
}


.toddler-day__stop--repeat p {
    color:
        rgba(
            255,
            253,
            248,
            0.68
        );
}


.toddler-day__stop--repeat::after {
    top: 2.25rem;
}


.toddler-day__stop--repeat::before {
    top: 1.82rem;

    background: var(--color-graphite);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 860px) {

    .toddler-day {
        padding:
            5.5rem
            0;
    }


    .toddler-day__header {
        grid-template-columns: 1fr;

        gap: 2rem;

        margin-bottom: 5rem;
    }


    .toddler-day__header .eyebrow {
        grid-column: auto;
    }


    .toddler-day__header h2 {
        max-width: 10ch;
    }


    .toddler-day__header > p:last-child {
        max-width: 38rem;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .toddler-day {
        padding:
            4.5rem
            0;
    }


    .toddler-day__inner {
        width: calc(100% - 2rem);
    }


    .toddler-day__header {
        margin-bottom: 4rem;
    }


    .toddler-day__header h2 {
        font-size:
            clamp(
                3rem,
                15vw,
                4.5rem
            );
    }


    .toddler-day__timeline {
        padding-left: 3.5rem;
    }


    .toddler-day__timeline::before {
        left: 1.35rem;

        transform: none;
    }


    .toddler-day__stop,
    .toddler-day__stop:nth-child(odd),
    .toddler-day__stop:nth-child(even) {
        width: 100%;

        min-height: 0;

        margin:
            0
            0
            2.4rem;

        padding:
            1.3rem
            0
            1.6rem;

        text-align: left;
    }


    .toddler-day__stop:nth-child(odd) p {
        margin-left: 0;
    }


    .toddler-day__stop::after,
    .toddler-day__stop:nth-child(odd)::after,
    .toddler-day__stop:nth-child(even)::after {
        top: 1.95rem;
        left: -2.15rem;
        right: auto;

        width: 2.15rem;
    }


    .toddler-day__stop::before,
    .toddler-day__stop:nth-child(odd)::before,
    .toddler-day__stop:nth-child(even)::before {
        top: 1.52rem;
        left: -2.72rem;
        right: auto;
    }


    .toddler-day__stop strong {
        font-size:
            clamp(
                2rem,
                10vw,
                3rem
            );
    }


    .toddler-day__stop--repeat {
        padding:
            1.4rem
            1.5rem
            1.6rem;

        transform: rotate(-1deg);
    }


    .toddler-day__stop--repeat::after {
        left: -3.65rem;

        width: 3.65rem;
    }


    .toddler-day__stop--repeat::before {
        left: -4.2rem;
    }

}

/* ==========================================================================
   TH_TODDLER_MESS_V1
   Toddler Care — hands-on learning editorial section
   ========================================================================== */

.toddler-mess {
    position: relative;

    padding:
        clamp(6.5rem, 10vw, 10rem)
        0;

    color: var(--color-graphite);
    background: var(--color-paper);

    overflow: hidden;
}


/* --------------------------------------------------------------------------
   Decorative background
   -------------------------------------------------------------------------- */

.toddler-mess::before {
    content: "";

    position: absolute;

    top: -5rem;
    right: -6rem;

    width: 19rem;
    height: 19rem;

    background:
        color-mix(
            in srgb,
            var(--color-soft-red) 72%,
            transparent
        );

    border-radius:
        40% 60% 55% 45%
        /
        62% 41% 59% 38%;

    transform: rotate(18deg);

    pointer-events: none;
}


.toddler-mess::after {
    content: "";

    position: absolute;

    left: -4rem;
    bottom: -5rem;

    width: 14rem;
    height: 14rem;

    border:
        2px
        solid
        rgba(77, 114, 216, 0.18);

    border-radius: 50%;

    pointer-events: none;
}


/* --------------------------------------------------------------------------
   Main layout
   -------------------------------------------------------------------------- */

.toddler-mess__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.95fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: start;
}


/* --------------------------------------------------------------------------
   Headline
   -------------------------------------------------------------------------- */

.toddler-mess__headline {
    position: relative;
}


.toddler-mess__headline .eyebrow {
    color: var(--color-blue);
}


.toddler-mess__headline h2 {
    max-width: 10ch;

    margin: 0;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.6rem,
            6vw,
            6rem
        );

    font-weight: 950;
    line-height: 0.88;

    letter-spacing: -0.065em;

    text-wrap: balance;
}


.toddler-mess__headline h2::after {
    content: "";

    display: block;

    width: 7.5rem;
    height: 9px;

    margin-top: 1.6rem;

    background: var(--color-butter);

    border-radius: 999px;

    transform: rotate(-2deg);
}


/* --------------------------------------------------------------------------
   Intro copy
   -------------------------------------------------------------------------- */

.toddler-mess__copy {
    min-width: 0;

    padding-top:
        clamp(3rem, 6vw, 6rem);
}


.toddler-mess__copy > p {
    max-width: 37rem;

    margin:
        0
        0
        clamp(3rem, 5vw, 4.5rem);

    color:
        rgba(
            41,
            42,
            44,
            0.72
        );

    font-size:
        clamp(
            1.02rem,
            1.3vw,
            1.14rem
        );

    line-height: 1.78;
}


/* ==========================================================================
   HANDS-ON FACTS
   ========================================================================== */

.toddler-mess__facts {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        2.4rem
        clamp(2rem, 4vw, 4rem);
}


.toddler-mess__facts > div {
    position: relative;

    min-height: 145px;

    padding:
        1.35rem
        0
        1rem;

    border-top:
        5px
        solid
        var(--color-blue);
}


/* Slight editorial stagger */

.toddler-mess__facts > div:nth-child(2) {
    margin-top: 2.2rem;

    border-color: var(--color-red);
}


.toddler-mess__facts > div:nth-child(3) {
    border-color: var(--color-green);
}


.toddler-mess__facts > div:nth-child(4) {
    margin-top: 2.2rem;

    border-color: var(--color-purple);
}


/* --------------------------------------------------------------------------
   Fact titles
   -------------------------------------------------------------------------- */

.toddler-mess__facts strong {
    display: block;

    margin-bottom: 0.65rem;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.75rem
        );

    font-weight: 950;
    line-height: 0.95;

    letter-spacing: -0.045em;

    text-transform: uppercase;
}


.toddler-mess__facts > div:nth-child(1) strong {
    color: var(--color-blue);
}


.toddler-mess__facts > div:nth-child(2) strong {
    color: var(--color-red);
}


.toddler-mess__facts > div:nth-child(3) strong {
    color: #5F9362;
}


.toddler-mess__facts > div:nth-child(4) strong {
    color: var(--color-purple);
}


/* --------------------------------------------------------------------------
   Fact descriptions
   -------------------------------------------------------------------------- */

.toddler-mess__facts span {
    display: block;

    max-width: 15rem;

    color:
        rgba(
            41,
            42,
            44,
            0.65
        );

    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.55;
}


/* --------------------------------------------------------------------------
   Little paint / scribble accents
   -------------------------------------------------------------------------- */

.toddler-mess__facts > div::after {
    content: "";

    position: absolute;

    width: 13px;
    height: 13px;

    top: -9px;
    right: 0;

    border-radius: 50%;

    background: currentColor;
}


.toddler-mess__facts > div:nth-child(1) {
    color: var(--color-blue);
}


.toddler-mess__facts > div:nth-child(2) {
    color: var(--color-red);
}


.toddler-mess__facts > div:nth-child(3) {
    color: var(--color-green);
}


.toddler-mess__facts > div:nth-child(4) {
    color: var(--color-purple);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 860px) {

    .toddler-mess {
        padding:
            5.5rem
            0;
    }


    .toddler-mess__inner {
        grid-template-columns: 1fr;

        gap: 3.5rem;
    }


    .toddler-mess__headline h2 {
        max-width: 11ch;
    }


    .toddler-mess__copy {
        max-width: 720px;

        padding-top: 0;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .toddler-mess {
        padding:
            4.5rem
            0;
    }


    .toddler-mess__inner {
        width: calc(100% - 2rem);

        gap: 3rem;
    }


    .toddler-mess__headline h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    .toddler-mess__copy > p {
        margin-bottom: 3rem;
    }


    .toddler-mess__facts {
        grid-template-columns: 1fr;

        gap: 1.8rem;
    }


    .toddler-mess__facts > div,
    .toddler-mess__facts > div:nth-child(2),
    .toddler-mess__facts > div:nth-child(4) {
        min-height: 0;

        margin-top: 0;

        padding:
            1.15rem
            0
            1.3rem;
    }


    .toddler-mess__facts span {
        max-width: 100%;
    }

}

/* ==========================================================================
   TH_TODDLER_LANGUAGE_V1
   Toddler Care — language / WHY? editorial section
   ========================================================================== */

.toddler-language {
    position: relative;

    padding:
        clamp(6.5rem, 10vw, 10rem)
        0;

    color: var(--color-paper);
    background: var(--color-blue);

    overflow: hidden;
}


/* --------------------------------------------------------------------------
   Background artwork
   -------------------------------------------------------------------------- */

.toddler-language::before {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 24rem;
    height: 24rem;

    border:
        2px
        solid
        rgba(255, 253, 248, 0.18);

    border-radius: 50%;

    pointer-events: none;
}


.toddler-language::after {
    content: "";

    position: absolute;

    left: -6rem;
    bottom: -7rem;

    width: 19rem;
    height: 19rem;

    background:
        rgba(233, 92, 80, 0.24);

    border-radius:
        63% 37% 47% 53%
        /
        43% 61% 39% 57%;

    transform: rotate(-18deg);

    pointer-events: none;
}


/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.toddler-language__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(300px, 0.82fr)
        minmax(0, 1.18fr);

    align-items: center;

    gap:
        clamp(4rem, 8vw, 9rem);
}


/* ==========================================================================
   WHY? PAPER
   ========================================================================== */

.toddler-language__quote {
    position: relative;

    min-height: 420px;

    padding:
        clamp(2rem, 4vw, 3.5rem);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    color: var(--color-graphite);
    background: var(--color-butter);

    box-shadow:
        0 28px 65px
        rgba(41, 42, 44, 0.2);

    transform: rotate(-3deg);

    isolation: isolate;
}


/* Tape */

.toddler-language__quote::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 50%;

    width: 104px;
    height: 27px;

    background:
        rgba(255, 253, 248, 0.58);

    transform:
        translateX(-50%)
        rotate(2deg);

    z-index: 3;
}


/* Little red scribble */

.toddler-language__quote::after {
    content: "";

    position: absolute;

    right: 2rem;
    bottom: 2.1rem;

    width: 4.7rem;
    height: 1.2rem;

    border-top:
        7px
        solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-8deg);

    opacity: 0.95;
}


.toddler-language__quote > span {
    display: block;

    color: var(--color-graphite);

    font-size: 0.7rem;
    font-weight: 950;
    line-height: 1;

    letter-spacing: 0.17em;
    text-transform: uppercase;
}


.toddler-language__quote strong {
    display: block;

    margin:
        1.5rem
        0;

    font-family: var(--font-display);

    font-size:
        clamp(
            6rem,
            12vw,
            10.5rem
        );

    font-weight: 950;
    line-height: 0.72;

    letter-spacing: -0.085em;

    color: var(--color-graphite);
}


.toddler-language__quote small {
    display: block;

    max-width: 14rem;

    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.45;
}


/* ==========================================================================
   LANGUAGE COPY
   ========================================================================== */

.toddler-language__copy {
    max-width: 600px;
}


.toddler-language__copy .eyebrow {
    color: var(--color-butter);
}


.toddler-language__copy h2 {
    max-width: 9ch;

    margin:
        0
        0
        2rem;

    color: var(--color-paper);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.7rem,
            6vw,
            6rem
        );

    font-weight: 950;
    line-height: 0.88;

    letter-spacing: -0.065em;

    text-wrap: balance;
}


.toddler-language__copy h2::after {
    content: "";

    display: block;

    width: 6rem;
    height: 8px;

    margin-top: 1.5rem;

    background: var(--color-red);

    border-radius: 999px;

    transform: rotate(-2deg);
}


.toddler-language__copy p {
    max-width: 37rem;

    margin:
        0
        0
        1.25rem;

    color:
        rgba(
            255,
            253,
            248,
            0.76
        );

    font-size:
        clamp(
            1rem,
            1.25vw,
            1.1rem
        );

    line-height: 1.76;
}


.toddler-language__copy p:first-of-type {
    color: var(--color-paper);

    font-weight: 650;
}


.toddler-language__copy p:last-child {
    margin-bottom: 0;

    color:
        rgba(
            255,
            253,
            248,
            0.58
        );
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 860px) {

    .toddler-language {
        padding:
            5.5rem
            0;
    }


    .toddler-language__inner {
        grid-template-columns: 1fr;

        gap: 5rem;
    }


    .toddler-language__quote {
        width:
            min(
                600px,
                92%
            );

        min-height: 380px;
    }


    .toddler-language__copy {
        max-width: 700px;
    }


    .toddler-language__copy h2 {
        max-width: 11ch;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .toddler-language {
        padding:
            4.5rem
            0;
    }


    .toddler-language__inner {
        width: calc(100% - 2rem);

        gap: 4rem;
    }


    .toddler-language__quote {
        width: calc(100% - 0.5rem);

        min-height: 330px;

        padding:
            2rem
            1.6rem;

        transform: rotate(-2deg);
    }


    .toddler-language__quote strong {
        font-size:
            clamp(
                5.3rem,
                28vw,
                8rem
            );
    }


    .toddler-language__copy h2 {
        font-size:
            clamp(
                3rem,
                15vw,
                4.6rem
            );
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    .toddler-language__quote {
        transform: none;
    }

}

/* ==========================================================================
   TH_TODDLER_PARENTS_V1
   Toddler Care — parent pickup communication
   ========================================================================== */

.toddler-parents {
    position: relative;

    padding:
        clamp(6.5rem, 10vw, 10rem)
        0;

    color: var(--color-graphite);
    background: var(--color-soft-red);

    overflow: hidden;
}


/* --------------------------------------------------------------------------
   Background artwork
   -------------------------------------------------------------------------- */

.toddler-parents::before {
    content: "";

    position: absolute;

    top: -8rem;
    left: -7rem;

    width: 23rem;
    height: 23rem;

    border:
        2px
        solid
        rgba(41, 42, 44, 0.1);

    border-radius:
        60% 40% 53% 47%
        /
        42% 59% 41% 58%;

    transform: rotate(-14deg);

    pointer-events: none;
}


.toddler-parents::after {
    content: "";

    position: absolute;

    right: -5rem;
    bottom: -7rem;

    width: 18rem;
    height: 18rem;

    background:
        color-mix(
            in srgb,
            var(--color-butter) 62%,
            transparent
        );

    border-radius:
        44% 56% 63% 37%
        /
        58% 41% 59% 42%;

    transform: rotate(18deg);

    pointer-events: none;
}


/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.toddler-parents__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(300px, 0.82fr)
        minmax(0, 1.18fr);

    align-items: start;

    gap:
        clamp(4rem, 8vw, 9rem);
}


/* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */

.toddler-parents__inner > div:first-child {
    position: relative;

    padding-top: 0.5rem;
}


.toddler-parents__inner > div:first-child .eyebrow {
    color: var(--color-red);
}


.toddler-parents__inner > div:first-child h2 {
    max-width: 9ch;

    margin: 0;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            6vw,
            6rem
        );

    font-weight: 950;
    line-height: 0.88;

    letter-spacing: -0.065em;

    text-wrap: balance;
}


.toddler-parents__inner > div:first-child h2::after {
    content: "";

    display: block;

    width: 6rem;
    height: 8px;

    margin-top: 1.6rem;

    background: var(--color-blue);

    border-radius: 999px;

    transform: rotate(-2deg);
}


/* ==========================================================================
   PARENT COMMUNICATION COPY
   ========================================================================== */

.toddler-parents__copy {
    min-width: 0;

    padding-top:
        clamp(2.5rem, 5vw, 5rem);
}


.toddler-parents__copy > p {
    max-width: 39rem;

    margin:
        0
        0
        clamp(2.5rem, 5vw, 4rem);

    color:
        rgba(
            41,
            42,
            44,
            0.72
        );

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.12rem
        );

    line-height: 1.78;
}


/* ==========================================================================
   PICKUP QUOTE
   ========================================================================== */

.toddler-parents blockquote {
    position: relative;

    max-width: 620px;

    margin: 0;

    padding:
        clamp(2rem, 4vw, 3rem)
        clamp(2rem, 4vw, 3.4rem);

    color: var(--color-paper);
    background: var(--color-graphite);

    box-shadow:
        0 24px 55px
        rgba(41, 42, 44, 0.16);

    transform: rotate(1.5deg);
}


/* oversized quotation mark */

.toddler-parents blockquote::before {
    content: "“";

    position: absolute;

    top: -2.6rem;
    left: 1rem;

    color: var(--color-butter);

    font-family: Georgia, serif;

    font-size:
        clamp(
            7rem,
            11vw,
            10rem
        );

    font-weight: 900;
    line-height: 1;

    pointer-events: none;
}


.toddler-parents blockquote p {
    position: relative;
    z-index: 2;

    max-width: 10ch;

    margin:
        0
        0
        1.6rem;

    color: var(--color-paper);

    font-family: var(--font-display);

    font-size:
        clamp(
            2.5rem,
            4.5vw,
            4.3rem
        );

    font-weight: 950;
    line-height: 0.92;

    letter-spacing: -0.055em;

    text-wrap: balance;
}


.toddler-parents blockquote footer {
    position: relative;
    z-index: 2;

    padding-top: 1.2rem;

    border-top:
        4px
        solid
        var(--color-red);

    color:
        rgba(
            255,
            253,
            248,
            0.72
        );

    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.5;
}


/* --------------------------------------------------------------------------
   Tiny blue conversational accent
   -------------------------------------------------------------------------- */

.toddler-parents blockquote::after {
    content: "";

    position: absolute;

    right: -1.2rem;
    bottom: 2rem;

    width: 3.5rem;
    height: 3.5rem;

    border:
        7px
        solid
        var(--color-blue);

    border-top-color: transparent;
    border-left-color: transparent;

    transform: rotate(18deg);

    opacity: 0.95;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 860px) {

    .toddler-parents {
        padding:
            5.5rem
            0;
    }


    .toddler-parents__inner {
        grid-template-columns: 1fr;

        gap: 3.5rem;
    }


    .toddler-parents__inner > div:first-child h2 {
        max-width: 11ch;
    }


    .toddler-parents__copy {
        max-width: 720px;

        padding-top: 0;
    }


    .toddler-parents blockquote {
        max-width: 650px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .toddler-parents {
        padding:
            4.5rem
            0;
    }


    .toddler-parents__inner {
        width: calc(100% - 2rem);

        gap: 3rem;
    }


    .toddler-parents__inner > div:first-child h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );
    }


    .toddler-parents__copy > p {
        margin-bottom: 3rem;
    }


    .toddler-parents blockquote {
        padding:
            2.4rem
            1.6rem
            2rem;

        transform: rotate(1deg);
    }


    .toddler-parents blockquote::before {
        top: -2rem;

        font-size: 7rem;
    }


    .toddler-parents blockquote p {
        font-size:
            clamp(
                2.3rem,
                12vw,
                3.5rem
            );
    }


    .toddler-parents blockquote::after {
        right: -0.25rem;

        width: 2.5rem;
        height: 2.5rem;

        border-width: 5px;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    .toddler-parents blockquote {
        transform: none;
    }

}

/* ==========================================================================
   TH_TODDLER_DEMO_NOTE_V1
   Toddler Care — template disclaimer strip
   ========================================================================== */

.toddler-demo {
    position: relative;

    padding:
        clamp(2.2rem, 4vw, 3.4rem)
        0;

    color: var(--color-paper);
    background: var(--color-graphite);

    overflow: hidden;
}


.toddler-demo::after {
    content: "DEMO";

    position: absolute;

    top: 50%;
    right: clamp(1rem, 4vw, 4rem);

    color: rgba(255, 253, 248, 0.045);

    font-family: var(--font-display);

    font-size:
        clamp(
            4rem,
            9vw,
            8rem
        );

    font-weight: 950;
    line-height: 1;

    letter-spacing: -0.07em;

    transform:
        translateY(-50%)
        rotate(-4deg);

    pointer-events: none;
}


.toddler-demo__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;
}


.toddler-demo__inner p {
    max-width: 980px;

    margin: 0;

    padding-left: 1.4rem;

    border-left:
        6px
        solid
        var(--color-butter);

    color: rgba(255, 253, 248, 0.66);

    font-size: 0.78rem;
    line-height: 1.72;
}


.toddler-demo__inner strong {
    color: var(--color-butter);

    font-weight: 900;
}


@media (max-width: 640px) {

    .toddler-demo {
        padding:
            2.4rem
            0;
    }


    .toddler-demo__inner {
        width: calc(100% - 2rem);
    }


    .toddler-demo__inner p {
        padding-left: 1rem;

        border-left-width: 5px;

        font-size: 0.73rem;
    }


    .toddler-demo::after {
        right: -1rem;

        font-size: 5rem;
    }

}

/* ==========================================================================
   TH_TODDLER_CTA_V1
   Toddler Care — final tour CTA
   ========================================================================== */

.toddler-cta {
    position: relative;

    padding:
        clamp(5.5rem, 8vw, 8rem)
        0;

    color: var(--color-paper);
    background: var(--color-blue);

    overflow: hidden;
}


/* --------------------------------------------------------------------------
   Background artwork
   -------------------------------------------------------------------------- */

.toddler-cta::before {
    content: "";

    position: absolute;

    top: -8rem;
    right: -6rem;

    width: 24rem;
    height: 24rem;

    border:
        2px
        solid
        rgba(255, 253, 248, 0.18);

    border-radius: 50%;

    pointer-events: none;
}


.toddler-cta::after {
    content: "";

    position: absolute;

    left: -7rem;
    bottom: -9rem;

    width: 22rem;
    height: 22rem;

    background:
        rgba(233, 92, 80, 0.32);

    border-radius:
        61% 39% 46% 54%
        /
        43% 58% 42% 57%;

    transform: rotate(18deg);

    pointer-events: none;
}


/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.toddler-cta__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.65fr);

    align-items: end;

    gap:
        clamp(4rem, 8vw, 9rem);
}


/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */

.toddler-cta__copy {
    max-width: 720px;
}


.toddler-cta__copy .eyebrow {
    margin-bottom: 1.5rem;

    color: var(--color-butter);
}


.toddler-cta__copy h2 {
    max-width: 11ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-paper);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.4rem,
            5.5vw,
            5.5rem
        );

    font-weight: 950;
    line-height: 0.9;

    letter-spacing: -0.06em;

    text-wrap: balance;
}


.toddler-cta__copy p {
    max-width: 39rem;

    margin: 0;

    color:
        rgba(
            255,
            253,
            248,
            0.76
        );

    font-size:
        clamp(
            1rem,
            1.25vw,
            1.1rem
        );

    line-height: 1.75;
}


/* ==========================================================================
   CTA ACTION PANEL
   ========================================================================== */

.toddler-cta__action {
    position: relative;

    min-height: 250px;

    padding:
        clamp(2rem, 4vw, 3rem);

    display: flex;

    flex-direction: column;

    align-items: flex-start;
    justify-content: center;

    gap: 1.25rem;

    color: var(--color-graphite);
    background: var(--color-butter);

    box-shadow:
        0 24px 55px
        rgba(41, 42, 44, 0.18);

    transform: rotate(2deg);
}


/* Tape */

.toddler-cta__action::before {
    content: "";

    position: absolute;

    top: -12px;
    left: 50%;

    width: 92px;
    height: 24px;

    background:
        rgba(255, 253, 248, 0.58);

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* Red scribble */

.toddler-cta__action::after {
    content: "";

    position: absolute;

    right: 1.5rem;
    bottom: 1.3rem;

    width: 4.5rem;
    height: 1rem;

    border-top:
        7px
        solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-7deg);

    pointer-events: none;
}


/* --------------------------------------------------------------------------
   Tour button
   -------------------------------------------------------------------------- */

.toddler-cta__action .button--primary {
    position: relative;
    z-index: 2;

    min-height: 54px;

    padding-inline: 1.6rem;

    color: var(--color-paper);
    background: var(--color-graphite);

    box-shadow: none;
}


.toddler-cta__action .button--primary:hover {
    color: var(--color-paper);
    background: var(--color-red);

    box-shadow:
        0 12px 28px
        rgba(41, 42, 44, 0.18);
}


/* --------------------------------------------------------------------------
   Back link
   -------------------------------------------------------------------------- */

.toddler-cta__action .text-link {
    position: relative;
    z-index: 2;

    color: var(--color-graphite);

    font-weight: 900;
}


.toddler-cta__action .text-link span {
    color: var(--color-red);
}


.toddler-cta__action .text-link:hover {
    color: var(--color-blue-dark);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 860px) {

    .toddler-cta {
        padding:
            5.5rem
            0;
    }


    .toddler-cta__inner {
        grid-template-columns: 1fr;

        align-items: start;

        gap: 4rem;
    }


    .toddler-cta__copy {
        max-width: 720px;
    }


    .toddler-cta__copy h2 {
        max-width: 12ch;
    }


    .toddler-cta__action {
        width:
            min(
                520px,
                94%
            );

        min-height: 220px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .toddler-cta {
        padding:
            4.5rem
            0;
    }


    .toddler-cta__inner {
        width: calc(100% - 2rem);

        gap: 3.5rem;
    }


    .toddler-cta__copy h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );
    }


    .toddler-cta__action {
        width: calc(100% - 0.5rem);

        min-height: 210px;

        padding:
            2.2rem
            1.5rem;

        transform: rotate(1deg);
    }


    .toddler-cta__action .button--primary {
        width: 100%;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    .toddler-cta__action {
        transform: none;
    }

}

/* ==========================================================================
   TH_TODDLER_LANGUAGE_NOTE_FIX_V2
   Toddler Care — keep WHY? inside sticky note + handwritten marker feel
   ========================================================================== */

.toddler-language__quote {
    width:
        min(
            430px,
            100%
        );

    min-height: 455px;

    padding:
        2rem
        1.8rem
        2rem;

    overflow: hidden;

    display: grid;

    grid-template-rows:
        auto
        1fr
        auto;
}


.toddler-language__quote > span {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
}


.toddler-language__quote strong {
    display: block;

    align-self: center;

    max-width: 100%;

    margin:
        0.75rem
        0
        0.85rem;

    color: var(--color-graphite);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            4rem,
            8vw,
            6.2rem
        );

    font-weight: 900;
    line-height: 0.9;

    letter-spacing: -0.035em;

    text-align: center;

    white-space: nowrap;

    transform: rotate(-3deg);
}


.toddler-language__quote small {
    max-width: 100%;

    font-size: 0.88rem;
    line-height: 1.45;
}


@media (max-width: 860px) {

    .toddler-language__quote {
        width:
            min(
                500px,
                92%
            );

        min-height: 410px;
    }


    .toddler-language__quote strong {
        font-size:
            clamp(
                3.8rem,
                11vw,
                5.8rem
            );
    }

}


@media (max-width: 640px) {

    .toddler-language__quote {
        width: calc(100% - 0.5rem);

        min-height: 340px;

        padding:
            1.85rem
            1.4rem
            1.75rem;
    }


    .toddler-language__quote strong {
        font-size:
            clamp(
                3.25rem,
                17vw,
                4.8rem
            );

        line-height: 0.92;
    }

}

/* ==========================================================================
   TH_PREK_HERO_V1
   Pre-K — confident kindergarten-readiness editorial hero
   ========================================================================== */

.page-prek-care main {
    overflow: hidden;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.prek-hero {
    position: relative;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            var(--color-cream) 0%,
            #f8f3df 100%
        );

    overflow: hidden;
}


.prek-hero::before {
    content: "";

    position: absolute;

    top: 5rem;
    left: -7rem;

    width: 19rem;
    height: 19rem;

    border:
        2px
        solid
        rgba(130, 183, 132, 0.28);

    border-radius: 50%;

    pointer-events: none;
}


.prek-hero::after {
    content: "";

    position: absolute;

    right: -8rem;
    bottom: -10rem;

    width: 25rem;
    height: 25rem;

    background:
        rgba(244, 207, 99, 0.34);

    border-radius:
        56% 44% 63% 37%
        /
        45% 59% 41% 55%;

    transform: rotate(-14deg);

    pointer-events: none;
}


/* ==========================================================================
   INNER LAYOUT
   ========================================================================== */

.prek-hero__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    min-height: 710px;

    margin-inline: auto;

    padding:
        clamp(4.5rem, 7vw, 7rem)
        0
        clamp(5rem, 8vw, 7.5rem);

    display: grid;

    grid-template-columns:
        minmax(320px, 0.83fr)
        minmax(0, 1.17fr);

    gap:
        clamp(3rem, 6vw, 7rem);

    align-items: center;
}


/* ==========================================================================
   COPY
   ========================================================================== */

.prek-hero__content {
    position: relative;
    z-index: 5;

    max-width: 540px;
}


.prek-hero__content .eyebrow {
    margin-bottom: 1.4rem;

    color: #507d52;
}


.prek-hero__title {
    max-width: 560px;

    margin:
        0
        0
        1.7rem;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.9rem,
            5.8vw,
            5.7rem
        );

    font-weight: 950;
    line-height: 0.88;

    letter-spacing: -0.065em;
}


.prek-hero__title span {
    display: block;

    color: #507d52;
}


.prek-hero__title em {
    display: block;

    width: fit-content;

    margin-top: 0.45rem;

    color: var(--color-red);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Comic Sans MS",
        cursive;

    font-size: 0.58em;
    font-weight: 900;
    font-style: normal;

    line-height: 1;

    letter-spacing: -0.035em;

    transform: rotate(-2deg);
}


.prek-hero__intro {
    max-width: 510px;

    margin:
        0
        0
        2rem;

    color:
        rgba(
            41,
            42,
            44,
            0.72
        );

    font-size: 1.05rem;
    line-height: 1.72;
}


.prek-hero__actions {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 1.4rem;
}


.prek-hero__actions .text-link {
    color: var(--color-graphite);

    font-weight: 850;
}


.prek-hero__actions .text-link span {
    color: var(--color-red);
}


/* ==========================================================================
   VISUAL
   ========================================================================== */

.prek-hero__visual {
    position: relative;

    min-width: 0;
    min-height: 590px;
}


/* Main photo */

.prek-hero__photo {
    position: absolute;

    inset:
        1rem
        0
        1.5rem
        1rem;

    margin: 0;

    overflow: hidden;

    border-radius:
        38px
        96px
        42px
        78px;

    background:
        #dde8d7;

    box-shadow:
        0
        24px
        55px
        rgba(41, 42, 44, 0.12);

    transform: rotate(0.7deg);
}


.prek-hero__photo::after {
    content: "";

    position: absolute;
    inset: 0;

    border:
        1px
        solid
        rgba(41, 42, 44, 0.08);

    border-radius: inherit;

    pointer-events: none;
}


.prek-hero__photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: 52% center;
}


/* ==========================================================================
   DECORATIVE SHAPES
   ========================================================================== */

.prek-hero__shape {
    position: absolute;

    z-index: 3;

    pointer-events: none;
}


.prek-hero__shape--yellow {
    top: -1rem;
    right: -1.4rem;

    width: 120px;
    height: 120px;

    background: var(--color-butter);

    border-radius:
        62% 38% 51% 49%
        /
        39% 58% 42% 61%;

    transform: rotate(18deg);
}


.prek-hero__shape--red {
    left: -1rem;
    bottom: 1.5rem;

    width: 92px;
    height: 92px;

    background: var(--color-red);

    border-radius:
        42% 58% 62% 38%
        /
        58% 38% 62% 42%;

    transform: rotate(-16deg);
}


/* ==========================================================================
   STATUS NOTE
   ========================================================================== */

.prek-hero__note {
    position: absolute;

    z-index: 6;

    right: -0.5rem;
    bottom: 0;

    width: 210px;

    padding:
        1.35rem
        1.4rem
        1.45rem;

    color: var(--color-graphite);

    background: var(--color-butter);

    box-shadow:
        0
        18px
        38px
        rgba(41, 42, 44, 0.14);

    transform: rotate(-3deg);
}


.prek-hero__note::before {
    content: "";

    position: absolute;

    top: -11px;
    left: 50%;

    width: 76px;
    height: 22px;

    background:
        rgba(
            255,
            253,
            248,
            0.67
        );

    transform:
        translateX(-50%)
        rotate(2deg);
}


.prek-hero__note span,
.prek-hero__note strong,
.prek-hero__note small {
    display: block;
}


.prek-hero__note span {
    margin-bottom: 0.4rem;

    color: #507d52;

    font-size: 0.68rem;
    font-weight: 950;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.prek-hero__note strong {
    margin-bottom: 0.35rem;

    font-family: var(--font-display);

    font-size: 1.6rem;
    font-weight: 950;
    line-height: 0.95;

    letter-spacing: -0.045em;
}


.prek-hero__note small {
    color:
        rgba(
            41,
            42,
            44,
            0.65
        );

    font-size: 0.75rem;
    font-weight: 750;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1000px) {

    .prek-hero__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    .prek-hero__content {
        max-width: 720px;

        margin-inline: auto;
    }


    .prek-hero__visual {
        width: min(100%, 820px);

        min-height: 600px;

        margin-inline: auto;
    }


    .prek-hero__title {
        max-width: 700px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .prek-hero__inner {
        width: calc(100% - 2rem);

        padding:
            3.5rem
            0
            5rem;

        gap: 3.2rem;
    }


    .prek-hero__title {
        font-size:
            clamp(
                3.2rem,
                14vw,
                4.5rem
            );
    }


    .prek-hero__title em {
        font-size: 0.55em;
    }


    .prek-hero__visual {
        min-height: 470px;
    }


    .prek-hero__photo {
        inset:
            0
            0
            1rem
            0;

        border-radius:
            26px
            54px
            28px
            48px;
    }


    .prek-hero__shape--yellow {
        top: -1.2rem;
        right: -1rem;

        width: 90px;
        height: 90px;
    }


    .prek-hero__shape--red {
        left: -1rem;

        width: 70px;
        height: 70px;
    }


    .prek-hero__note {
        right: 0.5rem;
        bottom: -1rem;

        width: 175px;

        padding:
            1.15rem
            1.15rem
            1.25rem;
    }


    .prek-hero__note strong {
        font-size: 1.35rem;
    }

}

/* ==========================================================================
   TH_PREK_STILL_KIDS_V1
   Pre-K — school readiness should still look like childhood
   ========================================================================== */

.prek-still-kids {
    position: relative;

    padding:
        clamp(6rem, 10vw, 10rem)
        0;

    color: var(--color-graphite);
    background: var(--color-paper);

    overflow: hidden;
}


/* Decorative outline */

.prek-still-kids::before {
    content: "";

    position: absolute;

    top: -7rem;
    right: -5rem;

    width: 22rem;
    height: 22rem;

    border:
        2px
        solid
        rgba(130, 183, 132, 0.18);

    border-radius: 50%;

    pointer-events: none;
}


/* Soft butter shape */

.prek-still-kids::after {
    content: "";

    position: absolute;

    left: -6rem;
    bottom: -9rem;

    width: 21rem;
    height: 21rem;

    background:
        rgba(244, 207, 99, 0.22);

    border-radius:
        57% 43% 63% 37%
        /
        45% 61% 39% 55%;

    transform: rotate(14deg);

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

.prek-still-kids__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;
}


.prek-still-kids__inner > .eyebrow {
    margin-bottom:
        clamp(3rem, 6vw, 5.5rem);

    color: var(--color-blue);
}


/* ==========================================================================
   TWO-COLUMN STATEMENT
   ========================================================================== */

.prek-still-kids__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(340px, 1.1fr);

    gap:
        clamp(4rem, 9vw, 10rem);

    align-items: center;
}


/* ==========================================================================
   LEFT STATEMENT
   ========================================================================== */

.prek-still-kids__statement {
    position: relative;

    width: fit-content;

    font-family: var(--font-display);

    font-weight: 950;
    line-height: 0.82;

    letter-spacing: -0.065em;

    transform: rotate(-1.5deg);
}


.prek-still-kids__statement span,
.prek-still-kids__statement strong {
    display: block;
}


.prek-still-kids__statement span {
    margin-bottom: 0.2rem;

    color: var(--color-red);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            2.4rem,
            4vw,
            4rem
        );

    font-weight: 900;

    letter-spacing: -0.04em;
}


.prek-still-kids__statement strong {
    color: #507d52;

    font-size:
        clamp(
            4.5rem,
            8vw,
            8.5rem
        );
}


/* Butter underline */

.prek-still-kids__statement::after {
    content: "";

    position: absolute;

    right: 2%;
    bottom: -1.2rem;

    width: 72%;
    height: 0.85rem;

    border-top:
        9px
        solid
        var(--color-butter);

    border-radius: 50%;

    transform: rotate(-2deg);
}


/* ==========================================================================
   RIGHT COPY
   ========================================================================== */

.prek-still-kids__copy {
    position: relative;

    max-width: 610px;

    padding-top: 1rem;
}


.prek-still-kids__copy::before {
    content: "";

    display: block;

    width: 70px;
    height: 7px;

    margin-bottom: 2rem;

    background: var(--color-red);

    border-radius: 999px;

    transform: rotate(-2deg);
}


.prek-still-kids__copy h2 {
    max-width: 620px;

    margin:
        0
        0
        2rem;

    font-family: var(--font-display);

    font-size:
        clamp(
            3rem,
            4.7vw,
            5rem
        );

    font-weight: 950;
    line-height: 0.94;

    letter-spacing: -0.055em;
}


.prek-still-kids__copy p {
    max-width: 570px;

    margin:
        0
        0
        1.25rem;

    color:
        rgba(
            41,
            42,
            44,
            0.7
        );

    font-size:
        clamp(
            1rem,
            1.25vw,
            1.1rem
        );

    line-height: 1.75;
}


.prek-still-kids__copy p:last-child {
    position: relative;

    width: fit-content;

    margin-top: 2rem;
    margin-bottom: 0;

    padding:
        1rem
        1.25rem;

    color: var(--color-graphite);
    background: var(--color-butter);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Comic Sans MS",
        cursive;

    font-weight: 800;
    line-height: 1.45;

    transform: rotate(1deg);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .prek-still-kids__layout {
        grid-template-columns: 1fr;

        gap: 5rem;
    }


    .prek-still-kids__statement {
        max-width: 760px;
    }


    .prek-still-kids__statement strong {
        font-size:
            clamp(
                4.5rem,
                13vw,
                8rem
            );
    }


    .prek-still-kids__copy {
        max-width: 720px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .prek-still-kids {
        padding:
            5rem
            0;
    }


    .prek-still-kids__inner {
        width: calc(100% - 2rem);
    }


    .prek-still-kids__inner > .eyebrow {
        margin-bottom: 3rem;
    }


    .prek-still-kids__layout {
        gap: 4rem;
    }


    .prek-still-kids__statement span {
        font-size:
            clamp(
                2rem,
                10vw,
                3rem
            );
    }


    .prek-still-kids__statement strong {
        font-size:
            clamp(
                3.5rem,
                18vw,
                5.5rem
            );

        overflow-wrap: anywhere;
    }


    .prek-still-kids__copy h2 {
        font-size:
            clamp(
                2.8rem,
                13vw,
                4rem
            );
    }


    .prek-still-kids__copy p:last-child {
        max-width: 100%;
    }

}

/* ==========================================================================
   TH_PREK_STILL_KIDS_FIX_V2
   Fix statement overlap + tighten editorial spacing
   ========================================================================== */

.prek-still-kids {
    padding:
        clamp(5rem, 8vw, 7.5rem)
        0
        clamp(6rem, 9vw, 8rem);
}


.prek-still-kids__inner > .eyebrow {
    margin-bottom:
        clamp(2.5rem, 4vw, 3.5rem);
}


.prek-still-kids__layout {
    grid-template-columns:
        minmax(340px, 0.82fr)
        minmax(0, 1.18fr);

    gap:
        clamp(3rem, 6vw, 6rem);

    align-items: center;
}


/* Keep the giant statement completely inside its own column */

.prek-still-kids__statement {
    width: 100%;
    max-width: 500px;
}


.prek-still-kids__statement span {
    font-size:
        clamp(
            2.2rem,
            3.4vw,
            3.4rem
        );

    line-height: 0.95;
}


.prek-still-kids__statement strong {
    max-width: 100%;

    font-size:
        clamp(
            3.6rem,
            5.2vw,
            5.6rem
        );

    line-height: 0.84;

    letter-spacing: -0.055em;

    overflow-wrap: normal;
    word-break: normal;
}


/* Rebalance right-side copy */

.prek-still-kids__copy {
    max-width: 590px;

    padding-top: 0;
}


.prek-still-kids__copy h2 {
    max-width: 570px;

    font-size:
        clamp(
            2.8rem,
            4.1vw,
            4.4rem
        );
}


.prek-still-kids__copy p {
    max-width: 540px;
}


.prek-still-kids__copy p:last-child {
    max-width: 540px;

    padding:
        1rem
        1.35rem;
}


/* Tablet */

@media (max-width: 900px) {

    .prek-still-kids__layout {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }


    .prek-still-kids__statement {
        max-width: 620px;
    }


    .prek-still-kids__statement strong {
        font-size:
            clamp(
                4rem,
                11vw,
                6.5rem
            );
    }

}


/* Mobile */

@media (max-width: 640px) {

    .prek-still-kids__statement strong {
        font-size:
            clamp(
                3.2rem,
                16vw,
                4.8rem
            );
    }


    .prek-still-kids__copy h2 {
        font-size:
            clamp(
                2.7rem,
                12vw,
                3.8rem
            );
    }

}

/* ==========================================================================
   TH_PREK_READINESS_V1
   Pre-K — big kid skills / readiness section
   ========================================================================== */

.prek-readiness {
    position: relative;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-paper);
    background: var(--color-graphite);

    overflow: hidden;
}


/* Decorative green circle */

.prek-readiness::before {
    content: "";

    position: absolute;

    top: -9rem;
    right: -8rem;

    width: 24rem;
    height: 24rem;

    border:
        2px
        solid
        rgba(130, 183, 132, 0.18);

    border-radius: 50%;

    pointer-events: none;
}


/* Soft red organic accent */

.prek-readiness::after {
    content: "";

    position: absolute;

    left: -7rem;
    bottom: -10rem;

    width: 22rem;
    height: 22rem;

    background:
        rgba(233, 92, 80, 0.16);

    border-radius:
        63% 37% 52% 48%
        /
        44% 61% 39% 56%;

    transform: rotate(15deg);

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

.prek-readiness__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.prek-readiness__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(300px, 0.72fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(4rem, 7vw, 6.5rem);
}


.prek-readiness__header .eyebrow {
    grid-column: 1 / -1;

    margin-bottom: -1rem;

    color: var(--color-butter);
}


.prek-readiness__header h2 {
    max-width: 680px;

    margin: 0;

    color: var(--color-paper);

    font-family: var(--font-display);

    font-size:
        clamp(
            4rem,
            6.8vw,
            7rem
        );

    font-weight: 950;
    line-height: 0.86;

    letter-spacing: -0.065em;
}


.prek-readiness__header > p:last-child {
    position: relative;

    max-width: 420px;

    margin: 0;

    padding-top: 1.7rem;

    color:
        rgba(
            255,
            253,
            248,
            0.65
        );

    font-size: 1rem;
    line-height: 1.7;
}


.prek-readiness__header > p:last-child::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 72px;
    height: 7px;

    background: var(--color-red);

    border-radius: 999px;

    transform: rotate(-2deg);
}


/* ==========================================================================
   SKILL LIST
   ========================================================================== */

.prek-readiness__items {
    border-top:
        1px
        solid
        rgba(255, 255, 255, 0.16);
}


/* Individual row */

.prek-readiness__item {
    position: relative;

    min-height: 185px;

    padding:
        clamp(1.8rem, 3vw, 2.8rem)
        1rem;

    display: grid;

    grid-template-columns:
        110px
        minmax(220px, 0.72fr)
        minmax(0, 1fr);

    gap:
        clamp(1.5rem, 4vw, 4rem);

    align-items: center;

    border-bottom:
        1px
        solid
        rgba(255, 255, 255, 0.16);
}


/* Number */

.prek-readiness__number {
    color:
        rgba(
            255,
            253,
            248,
            0.18
        );

    font-family: var(--font-display);

    font-size:
        clamp(
            3.2rem,
            5vw,
            5rem
        );

    font-weight: 950;
    line-height: 1;

    letter-spacing: -0.07em;
}


/* Content wrapper */

.prek-readiness__item > div {
    display: contents;
}


/* Headings */

.prek-readiness__item h3 {
    margin: 0;

    font-family: var(--font-display);

    font-size:
        clamp(
            2rem,
            3vw,
            3.2rem
        );

    font-weight: 950;
    line-height: 0.95;

    letter-spacing: -0.045em;
}


/* Descriptions */

.prek-readiness__item p {
    max-width: 570px;

    margin: 0;

    color:
        rgba(
            255,
            253,
            248,
            0.62
        );

    line-height: 1.7;
}


/* ==========================================================================
   ROW COLOR IDENTITIES
   ========================================================================== */

.prek-readiness__item:nth-child(1) h3 {
    color: var(--color-green);
}


.prek-readiness__item:nth-child(2) h3 {
    color: var(--color-butter);
}


.prek-readiness__item:nth-child(3) h3 {
    color: var(--color-red);
}


.prek-readiness__item:nth-child(4) h3 {
    color: #9cb7ff;
}


.prek-readiness__item:nth-child(5) h3 {
    color: #b9a7dc;
}


/* ==========================================================================
   SMALL PLAYFUL DETAILS
   ========================================================================== */

.prek-readiness__item:nth-child(1)::after,
.prek-readiness__item:nth-child(3)::after,
.prek-readiness__item:nth-child(5)::after {
    content: "";

    position: absolute;

    right: 1rem;
    top: 50%;

    width: 34px;
    height: 8px;

    border-top:
        5px
        solid
        var(--color-butter);

    border-radius: 50%;

    transform:
        translateY(-50%)
        rotate(-8deg);

    opacity: 0.72;
}


.prek-readiness__item:nth-child(3)::after {
    border-color: var(--color-green);

    transform:
        translateY(-50%)
        rotate(6deg);
}


.prek-readiness__item:nth-child(5)::after {
    border-color: var(--color-red);

    transform:
        translateY(-50%)
        rotate(-4deg);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .prek-readiness__header {
        grid-template-columns: 1fr;

        gap: 2rem;
    }


    .prek-readiness__header .eyebrow {
        grid-column: auto;

        margin-bottom: 0;
    }


    .prek-readiness__header > p:last-child {
        max-width: 600px;
    }


    .prek-readiness__item {
        grid-template-columns:
            80px
            minmax(200px, 0.8fr)
            minmax(0, 1fr);

        gap: 2rem;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .prek-readiness {
        padding:
            5rem
            0;
    }


    .prek-readiness__inner {
        width: calc(100% - 2rem);
    }


    .prek-readiness__header {
        margin-bottom: 3.5rem;
    }


    .prek-readiness__header h2 {
        font-size:
            clamp(
                3.4rem,
                16vw,
                5rem
            );
    }


    .prek-readiness__item {
        min-height: 0;

        grid-template-columns:
            60px
            minmax(0, 1fr);

        gap:
            1rem
            1.3rem;

        padding:
            2rem
            0.4rem;
    }


    .prek-readiness__item > div {
        display: block;
    }


    .prek-readiness__item h3 {
        margin-bottom: 0.9rem;

        font-size:
            clamp(
                2rem,
                10vw,
                2.8rem
            );
    }


    .prek-readiness__item p {
        max-width: 100%;
    }


    .prek-readiness__number {
        align-self: start;

        padding-top: 0.2rem;

        font-size: 3rem;
    }


    .prek-readiness__item::after {
        display: none;
    }

}

/* ==========================================================================
   TH_PREK_PROJECT_V1
   Pre-K — collaborative project editorial feature
   ========================================================================== */

.prek-project {
    position: relative;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    background: var(--color-cream);

    overflow: hidden;
}


/* Decorative outline */

.prek-project::before {
    content: "";

    position: absolute;

    right: -7rem;
    top: -7rem;

    width: 22rem;
    height: 22rem;

    border:
        2px solid
        rgba(233, 92, 80, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

.prek-project__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(330px, 0.82fr);

    align-items: center;
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

.prek-project__figure {
    position: relative;
    z-index: 1;

    min-width: 0;

    height:
        clamp(
            500px,
            52vw,
            650px
        );

    margin: 0;

    overflow: hidden;

    border-radius:
        34px
        86px
        42px
        70px;

    box-shadow:
        0
        24px
        55px
        rgba(41, 42, 44, 0.12);

    transform: rotate(-0.6deg);
}


.prek-project__figure img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: 45% center;
}


/* ==========================================================================
   FIELD NOTE CAPTION
   ========================================================================== */

.prek-project__figure figcaption {
    position: absolute;

    left: 1.4rem;
    bottom: 1.4rem;

    width:
        min(
            315px,
            calc(100% - 2.8rem)
        );

    padding:
        1.2rem
        1.35rem;

    color: var(--color-paper);
    background: var(--color-graphite);

    box-shadow:
        0
        15px
        30px
        rgba(41, 42, 44, 0.2);

    transform: rotate(-2deg);
}


.prek-project__figure figcaption span,
.prek-project__figure figcaption strong {
    display: block;
}


.prek-project__figure figcaption span {
    margin-bottom: 0.45rem;

    color: var(--color-butter);

    font-size: 0.68rem;
    font-weight: 950;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.prek-project__figure figcaption strong {
    font-family: var(--font-display);

    font-size:
        clamp(
            1.35rem,
            2vw,
            1.8rem
        );

    font-weight: 950;
    line-height: 1.05;

    letter-spacing: -0.035em;
}


/* ==========================================================================
   COPY PANEL
   ========================================================================== */

.prek-project__copy {
    position: relative;
    z-index: 4;

    margin-left:
        clamp(
            -6rem,
            -7vw,
            -3.5rem
        );

    padding:
        clamp(
            2.5rem,
            4vw,
            4rem
        );

    color: var(--color-paper);

    background: #507d52;

    box-shadow:
        0
        22px
        50px
        rgba(41, 42, 44, 0.16);

    transform: rotate(1.3deg);
}


/* Tape */

.prek-project__copy::before {
    content: "";

    position: absolute;

    top: -12px;
    left: 50%;

    width: 88px;
    height: 24px;

    background:
        rgba(
            255,
            253,
            248,
            0.6
        );

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* Small red scribble */

.prek-project__copy::after {
    content: "";

    position: absolute;

    right: 2rem;
    bottom: 1.7rem;

    width: 62px;
    height: 12px;

    border-top:
        6px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-7deg);
}


/* ==========================================================================
   COPY TYPOGRAPHY
   ========================================================================== */

.prek-project__copy .eyebrow {
    margin-bottom: 1.4rem;

    color: var(--color-butter);
}


.prek-project__copy h2 {
    max-width: 9ch;

    margin:
        0
        0
        1.7rem;

    color: var(--color-paper);

    font-family: var(--font-display);

    font-size:
        clamp(
            3rem,
            4.6vw,
            4.8rem
        );

    font-weight: 950;
    line-height: 0.9;

    letter-spacing: -0.06em;
}


.prek-project__copy > p:last-child {
    max-width: 470px;

    margin: 0;

    color:
        rgba(
            255,
            253,
            248,
            0.78
        );

    font-size: 1rem;
    line-height: 1.72;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 960px) {

    .prek-project__inner {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .prek-project__figure {
        width: min(100%, 850px);

        height:
            clamp(
                480px,
                68vw,
                620px
            );

        margin-inline: auto;
    }


    .prek-project__copy {
        width:
            min(
                600px,
                calc(100% - 3rem)
            );

        margin:
            -4rem
            2rem
            0
            auto;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .prek-project {
        padding:
            5rem
            0;
    }


    .prek-project__inner {
        width: calc(100% - 2rem);
    }


    .prek-project__figure {
        height: 430px;

        border-radius:
            24px
            48px
            26px
            40px;
    }


    .prek-project__figure figcaption {
        left: 0.8rem;
        bottom: 0.8rem;

        width:
            min(
                280px,
                calc(100% - 1.6rem)
            );
    }


    .prek-project__copy {
        width: calc(100% - 1rem);

        margin:
            -2rem
            auto
            0;

        padding:
            2.4rem
            1.5rem;

        transform: rotate(0.6deg);
    }


    .prek-project__copy h2 {
        max-width: 11ch;

        font-size:
            clamp(
                2.9rem,
                13vw,
                4rem
            );
    }

}

/* ==========================================================================
   TH_PREK_DAY_V1
   Pre-K — big kid day / classroom agenda
   ========================================================================== */

.prek-day {
    position: relative;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);
    background: var(--color-paper);

    overflow: hidden;
}


.prek-day::before {
    content: "";

    position: absolute;

    left: -8rem;
    top: 7rem;

    width: 22rem;
    height: 22rem;

    border:
        2px solid
        rgba(77, 114, 216, 0.12);

    border-radius: 50%;

    pointer-events: none;
}


.prek-day::after {
    content: "";

    position: absolute;

    right: -6rem;
    bottom: -8rem;

    width: 20rem;
    height: 20rem;

    background:
        rgba(130, 183, 132, 0.16);

    border-radius:
        61% 39% 47% 53%
        /
        42% 57% 43% 58%;

    transform: rotate(-13deg);

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

.prek-day__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.prek-day__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(300px, 0.75fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(4rem, 7vw, 6rem);
}


.prek-day__header .eyebrow {
    grid-column: 1 / -1;

    margin-bottom: -1rem;

    color: var(--color-blue);
}


.prek-day__header h2 {
    max-width: 690px;

    margin: 0;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.7rem,
            6vw,
            6rem
        );

    font-weight: 950;
    line-height: 0.88;

    letter-spacing: -0.06em;
}


.prek-day__header > p:last-child {
    position: relative;

    max-width: 430px;

    margin: 0;

    padding-top: 1.7rem;

    color:
        rgba(
            41,
            42,
            44,
            0.67
        );

    font-size: 1rem;
    line-height: 1.72;
}


.prek-day__header > p:last-child::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 72px;
    height: 7px;

    background: var(--color-red);

    border-radius: 999px;

    transform: rotate(-2deg);
}


/* ==========================================================================
   AGENDA
   ========================================================================== */

.prek-day__timeline {
    border-top:
        1px solid
        var(--color-border);
}


.prek-day__stop {
    position: relative;

    min-height: 138px;

    padding:
        1.7rem
        2rem;

    display: grid;

    grid-template-columns:
        90px
        minmax(190px, 0.55fr)
        minmax(0, 1fr);

    gap:
        clamp(1.5rem, 4vw, 4rem);

    align-items: center;

    border-bottom:
        1px solid
        var(--color-border);

    transition:
        transform var(--transition),
        background-color var(--transition);
}


.prek-day__stop:hover {
    transform: translateX(8px);
}


/* Alternate paper tones */

.prek-day__stop:nth-child(2n) {
    background:
        rgba(244, 207, 99, 0.12);
}


.prek-day__stop:nth-child(3n) {
    background:
        rgba(130, 183, 132, 0.11);
}


/* Number */

.prek-day__stop > span {
    color:
        rgba(
            41,
            42,
            44,
            0.19
        );

    font-family: var(--font-display);

    font-size:
        clamp(
            3rem,
            4.5vw,
            4.6rem
        );

    font-weight: 950;
    line-height: 1;

    letter-spacing: -0.07em;
}


/* Activity */

.prek-day__stop > strong {
    font-family: var(--font-display);

    font-size:
        clamp(
            2rem,
            3vw,
            3rem
        );

    font-weight: 950;
    line-height: 0.95;

    letter-spacing: -0.045em;
}


/* Description */

.prek-day__stop > p {
    max-width: 570px;

    margin: 0;

    color:
        rgba(
            41,
            42,
            44,
            0.66
        );

    line-height: 1.7;
}


/* ==========================================================================
   COLOR RHYTHM
   ========================================================================== */

.prek-day__stop:nth-child(1) > strong {
    color: #507d52;
}


.prek-day__stop:nth-child(2) > strong {
    color: var(--color-blue);
}


.prek-day__stop:nth-child(3) > strong {
    color: var(--color-red);
}


.prek-day__stop:nth-child(4) > strong {
    color: #507d52;
}


.prek-day__stop:nth-child(5) > strong {
    color: var(--color-blue);
}


.prek-day__stop:nth-child(6) > strong {
    color: #8b72b6;
}


/* ==========================================================================
   FINAL STOP
   ========================================================================== */

.prek-day__stop--final {
    margin-top: 1.5rem;

    border: 0;

    color: var(--color-paper);
    background: var(--color-graphite);

    transform: rotate(-0.6deg);
}


.prek-day__stop--final:hover {
    background: var(--color-graphite);

    transform:
        translateX(8px)
        rotate(-0.6deg);
}


.prek-day__stop--final > span {
    color:
        rgba(
            255,
            253,
            248,
            0.23
        );
}


.prek-day__stop--final > strong {
    color: var(--color-butter);
}


.prek-day__stop--final > p {
    color:
        rgba(
            255,
            253,
            248,
            0.72
        );
}


/* Red marker swipe */

.prek-day__stop--final::after {
    content: "";

    position: absolute;

    right: 2rem;
    top: 50%;

    width: 65px;
    height: 12px;

    border-top:
        6px solid
        var(--color-red);

    border-radius: 50%;

    transform:
        translateY(-50%)
        rotate(-6deg);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .prek-day__header {
        grid-template-columns: 1fr;

        gap: 2rem;
    }


    .prek-day__header .eyebrow {
        grid-column: auto;

        margin-bottom: 0;
    }


    .prek-day__header > p:last-child {
        max-width: 620px;
    }


    .prek-day__stop {
        grid-template-columns:
            72px
            minmax(180px, 0.6fr)
            minmax(0, 1fr);

        padding-inline: 1rem;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .prek-day {
        padding:
            5rem
            0;
    }


    .prek-day__inner {
        width: calc(100% - 2rem);
    }


    .prek-day__header {
        margin-bottom: 3.5rem;
    }


    .prek-day__header h2 {
        font-size:
            clamp(
                3.1rem,
                14vw,
                4.5rem
            );
    }


    .prek-day__stop {
        min-height: 0;

        grid-template-columns:
            58px
            minmax(0, 1fr);

        gap:
            0.6rem
            1rem;

        padding:
            1.8rem
            0.5rem;
    }


    .prek-day__stop > span {
        grid-row: 1 / 3;

        align-self: start;

        font-size: 3rem;
    }


    .prek-day__stop > strong {
        font-size:
            clamp(
                1.9rem,
                9vw,
                2.6rem
            );
    }


    .prek-day__stop > p {
        grid-column: 2;

        max-width: 100%;
    }


    .prek-day__stop--final {
        margin-top: 1rem;

        padding:
            2rem
            1rem;
    }


    .prek-day__stop--final::after {
        display: none;
    }

}

/* ==========================================================================
   TH_PREK_LEARNING_V1
   Pre-K — advanced research / learning through play
   ========================================================================== */

.prek-learning {
    position: relative;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #eef3ff 0%,
            #f6f8ff 100%
        );

    overflow: hidden;
}


/* Giant background word */

.prek-learning::before {
    content: "PLAY.";

    position: absolute;

    left: -1rem;
    bottom: -1rem;

    color:
        rgba(
            77,
            114,
            216,
            0.055
        );

    font-family: var(--font-display);

    font-size:
        clamp(
            8rem,
            18vw,
            18rem
        );

    font-weight: 950;
    line-height: 0.72;

    letter-spacing: -0.08em;

    pointer-events: none;
}


/* Green outline circle */

.prek-learning::after {
    content: "";

    position: absolute;

    top: -7rem;
    right: -6rem;

    width: 20rem;
    height: 20rem;

    border:
        2px
        solid
        rgba(130, 183, 132, 0.2);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

.prek-learning__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(300px, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: start;
}


/* ==========================================================================
   HEADLINE
   ========================================================================== */

.prek-learning__headline {
    position: sticky;
    top: 8rem;
}


.prek-learning__headline .eyebrow {
    margin-bottom: 1.5rem;

    color: var(--color-blue);
}


.prek-learning__headline h2 {
    max-width: 9ch;

    margin: 0;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.8vw,
            6rem
        );

    font-weight: 950;
    line-height: 0.88;

    letter-spacing: -0.065em;
}


/* Hand-drawn underline */

.prek-learning__headline h2::after {
    content: "";

    display: block;

    width: 120px;
    height: 12px;

    margin-top: 1.6rem;

    border-top:
        7px
        solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


/* ==========================================================================
   COPY
   ========================================================================== */

.prek-learning__copy {
    max-width: 650px;
}


.prek-learning__copy > p {
    max-width: 610px;

    margin:
        0
        0
        clamp(3rem, 5vw, 4.5rem);

    color:
        rgba(
            41,
            42,
            44,
            0.7
        );

    font-size:
        clamp(
            1.05rem,
            1.4vw,
            1.18rem
        );

    line-height: 1.78;
}


/* ==========================================================================
   FACTS
   ========================================================================== */

.prek-learning__facts {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top:
        1px solid
        rgba(41, 42, 44, 0.16);
}


.prek-learning__facts > div {
    position: relative;

    min-height: 190px;

    padding:
        2rem
        1.7rem
        2.2rem;

    border-bottom:
        1px solid
        rgba(41, 42, 44, 0.16);
}


.prek-learning__facts > div:nth-child(odd) {
    border-right:
        1px solid
        rgba(41, 42, 44, 0.16);
}


/* Small colored bar */

.prek-learning__facts > div::before {
    content: "";

    position: absolute;

    top: 0;
    left: 1.7rem;

    width: 52px;
    height: 7px;

    background: var(--color-blue);

    transform: translateY(-4px) rotate(-2deg);
}


.prek-learning__facts > div:nth-child(2)::before {
    background: var(--color-red);
}


.prek-learning__facts > div:nth-child(3)::before {
    background: #507d52;
}


.prek-learning__facts > div:nth-child(4)::before {
    background: var(--color-butter);
}


/* Labels */

.prek-learning__facts strong {
    display: block;

    margin-bottom: 0.9rem;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.8rem,
            2.7vw,
            2.7rem
        );

    font-weight: 950;
    line-height: 0.95;

    letter-spacing: -0.045em;
}


.prek-learning__facts > div:nth-child(1) strong {
    color: var(--color-blue);
}


.prek-learning__facts > div:nth-child(2) strong {
    color: var(--color-red);
}


.prek-learning__facts > div:nth-child(3) strong {
    color: #507d52;
}


.prek-learning__facts > div:nth-child(4) strong {
    color: #9b7922;
}


/* Descriptions */

.prek-learning__facts span {
    display: block;

    max-width: 260px;

    color:
        rgba(
            41,
            42,
            44,
            0.66
        );

    font-size: 0.95rem;
    line-height: 1.65;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .prek-learning__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    .prek-learning__headline {
        position: relative;
        top: auto;

        max-width: 720px;
    }


    .prek-learning__headline h2 {
        max-width: 12ch;
    }


    .prek-learning__copy {
        max-width: 720px;
    }


    .prek-learning__copy > p {
        max-width: 680px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .prek-learning {
        padding:
            5rem
            0;
    }


    .prek-learning__inner {
        width: calc(100% - 2rem);

        gap: 3.5rem;
    }


    .prek-learning__headline h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    .prek-learning__facts {
        grid-template-columns: 1fr;
    }


    .prek-learning__facts > div {
        min-height: 0;

        padding:
            2rem
            1rem
            2.2rem;

        border-right: 0 !important;
    }


    .prek-learning__facts > div::before {
        left: 1rem;
    }


    .prek-learning__facts span {
        max-width: 100%;
    }


    .prek-learning::before {
        font-size: 9rem;
    }

}

/* ==========================================================================
   TH_PREK_INDEPENDENCE_V1
   Pre-K — growing confidence / I CAN DO IT
   ========================================================================== */

.prek-independence {
    position: relative;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-paper);
    background: #507d52;

    overflow: hidden;
}


/* Large decorative outline */

.prek-independence::before {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 23rem;
    height: 23rem;

    border:
        2px solid
        rgba(255, 253, 248, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


/* Soft blue organic shape */

.prek-independence::after {
    content: "";

    position: absolute;

    left: -8rem;
    bottom: -10rem;

    width: 23rem;
    height: 23rem;

    background:
        rgba(77, 114, 216, 0.18);

    border-radius:
        58% 42% 62% 38%
        /
        43% 60% 40% 57%;

    transform: rotate(16deg);

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

.prek-independence__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.85fr)
        minmax(0, 1.15fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   NOTE
   ========================================================================== */

.prek-independence__note {
    position: relative;

    min-height: 390px;

    padding:
        clamp(2rem, 4vw, 3rem);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    color: var(--color-graphite);
    background: var(--color-paper);

    box-shadow:
        0
        24px
        55px
        rgba(41, 42, 44, 0.2);

    transform: rotate(-2deg);
}


/* Tape */

.prek-independence__note::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 50%;

    width: 96px;
    height: 25px;

    background:
        rgba(244, 207, 99, 0.72);

    transform:
        translateX(-50%)
        rotate(2deg);
}


/* Marker swipe */

.prek-independence__note::after {
    content: "";

    position: absolute;

    right: 2rem;
    bottom: 2rem;

    width: 70px;
    height: 12px;

    border-top:
        7px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-7deg);
}


/* ==========================================================================
   NOTE TYPE
   ========================================================================== */

.prek-independence__note span,
.prek-independence__note strong,
.prek-independence__note small {
    display: block;
}


.prek-independence__note span {
    color: var(--color-blue);

    font-size: 0.72rem;
    font-weight: 950;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.prek-independence__note strong {
    margin:
        auto
        0;

    color: var(--color-graphite);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            3.8rem,
            6vw,
            6rem
        );

    font-weight: 900;
    line-height: 0.95;

    letter-spacing: -0.04em;

    transform: rotate(-2deg);
}


.prek-independence__note small {
    max-width: 230px;

    color:
        rgba(
            41,
            42,
            44,
            0.62
        );

    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.45;
}


/* ==========================================================================
   COPY
   ========================================================================== */

.prek-independence__copy {
    max-width: 620px;
}


.prek-independence__copy .eyebrow {
    margin-bottom: 1.5rem;

    color: var(--color-butter);
}


.prek-independence__copy h2 {
    max-width: 620px;

    margin:
        0
        0
        1.8rem;

    color: var(--color-paper);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.7rem,
            5.5vw,
            5.8rem
        );

    font-weight: 950;
    line-height: 0.88;

    letter-spacing: -0.065em;
}


/* Red underline */

.prek-independence__copy h2::after {
    content: "";

    display: block;

    width: 82px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        7px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


.prek-independence__copy > p:last-child {
    max-width: 570px;

    margin: 0;

    color:
        rgba(
            255,
            253,
            248,
            0.76
        );

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.78;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .prek-independence__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    .prek-independence__note {
        width:
            min(
                520px,
                92%
            );

        min-height: 350px;
    }


    .prek-independence__copy {
        max-width: 720px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .prek-independence {
        padding:
            5rem
            0;
    }


    .prek-independence__inner {
        width: calc(100% - 2rem);

        gap: 3.5rem;
    }


    .prek-independence__note {
        width: calc(100% - 0.5rem);

        min-height: 315px;

        padding:
            2rem
            1.5rem;
    }


    .prek-independence__note strong {
        font-size:
            clamp(
                3.3rem,
                17vw,
                4.8rem
            );
    }


    .prek-independence__copy h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }

}

/* ==========================================================================
   TH_PREK_PARENTS_V1
   Pre-K — parent communication / pickup report
   ========================================================================== */

.prek-parents {
    position: relative;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            var(--color-cream) 0%,
            #fffaf0 100%
        );

    overflow: hidden;
}


/* Decorative circle */

.prek-parents::before {
    content: "";

    position: absolute;

    top: -8rem;
    left: -7rem;

    width: 22rem;
    height: 22rem;

    border:
        2px
        solid
        rgba(77, 114, 216, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


/* Soft butter shape */

.prek-parents::after {
    content: "";

    position: absolute;

    right: -7rem;
    bottom: -9rem;

    width: 21rem;
    height: 21rem;

    background:
        rgba(244, 207, 99, 0.24);

    border-radius:
        61% 39% 54% 46%
        /
        43% 59% 41% 57%;

    transform: rotate(-16deg);

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

.prek-parents__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   LEFT SIDE
   ========================================================================== */

.prek-parents__inner > div:first-child {
    max-width: 560px;
}


.prek-parents__inner > div:first-child .eyebrow {
    margin-bottom: 1.5rem;

    color: var(--color-blue);
}


.prek-parents__inner > div:first-child h2 {
    max-width: 9ch;

    margin: 0;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.8vw,
            6rem
        );

    font-weight: 950;
    line-height: 0.88;

    letter-spacing: -0.065em;
}


/* Red marker underline */

.prek-parents__inner > div:first-child h2::after {
    content: "";

    display: block;

    width: 105px;
    height: 12px;

    margin-top: 1.6rem;

    border-top:
        7px
        solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


/* ==========================================================================
   RIGHT COPY
   ========================================================================== */

.prek-parents__copy {
    max-width: 620px;
}


.prek-parents__copy > p {
    max-width: 580px;

    margin:
        0
        0
        2.5rem;

    color:
        rgba(
            41,
            42,
            44,
            0.68
        );

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.75;
}


/* ==========================================================================
   CHILD REPORT
   ========================================================================== */

.prek-parents__copy blockquote {
    position: relative;

    margin: 0;

    padding:
        clamp(2.4rem, 4vw, 3.5rem);

    color: var(--color-paper);
    background: var(--color-graphite);

    box-shadow:
        0
        22px
        48px
        rgba(41, 42, 44, 0.16);

    transform: rotate(1.2deg);
}


/* Tape */

.prek-parents__copy blockquote::before {
    content: "";

    position: absolute;

    top: -12px;
    left: 50%;

    width: 88px;
    height: 24px;

    background:
        rgba(244, 207, 99, 0.72);

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* Big quotation mark */

.prek-parents__copy blockquote::after {
    content: "“";

    position: absolute;

    top: 0.7rem;
    right: 1.5rem;

    color:
        rgba(
            244,
            207,
            99,
            0.18
        );

    font-family: Georgia, serif;

    font-size: 7rem;
    line-height: 1;

    pointer-events: none;
}


.prek-parents__copy blockquote p {
    position: relative;
    z-index: 2;

    margin:
        0
        0
        1.7rem;

    color: var(--color-paper);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            3.7rem,
            6vw,
            6rem
        );

    font-weight: 900;
    line-height: 0.95;

    letter-spacing: -0.04em;

    transform: rotate(-2deg);
}


.prek-parents__copy blockquote footer {
    position: relative;
    z-index: 2;

    padding-top: 1rem;

    border-top:
        5px
        solid
        var(--color-red);

    color:
        rgba(
            255,
            253,
            248,
            0.68
        );

    font-size: 0.85rem;
    font-weight: 800;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .prek-parents__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    .prek-parents__inner > div:first-child {
        max-width: 720px;
    }


    .prek-parents__inner > div:first-child h2 {
        max-width: 12ch;
    }


    .prek-parents__copy {
        max-width: 720px;
    }


    .prek-parents__copy blockquote {
        width:
            min(
                560px,
                94%
            );

        margin-left: auto;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .prek-parents {
        padding:
            5rem
            0;
    }


    .prek-parents__inner {
        width: calc(100% - 2rem);

        gap: 3.5rem;
    }


    .prek-parents__inner > div:first-child h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    .prek-parents__copy blockquote {
        width: 100%;

        padding:
            2.3rem
            1.5rem;
    }


    .prek-parents__copy blockquote p {
        font-size:
            clamp(
                3.3rem,
                17vw,
                4.8rem
            );
    }

}

/* ==========================================================================
   TH_PREK_DEMO_NOTE_V1
   Pre-K — template disclaimer strip
   ========================================================================== */

.prek-demo {
    position: relative;

    padding:
        clamp(2.2rem, 4vw, 3.3rem)
        0;

    color: var(--color-paper);
    background: var(--color-graphite);

    overflow: hidden;
}


/* Large ghost label */

.prek-demo::after {
    content: "PRE-K DEMO";

    position: absolute;

    top: 50%;
    right: clamp(1rem, 4vw, 4rem);

    color:
        rgba(
            255,
            253,
            248,
            0.04
        );

    font-family: var(--font-display);

    font-size:
        clamp(
            3.5rem,
            7vw,
            7rem
        );

    font-weight: 950;
    line-height: 1;

    letter-spacing: -0.07em;

    transform:
        translateY(-50%)
        rotate(-3deg);

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

.prek-demo__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;
}


/* ==========================================================================
   NOTE
   ========================================================================== */

.prek-demo__inner p {
    max-width: 1020px;

    margin: 0;

    padding-left: 1.4rem;

    border-left:
        6px solid
        #507d52;

    color:
        rgba(
            255,
            253,
            248,
            0.67
        );

    font-size: 0.78rem;
    line-height: 1.72;
}


.prek-demo__inner strong {
    color: var(--color-butter);

    font-weight: 900;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .prek-demo {
        padding:
            2.4rem
            0;
    }


    .prek-demo__inner {
        width: calc(100% - 2rem);
    }


    .prek-demo__inner p {
        padding-left: 1rem;

        border-left-width: 5px;

        font-size: 0.73rem;
    }


    .prek-demo::after {
        right: -2rem;

        font-size: 4.5rem;
    }

}

/* ==========================================================================
   TH_PREK_CTA_V1
   Pre-K — final tour CTA
   ========================================================================== */

.prek-cta {
    position: relative;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);
    background: var(--color-butter);

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

.prek-cta::before {
    content: "";

    position: absolute;

    top: -9rem;
    right: -7rem;

    width: 25rem;
    height: 25rem;

    border:
        2px solid
        rgba(41, 42, 44, 0.13);

    border-radius: 50%;

    pointer-events: none;
}


.prek-cta::after {
    content: "";

    position: absolute;

    left: -8rem;
    bottom: -10rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(233, 92, 80, 0.28);

    border-radius:
        61% 39% 48% 52%
        /
        42% 59% 41% 58%;

    transform: rotate(17deg);

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

.prek-cta__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(310px, 0.68fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   COPY
   ========================================================================== */

.prek-cta__copy {
    max-width: 720px;
}


.prek-cta__copy .eyebrow {
    margin-bottom: 1.5rem;

    color: #507d52;
}


.prek-cta__copy h2 {
    max-width: 11ch;

    margin:
        0
        0
        1.8rem;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.8vw,
            6rem
        );

    font-weight: 950;
    line-height: 0.88;

    letter-spacing: -0.065em;
}


/* Green marker underline */

.prek-cta__copy h2::after {
    content: "";

    display: block;

    width: 105px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        #507d52;

    border-radius: 50%;

    transform: rotate(-3deg);
}


.prek-cta__copy > p:last-child {
    max-width: 610px;

    margin: 0;

    color:
        rgba(
            41,
            42,
            44,
            0.68
        );

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.75;
}


/* ==========================================================================
   ACTION PANEL
   ========================================================================== */

.prek-cta__action {
    position: relative;

    min-height: 260px;

    padding:
        clamp(2.3rem, 4vw, 3.2rem);

    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: flex-start;

    gap: 1.3rem;

    color: var(--color-paper);
    background: #507d52;

    box-shadow:
        0
        24px
        55px
        rgba(41, 42, 44, 0.18);

    transform: rotate(2deg);
}


/* Tape */

.prek-cta__action::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 50%;

    width: 94px;
    height: 25px;

    background:
        rgba(
            255,
            253,
            248,
            0.64
        );

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* Red scribble */

.prek-cta__action::after {
    content: "";

    position: absolute;

    right: 1.6rem;
    bottom: 1.5rem;

    width: 65px;
    height: 12px;

    border-top:
        7px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-7deg);

    pointer-events: none;
}


/* ==========================================================================
   PRIMARY BUTTON
   ========================================================================== */

.prek-cta__action .button--primary {
    position: relative;
    z-index: 2;

    min-height: 54px;

    padding-inline: 1.65rem;

    color: var(--color-paper);
    background: var(--color-graphite);

    box-shadow: none;
}


.prek-cta__action .button--primary:hover {
    color: var(--color-graphite);
    background: var(--color-paper);

    box-shadow:
        0
        12px
        28px
        rgba(41, 42, 44, 0.18);
}


/* ==========================================================================
   BACK LINK
   ========================================================================== */

.prek-cta__action .text-link {
    position: relative;
    z-index: 2;

    color: var(--color-paper);

    font-weight: 900;
}


.prek-cta__action .text-link span {
    color: var(--color-butter);
}


.prek-cta__action .text-link:hover {
    color: var(--color-butter);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .prek-cta__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    .prek-cta__copy {
        max-width: 760px;
    }


    .prek-cta__copy h2 {
        max-width: 12ch;
    }


    .prek-cta__action {
        width:
            min(
                530px,
                94%
            );

        min-height: 230px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .prek-cta {
        padding:
            5rem
            0;
    }


    .prek-cta__inner {
        width: calc(100% - 2rem);

        gap: 3.5rem;
    }


    .prek-cta__copy h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );
    }


    .prek-cta__action {
        width: calc(100% - 0.5rem);

        min-height: 220px;

        padding:
            2.3rem
            1.5rem;

        transform: rotate(1deg);
    }


    .prek-cta__action .button--primary {
        width: 100%;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    .prek-cta__action {
        transform: none;
    }

}


/* ==========================================================================
   TH_PREK_MOBILE_FIX_V1
   Pre-K — mobile overflow + overlap corrections
   ========================================================================== */

@media (max-width: 640px) {

    /* ----------------------------------------------------------------------
       Global Pre-K mobile overflow protection
       ---------------------------------------------------------------------- */

    body.page-prek-care {
        overflow-x: hidden;
    }


    /* ======================================================================
       IMPORTANT REMINDER
       Keep ALMOST KINDERGARTEN completely inside the viewport
       ====================================================================== */

    .prek-still-kids__statement {
        width: 100%;
        max-width: 100%;

        transform: none;
    }


    .prek-still-kids__statement span {
        font-size:
            clamp(
                2rem,
                8.5vw,
                2.7rem
            );

        line-height: 0.95;
    }


    .prek-still-kids__statement strong {
        width: 100%;
        max-width: 100%;

        font-size:
            clamp(
                2.65rem,
                9.4vw,
                3rem
            );

        line-height: 0.9;

        letter-spacing: -0.065em;

        white-space: nowrap;

        overflow-wrap: normal;
        word-break: normal;
    }


    .prek-still-kids__statement::after {
        right: auto;
        left: 28%;
        bottom: -1rem;

        width: 68%;
    }


    .prek-still-kids__copy {
        width: 100%;
        max-width: 100%;
    }


    .prek-still-kids__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                2.7rem,
                11vw,
                3.55rem
            );
    }


    .prek-still-kids__copy p {
        max-width: 100%;
    }


    .prek-still-kids__copy p:last-child {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }


    /* ======================================================================
       LEARNING TOGETHER
       Stop the green panel from covering the photo caption
       ====================================================================== */

    .prek-project__figure {
        height: 450px;
    }


    .prek-project__figure figcaption {
        left: 0.8rem;
        bottom: 0.8rem;

        width:
            min(
                300px,
                calc(100% - 1.6rem)
            );

        padding:
            1rem
            1.1rem;
    }


    .prek-project__figure figcaption strong {
        font-size: 1.35rem;
    }


    .prek-project__copy {
        width: 100%;

        margin:
            1.4rem
            0
            0;

        box-sizing: border-box;

        transform: none;
    }


    .prek-project__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                2.9rem,
                12vw,
                3.8rem
            );
    }


    .prek-project__copy > p:last-child {
        max-width: 100%;
    }


    /* ======================================================================
       FINAL CTA
       Keep the long kindergarteners headline inside the screen
       ====================================================================== */

    .prek-cta__copy {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }


    .prek-cta__copy h2 {
        width: 100%;
        max-width: 100%;

        font-size:
            clamp(
                2.5rem,
                10vw,
                3.2rem
            );

        line-height: 0.9;

        letter-spacing: -0.055em;

        overflow-wrap: normal;
        word-break: normal;
    }


    .prek-cta__copy > p:last-child {
        max-width: 100%;
    }


    .prek-cta__action {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;

        transform: rotate(0.5deg);
    }


    .prek-cta__action .button--primary {
        width: 100%;

        box-sizing: border-box;
    }

}

/* ==========================================================================
   TH_PRESCHOOL_HERO_V1
   Preschool — creative research editorial hero
   ========================================================================== */

.page-preschool-care main {
    overflow: hidden;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.preschool-hero {
    position: relative;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            var(--color-cream) 0%,
            #fff4df 100%
        );

    overflow: hidden;
}


.preschool-hero::before {
    content: "";

    position: absolute;

    top: 4rem;
    right: -8rem;

    width: 21rem;
    height: 21rem;

    border:
        2px solid
        rgba(77, 114, 216, 0.18);

    border-radius: 50%;

    pointer-events: none;
}


.preschool-hero::after {
    content: "";

    position: absolute;

    left: -8rem;
    bottom: -11rem;

    width: 25rem;
    height: 25rem;

    background:
        rgba(244, 207, 99, 0.34);

    border-radius:
        62% 38% 52% 48%
        /
        43% 61% 39% 57%;

    transform: rotate(16deg);

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

.preschool-hero__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    min-height: 710px;

    margin-inline: auto;

    padding:
        clamp(4.5rem, 7vw, 7rem)
        0
        clamp(5rem, 8vw, 7.5rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(330px, 0.88fr);

    gap:
        clamp(3rem, 6vw, 7rem);

    align-items: center;
}


/* ==========================================================================
   VISUAL
   ========================================================================== */

.preschool-hero__visual {
    position: relative;

    min-width: 0;
    min-height: 590px;
}


/* Main photo */

.preschool-hero__photo {
    position: absolute;

    inset:
        1rem
        0
        1.5rem
        0;

    margin: 0;

    overflow: hidden;

    border-radius:
        72px
        34px
        88px
        42px;

    background: #e8e3d5;

    box-shadow:
        0
        24px
        55px
        rgba(41, 42, 44, 0.12);

    transform: rotate(-0.8deg);
}


.preschool-hero__photo::after {
    content: "";

    position: absolute;
    inset: 0;

    border:
        1px solid
        rgba(41, 42, 44, 0.08);

    border-radius: inherit;

    pointer-events: none;
}


.preschool-hero__photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: 46% center;
}


/* ==========================================================================
   DECORATIVE SHAPES
   ========================================================================== */

.preschool-hero__shape {
    position: absolute;
    z-index: 4;

    pointer-events: none;
}


.preschool-hero__shape--blue {
    top: -0.5rem;
    left: -1rem;

    width: 112px;
    height: 112px;

    background: var(--color-blue);

    border-radius:
        58% 42% 63% 37%
        /
        41% 59% 41% 59%;

    transform: rotate(-14deg);
}


.preschool-hero__shape--red {
    right: -1rem;
    bottom: 2.5rem;

    width: 88px;
    height: 88px;

    background: var(--color-red);

    border-radius:
        42% 58% 51% 49%
        /
        61% 39% 58% 42%;

    transform: rotate(18deg);
}


/* ==========================================================================
   RESEARCH NOTE
   ========================================================================== */

.preschool-hero__note {
    position: absolute;
    z-index: 6;

    left: 1rem;
    bottom: -0.5rem;

    width: 225px;

    padding:
        1.35rem
        1.4rem
        1.5rem;

    color: var(--color-graphite);
    background: var(--color-butter);

    box-shadow:
        0
        18px
        38px
        rgba(41, 42, 44, 0.16);

    transform: rotate(2.5deg);
}


.preschool-hero__note::before {
    content: "";

    position: absolute;

    top: -11px;
    left: 50%;

    width: 82px;
    height: 23px;

    background:
        rgba(255, 253, 248, 0.65);

    transform:
        translateX(-50%)
        rotate(-3deg);
}


.preschool-hero__note span,
.preschool-hero__note strong,
.preschool-hero__note small {
    display: block;
}


.preschool-hero__note span {
    margin-bottom: 0.45rem;

    color: var(--color-blue);

    font-size: 0.66rem;
    font-weight: 950;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.preschool-hero__note strong {
    margin-bottom: 0.4rem;

    font-family: var(--font-display);

    font-size: 1.55rem;
    font-weight: 950;
    line-height: 0.98;

    letter-spacing: -0.045em;
}


.preschool-hero__note small {
    color:
        rgba(41, 42, 44, 0.63);

    font-size: 0.76rem;
    font-weight: 750;
}


/* ==========================================================================
   COPY
   ========================================================================== */

.preschool-hero__content {
    position: relative;
    z-index: 5;

    max-width: 540px;
}


.preschool-hero__content .eyebrow {
    margin-bottom: 1.4rem;

    color: var(--color-blue);
}


.preschool-hero__title {
    max-width: 560px;

    margin:
        0
        0
        1.8rem;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.7vw,
            5.6rem
        );

    font-weight: 950;
    line-height: 0.88;

    letter-spacing: -0.065em;
}


.preschool-hero__title span {
    display: block;

    margin-top: 0.3rem;

    color: var(--color-red);
}


/* Yellow marker swipe */

.preschool-hero__title span::after {
    content: "";

    display: block;

    width: 125px;
    height: 12px;

    margin-top: 1.2rem;

    border-top:
        8px solid
        var(--color-butter);

    border-radius: 50%;

    transform: rotate(-3deg);
}


.preschool-hero__intro {
    max-width: 520px;

    margin:
        0
        0
        2rem;

    color:
        rgba(
            41,
            42,
            44,
            0.72
        );

    font-size: 1.05rem;
    line-height: 1.72;
}


.preschool-hero__actions {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 1.4rem;
}


.preschool-hero__actions .text-link {
    color: var(--color-graphite);

    font-weight: 850;
}


.preschool-hero__actions .text-link span {
    color: var(--color-red);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1000px) {

    .preschool-hero__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    .preschool-hero__visual {
        width: min(100%, 820px);

        min-height: 600px;

        margin-inline: auto;
    }


    .preschool-hero__content {
        max-width: 720px;

        margin-inline: auto;
    }


    .preschool-hero__title {
        max-width: 700px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .preschool-hero__inner {
        width: calc(100% - 2rem);

        padding:
            3.5rem
            0
            5rem;

        gap: 3.5rem;
    }


    .preschool-hero__visual {
        min-height: 470px;
    }


    .preschool-hero__photo {
        inset:
            0
            0
            1rem
            0;

        border-radius:
            48px
            24px
            54px
            28px;
    }


    .preschool-hero__shape--blue {
        top: -1rem;
        left: -1rem;

        width: 82px;
        height: 82px;
    }


    .preschool-hero__shape--red {
        right: -0.8rem;

        width: 68px;
        height: 68px;
    }


    .preschool-hero__note {
        left: 0.6rem;
        bottom: -1rem;

        width: 180px;

        padding:
            1.15rem
            1.1rem
            1.25rem;
    }


    .preschool-hero__note strong {
        font-size: 1.3rem;
    }


    .preschool-hero__title {
        font-size:
            clamp(
                3.1rem,
                14vw,
                4.4rem
            );
    }


    .preschool-hero__title span::after {
        width: 95px;
    }

}

/* ==========================================================================
   TH_PRESCHOOL_WHY_V1
   Preschool — primary research method / WHY?
   ========================================================================== */

.preschool-why {
    position: relative;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-paper);
    background: var(--color-blue);

    overflow: hidden;
}


/* Decorative circle */

.preschool-why::before {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 23rem;
    height: 23rem;

    border:
        2px solid
        rgba(255, 253, 248, 0.16);

    border-radius: 50%;

    pointer-events: none;
}


/* Red organic shape */

.preschool-why::after {
    content: "";

    position: absolute;

    left: -8rem;
    bottom: -10rem;

    width: 23rem;
    height: 23rem;

    background:
        rgba(233, 92, 80, 0.28);

    border-radius:
        61% 39% 54% 46%
        /
        42% 59% 41% 58%;

    transform: rotate(15deg);

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

.preschool-why__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin-inline: auto;
}


.preschool-why__inner > .eyebrow {
    margin-bottom:
        clamp(3rem, 5vw, 4.5rem);

    color: var(--color-butter);
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

.preschool-why__layout {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.82fr)
        minmax(0, 1.18fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   GIANT WHY
   ========================================================================== */

.preschool-why__word {
    position: relative;

    width: fit-content;

    color: var(--color-butter);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            7rem,
            13vw,
            12rem
        );

    font-weight: 900;
    line-height: 0.8;

    letter-spacing: -0.07em;

    transform: rotate(-5deg);
}


/* Marker underline */

.preschool-why__word::after {
    content: "";

    position: absolute;

    left: 10%;
    bottom: -1.4rem;

    width: 76%;
    height: 14px;

    border-top:
        9px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(2deg);
}


/* Tiny question echo */

.preschool-why__word::before {
    content: "?";

    position: absolute;

    top: -2rem;
    right: -3rem;

    color:
        rgba(255, 253, 248, 0.15);

    font-family: var(--font-display);

    font-size: 5rem;

    transform: rotate(12deg);
}


/* ==========================================================================
   COPY
   ========================================================================== */

.preschool-why__copy {
    max-width: 620px;
}


.preschool-why__copy::before {
    content: "";

    display: block;

    width: 74px;
    height: 8px;

    margin-bottom: 1.8rem;

    background: var(--color-red);

    border-radius: 999px;

    transform: rotate(-2deg);
}


.preschool-why__copy h2 {
    max-width: 610px;

    margin:
        0
        0
        2rem;

    color: var(--color-paper);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.3rem,
            5vw,
            5.2rem
        );

    font-weight: 950;
    line-height: 0.9;

    letter-spacing: -0.06em;
}


.preschool-why__copy p {
    max-width: 570px;

    margin:
        0
        0
        1.3rem;

    color:
        rgba(255, 253, 248, 0.76);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.75;
}


.preschool-why__copy p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .preschool-why__layout {
        grid-template-columns: 1fr;

        gap: 5rem;
    }


    .preschool-why__word {
        font-size:
            clamp(
                7rem,
                20vw,
                11rem
            );
    }


    .preschool-why__copy {
        max-width: 720px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .preschool-why {
        padding:
            5rem
            0;
    }


    .preschool-why__inner {
        width: calc(100% - 2rem);
    }


    .preschool-why__inner > .eyebrow {
        margin-bottom: 3rem;
    }


    .preschool-why__layout {
        gap: 4rem;
    }


    .preschool-why__word {
        max-width: 100%;

        font-size:
            clamp(
                6rem,
                29vw,
                8.5rem
            );
    }


    .preschool-why__word::before {
        right: -1rem;

        font-size: 3.5rem;
    }


    .preschool-why__copy h2 {
        font-size:
            clamp(
                2.9rem,
                13vw,
                4.1rem
            );
    }

}

/* ==========================================================================
   TH_PRESCHOOL_INVESTIGATING_BG_V2
   Preschool — faded thinking / problem-solving background enhancement
   ========================================================================== */


/* ==========================================================================
   SECTION BASE
   ========================================================================== */

.preschool-investigating {
    isolation: isolate;

    background:
        linear-gradient(
            180deg,
            #fffdf8 0%,
            #fff8ea 100%
        );
}


/* Keep decorative question marks above the photo wash */

.preschool-investigating::before {
    z-index: 1;

    color:
        rgba(
            77,
            114,
            216,
            0.045
        );
}


/* ==========================================================================
   FADED PHOTO HERO
   ========================================================================== */

.preschool-investigating__bg {
    position: absolute;
    z-index: 0;

    top: 0;
    left: 0;

    width: 100%;
    height:
        clamp(
            560px,
            55vw,
            760px
        );

    margin: 0;

    overflow: hidden;

    pointer-events: none;
}


.preschool-investigating__bg img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        68%
        center;

    filter:
        saturate(0.82)
        contrast(0.92);

    transform: scale(1.025);
}


/* ==========================================================================
   PHOTO WASH / FADE
   ========================================================================== */

.preschool-investigating__overlay {
    position: absolute;
    z-index: 1;

    top: 0;
    left: 0;

    width: 100%;
    height:
        clamp(
            580px,
            58vw,
            790px
        );

    background:

        /* Stronger readability behind left-side heading */
        linear-gradient(
            90deg,
            rgba(255, 253, 248, 0.97) 0%,
            rgba(255, 253, 248, 0.94) 31%,
            rgba(255, 253, 248, 0.80) 57%,
            rgba(255, 253, 248, 0.58) 100%
        ),

        /* Dissolve photograph into the ledger below */
        linear-gradient(
            180deg,
            rgba(255, 253, 248, 0.28) 0%,
            rgba(255, 253, 248, 0.40) 40%,
            rgba(255, 250, 240, 0.82) 73%,
            rgba(255, 248, 234, 0.98) 94%,
            #fff8ea 100%
        );

    pointer-events: none;
}


/* ==========================================================================
   CONTENT LAYER
   ========================================================================== */

.preschool-investigating__inner {
    z-index: 3;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.preschool-investigating__header {
    position: relative;

    min-height:
        clamp(
            390px,
            34vw,
            490px
        );

    align-content: center;

    margin-bottom:
        clamp(
            3rem,
            5vw,
            4.5rem
        );
}


/* Small field-note marker near headline */

.preschool-investigating__header h2::after {
    content: "";

    display: block;

    width: 112px;
    height: 13px;

    margin-top: 1.6rem;

    border-top:
        8px solid
        var(--color-butter);

    border-radius: 50%;

    transform: rotate(-3deg);
}


/* Give intro a very subtle readable wash */

.preschool-investigating__header > p:last-child {
    padding:
        1.8rem
        1.5rem
        1.5rem;

    background:
        rgba(
            255,
            253,
            248,
            0.58
        );

    backdrop-filter:
        blur(2px);

    -webkit-backdrop-filter:
        blur(2px);
}


/* Preserve its red marker line */

.preschool-investigating__header > p:last-child::before {
    left: 1.5rem;
}


/* ==========================================================================
   LEDGER
   ========================================================================== */

.preschool-investigating__items {
    position: relative;

    background:
        rgba(
            255,
            250,
            240,
            0.72
        );

    backdrop-filter:
        blur(2px);

    -webkit-backdrop-filter:
        blur(2px);
}


/* Subtle fade at top so photo and rows merge instead of hard-cutting */

.preschool-investigating__items::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: -90px;
    left: 0;

    width: 100%;
    height: 100px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 248, 234, 0) 0%,
            rgba(255, 248, 234, 0.94) 100%
        );

    pointer-events: none;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .preschool-investigating__bg {
        height: 650px;
    }


    .preschool-investigating__bg img {
        object-position:
            64%
            center;
    }


    .preschool-investigating__overlay {
        height: 680px;

        background:

            linear-gradient(
                90deg,
                rgba(255, 253, 248, 0.96) 0%,
                rgba(255, 253, 248, 0.90) 48%,
                rgba(255, 253, 248, 0.70) 100%
            ),

            linear-gradient(
                180deg,
                rgba(255, 253, 248, 0.32) 0%,
                rgba(255, 250, 240, 0.70) 66%,
                #fff8ea 100%
            );
    }


    .preschool-investigating__header {
        min-height: 450px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .preschool-investigating__bg {
        height: 560px;
    }


    .preschool-investigating__bg img {
        object-position:
            67%
            center;

        opacity: 0.76;
    }


    .preschool-investigating__overlay {
        height: 590px;

        background:

            linear-gradient(
                90deg,
                rgba(255, 253, 248, 0.94) 0%,
                rgba(255, 253, 248, 0.87) 68%,
                rgba(255, 253, 248, 0.70) 100%
            ),

            linear-gradient(
                180deg,
                rgba(255, 253, 248, 0.28) 0%,
                rgba(255, 250, 240, 0.76) 68%,
                #fff8ea 100%
            );
    }


    .preschool-investigating__header {
        min-height: 430px;

        margin-bottom: 3rem;
    }


    .preschool-investigating__header > p:last-child {
        padding:
            1.5rem
            1rem
            1.2rem;

        background:
            rgba(
                255,
                253,
                248,
                0.72
            );
    }


    .preschool-investigating__header > p:last-child::before {
        left: 1rem;
    }


    .preschool-investigating__items {
        background:
            rgba(
                255,
                248,
                234,
                0.94
            );

        backdrop-filter: none;

        -webkit-backdrop-filter: none;
    }

}

/* ==========================================================================
   TH_PRESCHOOL_INVESTIGATING_BG_FIX_V3
   Force faded research image to remain inside Investigating section
   ========================================================================== */

.preschool-investigating {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;

    contain: paint;
}


/* Keep the background photograph physically attached to this section */

.preschool-investigating > .preschool-investigating__bg {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;

    width: 100% !important;
    height: clamp(560px, 55vw, 760px) !important;

    margin: 0 !important;

    z-index: 0 !important;

    overflow: hidden;

    pointer-events: none;
}


/* Photograph */

.preschool-investigating > .preschool-investigating__bg img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: 68% center;

    opacity: 1;

    filter:
        saturate(0.82)
        contrast(0.92);

    transform: scale(1.025);
}


/* Wash must live in exactly the same section */

.preschool-investigating > .preschool-investigating__overlay {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;

    width: 100% !important;
    height: clamp(580px, 58vw, 790px) !important;

    z-index: 1 !important;

    pointer-events: none;
}


/* Content always above photograph */

.preschool-investigating > .preschool-investigating__inner {
    position: relative !important;
    z-index: 3 !important;
}


/* Prevent the background from appearing in any other Preschool section */

.preschool-hero .preschool-investigating__bg,
.preschool-hero .preschool-investigating__overlay,
.preschool-why .preschool-investigating__bg,
.preschool-why .preschool-investigating__overlay {
    display: none !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .preschool-investigating > .preschool-investigating__bg {
        height: 650px !important;
    }


    .preschool-investigating > .preschool-investigating__overlay {
        height: 680px !important;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .preschool-investigating > .preschool-investigating__bg {
        height: 560px !important;
    }


    .preschool-investigating > .preschool-investigating__bg img {
        object-position: 67% center;

        opacity: 0.76;
    }


    .preschool-investigating > .preschool-investigating__overlay {
        height: 590px !important;
    }

}

/* ==========================================================================
   TH_PRESCHOOL_INVESTIGATING_COMPOSE_FIX_V4
   Preschool — final faded research hero composition
   ========================================================================== */


/* ==========================================================================
   BACKGROUND PHOTO
   Push the thinking child toward the right side
   ========================================================================== */

.preschool-investigating > .preschool-investigating__bg img {
    object-position: 76% 50% !important;

    filter:
        saturate(0.88)
        contrast(0.94) !important;
}


/* ==========================================================================
   FADE
   Strong paper wash under copy, lighter over the child
   ========================================================================== */

.preschool-investigating > .preschool-investigating__overlay {
    background:

        linear-gradient(
            90deg,
            rgba(255, 253, 248, 0.98) 0%,
            rgba(255, 253, 248, 0.95) 32%,
            rgba(255, 253, 248, 0.72) 52%,
            rgba(255, 253, 248, 0.38) 74%,
            rgba(255, 253, 248, 0.26) 100%
        ),

        linear-gradient(
            180deg,
            rgba(255, 253, 248, 0.22) 0%,
            rgba(255, 253, 248, 0.28) 48%,
            rgba(255, 250, 240, 0.68) 74%,
            rgba(255, 248, 234, 0.96) 94%,
            #fff8ea 100%
        ) !important;
}


/* ==========================================================================
   HERO HEADER
   Keep ALL copy on the calm left side
   ========================================================================== */

.preschool-investigating .preschool-investigating__header {
    position: relative;

    min-height:
        clamp(
            430px,
            39vw,
            520px
        ) !important;

    display: grid !important;

    grid-template-columns:
        minmax(320px, 520px)
        minmax(0, 1fr) !important;

    grid-template-rows:
        auto
        auto
        auto !important;

    column-gap:
        clamp(
            3rem,
            7vw,
            7rem
        ) !important;

    row-gap: 0 !important;

    align-content: center !important;
    align-items: start !important;

    margin-bottom:
        clamp(
            3.5rem,
            5vw,
            5rem
        ) !important;
}


/* Eyebrow */

.preschool-investigating .preschool-investigating__header .eyebrow {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: auto !important;
    max-width: none !important;

    margin:
        0
        0
        1.3rem !important;

    color: var(--color-blue) !important;
}


/* ==========================================================================
   MAIN HEADLINE
   ========================================================================== */

.preschool-investigating .preschool-investigating__header h2 {
    grid-column: 1 !important;
    grid-row: 2 !important;

    width: 100% !important;
    max-width: 8ch !important;

    margin:
        0
        0
        1.8rem !important;

    font-family: var(--font-display) !important;

    font-size:
        clamp(
            3.9rem,
            5.7vw,
            6rem
        ) !important;

    font-weight: 950 !important;

    line-height: 0.88 !important;

    letter-spacing: -0.065em !important;

    color: var(--color-graphite) !important;
}


/* Marker underneath */

.preschool-investigating .preschool-investigating__header h2::after {
    width: 112px !important;

    margin-top: 1.4rem !important;

    border-top:
        8px solid
        var(--color-butter) !important;
}


/* ==========================================================================
   INTRO COPY
   Remove the giant full-width translucent band
   ========================================================================== */

.preschool-investigating
.preschool-investigating__header
> p:last-child {
    grid-column: 1 !important;
    grid-row: 3 !important;

    width: 100% !important;
    max-width: 500px !important;

    margin: 0 !important;

    padding:
        1.45rem
        0
        0 !important;

    color:
        rgba(
            41,
            42,
            44,
            0.72
        ) !important;

    background: transparent !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        ) !important;

    line-height: 1.72 !important;
}


/* Red research marker */

.preschool-investigating
.preschool-investigating__header
> p:last-child::before {
    top: 0 !important;
    left: 0 !important;

    width: 68px !important;
}


/* ==========================================================================
   LEDGER TRANSITION
   Keep rows clean after the photographic hero
   ========================================================================== */

.preschool-investigating .preschool-investigating__items {
    position: relative;

    z-index: 4;

    background:
        rgba(
            255,
            248,
            234,
            0.96
        ) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .preschool-investigating > .preschool-investigating__bg img {
        object-position: 70% 50% !important;
    }


    .preschool-investigating
    .preschool-investigating__header {
        min-height: 500px !important;

        grid-template-columns:
            minmax(280px, 480px)
            minmax(0, 1fr) !important;
    }


    .preschool-investigating
    .preschool-investigating__header h2 {
        font-size:
            clamp(
                3.5rem,
                7vw,
                5rem
            ) !important;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .preschool-investigating > .preschool-investigating__bg {
        height: 620px !important;
    }


    .preschool-investigating > .preschool-investigating__bg img {
        object-position: 64% center !important;

        opacity: 0.6 !important;
    }


    .preschool-investigating > .preschool-investigating__overlay {
        height: 650px !important;

        background:

            linear-gradient(
                180deg,
                rgba(255, 253, 248, 0.80) 0%,
                rgba(255, 253, 248, 0.76) 42%,
                rgba(255, 250, 240, 0.84) 72%,
                #fff8ea 100%
            ) !important;
    }


    .preschool-investigating
    .preschool-investigating__header {
        min-height: 500px !important;

        display: block !important;
    }


    .preschool-investigating
    .preschool-investigating__header .eyebrow {
        margin-bottom: 1.4rem !important;
    }


    .preschool-investigating
    .preschool-investigating__header h2 {
        max-width: 100% !important;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            ) !important;
    }


    .preschool-investigating
    .preschool-investigating__header
    > p:last-child {
        max-width: 100% !important;

        padding-top: 1.4rem !important;
    }

}

/* ==========================================================================
   TH_PRESCHOOL_WHY_BG_MOVE_V5
   Move thinking-child image into the BLUE WHY section
   Restore Currently Investigating to clean editorial ledger
   ========================================================================== */


/* ==========================================================================
   BLUE WHY SECTION — FADED THINKING CHILD
   ========================================================================== */

.preschool-why {
    background-color: var(--color-blue);

    background-image:

        /* Preserve strong readable blue behind the WHY lettering */
        linear-gradient(
            90deg,
            rgba(77, 114, 216, 0.99) 0%,
            rgba(77, 114, 216, 0.97) 32%,
            rgba(77, 114, 216, 0.88) 52%,
            rgba(77, 114, 216, 0.69) 72%,
            rgba(77, 114, 216, 0.60) 100%
        ),

        /* Give the photograph the blue editorial wash */
        linear-gradient(
            180deg,
            rgba(77, 114, 216, 0.22) 0%,
            rgba(77, 114, 216, 0.38) 100%
        ),

        url("../images/programs/preschool-investigating-bg.png");

    background-size:
        cover,
        cover,
        cover;

    background-position:
        center,
        center,
        74% center;

    background-repeat:
        no-repeat;
}


/* Keep actual WHY content safely above photo */

.preschool-why__inner {
    position: relative;
    z-index: 3;
}


/* Slight text shadow only where needed against photo */

.preschool-why__copy h2 {
    text-shadow:
        0
        2px
        10px
        rgba(41, 42, 44, 0.08);
}


.preschool-why__copy p {
    text-shadow:
        0
        1px
        8px
        rgba(41, 42, 44, 0.12);
}


/* ==========================================================================
   REMOVE PHOTO FROM CURRENTLY INVESTIGATING
   ========================================================================== */

.preschool-investigating >
.preschool-investigating__bg,

.preschool-investigating >
.preschool-investigating__overlay {
    display: none !important;
}


/* Restore original warm paper field */

.preschool-investigating {
    background:
        linear-gradient(
            180deg,
            #fffdf8 0%,
            #fff8ea 100%
        ) !important;
}


/* ==========================================================================
   RESTORE INVESTIGATING HEADER
   ========================================================================== */

.preschool-investigating
.preschool-investigating__header {
    min-height: 0 !important;

    display: grid !important;

    grid-template-columns:
        minmax(300px, 0.9fr)
        minmax(0, 1.1fr) !important;

    grid-template-rows: auto auto !important;

    gap:
        clamp(3rem, 7vw, 8rem) !important;

    align-content: normal !important;
    align-items: end !important;

    margin-bottom:
        clamp(4rem, 7vw, 6.5rem) !important;
}


/* Eyebrow back across the full width */

.preschool-investigating
.preschool-investigating__header
.eyebrow {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;

    margin:
        0
        0
        -1rem !important;
}


/* Headline back to left column */

.preschool-investigating
.preschool-investigating__header h2 {
    grid-column: 1 !important;
    grid-row: 2 !important;

    width: auto !important;
    max-width: 8ch !important;

    margin: 0 !important;

    font-size:
        clamp(
            3.8rem,
            6vw,
            6.2rem
        ) !important;
}


/* Remove the extra marker added for the photo composition */

.preschool-investigating
.preschool-investigating__header h2::after {
    display: none !important;
}


/* Intro returns to right column */

.preschool-investigating
.preschool-investigating__header
> p:last-child {
    grid-column: 2 !important;
    grid-row: 2 !important;

    width: auto !important;
    max-width: 560px !important;

    margin: 0 !important;

    padding:
        1.8rem
        0
        0 !important;

    background: transparent !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    color:
        rgba(
            41,
            42,
            44,
            0.68
        ) !important;
}


/* Restore red research line */

.preschool-investigating
.preschool-investigating__header
> p:last-child::before {
    top: 0 !important;
    left: 0 !important;
}


/* ==========================================================================
   RESTORE CLEAN LEDGER
   ========================================================================== */

.preschool-investigating
.preschool-investigating__items {
    background: transparent !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


.preschool-investigating
.preschool-investigating__items::before {
    display: none !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .preschool-why {
        background-position:
            center,
            center,
            68% center;
    }


    .preschool-investigating
    .preschool-investigating__header {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;

        gap: 2rem !important;
    }


    .preschool-investigating
    .preschool-investigating__header
    .eyebrow {
        grid-column: 1 !important;
        grid-row: auto !important;

        margin-bottom: 0 !important;
    }


    .preschool-investigating
    .preschool-investigating__header h2 {
        grid-column: 1 !important;
        grid-row: auto !important;

        max-width: 12ch !important;
    }


    .preschool-investigating
    .preschool-investigating__header
    > p:last-child {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .preschool-why {
        background-image:

            linear-gradient(
                180deg,
                rgba(77, 114, 216, 0.91) 0%,
                rgba(77, 114, 216, 0.82) 52%,
                rgba(77, 114, 216, 0.91) 100%
            ),

            url("../images/programs/preschool-investigating-bg.png");

        background-size:
            cover,
            cover;

        background-position:
            center,
            63% center;

        background-repeat:
            no-repeat;
    }


    .preschool-investigating
    .preschool-investigating__header {
        min-height: 0 !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 2rem !important;
    }


    .preschool-investigating
    .preschool-investigating__header h2 {
        max-width: 100% !important;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            ) !important;
    }


    .preschool-investigating
    .preschool-investigating__header
    > p:last-child {
        max-width: 100% !important;
    }

}

/* ==========================================================================
   TH_PRESCHOOL_INVESTIGATING_ROWS_FIX_V6
   Preschool — restore editorial research ledger rows
   ========================================================================== */


/* ==========================================================================
   LEDGER
   ========================================================================== */

body.page-preschool-care
.preschool-investigating
.preschool-investigating__items {
    position: relative;

    width: 100%;

    border-top:
        1px solid
        rgba(41, 42, 44, 0.16);

    background: transparent !important;
}


/* ==========================================================================
   INDIVIDUAL RESEARCH ROW
   ========================================================================== */

body.page-preschool-care
.preschool-investigating
.preschool-investigating__item {
    position: relative;

    min-height: 155px;

    display: grid !important;

    grid-template-columns:
        145px
        minmax(0, 1fr) !important;

    align-items: center;

    gap:
        clamp(2rem, 4vw, 4rem);

    margin: 0 !important;

    padding:
        2.25rem
        1rem !important;

    border-bottom:
        1px solid
        rgba(41, 42, 44, 0.16);

    background: transparent;
}


/* Slight editorial washes — still full-width rows, not cards */

body.page-preschool-care
.preschool-investigating
.preschool-investigating__item:nth-child(2) {
    background:
        rgba(244, 207, 99, 0.08);
}

body.page-preschool-care
.preschool-investigating
.preschool-investigating__item:nth-child(4) {
    background:
        rgba(130, 183, 132, 0.07);
}


/* ==========================================================================
   BIG FADED NUMBERS
   ========================================================================== */

body.page-preschool-care
.preschool-investigating
.preschool-investigating__number {
    display: block !important;

    margin: 0 !important;

    color:
        rgba(41, 42, 44, 0.09) !important;

    font-family: var(--font-display) !important;

    font-size:
        clamp(
            4.8rem,
            7vw,
            7rem
        ) !important;

    font-weight: 950 !important;

    line-height: 0.75 !important;

    letter-spacing: -0.07em !important;
}


/* ==========================================================================
   ROW CONTENT
   ========================================================================== */

body.page-preschool-care
.preschool-investigating
.preschool-investigating__item
> div {
    position: relative;

    min-width: 0;

    display: grid !important;

    grid-template-columns:
        minmax(190px, 0.42fr)
        minmax(0, 1fr) !important;

    align-items: center;

    gap:
        clamp(2rem, 5vw, 5rem);

    padding-left:
        clamp(2rem, 4vw, 4rem) !important;
}


/* Small research swipe between number and subject */

body.page-preschool-care
.preschool-investigating
.preschool-investigating__item
> div::before {
    content: "";

    position: absolute;

    top: 50%;
    left: -1.4rem;

    width: 50px;
    height: 7px;

    background: var(--color-blue);

    border-radius: 999px;

    transform:
        translateY(-50%)
        rotate(-2deg);
}


body.page-preschool-care
.preschool-investigating
.preschool-investigating__item:nth-child(2)
> div::before {
    background: var(--color-red);
}


body.page-preschool-care
.preschool-investigating
.preschool-investigating__item:nth-child(3)
> div::before {
    background: var(--color-butter);
}


body.page-preschool-care
.preschool-investigating
.preschool-investigating__item:nth-child(4)
> div::before {
    background: #507d52;
}


body.page-preschool-care
.preschool-investigating
.preschool-investigating__item:nth-child(5)
> div::before {
    background: var(--color-purple);
}


/* ==========================================================================
   SUBJECT HEADINGS
   ========================================================================== */

body.page-preschool-care
.preschool-investigating
.preschool-investigating__item h3 {
    margin: 0 !important;

    font-family: var(--font-display) !important;

    font-size:
        clamp(
            2rem,
            3vw,
            3rem
        ) !important;

    font-weight: 950 !important;

    line-height: 0.95 !important;

    letter-spacing: -0.045em !important;
}


body.page-preschool-care
.preschool-investigating
.preschool-investigating__item:nth-child(1) h3 {
    color: var(--color-blue) !important;
}


body.page-preschool-care
.preschool-investigating
.preschool-investigating__item:nth-child(2) h3 {
    color: var(--color-red) !important;
}


body.page-preschool-care
.preschool-investigating
.preschool-investigating__item:nth-child(3) h3 {
    color: #9b7922 !important;
}


body.page-preschool-care
.preschool-investigating
.preschool-investigating__item:nth-child(4) h3 {
    color: #507d52 !important;
}


body.page-preschool-care
.preschool-investigating
.preschool-investigating__item:nth-child(5) h3 {
    color: var(--color-purple) !important;
}


/* ==========================================================================
   DESCRIPTIONS
   ========================================================================== */

body.page-preschool-care
.preschool-investigating
.preschool-investigating__item p {
    max-width: 620px;

    margin: 0 !important;

    color:
        rgba(41, 42, 44, 0.66) !important;

    font-size: 0.98rem !important;

    line-height: 1.7 !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-preschool-care
    .preschool-investigating
    .preschool-investigating__item {
        grid-template-columns:
            110px
            minmax(0, 1fr) !important;
    }


    body.page-preschool-care
    .preschool-investigating
    .preschool-investigating__item
    > div {
        grid-template-columns: 1fr !important;

        gap: 0.8rem;

        padding-left: 2.8rem !important;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-preschool-care
    .preschool-investigating
    .preschool-investigating__item {
        min-height: 0;

        grid-template-columns: 1fr !important;

        gap: 0.8rem;

        padding:
            2rem
            0 !important;
    }


    body.page-preschool-care
    .preschool-investigating
    .preschool-investigating__number {
        font-size: 4.3rem !important;
    }


    body.page-preschool-care
    .preschool-investigating
    .preschool-investigating__item
    > div {
        grid-template-columns: 1fr !important;

        gap: 0.8rem;

        padding:
            0
            0
            0
            0 !important;
    }


    body.page-preschool-care
    .preschool-investigating
    .preschool-investigating__item
    > div::before {
        position: relative;

        top: auto;
        left: auto;

        display: block;

        width: 48px;

        margin-bottom: 0.3rem;

        transform: rotate(-2deg);
    }


    body.page-preschool-care
    .preschool-investigating
    .preschool-investigating__item h3 {
        font-size: 2.25rem !important;
    }


    body.page-preschool-care
    .preschool-investigating
    .preschool-investigating__item p {
        max-width: 100%;

        font-size: 0.96rem !important;
    }

}

/* ==========================================================================
   TH_PRESCHOOL_CREATE_V1
   Preschool — Make Something / Creativity gets a lot of floor space
   ========================================================================== */

.preschool-create {
    position: relative;

    padding:
        clamp(4.5rem, 8vw, 7rem)
        0
        clamp(5rem, 9vw, 8rem);

    background:
        linear-gradient(
            180deg,
            #fff8ea 0%,
            #fffdf8 100%
        );

    overflow: hidden;
}


.preschool-create::before {
    content: "";

    position: absolute;

    left:
        clamp(-120px, -5vw, -60px);
    bottom:
        clamp(18px, 3vw, 38px);

    width:
        clamp(180px, 24vw, 320px);
    height:
        clamp(180px, 24vw, 320px);

    border-radius: 50%;

    background:
        rgba(244, 207, 99, 0.24);

    pointer-events: none;
}


.preschool-create::after {
    content: "";

    position: absolute;

    top:
        clamp(26px, 4vw, 52px);
    right:
        clamp(-100px, -4vw, -40px);

    width:
        clamp(260px, 28vw, 400px);
    height:
        clamp(260px, 28vw, 400px);

    border-radius: 50%;

    border:
        2px solid
        rgba(77, 114, 216, 0.14);

    pointer-events: none;
}


.preschool-create__inner {
    position: relative;
    z-index: 2;

    width: min(1280px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.95fr);

    align-items: center;

    gap:
        clamp(2rem, 4.5vw, 5rem);
}


.preschool-create__figure {
    position: relative;

    margin: 0;
}


.preschool-create__figure img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 1672 / 941;
    object-fit: cover;

    border-radius:
        clamp(30px, 3vw, 42px);

    box-shadow:
        0 24px 60px rgba(41, 42, 44, 0.12);
}


.preschool-create__figure figcaption {
    position: absolute;

    left:
        clamp(26px, 3vw, 40px);
    bottom:
        clamp(22px, 3vw, 34px);

    width:
        clamp(240px, 32vw, 350px);

    margin: 0;

    padding:
        1.3rem
        1.35rem
        1.2rem;

    background:
        linear-gradient(
            135deg,
            rgba(34, 35, 39, 0.98) 0%,
            rgba(41, 42, 44, 0.96) 100%
        );

    color: #fffef9;

    border-radius: 0;

    box-shadow:
        0 18px 42px rgba(41, 42, 44, 0.22);
}


.preschool-create__figure figcaption::before {
    content: "";

    position: absolute;

    top: -11px;
    left:
        clamp(42px, 18%, 72px);

    width: 72px;
    height: 18px;

    background:
        rgba(255, 255, 255, 0.42);
}


.preschool-create__figure figcaption span {
    display: block;

    margin-bottom: 0.8rem;

    color: var(--color-butter);

    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.preschool-create__figure figcaption strong {
    display: block;

    margin: 0;

    color: #fffef9;

    font-family: var(--font-display);
    font-size:
        clamp(1.85rem, 2.5vw, 2.7rem);
    font-weight: 950;
    line-height: 0.95;
    letter-spacing: -0.045em;
}


.preschool-create__copy {
    position: relative;
}


.preschool-create__copy .eyebrow {
    margin-bottom: 1rem;
}


.preschool-create__copy h2 {
    position: relative;

    max-width: 10ch;

    margin:
        0
        0
        2rem;

    color: var(--color-graphite);

    font-family: var(--font-display);
    font-size:
        clamp(3.2rem, 5vw, 5.5rem);
    font-weight: 950;
    line-height: 0.9;
    letter-spacing: -0.06em;
}


.preschool-create__copy h2::after {
    content: "";

    display: block;

    width: 92px;
    height: 12px;

    margin-top: 1.35rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 999px;

    transform: rotate(-2deg);
}


.preschool-create__copy p {
    max-width: 560px;

    margin: 0;

    color:
        rgba(41, 42, 44, 0.7);

    font-size:
        clamp(1rem, 1.25vw, 1.1rem);
    line-height: 1.8;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 980px) {

    .preschool-create__inner {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .preschool-create__copy h2 {
        max-width: 12ch;
    }


    .preschool-create__copy p {
        max-width: 100%;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .preschool-create {
        padding:
            4rem
            0
            4.5rem;
    }


    .preschool-create__inner {
        width: min(1280px, calc(100% - 32px));

        gap: 2rem;
    }


    .preschool-create__figure img {
        border-radius: 28px;
    }


    .preschool-create__figure figcaption {
        position: absolute;

        left: 18px;
        right: 18px;
        bottom: 18px;

        width: auto;

        padding:
            1.15rem
            1.1rem
            1.05rem;
    }


    .preschool-create__figure figcaption::before {
        left: 50%;

        transform: translateX(-50%);
    }


    .preschool-create__figure figcaption strong {
        font-size:
            clamp(1.65rem, 7vw, 2.2rem);
    }


    .preschool-create__copy h2 {
        max-width: 100%;

        font-size:
            clamp(2.7rem, 11vw, 4rem);
    }


    .preschool-create__copy p {
        font-size: 0.98rem;
        line-height: 1.75;
    }

}

/* ==========================================================================
   TH_PRESCHOOL_CREATE_CAPTION_FIX_V2
   Preschool — lower creative photo caption to reveal more storytelling
   ========================================================================== */

.preschool-create__figure {
    padding-bottom: 1.5rem;
}


.preschool-create__figure figcaption {
    left:
        clamp(
            34px,
            3vw,
            48px
        );

    bottom: -1rem;

    width:
        clamp(
            220px,
            27vw,
            320px
        );

    padding:
        1.15rem
        1.25rem
        1.05rem;
}


.preschool-create__figure figcaption span {
    margin-bottom: 0.65rem;
}


.preschool-create__figure figcaption strong {
    font-size:
        clamp(
            1.65rem,
            2.25vw,
            2.35rem
        );
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .preschool-create__figure {
        padding-bottom: 0;
    }


    .preschool-create__figure figcaption {
        left: 16px;
        right: 16px;
        bottom: 12px;

        width: auto;

        padding:
            1rem
            1rem
            0.95rem;
    }


    .preschool-create__figure figcaption strong {
        font-size:
            clamp(
                1.55rem,
                7vw,
                2rem
            );
    }

}

/* ==========================================================================
   TH_PRESCHOOL_CREATE_POLISH_V3
   Preschool — lower caption + repair headline line collision
   ========================================================================== */


/* Give the lowered caption enough physical room */

.preschool-create__figure {
    padding-bottom: 2.35rem;
}


/* Move Materials Report farther below the photograph */

.preschool-create__figure figcaption {
    bottom: -1.75rem;

    width:
        clamp(
            220px,
            26vw,
            305px
        );

    padding:
        1.05rem
        1.2rem
        1rem;
}


/* Slightly tighten caption itself */

.preschool-create__figure figcaption span {
    margin-bottom: 0.55rem;
}


.preschool-create__figure figcaption strong {
    font-size:
        clamp(
            1.55rem,
            2.05vw,
            2.15rem
        );

    line-height: 1;
}


/* ==========================================================================
   HEADLINE
   Fix descender collision between "gets" and "floor"
   ========================================================================== */

.preschool-create__copy h2 {
    line-height: 1 !important;

    letter-spacing: -0.055em;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .preschool-create__figure {
        padding-bottom: 0;
    }


    .preschool-create__figure figcaption {
        bottom: 12px;

        width: auto;
    }


    .preschool-create__copy h2 {
        line-height: 0.98 !important;

        letter-spacing: -0.05em;
    }

}

/* ==========================================================================
   TH_PRESCHOOL_DAY_FIX_V2
   Preschool — force Today's Loose Plan editorial schedule
   ========================================================================== */


/* ==========================================================================
   SECTION
   ========================================================================== */

body.page-preschool-care .preschool-day {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    padding:
        clamp(6rem, 9vw, 9rem)
        0 !important;

    margin: 0 !important;

    color: #fffdf8 !important;
    background: #292a2c !important;

    overflow: hidden !important;
}


body.page-preschool-care .preschool-day::before {
    content: "" !important;

    position: absolute !important;

    top: -8rem !important;
    right: -7rem !important;

    width: 24rem !important;
    height: 24rem !important;

    border:
        2px solid
        rgba(244, 207, 99, 0.14) !important;

    border-radius: 50% !important;

    background: transparent !important;

    pointer-events: none !important;
}


body.page-preschool-care .preschool-day::after {
    content: "" !important;

    position: absolute !important;

    left: -8rem !important;
    bottom: -11rem !important;

    width: 25rem !important;
    height: 25rem !important;

    background:
        rgba(77, 114, 216, 0.16) !important;

    border-radius:
        59% 41% 63% 37%
        /
        45% 58% 42% 55% !important;

    transform: rotate(15deg) !important;

    pointer-events: none !important;
}


/* ==========================================================================
   INNER
   ========================================================================== */

body.page-preschool-care .preschool-day__inner {
    position: relative !important;
    z-index: 2 !important;

    display: block !important;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        ) !important;

    max-width: none !important;

    margin:
        0
        auto !important;

    padding: 0 !important;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

body.page-preschool-care .preschool-day__header {
    display: grid !important;

    grid-template-columns:
        minmax(300px, 0.9fr)
        minmax(0, 1.1fr) !important;

    gap:
        clamp(3rem, 7vw, 8rem) !important;

    align-items: end !important;

    width: 100% !important;

    margin:
        0
        0
        clamp(4rem, 7vw, 6rem) !important;

    padding: 0 !important;
}


body.page-preschool-care .preschool-day__header .eyebrow {
    grid-column: 1 / -1 !important;

    display: block !important;

    margin:
        0
        0
        -1rem !important;

    padding: 0 !important;

    color: #f4cf63 !important;

    font-size: 0.76rem !important;
    font-weight: 950 !important;

    letter-spacing: 0.15em !important;

    text-transform: uppercase !important;
}


body.page-preschool-care .preschool-day__header h2 {
    grid-column: 1 !important;

    max-width: 9ch !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fffdf8 !important;

    font-family: var(--font-display) !important;

    font-size:
        clamp(
            3.8rem,
            5.8vw,
            6rem
        ) !important;

    font-weight: 950 !important;

    line-height: 0.9 !important;

    letter-spacing: -0.06em !important;
}


body.page-preschool-care
.preschool-day__header
> p:last-child {
    position: relative !important;

    grid-column: 2 !important;

    max-width: 570px !important;

    margin: 0 !important;

    padding:
        1.8rem
        0
        0 !important;

    color:
        rgba(
            255,
            253,
            248,
            0.72
        ) !important;

    background: transparent !important;

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        ) !important;

    line-height: 1.75 !important;
}


body.page-preschool-care
.preschool-day__header
> p:last-child::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 70px !important;
    height: 7px !important;

    background: #e95c50 !important;

    border-radius: 999px !important;

    transform: rotate(-2deg) !important;
}


/* ==========================================================================
   TIMELINE WRAPPER
   ========================================================================== */

body.page-preschool-care .preschool-day__timeline {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border-top:
        1px solid
        rgba(255, 253, 248, 0.15) !important;
}


/* ==========================================================================
   STANDARD ROWS
   ========================================================================== */

body.page-preschool-care .preschool-day__stop {
    position: relative !important;

    min-height: 145px !important;

    display: grid !important;

    grid-template-columns:
        135px
        minmax(190px, 0.43fr)
        minmax(0, 1fr) !important;

    gap:
        clamp(
            2rem,
            5vw,
            5rem
        ) !important;

    align-items: center !important;

    width: 100% !important;

    margin: 0 !important;

    padding:
        2.15rem
        1.25rem !important;

    border: 0 !important;

    border-bottom:
        1px solid
        rgba(255, 253, 248, 0.15) !important;

    color: #fffdf8 !important;

    background: transparent !important;

    box-sizing: border-box !important;
}


/* Alternating very subtle notebook washes */

body.page-preschool-care
.preschool-day__stop:nth-child(2),

body.page-preschool-care
.preschool-day__stop:nth-child(5) {
    background:
        rgba(244, 207, 99, 0.05) !important;
}


body.page-preschool-care
.preschool-day__stop:nth-child(4),

body.page-preschool-care
.preschool-day__stop:nth-child(6) {
    background:
        rgba(130, 183, 132, 0.045) !important;
}


/* ==========================================================================
   BIG NUMBERS
   ========================================================================== */

body.page-preschool-care
.preschool-day__stop
> span {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color:
        rgba(
            255,
            253,
            248,
            0.10
        ) !important;

    font-family: var(--font-display) !important;

    font-size:
        clamp(
            4.6rem,
            6.5vw,
            6.5rem
        ) !important;

    font-weight: 950 !important;

    line-height: 0.75 !important;

    letter-spacing: -0.07em !important;
}


/* ==========================================================================
   ROW TITLES
   ========================================================================== */

body.page-preschool-care
.preschool-day__stop
> strong {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: var(--font-display) !important;

    font-size:
        clamp(
            2rem,
            2.8vw,
            2.8rem
        ) !important;

    font-weight: 950 !important;

    line-height: 0.95 !important;

    letter-spacing: -0.045em !important;
}


/* Row colors */

body.page-preschool-care
.preschool-day__stop:nth-child(1)
> strong {
    color: #91c894 !important;
}


body.page-preschool-care
.preschool-day__stop:nth-child(2)
> strong {
    color: #f4cf63 !important;
}


body.page-preschool-care
.preschool-day__stop:nth-child(3)
> strong {
    color: #8ca7f4 !important;
}


body.page-preschool-care
.preschool-day__stop:nth-child(4)
> strong {
    color: #e95c50 !important;
}


body.page-preschool-care
.preschool-day__stop:nth-child(5)
> strong {
    color: #f4cf63 !important;
}


body.page-preschool-care
.preschool-day__stop:nth-child(6)
> strong {
    color: #a58cc9 !important;
}


/* Little hand-drawn swipe */

body.page-preschool-care
.preschool-day__stop
> strong::after {
    content: "" !important;

    display: block !important;

    width: 52px !important;
    height: 7px !important;

    margin-top: 0.7rem !important;

    background: currentColor !important;

    border-radius: 999px !important;

    opacity: 0.9 !important;

    transform: rotate(-2deg) !important;
}


/* ==========================================================================
   ROW DESCRIPTIONS
   ========================================================================== */

body.page-preschool-care
.preschool-day__stop
> p {
    display: block !important;

    max-width: 590px !important;

    margin: 0 !important;
    padding: 0 !important;

    color:
        rgba(
            255,
            253,
            248,
            0.69
        ) !important;

    background: transparent !important;

    font-size: 0.98rem !important;

    line-height: 1.7 !important;
}


/* ==========================================================================
   FINAL 07 ROW
   ========================================================================== */

body.page-preschool-care
.preschool-day__stop--final {
    min-height: 180px !important;

    margin:
        1.6rem
        0
        0 !important;

    padding:
        2.8rem
        2rem !important;

    color: #292a2c !important;

    background: #f4cf63 !important;

    border: 0 !important;

    transform: rotate(-0.55deg) !important;

    box-shadow:
        0
        18px
        42px
        rgba(0, 0, 0, 0.12) !important;
}


body.page-preschool-care
.preschool-day__stop--final
> span {
    color:
        rgba(
            41,
            42,
            44,
            0.10
        ) !important;
}


body.page-preschool-care
.preschool-day__stop--final
> strong {
    color: #292a2c !important;

    font-size:
        clamp(
            2.3rem,
            3.3vw,
            3.4rem
        ) !important;
}


body.page-preschool-care
.preschool-day__stop--final
> strong::after {
    background: #e95c50 !important;
}


body.page-preschool-care
.preschool-day__stop--final
> p {
    color:
        rgba(
            41,
            42,
            44,
            0.70
        ) !important;

    font-weight: 750 !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-preschool-care
    .preschool-day__header {
        grid-template-columns: 1fr !important;

        gap: 2rem !important;
    }


    body.page-preschool-care
    .preschool-day__header
    .eyebrow {
        grid-column: 1 !important;

        margin-bottom: 0 !important;
    }


    body.page-preschool-care
    .preschool-day__header h2 {
        grid-column: 1 !important;

        max-width: 12ch !important;
    }


    body.page-preschool-care
    .preschool-day__header
    > p:last-child {
        grid-column: 1 !important;
    }


    body.page-preschool-care
    .preschool-day__stop {
        grid-template-columns:
            100px
            minmax(170px, 0.42fr)
            minmax(0, 1fr) !important;

        gap: 2rem !important;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-preschool-care
    .preschool-day {
        padding:
            5rem
            0 !important;
    }


    body.page-preschool-care
    .preschool-day__inner {
        width:
            calc(100% - 2rem) !important;
    }


    body.page-preschool-care
    .preschool-day__header {
        margin-bottom: 3.5rem !important;
    }


    body.page-preschool-care
    .preschool-day__header h2 {
        max-width: 100% !important;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            ) !important;
    }


    body.page-preschool-care
    .preschool-day__stop {
        min-height: 0 !important;

        grid-template-columns: 1fr !important;

        gap: 0.7rem !important;

        padding:
            2rem
            0.25rem !important;
    }


    body.page-preschool-care
    .preschool-day__stop
    > span {
        font-size: 4rem !important;
    }


    body.page-preschool-care
    .preschool-day__stop
    > strong {
        font-size: 2.3rem !important;
    }


    body.page-preschool-care
    .preschool-day__stop
    > p {
        max-width: 100% !important;
    }


    body.page-preschool-care
    .preschool-day__stop--final {
        margin-top: 1rem !important;

        padding:
            2.2rem
            1.4rem !important;

        transform: rotate(-0.3deg) !important;
    }


    body.page-preschool-care
    .preschool-day__stop--final
    > strong {
        font-size:
            clamp(
                2.4rem,
                10vw,
                3.2rem
            ) !important;
    }

}

/* ==========================================================================
   TH_PRESCHOOL_IMAGINATION_V1
   Preschool — Imagination Department / cardboard box
   ========================================================================== */

body.page-preschool-care .preschool-imagination {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #edf3ff 0%,
            #f7f9ff 100%
        );

    overflow: hidden;
}


/* Giant ghost cardboard label */

body.page-preschool-care .preschool-imagination::before {
    content: "BOX";

    position: absolute;

    left: -1rem;
    bottom: -1.5rem;

    color:
        rgba(77, 114, 216, 0.055);

    font-family: var(--font-display);

    font-size:
        clamp(
            9rem,
            19vw,
            19rem
        );

    font-weight: 950;
    line-height: 0.72;

    letter-spacing: -0.08em;

    pointer-events: none;
}


/* Decorative outline */

body.page-preschool-care .preschool-imagination::after {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 22rem;
    height: 22rem;

    border:
        2px solid
        rgba(233, 92, 80, 0.15);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   INNER LAYOUT
   ========================================================================== */

body.page-preschool-care .preschool-imagination__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(300px, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: start;
}


/* ==========================================================================
   HEADLINE SIDE
   ========================================================================== */

body.page-preschool-care .preschool-imagination__headline {
    position: sticky;

    top: 7rem;
}


body.page-preschool-care
.preschool-imagination__headline
.eyebrow {
    margin:
        0
        0
        1.5rem;

    color: var(--color-blue);
}


body.page-preschool-care
.preschool-imagination__headline h2 {
    max-width: 9ch;

    margin: 0;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.7rem,
            5.7vw,
            5.8rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.06em;
}


body.page-preschool-care
.preschool-imagination__headline h2::after {
    content: "";

    display: block;

    width: 105px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


/* ==========================================================================
   RIGHT COPY
   ========================================================================== */

body.page-preschool-care .preschool-imagination__copy {
    max-width: 650px;
}


body.page-preschool-care
.preschool-imagination__copy
> p {
    max-width: 610px;

    margin:
        0
        0
        clamp(3rem, 5vw, 4.5rem);

    color:
        rgba(41, 42, 44, 0.7);

    font-size:
        clamp(
            1.05rem,
            1.35vw,
            1.16rem
        );

    line-height: 1.78;
}


/* ==========================================================================
   2 × 2 FIELD NOTES
   ========================================================================== */

body.page-preschool-care .preschool-imagination__facts {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        rgba(41, 42, 44, 0.16);
}


body.page-preschool-care
.preschool-imagination__facts
> div {
    position: relative;

    min-height: 195px;

    padding:
        2.2rem
        1.7rem
        2.3rem;

    border-bottom:
        1px solid
        rgba(41, 42, 44, 0.16);
}


body.page-preschool-care
.preschool-imagination__facts
> div:nth-child(odd) {
    border-right:
        1px solid
        rgba(41, 42, 44, 0.16);
}


/* Marker stripe */

body.page-preschool-care
.preschool-imagination__facts
> div::before {
    content: "";

    position: absolute;

    top: 0;
    left: 1.7rem;

    width: 54px;
    height: 7px;

    background: var(--color-blue);

    transform:
        translateY(-4px)
        rotate(-2deg);
}


body.page-preschool-care
.preschool-imagination__facts
> div:nth-child(2)::before {
    background: var(--color-red);
}


body.page-preschool-care
.preschool-imagination__facts
> div:nth-child(3)::before {
    background: #507d52;
}


body.page-preschool-care
.preschool-imagination__facts
> div:nth-child(4)::before {
    background: var(--color-butter);
}


/* ==========================================================================
   FACT TITLES
   ========================================================================== */

body.page-preschool-care
.preschool-imagination__facts
strong {
    display: block;

    margin:
        0
        0
        0.9rem;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.9rem,
            2.8vw,
            2.8rem
        );

    font-weight: 950;

    line-height: 0.95;

    letter-spacing: -0.045em;
}


body.page-preschool-care
.preschool-imagination__facts
> div:nth-child(1)
strong {
    color: var(--color-blue);
}


body.page-preschool-care
.preschool-imagination__facts
> div:nth-child(2)
strong {
    color: var(--color-red);
}


body.page-preschool-care
.preschool-imagination__facts
> div:nth-child(3)
strong {
    color: #507d52;
}


body.page-preschool-care
.preschool-imagination__facts
> div:nth-child(4)
strong {
    color: #9b7922;
}


/* ==========================================================================
   FACT COPY
   ========================================================================== */

body.page-preschool-care
.preschool-imagination__facts
span {
    display: block;

    max-width: 270px;

    color:
        rgba(41, 42, 44, 0.65);

    font-size: 0.96rem;

    line-height: 1.65;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-preschool-care
    .preschool-imagination__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    body.page-preschool-care
    .preschool-imagination__headline {
        position: relative;

        top: auto;

        max-width: 720px;
    }


    body.page-preschool-care
    .preschool-imagination__headline h2 {
        max-width: 12ch;
    }


    body.page-preschool-care
    .preschool-imagination__copy {
        max-width: 720px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-preschool-care .preschool-imagination {
        padding:
            5rem
            0;
    }


    body.page-preschool-care
    .preschool-imagination__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-preschool-care
    .preschool-imagination__headline h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-preschool-care
    .preschool-imagination__facts {
        grid-template-columns: 1fr;
    }


    body.page-preschool-care
    .preschool-imagination__facts
    > div {
        min-height: 0;

        padding:
            2rem
            1rem
            2.2rem;

        border-right: 0 !important;
    }


    body.page-preschool-care
    .preschool-imagination__facts
    > div::before {
        left: 1rem;
    }


    body.page-preschool-care
    .preschool-imagination__facts
    span {
        max-width: 100%;
    }


    body.page-preschool-care
    .preschool-imagination::before {
        font-size: 9rem;
    }

}

/* ==========================================================================
   TH_PRESCHOOL_SOCIAL_V1
   Preschool — Conflict Report / friendship takes practice
   ========================================================================== */

body.page-preschool-care .preschool-social {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fff2cf 0%,
            #fff8e8 100%
        );

    overflow: hidden;
}


/* Blue organic shape */

body.page-preschool-care .preschool-social::before {
    content: "";

    position: absolute;

    top: -9rem;
    left: -8rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(77, 114, 216, 0.13);

    border-radius:
        58% 42% 63% 37%
        /
        43% 59% 41% 57%;

    transform: rotate(-15deg);

    pointer-events: none;
}


/* Outline circle */

body.page-preschool-care .preschool-social::after {
    content: "";

    position: absolute;

    right: -7rem;
    bottom: -8rem;

    width: 22rem;
    height: 22rem;

    border:
        2px solid
        rgba(233, 92, 80, 0.15);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-preschool-care .preschool-social__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.86fr)
        minmax(0, 1.14fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   CONFLICT NOTE
   ========================================================================== */

body.page-preschool-care .preschool-social__note {
    position: relative;

    min-height: 390px;

    padding:
        clamp(2rem, 4vw, 3rem);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    color: #fffdf8;

    background: var(--color-red);

    box-shadow:
        0
        24px
        55px
        rgba(41, 42, 44, 0.18);

    transform: rotate(-2deg);
}


/* Tape */

body.page-preschool-care .preschool-social__note::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 50%;

    width: 94px;
    height: 25px;

    background:
        rgba(255, 253, 248, 0.65);

    transform:
        translateX(-50%)
        rotate(2deg);
}


/* Marker swipe */

body.page-preschool-care .preschool-social__note::after {
    content: "";

    position: absolute;

    right: 2rem;
    bottom: 2rem;

    width: 72px;
    height: 12px;

    border-top:
        7px solid
        var(--color-butter);

    border-radius: 50%;

    transform: rotate(-7deg);
}


/* ==========================================================================
   NOTE TYPE
   ========================================================================== */

body.page-preschool-care .preschool-social__note span,
body.page-preschool-care .preschool-social__note strong,
body.page-preschool-care .preschool-social__note small {
    display: block;
}


body.page-preschool-care .preschool-social__note span {
    color: var(--color-butter);

    font-size: 0.72rem;
    font-weight: 950;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


body.page-preschool-care .preschool-social__note strong {
    margin:
        auto
        0;

    color: #fffdf8;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            3.6rem,
            5.7vw,
            5.6rem
        );

    font-weight: 900;

    line-height: 0.98;

    letter-spacing: -0.04em;

    transform: rotate(-2deg);
}


body.page-preschool-care .preschool-social__note small {
    max-width: 235px;

    color:
        rgba(255, 253, 248, 0.74);

    font-size: 0.82rem;
    font-weight: 750;

    line-height: 1.45;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-preschool-care .preschool-social__copy {
    max-width: 630px;
}


body.page-preschool-care
.preschool-social__copy
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-preschool-care
.preschool-social__copy h2 {
    max-width: 10ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.7rem,
            5.5vw,
            5.7rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-preschool-care
.preschool-social__copy h2::after {
    content: "";

    display: block;

    width: 95px;
    height: 12px;

    margin-top: 1.45rem;

    border-top:
        8px solid
        #507d52;

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-preschool-care
.preschool-social__copy
> p:last-child {
    max-width: 590px;

    margin: 0;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.78;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-preschool-care
    .preschool-social__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    body.page-preschool-care
    .preschool-social__note {
        width:
            min(
                520px,
                92%
            );

        min-height: 350px;
    }


    body.page-preschool-care
    .preschool-social__copy {
        max-width: 720px;
    }


    body.page-preschool-care
    .preschool-social__copy h2 {
        max-width: 12ch;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-preschool-care .preschool-social {
        padding:
            5rem
            0;
    }


    body.page-preschool-care
    .preschool-social__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-preschool-care
    .preschool-social__note {
        width:
            calc(100% - 0.5rem);

        min-height: 315px;

        padding:
            2rem
            1.5rem;
    }


    body.page-preschool-care
    .preschool-social__note strong {
        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-preschool-care
    .preschool-social__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }

}

/* ==========================================================================
   TH_PRESCHOOL_PARENTS_V1
   Preschool — Meanwhile at Pickup / mystery shirt
   ========================================================================== */

body.page-preschool-care .preschool-parents {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fffdf8 0%,
            #fff7e8 100%
        );

    overflow: hidden;
}


/* Decorative blue circle */

body.page-preschool-care .preschool-parents::before {
    content: "";

    position: absolute;

    top: -8rem;
    left: -7rem;

    width: 22rem;
    height: 22rem;

    border:
        2px solid
        rgba(77, 114, 216, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


/* Soft butter blob */

body.page-preschool-care .preschool-parents::after {
    content: "";

    position: absolute;

    right: -7rem;
    bottom: -9rem;

    width: 22rem;
    height: 22rem;

    background:
        rgba(244, 207, 99, 0.25);

    border-radius:
        61% 39% 54% 46%
        /
        43% 59% 41% 57%;

    transform: rotate(-16deg);

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-preschool-care .preschool-parents__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   LEFT QUESTION
   ========================================================================== */

body.page-preschool-care
.preschool-parents__inner
> div:first-child {
    max-width: 560px;
}


body.page-preschool-care
.preschool-parents__inner
> div:first-child
.eyebrow {
    margin:
        0
        0
        1.5rem;

    color: var(--color-blue);
}


body.page-preschool-care
.preschool-parents__inner
> div:first-child
h2 {
    max-width: 9ch;

    margin: 0;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.7rem,
            5.7vw,
            5.9rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-preschool-care
.preschool-parents__inner
> div:first-child
h2::after {
    content: "";

    display: block;

    width: 105px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


/* ==========================================================================
   RIGHT COPY
   ========================================================================== */

body.page-preschool-care .preschool-parents__copy {
    max-width: 620px;
}


body.page-preschool-care
.preschool-parents__copy
> p {
    max-width: 590px;

    margin:
        0
        0
        2.6rem;

    color:
        rgba(41, 42, 44, 0.69);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.76;
}


/* ==========================================================================
   CHILD REPORT
   ========================================================================== */

body.page-preschool-care
.preschool-parents__copy
blockquote {
    position: relative;

    margin: 0;

    padding:
        clamp(2.5rem, 4vw, 3.5rem);

    color: #fffdf8;

    background: var(--color-blue);

    box-shadow:
        0
        22px
        48px
        rgba(41, 42, 44, 0.16);

    transform: rotate(1.3deg);
}


/* Tape */

body.page-preschool-care
.preschool-parents__copy
blockquote::before {
    content: "";

    position: absolute;

    top: -12px;
    left: 50%;

    width: 90px;
    height: 24px;

    background:
        rgba(244, 207, 99, 0.72);

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* Giant faded question mark */

body.page-preschool-care
.preschool-parents__copy
blockquote::after {
    content: "?";

    position: absolute;

    top: 0.3rem;
    right: 1.5rem;

    color:
        rgba(255, 253, 248, 0.13);

    font-family: var(--font-display);

    font-size: 7rem;
    font-weight: 950;

    line-height: 1;

    transform: rotate(8deg);

    pointer-events: none;
}


/* ==========================================================================
   ANSWER
   ========================================================================== */

body.page-preschool-care
.preschool-parents__copy
blockquote p {
    position: relative;
    z-index: 2;

    margin:
        0
        0
        1.7rem;

    color: #fffdf8;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            3.5rem,
            5.7vw,
            5.7rem
        );

    font-weight: 900;

    line-height: 0.98;

    letter-spacing: -0.04em;

    transform: rotate(-2deg);
}


/* ==========================================================================
   FOOTER / INVESTIGATION STATUS
   ========================================================================== */

body.page-preschool-care
.preschool-parents__copy
blockquote footer {
    position: relative;
    z-index: 2;

    padding-top: 1rem;

    border-top:
        5px solid
        var(--color-butter);

    color:
        rgba(255, 253, 248, 0.72);

    font-size: 0.86rem;

    font-weight: 850;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-preschool-care
    .preschool-parents__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    body.page-preschool-care
    .preschool-parents__inner
    > div:first-child {
        max-width: 720px;
    }


    body.page-preschool-care
    .preschool-parents__inner
    > div:first-child
    h2 {
        max-width: 12ch;
    }


    body.page-preschool-care
    .preschool-parents__copy {
        max-width: 720px;
    }


    body.page-preschool-care
    .preschool-parents__copy
    blockquote {
        width:
            min(
                560px,
                94%
            );

        margin-left: auto;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-preschool-care .preschool-parents {
        padding:
            5rem
            0;
    }


    body.page-preschool-care
    .preschool-parents__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-preschool-care
    .preschool-parents__inner
    > div:first-child
    h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                13vw,
                4.3rem
            );
    }


    body.page-preschool-care
    .preschool-parents__copy
    blockquote {
        width: 100%;

        padding:
            2.3rem
            1.5rem;

        box-sizing: border-box;
    }


    body.page-preschool-care
    .preschool-parents__copy
    blockquote p {
        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }

}

/* ==========================================================================
   TH_PRESCHOOL_DEMO_NOTE_V1
   Preschool — compact template disclaimer strip
   ========================================================================== */

body.page-preschool-care .preschool-demo {
    position: relative;

    width: 100%;

    padding:
        clamp(2.2rem, 4vw, 3.2rem)
        0;

    color: #fffdf8;
    background: #292a2c;

    overflow: hidden;
}


/* Giant ghost label */

body.page-preschool-care .preschool-demo::after {
    content: "PRESCHOOL DEMO";

    position: absolute;

    top: 50%;
    right:
        clamp(
            1rem,
            4vw,
            4rem
        );

    color:
        rgba(
            255,
            253,
            248,
            0.04
        );

    font-family: var(--font-display);

    font-size:
        clamp(
            3.5rem,
            7vw,
            7rem
        );

    font-weight: 950;
    line-height: 1;

    letter-spacing: -0.07em;

    white-space: nowrap;

    transform:
        translateY(-50%)
        rotate(-3deg);

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

body.page-preschool-care .preschool-demo__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;
}


/* ==========================================================================
   NOTE COPY
   ========================================================================== */

body.page-preschool-care
.preschool-demo__inner
p {
    max-width: 1030px;

    margin: 0;

    padding-left: 1.4rem;

    border-left:
        6px solid
        var(--color-blue);

    color:
        rgba(
            255,
            253,
            248,
            0.68
        );

    font-size: 0.78rem;
    line-height: 1.72;
}


body.page-preschool-care
.preschool-demo__inner
strong {
    color: var(--color-butter);

    font-weight: 900;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-preschool-care .preschool-demo {
        padding:
            2.4rem
            0;
    }


    body.page-preschool-care
    .preschool-demo__inner {
        width:
            calc(100% - 2rem);
    }


    body.page-preschool-care
    .preschool-demo__inner
    p {
        padding-left: 1rem;

        border-left-width: 5px;

        font-size: 0.73rem;
    }


    body.page-preschool-care
    .preschool-demo::after {
        right: -5rem;

        font-size: 4.3rem;
    }

}

/* ==========================================================================
   TH_PRESCHOOL_CTA_V1
   Preschool — final Observe the Research CTA
   ========================================================================== */

body.page-preschool-care .preschool-cta {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: #fffdf8;
    background: var(--color-blue);

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-preschool-care .preschool-cta::before {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 24rem;
    height: 24rem;

    border:
        2px solid
        rgba(255, 253, 248, 0.16);

    border-radius: 50%;

    pointer-events: none;
}


body.page-preschool-care .preschool-cta::after {
    content: "";

    position: absolute;

    left: -8rem;
    bottom: -10rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(244, 207, 99, 0.24);

    border-radius:
        61% 39% 52% 48%
        /
        43% 59% 41% 57%;

    transform: rotate(17deg);

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-preschool-care .preschool-cta__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(320px, 0.68fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-preschool-care .preschool-cta__copy {
    max-width: 720px;
}


body.page-preschool-care
.preschool-cta__copy
.eyebrow {
    margin:
        0
        0
        1.5rem;

    color: var(--color-butter);
}


body.page-preschool-care
.preschool-cta__copy h2 {
    max-width: 10ch;

    margin:
        0
        0
        1.8rem;

    color: #fffdf8;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.8vw,
            6rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.06em;
}


body.page-preschool-care
.preschool-cta__copy h2::after {
    content: "";

    display: block;

    width: 105px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-preschool-care
.preschool-cta__copy
> p:last-child {
    max-width: 610px;

    margin: 0;

    color:
        rgba(255, 253, 248, 0.74);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.76;
}


/* ==========================================================================
   ACTION PANEL
   ========================================================================== */

body.page-preschool-care .preschool-cta__action {
    position: relative;

    min-height: 260px;

    padding:
        clamp(2.3rem, 4vw, 3.2rem);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    gap: 1.35rem;

    color: var(--color-graphite);

    background: #fffdf8;

    box-shadow:
        0
        24px
        55px
        rgba(41, 42, 44, 0.20);

    transform: rotate(2deg);
}


/* Tape */

body.page-preschool-care
.preschool-cta__action::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 50%;

    width: 94px;
    height: 25px;

    background:
        rgba(244, 207, 99, 0.76);

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* Red scribble */

body.page-preschool-care
.preschool-cta__action::after {
    content: "";

    position: absolute;

    right: 1.6rem;
    bottom: 1.5rem;

    width: 67px;
    height: 12px;

    border-top:
        7px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-7deg);

    pointer-events: none;
}


/* ==========================================================================
   PRIMARY BUTTON
   ========================================================================== */

body.page-preschool-care
.preschool-cta__action
.button--primary {
    position: relative;
    z-index: 2;

    min-height: 54px;

    padding-inline: 1.7rem;

    color: #fffdf8 !important;
    background: var(--color-graphite) !important;

    box-shadow: none !important;
}


body.page-preschool-care
.preschool-cta__action
.button--primary:hover {
    color: var(--color-graphite) !important;
    background: var(--color-butter) !important;

    box-shadow:
        0
        12px
        28px
        rgba(41, 42, 44, 0.16) !important;
}


/* ==========================================================================
   BACK LINK
   ========================================================================== */

body.page-preschool-care
.preschool-cta__action
.text-link {
    position: relative;
    z-index: 2;

    color: var(--color-graphite) !important;

    font-weight: 900 !important;
}


body.page-preschool-care
.preschool-cta__action
.text-link span {
    color: var(--color-red) !important;
}


body.page-preschool-care
.preschool-cta__action
.text-link:hover {
    color: var(--color-blue) !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-preschool-care
    .preschool-cta__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    body.page-preschool-care
    .preschool-cta__copy {
        max-width: 760px;
    }


    body.page-preschool-care
    .preschool-cta__copy h2 {
        max-width: 12ch;
    }


    body.page-preschool-care
    .preschool-cta__action {
        width:
            min(
                530px,
                94%
            );

        min-height: 230px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-preschool-care .preschool-cta {
        padding:
            5rem
            0;
    }


    body.page-preschool-care
    .preschool-cta__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-preschool-care
    .preschool-cta__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-preschool-care
    .preschool-cta__action {
        width: 100%;

        min-height: 220px;

        padding:
            2.3rem
            1.5rem;

        box-sizing: border-box;

        transform: rotate(1deg);
    }


    body.page-preschool-care
    .preschool-cta__action
    .button--primary {
        width: 100%;

        box-sizing: border-box;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    body.page-preschool-care
    .preschool-cta__action {
        transform: none;
    }

}

/* ==========================================================================
   TH_CENTER_HERO_V1
   Our Center — architectural trust-focused hero
   ========================================================================== */

body.page-our-center main {
    overflow: hidden;
}


/* ==========================================================================
   HERO
   ========================================================================== */

body.page-our-center .center-hero {
    position: relative;

    width: 100%;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fff7e8 0%,
            #fffdf8 100%
        );

    overflow: hidden;
}


/* Large soft outline */

body.page-our-center .center-hero::before {
    content: "";

    position: absolute;

    top: 3rem;
    left: -8rem;

    width: 23rem;
    height: 23rem;

    border:
        2px solid
        rgba(77, 114, 216, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


/* Warm organic shape */

body.page-our-center .center-hero::after {
    content: "";

    position: absolute;

    right: -9rem;
    bottom: -12rem;

    width: 28rem;
    height: 28rem;

    background:
        rgba(244, 207, 99, 0.28);

    border-radius:
        59% 41% 62% 38%
        /
        44% 58% 42% 56%;

    transform: rotate(16deg);

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-our-center .center-hero__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1220px,
            calc(100% - 3rem)
        );

    min-height: 720px;

    margin:
        0
        auto;

    padding:
        clamp(5rem, 8vw, 8rem)
        0
        clamp(5.5rem, 9vw, 8.5rem);

    display: grid;

    grid-template-columns:
        minmax(340px, 0.82fr)
        minmax(0, 1.18fr);

    gap:
        clamp(3rem, 6vw, 7rem);

    align-items: center;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-our-center .center-hero__content {
    position: relative;
    z-index: 4;

    max-width: 560px;
}


body.page-our-center
.center-hero__content
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-our-center .center-hero__title {
    max-width: 10ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.9rem,
            5.8vw,
            5.9rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


body.page-our-center
.center-hero__title
span {
    display: block;

    margin-top: 0.35rem;

    color: #507d52;
}


body.page-our-center
.center-hero__title
span::after {
    content: "";

    display: block;

    width: 112px;
    height: 12px;

    margin-top: 1.35rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-our-center .center-hero__intro {
    max-width: 520px;

    margin:
        0
        0
        2rem;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.76;
}


body.page-our-center .center-hero__actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 1.4rem;
}


body.page-our-center
.center-hero__actions
.text-link {
    color: var(--color-graphite);

    font-weight: 900;
}


body.page-our-center
.center-hero__actions
.text-link span {
    color: var(--color-red);
}


/* ==========================================================================
   VISUAL
   ========================================================================== */

body.page-our-center .center-hero__visual {
    position: relative;

    min-width: 0;
    min-height: 590px;
}


/* Main architectural photo */

body.page-our-center .center-hero__photo {
    position: absolute;

    inset:
        1rem
        0
        1.5rem
        0;

    margin: 0;

    overflow: hidden;

    border-radius:
        42px
        82px
        48px
        94px;

    background: #e8e3d7;

    box-shadow:
        0
        28px
        60px
        rgba(41, 42, 44, 0.14);

    transform: rotate(0.7deg);
}


body.page-our-center
.center-hero__photo::after {
    content: "";

    position: absolute;

    inset: 0;

    border:
        1px solid
        rgba(41, 42, 44, 0.08);

    border-radius: inherit;

    pointer-events: none;
}


body.page-our-center
.center-hero__photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: 58% center;
}


/* ==========================================================================
   DECORATIVE SHAPES
   ========================================================================== */

body.page-our-center .center-hero__shape {
    position: absolute;

    z-index: 5;

    pointer-events: none;
}


body.page-our-center .center-hero__shape--yellow {
    top: -0.5rem;
    right: 1.5rem;

    width: 118px;
    height: 118px;

    background: var(--color-butter);

    border-radius:
        60% 40% 55% 45%
        /
        42% 58% 44% 56%;

    transform: rotate(13deg);
}


body.page-our-center .center-hero__shape--blue {
    left: -1.5rem;
    bottom: 3rem;

    width: 92px;
    height: 92px;

    background: var(--color-blue);

    border-radius:
        46% 54% 61% 39%
        /
        60% 40% 53% 47%;

    transform: rotate(-17deg);
}


/* ==========================================================================
   STATUS NOTE
   ========================================================================== */

body.page-our-center .center-hero__note {
    position: absolute;

    z-index: 6;

    right: 1rem;
    bottom: -0.5rem;

    width: 235px;

    padding:
        1.35rem
        1.4rem
        1.45rem;

    color: var(--color-graphite);

    background: #fffdf8;

    box-shadow:
        0
        20px
        42px
        rgba(41, 42, 44, 0.18);

    transform: rotate(-2.5deg);
}


body.page-our-center
.center-hero__note::before {
    content: "";

    position: absolute;

    top: -12px;
    left: 50%;

    width: 84px;
    height: 24px;

    background:
        rgba(244, 207, 99, 0.74);

    transform:
        translateX(-50%)
        rotate(3deg);
}


body.page-our-center
.center-hero__note span,
body.page-our-center
.center-hero__note strong,
body.page-our-center
.center-hero__note small {
    display: block;
}


body.page-our-center
.center-hero__note span {
    margin-bottom: 0.45rem;

    color: var(--color-blue);

    font-size: 0.67rem;
    font-weight: 950;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


body.page-our-center
.center-hero__note strong {
    margin-bottom: 0.4rem;

    color: var(--color-graphite);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size: 2rem;
    font-weight: 900;

    line-height: 0.98;

    letter-spacing: -0.04em;
}


body.page-our-center
.center-hero__note small {
    color:
        rgba(41, 42, 44, 0.62);

    font-size: 0.77rem;
    font-weight: 750;

    line-height: 1.4;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1000px) {

    body.page-our-center
    .center-hero__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    body.page-our-center
    .center-hero__content {
        max-width: 760px;
    }


    body.page-our-center
    .center-hero__title {
        max-width: 12ch;
    }


    body.page-our-center
    .center-hero__visual {
        width: min(100%, 840px);

        min-height: 600px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-our-center
    .center-hero__inner {
        width:
            calc(100% - 2rem);

        min-height: 0;

        padding:
            4rem
            0
            5rem;

        gap: 3.5rem;
    }


    body.page-our-center
    .center-hero__title {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-our-center
    .center-hero__visual {
        min-height: 470px;
    }


    body.page-our-center
    .center-hero__photo {
        inset:
            0
            0
            1rem
            0;

        border-radius:
            30px
            54px
            32px
            58px;
    }


    body.page-our-center
    .center-hero__photo img {
        object-position:
            60%
            center;
    }


    body.page-our-center
    .center-hero__shape--yellow {
        top: -1rem;
        right: 0;

        width: 82px;
        height: 82px;
    }


    body.page-our-center
    .center-hero__shape--blue {
        left: -0.8rem;

        width: 68px;
        height: 68px;
    }


    body.page-our-center
    .center-hero__note {
        right: 0.5rem;
        bottom: -1rem;

        width: 190px;

        padding:
            1.1rem
            1.05rem
            1.2rem;
    }


    body.page-our-center
    .center-hero__note strong {
        font-size: 1.6rem;
    }

}

/* ==========================================================================
   TH_CENTER_PHILOSOPHY_V1
   Our Center — The General Idea / childhood is not a waiting room
   ========================================================================== */

body.page-our-center .center-philosophy {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fffdf8 0%,
            #fff8ed 100%
        );

    overflow: hidden;
}


/* Soft green outline */

body.page-our-center .center-philosophy::before {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 23rem;
    height: 23rem;

    border:
        2px solid
        rgba(130, 183, 132, 0.18);

    border-radius: 50%;

    pointer-events: none;
}


/* Butter organic shape */

body.page-our-center .center-philosophy::after {
    content: "";

    position: absolute;

    left: -8rem;
    bottom: -10rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(244, 207, 99, 0.23);

    border-radius:
        58% 42% 63% 37%
        /
        43% 59% 41% 57%;

    transform: rotate(14deg);

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

body.page-our-center .center-philosophy__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;
}


body.page-our-center
.center-philosophy__inner
> .eyebrow {
    margin:
        0
        0
        clamp(3rem, 5vw, 4.5rem);

    color: var(--color-blue);
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-our-center .center-philosophy__layout {
    display: grid;

    grid-template-columns:
        minmax(320px, 0.85fr)
        minmax(0, 1.15fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   LARGE STATEMENT
   ========================================================================== */

body.page-our-center .center-philosophy__statement {
    position: relative;

    width: fit-content;

    max-width: 100%;
}


body.page-our-center
.center-philosophy__statement span,
body.page-our-center
.center-philosophy__statement strong {
    display: block;
}


body.page-our-center
.center-philosophy__statement span {
    margin-bottom: 0.1rem;

    color: var(--color-red);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            2.8rem,
            5vw,
            4.8rem
        );

    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -0.045em;

    transform: rotate(-3deg);
}


body.page-our-center
.center-philosophy__statement strong {
    color: #507d52;

    font-family: var(--font-display);

    font-size:
        clamp(
            5rem,
            9vw,
            8.8rem
        );

    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -0.07em;
}


/* Butter underline */

body.page-our-center
.center-philosophy__statement::after {
    content: "";

    position: absolute;

    left: 20%;
    bottom: -1.5rem;

    width: 78%;
    height: 14px;

    border-top:
        9px solid
        var(--color-butter);

    border-radius: 50%;

    transform: rotate(-2deg);
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-our-center .center-philosophy__copy {
    max-width: 640px;
}


body.page-our-center
.center-philosophy__copy::before {
    content: "";

    display: block;

    width: 72px;
    height: 8px;

    margin-bottom: 1.8rem;

    background: var(--color-red);

    border-radius: 999px;

    transform: rotate(-2deg);
}


body.page-our-center
.center-philosophy__copy h2 {
    max-width: 620px;

    margin:
        0
        0
        2rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.5rem,
            5.2vw,
            5.4rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-our-center
.center-philosophy__copy p {
    max-width: 590px;

    margin:
        0
        0
        1.35rem;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.78;
}


body.page-our-center
.center-philosophy__copy p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-our-center
    .center-philosophy__layout {
        grid-template-columns: 1fr;

        gap: 5rem;
    }


    body.page-our-center
    .center-philosophy__statement strong {
        font-size:
            clamp(
                5rem,
                15vw,
                8rem
            );
    }


    body.page-our-center
    .center-philosophy__copy {
        max-width: 720px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-our-center .center-philosophy {
        padding:
            5rem
            0;
    }


    body.page-our-center
    .center-philosophy__inner {
        width:
            calc(100% - 2rem);
    }


    body.page-our-center
    .center-philosophy__layout {
        gap: 4rem;
    }


    body.page-our-center
    .center-philosophy__statement span {
        font-size:
            clamp(
                2.4rem,
                11vw,
                3.4rem
            );
    }


    body.page-our-center
    .center-philosophy__statement strong {
        max-width: 100%;

        font-size:
            clamp(
                4rem,
                18vw,
                6rem
            );
    }


    body.page-our-center
    .center-philosophy__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }

}

/* ==========================================================================
   TH_CENTER_SPACES_V1
   Our Center — The Rooms Matter
   ========================================================================== */

body.page-our-center .center-spaces {
    position: relative;

    width: 100%;

    padding:
        clamp(5rem, 8vw, 8rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fff6e5 0%,
            #fffdf8 100%
        );

    overflow: hidden;
}


/* Soft butter blob */

body.page-our-center .center-spaces::before {
    content: "";

    position: absolute;

    left: -8rem;
    bottom: -10rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(244, 207, 99, 0.22);

    border-radius:
        60% 40% 57% 43%
        /
        44% 59% 41% 56%;

    transform: rotate(-13deg);

    pointer-events: none;
}


/* Blue outline */

body.page-our-center .center-spaces::after {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 22rem;
    height: 22rem;

    border:
        2px solid
        rgba(77, 114, 216, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-our-center .center-spaces__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1240px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(320px, 0.88fr);

    gap:
        clamp(3rem, 6vw, 7rem);

    align-items: center;
}


/* ==========================================================================
   IMAGE
   ========================================================================== */

body.page-our-center .center-spaces__figure {
    position: relative;

    margin: 0;

    padding-bottom: 2.2rem;
}


body.page-our-center .center-spaces__figure img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 1672 / 941;

    object-fit: cover;
    object-position: 46% center;

    border-radius:
        44px
        76px
        42px
        72px;

    box-shadow:
        0
        26px
        58px
        rgba(41, 42, 44, 0.13);
}


/* ==========================================================================
   FACILITY REPORT
   ========================================================================== */

body.page-our-center
.center-spaces__figure
figcaption {
    position: absolute;

    left:
        clamp(28px, 3vw, 44px);

    bottom: -0.4rem;

    width:
        clamp(
            250px,
            31vw,
            365px
        );

    padding:
        1.25rem
        1.35rem
        1.2rem;

    color: #fffdf8;

    background: var(--color-graphite);

    box-shadow:
        0
        20px
        44px
        rgba(41, 42, 44, 0.20);
}


/* Tape */

body.page-our-center
.center-spaces__figure
figcaption::before {
    content: "";

    position: absolute;

    top: -11px;
    left: 50%;

    width: 82px;
    height: 22px;

    background:
        rgba(244, 207, 99, 0.72);

    transform:
        translateX(-50%)
        rotate(-2deg);
}


body.page-our-center
.center-spaces__figure
figcaption span {
    display: block;

    margin-bottom: 0.7rem;

    color: var(--color-butter);

    font-size: 0.72rem;
    font-weight: 950;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


body.page-our-center
.center-spaces__figure
figcaption strong {
    display: block;

    color: #fffdf8;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.7rem,
            2.5vw,
            2.6rem
        );

    font-weight: 950;

    line-height: 1;

    letter-spacing: -0.045em;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-our-center .center-spaces__copy {
    max-width: 600px;
}


body.page-our-center
.center-spaces__copy
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-our-center
.center-spaces__copy h2 {
    max-width: 10ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.5rem,
            5.3vw,
            5.5rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-our-center
.center-spaces__copy h2::after {
    content: "";

    display: block;

    width: 96px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-our-center
.center-spaces__copy
> p:last-child {
    max-width: 560px;

    margin: 0;

    color:
        rgba(41, 42, 44, 0.7);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.78;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 920px) {

    body.page-our-center
    .center-spaces__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    body.page-our-center
    .center-spaces__copy {
        max-width: 720px;
    }


    body.page-our-center
    .center-spaces__copy h2 {
        max-width: 12ch;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-our-center .center-spaces {
        padding:
            4.5rem
            0;
    }


    body.page-our-center
    .center-spaces__inner {
        width:
            calc(100% - 2rem);

        gap: 3.3rem;
    }


    body.page-our-center
    .center-spaces__figure {
        padding-bottom: 0;
    }


    body.page-our-center
    .center-spaces__figure img {
        border-radius:
            28px
            48px
            28px
            46px;
    }


    body.page-our-center
    .center-spaces__figure
    figcaption {
        left: 16px;
        right: 16px;
        bottom: 14px;

        width: auto;

        padding:
            1rem
            1rem
            0.95rem;
    }


    body.page-our-center
    .center-spaces__figure
    figcaption strong {
        font-size:
            clamp(
                1.55rem,
                7vw,
                2rem
            );
    }


    body.page-our-center
    .center-spaces__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }

}

/* ==========================================================================
   TH_CENTER_SPACES_CAPTION_FIX_V2
   Our Center — lower Facility Report caption slightly
   ========================================================================== */

body.page-our-center .center-spaces__figure {
    padding-bottom: 3.1rem;
}


body.page-our-center
.center-spaces__figure
figcaption {
    bottom: -1.45rem;

    width:
        clamp(
            240px,
            29vw,
            350px
        );
}


/* ==========================================================================
   MOBILE
   Keep caption inside image on small screens
   ========================================================================== */

@media (max-width: 640px) {

    body.page-our-center
    .center-spaces__figure {
        padding-bottom: 0;
    }


    body.page-our-center
    .center-spaces__figure
    figcaption {
        bottom: 14px;
    }

}

/* ==========================================================================
   TH_CENTER_PRINCIPLES_V1
   Our Center — Things We Take Seriously
   ========================================================================== */

body.page-our-center .center-principles {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: #fffdf8;
    background: #292a2c;

    overflow: hidden;
}


body.page-our-center .center-principles::before {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 24rem;
    height: 24rem;

    border:
        2px solid
        rgba(244, 207, 99, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


body.page-our-center .center-principles::after {
    content: "";

    position: absolute;

    left: -8rem;
    bottom: -10rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(77, 114, 216, 0.16);

    border-radius:
        58% 42% 62% 38%
        /
        44% 58% 42% 56%;

    transform: rotate(15deg);

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

body.page-our-center .center-principles__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

body.page-our-center .center-principles__header {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(4rem, 7vw, 6rem);
}


body.page-our-center
.center-principles__header
.eyebrow {
    grid-column: 1 / -1;

    margin-bottom: -1rem;

    color: var(--color-butter);
}


body.page-our-center
.center-principles__header h2 {
    max-width: 8ch;

    margin: 0;

    color: #fffdf8;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.8vw,
            6rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.06em;
}


body.page-our-center
.center-principles__header
> p:last-child {
    position: relative;

    max-width: 570px;

    margin: 0;

    padding-top: 1.8rem;

    color:
        rgba(255, 253, 248, 0.7);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.75;
}


body.page-our-center
.center-principles__header
> p:last-child::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 70px;
    height: 8px;

    background: var(--color-red);

    border-radius: 999px;

    transform: rotate(-2deg);
}


/* ==========================================================================
   PRINCIPLE ROWS
   ========================================================================== */

body.page-our-center .center-principles__items {
    border-top:
        1px solid
        rgba(255, 253, 248, 0.15);
}


body.page-our-center .center-principles__item {
    display: grid;

    grid-template-columns:
        150px
        minmax(0, 1fr);

    align-items: center;

    gap:
        clamp(2rem, 5vw, 5rem);

    min-height: 150px;

    padding:
        2.2rem
        1rem;

    border-bottom:
        1px solid
        rgba(255, 253, 248, 0.15);
}


body.page-our-center
.center-principles__item:nth-child(2),
body.page-our-center
.center-principles__item:nth-child(5) {
    background:
        rgba(244, 207, 99, 0.05);
}


body.page-our-center
.center-principles__item:nth-child(4) {
    background:
        rgba(130, 183, 132, 0.045);
}


/* ==========================================================================
   NUMBERS
   ========================================================================== */

body.page-our-center
.center-principles__number {
    color:
        rgba(255, 253, 248, 0.1);

    font-family: var(--font-display);

    font-size:
        clamp(
            4.8rem,
            7vw,
            7rem
        );

    font-weight: 950;

    line-height: 0.75;

    letter-spacing: -0.07em;
}


/* ==========================================================================
   ROW CONTENT
   ========================================================================== */

body.page-our-center
.center-principles__item
> div {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(190px, 0.42fr)
        minmax(0, 1fr);

    gap:
        clamp(2rem, 5vw, 5rem);

    align-items: center;

    padding-left:
        clamp(2rem, 4vw, 4rem);
}


/* Accent swipe */

body.page-our-center
.center-principles__item
> div::before {
    content: "";

    position: absolute;

    left: -1.4rem;
    top: 50%;

    width: 50px;
    height: 7px;

    background: var(--color-blue);

    border-radius: 999px;

    transform:
        translateY(-50%)
        rotate(-2deg);
}


body.page-our-center
.center-principles__item:nth-child(2)
> div::before {
    background: var(--color-red);
}


body.page-our-center
.center-principles__item:nth-child(3)
> div::before {
    background: var(--color-butter);
}


body.page-our-center
.center-principles__item:nth-child(4)
> div::before {
    background: #82b784;
}


body.page-our-center
.center-principles__item:nth-child(5)
> div::before {
    background: var(--color-purple);
}


/* ==========================================================================
   TITLES
   ========================================================================== */

body.page-our-center
.center-principles__item h3 {
    margin: 0;

    font-family: var(--font-display);

    font-size:
        clamp(
            2rem,
            3vw,
            3rem
        );

    font-weight: 950;

    line-height: 0.95;

    letter-spacing: -0.045em;
}


body.page-our-center
.center-principles__item:nth-child(1) h3 {
    color: #8ca7f4;
}


body.page-our-center
.center-principles__item:nth-child(2) h3 {
    color: var(--color-red);
}


body.page-our-center
.center-principles__item:nth-child(3) h3 {
    color: var(--color-butter);
}


body.page-our-center
.center-principles__item:nth-child(4) h3 {
    color: #91c894;
}


body.page-our-center
.center-principles__item:nth-child(5) h3 {
    color: #a58cc9;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-our-center
.center-principles__item p {
    max-width: 610px;

    margin: 0;

    color:
        rgba(255, 253, 248, 0.68);

    font-size: 0.98rem;

    line-height: 1.7;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-our-center
    .center-principles__header {
        grid-template-columns: 1fr;

        gap: 2rem;
    }


    body.page-our-center
    .center-principles__header
    .eyebrow {
        grid-column: auto;

        margin-bottom: 0;
    }


    body.page-our-center
    .center-principles__header h2 {
        max-width: 12ch;
    }


    body.page-our-center
    .center-principles__item {
        grid-template-columns:
            110px
            minmax(0, 1fr);
    }


    body.page-our-center
    .center-principles__item
    > div {
        grid-template-columns: 1fr;

        gap: 0.9rem;

        padding-left: 2.8rem;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-our-center .center-principles {
        padding:
            5rem
            0;
    }


    body.page-our-center
    .center-principles__inner {
        width:
            calc(100% - 2rem);
    }


    body.page-our-center
    .center-principles__header h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-our-center
    .center-principles__item {
        grid-template-columns: 1fr;

        gap: 0.8rem;

        min-height: 0;

        padding:
            2rem
            0;
    }


    body.page-our-center
    .center-principles__number {
        font-size: 4.3rem;
    }


    body.page-our-center
    .center-principles__item
    > div {
        grid-template-columns: 1fr;

        gap: 0.8rem;

        padding-left: 0;
    }


    body.page-our-center
    .center-principles__item
    > div::before {
        position: relative;

        top: auto;
        left: auto;

        display: block;

        width: 48px;

        margin-bottom: 0.3rem;

        transform: rotate(-2deg);
    }


    body.page-our-center
    .center-principles__item h3 {
        font-size: 2.3rem;
    }

}

/* ==========================================================================
   TH_CENTER_TEAM_V1
   Our Center — The Grown-Ups / Calm people. Useful skills.
   ========================================================================== */

body.page-our-center .center-team {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fff8e9 0%,
            #fffdf8 100%
        );

    overflow: hidden;
}


/* Soft green organic shape */

body.page-our-center .center-team::before {
    content: "";

    position: absolute;

    top: -8rem;
    left: -8rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(130, 183, 132, 0.13);

    border-radius:
        61% 39% 55% 45%
        /
        43% 59% 41% 57%;

    transform: rotate(-15deg);

    pointer-events: none;
}


/* Blue outline circle */

body.page-our-center .center-team::after {
    content: "";

    position: absolute;

    right: -7rem;
    bottom: -8rem;

    width: 22rem;
    height: 22rem;

    border:
        2px solid
        rgba(77, 114, 216, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-our-center .center-team__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1240px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.78fr)
        minmax(0, 1.22fr);

    gap:
        clamp(3.5rem, 7vw, 8rem);

    align-items: center;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-our-center .center-team__copy {
    max-width: 570px;
}


body.page-our-center
.center-team__copy
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-our-center
.center-team__copy h2 {
    max-width: 9ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.7rem,
            5.4vw,
            5.6rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-our-center
.center-team__copy h2::after {
    content: "";

    display: block;

    width: 96px;
    height: 12px;

    margin-top: 1.45rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-our-center
.center-team__copy p {
    max-width: 550px;

    margin:
        0
        0
        1.35rem;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.08rem
        );

    line-height: 1.77;
}


body.page-our-center
.center-team__copy p:last-child {
    margin-bottom: 0;

    color:
        rgba(41, 42, 44, 0.57);

    font-size: 0.92rem;
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

body.page-our-center .center-team__figure {
    position: relative;

    margin: 0;

    padding-bottom: 3rem;
}


body.page-our-center
.center-team__figure img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 1.35 / 1;

    object-fit: cover;

    object-position:
        56%
        center;

    border-radius:
        66px
        34px
        72px
        40px;

    box-shadow:
        0
        26px
        58px
        rgba(41, 42, 44, 0.14);
}


/* ==========================================================================
   PROFESSIONAL SKILL NOTE
   ========================================================================== */

body.page-our-center
.center-team__figure
figcaption {
    position: absolute;

    left:
        clamp(
            28px,
            3vw,
            44px
        );

    bottom: -0.8rem;

    width:
        clamp(
            250px,
            30vw,
            365px
        );

    padding:
        1.25rem
        1.35rem
        1.2rem;

    color: #fffdf8;

    background: var(--color-graphite);

    box-shadow:
        0
        20px
        45px
        rgba(41, 42, 44, 0.20);

    transform: rotate(-1.2deg);
}


/* Tape */

body.page-our-center
.center-team__figure
figcaption::before {
    content: "";

    position: absolute;

    top: -11px;
    left: 50%;

    width: 84px;
    height: 23px;

    background:
        rgba(244, 207, 99, 0.72);

    transform:
        translateX(-50%)
        rotate(2deg);
}


body.page-our-center
.center-team__figure
figcaption span {
    display: block;

    margin-bottom: 0.7rem;

    color: var(--color-butter);

    font-size: 0.72rem;
    font-weight: 950;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


body.page-our-center
.center-team__figure
figcaption strong {
    display: block;

    color: #fffdf8;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.65rem,
            2.35vw,
            2.45rem
        );

    font-weight: 950;

    line-height: 1;

    letter-spacing: -0.045em;
}


/* Red scribble */

body.page-our-center
.center-team__figure
figcaption::after {
    content: "";

    position: absolute;

    right: 1.2rem;
    bottom: 1rem;

    width: 55px;
    height: 10px;

    border-top:
        6px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-6deg);

    pointer-events: none;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 920px) {

    body.page-our-center
    .center-team__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    body.page-our-center
    .center-team__copy {
        max-width: 720px;
    }


    body.page-our-center
    .center-team__copy h2 {
        max-width: 12ch;
    }


    body.page-our-center
    .center-team__figure {
        width: min(100%, 820px);
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-our-center .center-team {
        padding:
            5rem
            0;
    }


    body.page-our-center
    .center-team__inner {
        width:
            calc(100% - 2rem);

        gap: 3.4rem;
    }


    body.page-our-center
    .center-team__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-our-center
    .center-team__figure {
        padding-bottom: 0;
    }


    body.page-our-center
    .center-team__figure img {
        aspect-ratio: 4 / 5;

        object-position:
            57%
            center;

        border-radius:
            34px
            24px
            38px
            26px;
    }


    body.page-our-center
    .center-team__figure
    figcaption {
        left: 16px;
        right: 16px;
        bottom: 14px;

        width: auto;

        padding:
            1rem
            1rem
            0.95rem;

        transform: rotate(-0.5deg);
    }


    body.page-our-center
    .center-team__figure
    figcaption strong {
        padding-right: 2rem;

        font-size:
            clamp(
                1.5rem,
                7vw,
                2rem
            );
    }

}

/* ==========================================================================
   TH_CENTER_SAFETY_V1
   Our Center — Behind the Cute Stuff / Systems matter too
   ========================================================================== */

body.page-our-center .center-safety {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #edf3ff 0%,
            #f7f9ff 100%
        );

    overflow: hidden;
}


/* Giant ghost label */

body.page-our-center .center-safety::before {
    content: "SYSTEMS";

    position: absolute;

    left: -1rem;
    bottom: -1rem;

    color:
        rgba(77, 114, 216, 0.05);

    font-family: var(--font-display);

    font-size:
        clamp(
            8rem,
            16vw,
            16rem
        );

    font-weight: 950;

    line-height: 0.72;

    letter-spacing: -0.08em;

    pointer-events: none;
}


/* Green outline circle */

body.page-our-center .center-safety::after {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 22rem;
    height: 22rem;

    border:
        2px solid
        rgba(130, 183, 132, 0.18);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-our-center .center-safety__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(300px, 0.88fr)
        minmax(0, 1.12fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: start;
}


/* ==========================================================================
   LEFT HEADLINE
   ========================================================================== */

body.page-our-center .center-safety__headline {
    position: sticky;

    top: 7rem;
}


body.page-our-center
.center-safety__headline
.eyebrow {
    margin:
        0
        0
        1.5rem;

    color: var(--color-blue);
}


body.page-our-center
.center-safety__headline h2 {
    max-width: 9ch;

    margin: 0;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.7vw,
            5.8rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.06em;
}


body.page-our-center
.center-safety__headline h2::after {
    content: "";

    display: block;

    width: 100px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


/* ==========================================================================
   RIGHT COPY
   ========================================================================== */

body.page-our-center .center-safety__copy {
    max-width: 660px;
}


body.page-our-center
.center-safety__copy
> p {
    max-width: 620px;

    margin:
        0
        0
        clamp(3rem, 5vw, 4.5rem);

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1.05rem,
            1.35vw,
            1.16rem
        );

    line-height: 1.78;
}


/* ==========================================================================
   FACT GRID
   ========================================================================== */

body.page-our-center .center-safety__facts {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        rgba(41, 42, 44, 0.16);
}


body.page-our-center
.center-safety__facts
> div {
    position: relative;

    min-height: 200px;

    padding:
        2.2rem
        1.7rem
        2.3rem;

    border-bottom:
        1px solid
        rgba(41, 42, 44, 0.16);
}


body.page-our-center
.center-safety__facts
> div:nth-child(odd) {
    border-right:
        1px solid
        rgba(41, 42, 44, 0.16);
}


/* Accent bars */

body.page-our-center
.center-safety__facts
> div::before {
    content: "";

    position: absolute;

    top: 0;
    left: 1.7rem;

    width: 54px;
    height: 7px;

    background: var(--color-blue);

    transform:
        translateY(-4px)
        rotate(-2deg);
}


body.page-our-center
.center-safety__facts
> div:nth-child(2)::before {
    background: var(--color-red);
}


body.page-our-center
.center-safety__facts
> div:nth-child(3)::before {
    background: #507d52;
}


body.page-our-center
.center-safety__facts
> div:nth-child(4)::before {
    background: var(--color-butter);
}


/* ==========================================================================
   FACT TITLES
   ========================================================================== */

body.page-our-center
.center-safety__facts
strong {
    display: block;

    margin:
        0
        0
        0.9rem;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.9rem,
            2.8vw,
            2.8rem
        );

    font-weight: 950;

    line-height: 0.95;

    letter-spacing: -0.045em;
}


body.page-our-center
.center-safety__facts
> div:nth-child(1)
strong {
    color: var(--color-blue);
}


body.page-our-center
.center-safety__facts
> div:nth-child(2)
strong {
    color: var(--color-red);
}


body.page-our-center
.center-safety__facts
> div:nth-child(3)
strong {
    color: #507d52;
}


body.page-our-center
.center-safety__facts
> div:nth-child(4)
strong {
    color: #9b7922;
}


/* ==========================================================================
   FACT COPY
   ========================================================================== */

body.page-our-center
.center-safety__facts
span {
    display: block;

    max-width: 275px;

    color:
        rgba(41, 42, 44, 0.65);

    font-size: 0.96rem;

    line-height: 1.66;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-our-center
    .center-safety__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    body.page-our-center
    .center-safety__headline {
        position: relative;

        top: auto;

        max-width: 720px;
    }


    body.page-our-center
    .center-safety__headline h2 {
        max-width: 12ch;
    }


    body.page-our-center
    .center-safety__copy {
        max-width: 720px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-our-center .center-safety {
        padding:
            5rem
            0;
    }


    body.page-our-center
    .center-safety__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-our-center
    .center-safety__headline h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-our-center
    .center-safety__facts {
        grid-template-columns: 1fr;
    }


    body.page-our-center
    .center-safety__facts
    > div {
        min-height: 0;

        padding:
            2rem
            1rem
            2.2rem;

        border-right: 0 !important;
    }


    body.page-our-center
    .center-safety__facts
    > div::before {
        left: 1rem;
    }


    body.page-our-center
    .center-safety__facts
    span {
        max-width: 100%;
    }


    body.page-our-center
    .center-safety::before {
        font-size: 7rem;
    }

}

/* ==========================================================================
   TH_CENTER_FAMILIES_V1
   Our Center — Families Are Part of This
   ========================================================================== */

body.page-our-center .center-families {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fff6df 0%,
            #fffdf8 100%
        );

    overflow: hidden;
}


/* Soft blue organic shape */

body.page-our-center .center-families::before {
    content: "";

    position: absolute;

    top: -8rem;
    left: -8rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(77, 114, 216, 0.13);

    border-radius:
        59% 41% 62% 38%
        /
        44% 58% 42% 56%;

    transform: rotate(-14deg);

    pointer-events: none;
}


/* Red outline */

body.page-our-center .center-families::after {
    content: "";

    position: absolute;

    right: -7rem;
    bottom: -8rem;

    width: 22rem;
    height: 22rem;

    border:
        2px solid
        rgba(233, 92, 80, 0.15);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-our-center .center-families__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.86fr)
        minmax(0, 1.14fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   PARENT QUESTION NOTE
   ========================================================================== */

body.page-our-center .center-families__note {
    position: relative;

    min-height: 385px;

    padding:
        clamp(2rem, 4vw, 3rem);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    color: #fffdf8;

    background: var(--color-blue);

    box-shadow:
        0
        24px
        55px
        rgba(41, 42, 44, 0.18);

    transform: rotate(-2deg);
}


/* Tape */

body.page-our-center .center-families__note::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 50%;

    width: 94px;
    height: 25px;

    background:
        rgba(244, 207, 99, 0.75);

    transform:
        translateX(-50%)
        rotate(2deg);
}


/* Marker swipe */

body.page-our-center .center-families__note::after {
    content: "";

    position: absolute;

    right: 2rem;
    bottom: 2rem;

    width: 68px;
    height: 12px;

    border-top:
        7px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-7deg);
}


/* ==========================================================================
   NOTE TYPE
   ========================================================================== */

body.page-our-center .center-families__note span,
body.page-our-center .center-families__note strong,
body.page-our-center .center-families__note small {
    display: block;
}


body.page-our-center .center-families__note span {
    color: var(--color-butter);

    font-size: 0.72rem;
    font-weight: 950;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


body.page-our-center .center-families__note strong {
    margin:
        auto
        0;

    color: #fffdf8;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            3.4rem,
            5.6vw,
            5.5rem
        );

    font-weight: 900;

    line-height: 0.98;

    letter-spacing: -0.04em;

    transform: rotate(-2deg);
}


body.page-our-center .center-families__note small {
    max-width: 235px;

    color:
        rgba(255, 253, 248, 0.72);

    font-size: 0.82rem;
    font-weight: 750;

    line-height: 1.45;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-our-center .center-families__copy {
    max-width: 630px;
}


body.page-our-center
.center-families__copy
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-our-center
.center-families__copy h2 {
    max-width: 10ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.6rem,
            5.4vw,
            5.6rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-our-center
.center-families__copy h2::after {
    content: "";

    display: block;

    width: 96px;
    height: 12px;

    margin-top: 1.45rem;

    border-top:
        8px solid
        #507d52;

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-our-center
.center-families__copy p {
    max-width: 590px;

    margin:
        0
        0
        1.35rem;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.78;
}


body.page-our-center
.center-families__copy p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-our-center
    .center-families__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    body.page-our-center
    .center-families__note {
        width:
            min(
                520px,
                92%
            );

        min-height: 350px;
    }


    body.page-our-center
    .center-families__copy {
        max-width: 720px;
    }


    body.page-our-center
    .center-families__copy h2 {
        max-width: 12ch;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-our-center .center-families {
        padding:
            5rem
            0;
    }


    body.page-our-center
    .center-families__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-our-center
    .center-families__note {
        width:
            calc(100% - 0.5rem);

        min-height: 310px;

        padding:
            2rem
            1.5rem;
    }


    body.page-our-center
    .center-families__note strong {
        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-our-center
    .center-families__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }

}

/* ==========================================================================
   TH_CENTER_DEMO_NOTE_V1
   Our Center — compact template disclaimer
   ========================================================================== */

body.page-our-center .center-demo {
    position: relative;

    width: 100%;

    padding:
        clamp(2.2rem, 4vw, 3.2rem)
        0;

    color: #fffdf8;
    background: #292a2c;

    overflow: hidden;
}


/* Ghost label */

body.page-our-center .center-demo::after {
    content: "CENTER DEMO";

    position: absolute;

    top: 50%;
    right:
        clamp(
            1rem,
            4vw,
            4rem
        );

    color:
        rgba(
            255,
            253,
            248,
            0.04
        );

    font-family: var(--font-display);

    font-size:
        clamp(
            3.5rem,
            7vw,
            7rem
        );

    font-weight: 950;

    line-height: 1;

    letter-spacing: -0.07em;

    white-space: nowrap;

    transform:
        translateY(-50%)
        rotate(-3deg);

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

body.page-our-center .center-demo__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;
}


/* ==========================================================================
   NOTE
   ========================================================================== */

body.page-our-center
.center-demo__inner
p {
    max-width: 1030px;

    margin: 0;

    padding-left: 1.4rem;

    border-left:
        6px solid
        #507d52;

    color:
        rgba(
            255,
            253,
            248,
            0.68
        );

    font-size: 0.78rem;

    line-height: 1.72;
}


body.page-our-center
.center-demo__inner
strong {
    color: var(--color-butter);

    font-weight: 900;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-our-center .center-demo {
        padding:
            2.4rem
            0;
    }


    body.page-our-center
    .center-demo__inner {
        width:
            calc(100% - 2rem);
    }


    body.page-our-center
    .center-demo__inner
    p {
        padding-left: 1rem;

        border-left-width: 5px;

        font-size: 0.73rem;
    }


    body.page-our-center
    .center-demo::after {
        right: -3rem;

        font-size: 4.4rem;
    }

}

/* ==========================================================================
   TH_CENTER_CTA_V1
   Our Center — Come Look Around / final tour CTA
   ========================================================================== */

body.page-our-center .center-cta {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: #fffdf8;

    background: #507d52;

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-our-center .center-cta::before {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 24rem;
    height: 24rem;

    border:
        2px solid
        rgba(255, 253, 248, 0.16);

    border-radius: 50%;

    pointer-events: none;
}


body.page-our-center .center-cta::after {
    content: "";

    position: absolute;

    left: -8rem;
    bottom: -10rem;

    width: 25rem;
    height: 25rem;

    background:
        rgba(244, 207, 99, 0.24);

    border-radius:
        61% 39% 54% 46%
        /
        43% 59% 41% 57%;

    transform: rotate(17deg);

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-our-center .center-cta__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(320px, 0.7fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-our-center .center-cta__copy {
    max-width: 740px;
}


body.page-our-center
.center-cta__copy
.eyebrow {
    margin:
        0
        0
        1.5rem;

    color: var(--color-butter);
}


body.page-our-center
.center-cta__copy h2 {
    max-width: 12ch;

    margin:
        0
        0
        1.8rem;

    color: #fffdf8;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.7rem,
            5.6vw,
            5.8rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-our-center
.center-cta__copy h2::after {
    content: "";

    display: block;

    width: 104px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-our-center
.center-cta__copy
> p:last-child {
    max-width: 620px;

    margin: 0;

    color:
        rgba(255, 253, 248, 0.74);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.77;
}


/* ==========================================================================
   ACTION PANEL
   ========================================================================== */

body.page-our-center .center-cta__action {
    position: relative;

    min-height: 260px;

    padding:
        clamp(2.3rem, 4vw, 3.2rem);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    gap: 1.35rem;

    color: var(--color-graphite);

    background: #fffdf8;

    box-shadow:
        0
        24px
        55px
        rgba(41, 42, 44, 0.20);

    transform: rotate(2deg);
}


/* Tape */

body.page-our-center
.center-cta__action::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 50%;

    width: 94px;
    height: 25px;

    background:
        rgba(244, 207, 99, 0.76);

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* Blue scribble */

body.page-our-center
.center-cta__action::after {
    content: "";

    position: absolute;

    right: 1.6rem;
    bottom: 1.5rem;

    width: 67px;
    height: 12px;

    border-top:
        7px solid
        var(--color-blue);

    border-radius: 50%;

    transform: rotate(-7deg);

    pointer-events: none;
}


/* ==========================================================================
   PRIMARY BUTTON
   ========================================================================== */

body.page-our-center
.center-cta__action
.button--primary {
    position: relative;
    z-index: 2;

    min-height: 54px;

    padding-inline: 1.7rem;

    color: #fffdf8 !important;

    background: var(--color-graphite) !important;

    box-shadow: none !important;
}


body.page-our-center
.center-cta__action
.button--primary:hover {
    color: var(--color-graphite) !important;

    background: var(--color-butter) !important;

    box-shadow:
        0
        12px
        28px
        rgba(41, 42, 44, 0.16) !important;
}


/* ==========================================================================
   EXPLORE PROGRAMS LINK
   ========================================================================== */

body.page-our-center
.center-cta__action
.text-link {
    position: relative;
    z-index: 2;

    color: var(--color-graphite) !important;

    font-weight: 900 !important;
}


body.page-our-center
.center-cta__action
.text-link span {
    color: var(--color-red) !important;
}


body.page-our-center
.center-cta__action
.text-link:hover {
    color: var(--color-blue) !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-our-center
    .center-cta__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    body.page-our-center
    .center-cta__copy {
        max-width: 760px;
    }


    body.page-our-center
    .center-cta__copy h2 {
        max-width: 13ch;
    }


    body.page-our-center
    .center-cta__action {
        width:
            min(
                530px,
                94%
            );

        min-height: 230px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-our-center .center-cta {
        padding:
            5rem
            0;
    }


    body.page-our-center
    .center-cta__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-our-center
    .center-cta__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                13vw,
                4.3rem
            );
    }


    body.page-our-center
    .center-cta__action {
        width: 100%;

        min-height: 220px;

        padding:
            2.3rem
            1.5rem;

        box-sizing: border-box;

        transform: rotate(1deg);
    }


    body.page-our-center
    .center-cta__action
    .button--primary {
        width: 100%;

        box-sizing: border-box;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    body.page-our-center
    .center-cta__action {
        transform: none;
    }

}

/* ==========================================================================
   TH_DAY_HERO_V1
   A Day Here — full-day editorial hero
   ========================================================================== */

body.page-day-here main {
    overflow: hidden;
}


/* ==========================================================================
   HERO
   ========================================================================== */

body.page-day-here .day-hero {
    position: relative;

    width: 100%;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fff7e8 0%,
            #fffdf8 100%
        );

    overflow: hidden;
}


/* Blue outline */

body.page-day-here .day-hero::before {
    content: "";

    position: absolute;

    top: 4rem;
    left: -8rem;

    width: 23rem;
    height: 23rem;

    border:
        2px solid
        rgba(77, 114, 216, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


/* Butter shape */

body.page-day-here .day-hero::after {
    content: "";

    position: absolute;

    right: -9rem;
    bottom: -12rem;

    width: 28rem;
    height: 28rem;

    background:
        rgba(244, 207, 99, 0.29);

    border-radius:
        59% 41% 63% 37%
        /
        44% 58% 42% 56%;

    transform: rotate(16deg);

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-day-here .day-hero__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1220px,
            calc(100% - 3rem)
        );

    min-height: 720px;

    margin:
        0
        auto;

    padding:
        clamp(5rem, 8vw, 8rem)
        0
        clamp(5.5rem, 9vw, 8.5rem);

    display: grid;

    grid-template-columns:
        minmax(340px, 0.82fr)
        minmax(0, 1.18fr);

    gap:
        clamp(3rem, 6vw, 7rem);

    align-items: center;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-day-here .day-hero__content {
    position: relative;
    z-index: 4;

    max-width: 570px;
}


body.page-day-here
.day-hero__content
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-day-here .day-hero__title {
    max-width: 10ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.9rem,
            5.8vw,
            5.9rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


body.page-day-here
.day-hero__title
span {
    display: block;

    margin-top: 0.35rem;

    color: var(--color-red);
}


body.page-day-here
.day-hero__title
span::after {
    content: "";

    display: block;

    width: 115px;
    height: 12px;

    margin-top: 1.35rem;

    border-top:
        8px solid
        var(--color-butter);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-day-here .day-hero__intro {
    max-width: 525px;

    margin:
        0
        0
        2rem;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.76;
}


body.page-day-here .day-hero__actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 1.4rem;
}


body.page-day-here
.day-hero__actions
.text-link {
    color: var(--color-graphite);

    font-weight: 900;
}


body.page-day-here
.day-hero__actions
.text-link span {
    color: var(--color-red);
}


/* ==========================================================================
   VISUAL
   ========================================================================== */

body.page-day-here .day-hero__visual {
    position: relative;

    min-width: 0;
    min-height: 590px;
}


body.page-day-here .day-hero__photo {
    position: absolute;

    inset:
        1rem
        0
        1.5rem
        0;

    margin: 0;

    overflow: hidden;

    border-radius:
        76px
        38px
        86px
        44px;

    background: #e8e2d5;

    box-shadow:
        0
        28px
        60px
        rgba(41, 42, 44, 0.14);

    transform: rotate(-0.7deg);
}


body.page-day-here
.day-hero__photo::after {
    content: "";

    position: absolute;

    inset: 0;

    border:
        1px solid
        rgba(41, 42, 44, 0.08);

    border-radius: inherit;

    pointer-events: none;
}


body.page-day-here
.day-hero__photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        60%
        center;
}


/* ==========================================================================
   DECORATIVE SHAPES
   ========================================================================== */

body.page-day-here .day-hero__shape {
    position: absolute;

    z-index: 5;

    pointer-events: none;
}


body.page-day-here
.day-hero__shape--yellow {
    top: -0.5rem;
    right: 1.5rem;

    width: 118px;
    height: 118px;

    background: var(--color-butter);

    border-radius:
        60% 40% 55% 45%
        /
        42% 58% 44% 56%;

    transform: rotate(13deg);
}


body.page-day-here
.day-hero__shape--red {
    left: -1.5rem;
    bottom: 3rem;

    width: 92px;
    height: 92px;

    background: var(--color-red);

    border-radius:
        46% 54% 61% 39%
        /
        60% 40% 53% 47%;

    transform: rotate(-17deg);
}


/* ==========================================================================
   CURRENT PLAN NOTE
   ========================================================================== */

body.page-day-here .day-hero__note {
    position: absolute;

    z-index: 6;

    right: 1rem;
    bottom: -0.5rem;

    width: 235px;

    padding:
        1.35rem
        1.4rem
        1.45rem;

    color: var(--color-graphite);

    background: var(--color-butter);

    box-shadow:
        0
        20px
        42px
        rgba(41, 42, 44, 0.18);

    transform: rotate(-2.5deg);
}


body.page-day-here
.day-hero__note::before {
    content: "";

    position: absolute;

    top: -12px;
    left: 50%;

    width: 84px;
    height: 24px;

    background:
        rgba(255, 253, 248, 0.66);

    transform:
        translateX(-50%)
        rotate(3deg);
}


body.page-day-here
.day-hero__note span,
body.page-day-here
.day-hero__note strong,
body.page-day-here
.day-hero__note small {
    display: block;
}


body.page-day-here
.day-hero__note span {
    margin-bottom: 0.45rem;

    color: var(--color-blue);

    font-size: 0.67rem;
    font-weight: 950;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


body.page-day-here
.day-hero__note strong {
    margin-bottom: 0.4rem;

    color: var(--color-graphite);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size: 2rem;
    font-weight: 900;

    line-height: 0.98;

    letter-spacing: -0.04em;
}


body.page-day-here
.day-hero__note small {
    color:
        rgba(41, 42, 44, 0.62);

    font-size: 0.77rem;
    font-weight: 750;

    line-height: 1.4;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1000px) {

    body.page-day-here
    .day-hero__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    body.page-day-here
    .day-hero__content {
        max-width: 760px;
    }


    body.page-day-here
    .day-hero__title {
        max-width: 12ch;
    }


    body.page-day-here
    .day-hero__visual {
        width:
            min(
                100%,
                840px
            );

        min-height: 600px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-day-here
    .day-hero__inner {
        width:
            calc(100% - 2rem);

        min-height: 0;

        padding:
            4rem
            0
            5rem;

        gap: 3.5rem;
    }


    body.page-day-here
    .day-hero__title {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-day-here
    .day-hero__visual {
        min-height: 470px;
    }


    body.page-day-here
    .day-hero__photo {
        inset:
            0
            0
            1rem
            0;

        border-radius:
            50px
            26px
            54px
            30px;
    }


    body.page-day-here
    .day-hero__photo img {
        object-position:
            60%
            center;
    }


    body.page-day-here
    .day-hero__shape--yellow {
        top: -1rem;
        right: 0;

        width: 82px;
        height: 82px;
    }


    body.page-day-here
    .day-hero__shape--red {
        left: -0.8rem;

        width: 68px;
        height: 68px;
    }


    body.page-day-here
    .day-hero__note {
        right: 0.5rem;
        bottom: -1rem;

        width: 190px;

        padding:
            1.1rem
            1.05rem
            1.2rem;
    }


    body.page-day-here
    .day-hero__note strong {
        font-size: 1.6rem;
    }

}

/* ==========================================================================
   TH_DAY_REALITY_V1
   A Day Here — Routine does not equal robot
   ========================================================================== */

body.page-day-here .day-reality {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #f7d66e 0%,
            #f9dd83 100%
        );

    overflow: hidden;
}


/* Giant faint clock-ish circle */

body.page-day-here .day-reality::before {
    content: "";

    position: absolute;

    top: -9rem;
    right: -7rem;

    width: 25rem;
    height: 25rem;

    border:
        2px solid
        rgba(41, 42, 44, 0.12);

    border-radius: 50%;

    pointer-events: none;
}


/* Blue organic shape */

body.page-day-here .day-reality::after {
    content: "";

    position: absolute;

    left: -8rem;
    bottom: -10rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(77, 114, 216, 0.16);

    border-radius:
        60% 40% 55% 45%
        /
        44% 59% 41% 56%;

    transform: rotate(-15deg);

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

body.page-day-here .day-reality__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;
}


body.page-day-here
.day-reality__inner
> .eyebrow {
    margin:
        0
        0
        clamp(3rem, 5vw, 4.5rem);

    color: var(--color-blue);
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-day-here .day-reality__layout {
    display: grid;

    grid-template-columns:
        minmax(320px, 0.82fr)
        minmax(0, 1.18fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   ROUTINE != ROBOT
   ========================================================================== */

body.page-day-here .day-reality__statement {
    position: relative;

    width: fit-content;

    max-width: 100%;
}


body.page-day-here
.day-reality__statement span,
body.page-day-here
.day-reality__statement strong {
    display: block;
}


body.page-day-here
.day-reality__statement span {
    margin-bottom: 0.6rem;

    color: var(--color-blue);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            3rem,
            5.4vw,
            5rem
        );

    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -0.045em;

    transform: rotate(-3deg);
}


body.page-day-here
.day-reality__statement strong {
    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            4.8rem,
            8vw,
            8rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.07em;
}


/* Red hand-drawn underline */

body.page-day-here
.day-reality__statement::after {
    content: "";

    position: absolute;

    left: 12%;
    bottom: -1.5rem;

    width: 75%;
    height: 14px;

    border-top:
        9px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-2deg);
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-day-here .day-reality__copy {
    max-width: 650px;
}


body.page-day-here
.day-reality__copy::before {
    content: "";

    display: block;

    width: 72px;
    height: 8px;

    margin-bottom: 1.8rem;

    background: #507d52;

    border-radius: 999px;

    transform: rotate(-2deg);
}


body.page-day-here
.day-reality__copy h2 {
    max-width: 620px;

    margin:
        0
        0
        2rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.5rem,
            5.1vw,
            5.3rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-day-here
.day-reality__copy p {
    max-width: 590px;

    margin:
        0
        0
        1.35rem;

    color:
        rgba(41, 42, 44, 0.72);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.78;
}


body.page-day-here
.day-reality__copy p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-day-here
    .day-reality__layout {
        grid-template-columns: 1fr;

        gap: 5rem;
    }


    body.page-day-here
    .day-reality__copy {
        max-width: 720px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-day-here .day-reality {
        padding:
            5rem
            0;
    }


    body.page-day-here
    .day-reality__inner {
        width:
            calc(100% - 2rem);
    }


    body.page-day-here
    .day-reality__layout {
        gap: 4rem;
    }


    body.page-day-here
    .day-reality__statement span {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.7rem
            );
    }


    body.page-day-here
    .day-reality__statement strong {
        font-size:
            clamp(
                4rem,
                18vw,
                5.8rem
            );
    }


    body.page-day-here
    .day-reality__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }

}

/* ==========================================================================
   TH_DAY_TIMELINE_V1
   A Day Here — Daily Situation / chronological routine
   ========================================================================== */

body.page-day-here .day-timeline {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0
        clamp(7rem, 10vw, 10rem);

    color: #fffdf8;

    background: #292a2c;

    overflow: hidden;
}


/* Blue outline */

body.page-day-here .day-timeline::before {
    content: "";

    position: absolute;

    top: 30rem;
    right: -9rem;

    width: 25rem;
    height: 25rem;

    border:
        2px solid
        rgba(77, 114, 216, 0.19);

    border-radius: 50%;

    pointer-events: none;
}


/* Butter organic shape */

body.page-day-here .day-timeline::after {
    content: "";

    position: absolute;

    left: -10rem;
    bottom: -11rem;

    width: 28rem;
    height: 28rem;

    background:
        rgba(244, 207, 99, 0.11);

    border-radius:
        61% 39% 56% 44%
        /
        47% 58% 42% 53%;

    transform: rotate(-16deg);

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

body.page-day-here .day-timeline__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;
}


/* ==========================================================================
   ROUTINE EDITORIAL IMAGE
   ========================================================================== */

body.page-day-here .day-timeline__inner::before {
    content: "";

    display: block;

    width: 100%;
    height:
        clamp(
            310px,
            39vw,
            470px
        );

    margin:
        0
        0
        clamp(4.5rem, 7vw, 7rem);

    background-image:
        linear-gradient(
            90deg,
            rgba(41, 42, 44, 0.05) 0%,
            rgba(41, 42, 44, 0.00) 55%,
            rgba(41, 42, 44, 0.08) 100%
        ),
        url("../images/routine/a-day-here-routine.png");

    background-size: cover;

    background-position:
        58%
        center;

    background-repeat: no-repeat;

    border-radius:
        42px
        82px
        46px
        74px;

    box-shadow:
        0
        30px
        70px
        rgba(0, 0, 0, 0.23);

    transform: rotate(0.4deg);
}


/* ==========================================================================
   HEADER
   ========================================================================== */

body.page-day-here .day-timeline__header {
    display: grid;

    grid-template-columns:
        minmax(340px, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(3.5rem, 7vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(4.5rem, 7vw, 7rem);
}


body.page-day-here
.day-timeline__header
.eyebrow {
    grid-column: 1 / -1;

    margin:
        0
        0
        -1rem;

    color: var(--color-butter);
}


body.page-day-here
.day-timeline__header h2 {
    max-width: 9ch;

    margin: 0;

    color: #fffdf8;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.7vw,
            5.9rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


body.page-day-here
.day-timeline__header h2::after {
    content: "";

    display: block;

    width: 104px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-day-here
.day-timeline__header > p:last-child {
    max-width: 590px;

    margin: 0;

    padding-left: 1.5rem;

    border-left:
        5px solid
        var(--color-blue);

    color:
        rgba(255, 253, 248, 0.68);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.78;
}


/* ==========================================================================
   TIMELINE
   ========================================================================== */

body.page-day-here .day-timeline__items {
    position: relative;

    border-top:
        1px solid
        rgba(255, 253, 248, 0.14);
}


body.page-day-here .day-timeline__item {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(145px, 0.28fr)
        minmax(0, 1fr);

    gap:
        clamp(2rem, 5vw, 5rem);

    align-items: center;

    min-height: 190px;

    padding:
        2.25rem
        clamp(1rem, 2vw, 1.5rem);

    border-bottom:
        1px solid
        rgba(255, 253, 248, 0.14);
}


body.page-day-here
.day-timeline__item:nth-child(even) {
    background:
        rgba(255, 253, 248, 0.025);
}


/* colored marker */

body.page-day-here
.day-timeline__item::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 7px;
    height: 58px;

    background: var(--color-blue);

    border-radius: 999px;

    transform:
        translateY(-50%)
        rotate(2deg);
}


body.page-day-here
.day-timeline__item:nth-child(2)::before {
    background: var(--color-red);
}


body.page-day-here
.day-timeline__item:nth-child(3)::before {
    background: var(--color-butter);
}


body.page-day-here
.day-timeline__item:nth-child(4)::before {
    background: #82b784;
}


body.page-day-here
.day-timeline__item:nth-child(5)::before {
    background: #8b72b6;
}


body.page-day-here
.day-timeline__item:nth-child(6)::before {
    background: var(--color-red);
}


body.page-day-here
.day-timeline__item:nth-child(7)::before {
    background: var(--color-blue);
}


body.page-day-here
.day-timeline__item:nth-child(8)::before {
    background: var(--color-butter);
}


body.page-day-here
.day-timeline__item:nth-child(9)::before {
    background: #82b784;
}


/* ==========================================================================
   TIME
   ========================================================================== */

body.page-day-here .day-timeline__time {
    display: block;

    color:
        rgba(255, 253, 248, 0.22);

    font-family: var(--font-display);

    font-size:
        clamp(
            3rem,
            5vw,
            5rem
        );

    font-weight: 950;

    line-height: 0.85;

    letter-spacing: -0.07em;
}


/* ==========================================================================
   ITEM TITLES
   ========================================================================== */

body.page-day-here
.day-timeline__item h3 {
    margin:
        0
        0
        0.7rem;

    color: var(--color-blue);

    font-family: var(--font-display);

    font-size:
        clamp(
            2rem,
            3.3vw,
            3.2rem
        );

    font-weight: 950;

    line-height: 0.95;

    letter-spacing: -0.045em;
}


body.page-day-here
.day-timeline__item:nth-child(2) h3 {
    color: var(--color-red);
}


body.page-day-here
.day-timeline__item:nth-child(3) h3 {
    color: var(--color-butter);
}


body.page-day-here
.day-timeline__item:nth-child(4) h3 {
    color: #82b784;
}


body.page-day-here
.day-timeline__item:nth-child(5) h3 {
    color: #a78bd1;
}


body.page-day-here
.day-timeline__item:nth-child(6) h3 {
    color: var(--color-red);
}


body.page-day-here
.day-timeline__item:nth-child(7) h3 {
    color: var(--color-blue);
}


body.page-day-here
.day-timeline__item:nth-child(8) h3 {
    color: var(--color-butter);
}


body.page-day-here
.day-timeline__item:nth-child(9) h3 {
    color: #82b784;
}


/* ==========================================================================
   ITEM COPY
   ========================================================================== */

body.page-day-here
.day-timeline__item p {
    max-width: 690px;

    margin: 0;

    color:
        rgba(255, 253, 248, 0.64);

    font-size:
        clamp(
            0.98rem,
            1.2vw,
            1.06rem
        );

    line-height: 1.72;
}


/* ==========================================================================
   FINAL PICKUP ROW
   ========================================================================== */

body.page-day-here
.day-timeline__item--final {
    margin-top: 1rem;

    background:
        rgba(130, 183, 132, 0.08);
}


body.page-day-here
.day-timeline__item--final::after {
    content: "WE DID IT";

    position: absolute;

    right:
        clamp(
            1rem,
            3vw,
            2rem
        );

    top: 1rem;

    color:
        rgba(255, 253, 248, 0.07);

    font-family: var(--font-display);

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.5rem
        );

    font-weight: 950;

    letter-spacing: -0.06em;

    transform: rotate(-4deg);

    pointer-events: none;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-day-here
    .day-timeline__header {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    body.page-day-here
    .day-timeline__header
    .eyebrow {
        grid-column: auto;

        margin-bottom: 0;
    }


    body.page-day-here
    .day-timeline__header h2 {
        max-width: 12ch;
    }


    body.page-day-here
    .day-timeline__header > p:last-child {
        max-width: 700px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-day-here .day-timeline {
        padding:
            5rem
            0
            6rem;
    }


    body.page-day-here
    .day-timeline__inner {
        width:
            calc(100% - 2rem);
    }


    body.page-day-here
    .day-timeline__inner::before {
        height: 300px;

        margin-bottom: 4rem;

        background-position:
            63%
            center;

        border-radius:
            30px
            48px
            34px
            44px;
    }


    body.page-day-here
    .day-timeline__header {
        margin-bottom: 4rem;
    }


    body.page-day-here
    .day-timeline__header h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-day-here
    .day-timeline__item {
        grid-template-columns: 1fr;

        gap: 1rem;

        min-height: 0;

        padding:
            2.2rem
            1rem
            2.4rem;
    }


    body.page-day-here
    .day-timeline__time {
        font-size:
            clamp(
                2.7rem,
                13vw,
                3.8rem
            );
    }


    body.page-day-here
    .day-timeline__item::before {
        top: 2.2rem;

        width: 6px;
        height: 42px;

        transform: rotate(2deg);
    }


    body.page-day-here
    .day-timeline__item--final::after {
        top: auto;
        right: 0.8rem;
        bottom: 0.6rem;

        font-size: 2.8rem;
    }

}

/* ==========================================================================
   TH_DAY_ARRIVAL_V1
   A Day Here — First Things First / Arrival
   ========================================================================== */

body.page-day-here .day-arrival {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fff8e9 0%,
            #fffdf8 100%
        );

    overflow: hidden;
}


/* Soft blue paper shape */

body.page-day-here .day-arrival::before {
    content: "";

    position: absolute;

    top: -9rem;
    right: -8rem;

    width: 25rem;
    height: 25rem;

    background:
        rgba(77, 114, 216, 0.10);

    border-radius:
        58% 42% 63% 37%
        /
        46% 58% 42% 54%;

    transform: rotate(15deg);

    pointer-events: none;
}


/* Green outline */

body.page-day-here .day-arrival::after {
    content: "";

    position: absolute;

    left: -8rem;
    bottom: -9rem;

    width: 22rem;
    height: 22rem;

    border:
        2px solid
        rgba(80, 125, 82, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-day-here .day-arrival__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1240px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(320px, 0.8fr);

    gap:
        clamp(4rem, 7vw, 8rem);

    align-items: center;
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

body.page-day-here .day-arrival__figure {
    position: relative;

    margin: 0;

    padding-bottom: 3.2rem;
}


body.page-day-here .day-arrival__figure img {
    display: block;

    width: 100%;

    aspect-ratio: 1.42 / 1;

    object-fit: cover;

    object-position:
        48%
        center;

    border-radius:
        72px
        36px
        68px
        42px;

    box-shadow:
        0
        28px
        65px
        rgba(41, 42, 44, 0.15);
}


/* ==========================================================================
   DROP-OFF CAPTION
   ========================================================================== */

body.page-day-here .day-arrival__figure figcaption {
    position: absolute;

    z-index: 3;

    left:
        clamp(
            1.6rem,
            4vw,
            3.2rem
        );

    bottom: -0.4rem;

    width:
        min(
            365px,
            calc(100% - 3rem)
        );

    padding:
        1.4rem
        1.55rem
        1.55rem;

    color: #fffdf8;

    background: var(--color-graphite);

    box-shadow:
        0
        20px
        42px
        rgba(41, 42, 44, 0.20);

    transform: rotate(-1.5deg);
}


/* Tape */

body.page-day-here
.day-arrival__figure figcaption::before {
    content: "";

    position: absolute;

    top: -12px;
    left: 44%;

    width: 86px;
    height: 24px;

    background:
        rgba(244, 207, 99, 0.72);

    transform:
        translateX(-50%)
        rotate(2deg);
}


/* Red scribble */

body.page-day-here
.day-arrival__figure figcaption::after {
    content: "";

    position: absolute;

    right: 1.35rem;
    bottom: 1rem;

    width: 62px;
    height: 11px;

    border-top:
        7px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-6deg);
}


body.page-day-here
.day-arrival__figure figcaption span,
body.page-day-here
.day-arrival__figure figcaption strong {
    display: block;
}


body.page-day-here
.day-arrival__figure figcaption span {
    margin-bottom: 0.55rem;

    color: var(--color-butter);

    font-size: 0.67rem;
    font-weight: 950;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


body.page-day-here
.day-arrival__figure figcaption strong {
    max-width: 13ch;

    color: #fffdf8;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.7rem,
            2.8vw,
            2.55rem
        );

    font-weight: 950;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-day-here .day-arrival__copy {
    max-width: 560px;
}


body.page-day-here
.day-arrival__copy
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-day-here
.day-arrival__copy h2 {
    max-width: 9ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.7rem,
            5.5vw,
            5.6rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-day-here
.day-arrival__copy h2::after {
    content: "";

    display: block;

    width: 96px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-day-here
.day-arrival__copy p {
    max-width: 525px;

    margin: 0;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.78;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 920px) {

    body.page-day-here
    .day-arrival__inner {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }


    body.page-day-here
    .day-arrival__figure {
        width:
            min(
                820px,
                100%
            );
    }


    body.page-day-here
    .day-arrival__copy {
        max-width: 720px;
    }


    body.page-day-here
    .day-arrival__copy h2 {
        max-width: 12ch;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-day-here .day-arrival {
        padding:
            5rem
            0;
    }


    body.page-day-here
    .day-arrival__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-day-here
    .day-arrival__figure {
        padding-bottom: 0;
    }


    body.page-day-here
    .day-arrival__figure img {
        aspect-ratio: 4 / 5;

        object-position:
            48%
            center;

        border-radius:
            48px
            26px
            52px
            30px;
    }


    body.page-day-here
    .day-arrival__figure figcaption {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;

        width: auto;

        padding:
            1.2rem
            1.15rem
            1.3rem;
    }


    body.page-day-here
    .day-arrival__figure figcaption strong {
        font-size:
            clamp(
                1.55rem,
                8vw,
                2rem
            );
    }


    body.page-day-here
    .day-arrival__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }

}

/* ==========================================================================
   TH_DAY_PLAY_V1
   A Day Here — Play is doing a lot of work
   ========================================================================== */

body.page-day-here .day-play {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #e9f1df 0%,
            #f4f7ec 100%
        );

    overflow: hidden;
}


/* Giant faded PLAY */

body.page-day-here .day-play::before {
    content: "PLAY";

    position: absolute;

    left: -1rem;
    bottom: -1.2rem;

    color:
        rgba(80, 125, 82, 0.055);

    font-family: var(--font-display);

    font-size:
        clamp(
            10rem,
            20vw,
            20rem
        );

    font-weight: 950;

    line-height: 0.7;

    letter-spacing: -0.08em;

    pointer-events: none;
}


/* Red outline circle */

body.page-day-here .day-play::after {
    content: "";

    position: absolute;

    top: -9rem;
    right: -8rem;

    width: 24rem;
    height: 24rem;

    border:
        2px solid
        rgba(233, 92, 80, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

body.page-day-here .day-play__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;
}


/* ==========================================================================
   TOP LAYOUT
   ========================================================================== */

body.page-day-here .day-play__headline {
    display: grid;

    grid-template-columns:
        minmax(320px, 0.86fr)
        minmax(0, 1.14fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: end;

    margin-bottom:
        clamp(4rem, 7vw, 6.5rem);
}


body.page-day-here
.day-play__headline
.eyebrow {
    grid-column: 1 / -1;

    margin:
        0
        0
        -1rem;

    color: var(--color-blue);
}


body.page-day-here
.day-play__headline h2 {
    grid-column: 1;

    max-width: 9ch;

    margin: 0;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.7vw,
            5.8rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


body.page-day-here
.day-play__headline h2::after {
    content: "";

    display: block;

    width: 105px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-day-here .day-play__copy {
    display: grid;

    grid-template-columns:
        minmax(320px, 0.86fr)
        minmax(0, 1.14fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: start;
}


body.page-day-here
.day-play__copy
> p {
    max-width: 500px;

    margin: 0;

    padding-left: 1.5rem;

    border-left:
        5px solid
        var(--color-blue);

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.82;
}


/* ==========================================================================
   FACTS
   ========================================================================== */

body.page-day-here .day-play__facts {
    border-top:
        1px solid
        rgba(41, 42, 44, 0.16);
}


body.page-day-here
.day-play__facts
> div {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(130px, 0.38fr)
        minmax(0, 1fr);

    gap: 2rem;

    align-items: start;

    padding:
        2rem
        0;

    border-bottom:
        1px solid
        rgba(41, 42, 44, 0.16);
}


/* marker strokes */

body.page-day-here
.day-play__facts
> div::before {
    content: "";

    position: absolute;

    top: 1.8rem;
    left: 0;

    width: 48px;
    height: 7px;

    background: var(--color-blue);

    transform:
        translateY(-4px)
        rotate(-2deg);
}


body.page-day-here
.day-play__facts
> div:nth-child(2)::before {
    background: var(--color-red);
}


body.page-day-here
.day-play__facts
> div:nth-child(3)::before {
    background: var(--color-butter);
}


body.page-day-here
.day-play__facts
> div:nth-child(4)::before {
    background: #8b72b6;
}


/* ==========================================================================
   FACT TITLES
   ========================================================================== */

body.page-day-here
.day-play__facts
strong {
    display: block;

    padding-top: 0.65rem;

    color: var(--color-blue);

    font-family: var(--font-display);

    font-size:
        clamp(
            2rem,
            3vw,
            3rem
        );

    font-weight: 950;

    line-height: 0.95;

    letter-spacing: -0.045em;
}


body.page-day-here
.day-play__facts
> div:nth-child(2)
strong {
    color: var(--color-red);
}


body.page-day-here
.day-play__facts
> div:nth-child(3)
strong {
    color: #9a761a;
}


body.page-day-here
.day-play__facts
> div:nth-child(4)
strong {
    color: #7d65a5;
}


/* ==========================================================================
   FACT COPY
   ========================================================================== */

body.page-day-here
.day-play__facts
span {
    display: block;

    max-width: 480px;

    padding-top: 0.55rem;

    color:
        rgba(41, 42, 44, 0.66);

    font-size: 0.98rem;

    line-height: 1.7;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-day-here
    .day-play__headline {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    body.page-day-here
    .day-play__headline
    .eyebrow {
        grid-column: auto;

        margin-bottom: 0;
    }


    body.page-day-here
    .day-play__headline h2 {
        grid-column: auto;

        max-width: 12ch;
    }


    body.page-day-here
    .day-play__copy {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    body.page-day-here
    .day-play__copy
    > p {
        max-width: 700px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-day-here .day-play {
        padding:
            5rem
            0;
    }


    body.page-day-here
    .day-play__inner {
        width:
            calc(100% - 2rem);
    }


    body.page-day-here
    .day-play__headline {
        margin-bottom: 3.5rem;
    }


    body.page-day-here
    .day-play__headline h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-day-here
    .day-play__copy
    > p {
        padding-left: 1rem;

        border-left-width: 4px;
    }


    body.page-day-here
    .day-play__facts
    > div {
        grid-template-columns: 1fr;

        gap: 0.6rem;

        padding:
            2rem
            0;
    }


    body.page-day-here
    .day-play__facts
    strong {
        padding-top: 0.75rem;
    }


    body.page-day-here
    .day-play__facts
    span {
        padding-top: 0;
    }


    body.page-day-here
    .day-play::before {
        font-size: 8rem;
    }

}

/* ==========================================================================
   TH_DAY_PLAY_BALANCE_FIX_V2
   A Day Here — fill upper-right dead space with editorial field note
   ========================================================================== */

body.page-day-here .day-play__headline {
    position: relative;
}


/* ==========================================================================
   FIELD NOTE
   ========================================================================== */

body.page-day-here .day-play__headline::after {
    content:
        "VERY SERIOUS BUSINESS.\A"
        "They call it playing.";

    grid-column: 2;
    grid-row: 2;

    justify-self: center;
    align-self: center;

    width:
        min(
            390px,
            90%
        );

    padding:
        2.25rem
        2.4rem
        2.35rem;

    color: var(--color-graphite);

    background: #fffdf8;

    border:
        1px solid
        rgba(41, 42, 44, 0.08);

    box-shadow:
        0
        22px
        48px
        rgba(41, 42, 44, 0.12);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            1.7rem,
            2.6vw,
            2.7rem
        );

    font-weight: 900;

    line-height: 1.12;

    letter-spacing: -0.035em;

    white-space: pre-line;

    transform: rotate(2.2deg);
}


/* ==========================================================================
   TAPE EFFECT
   ========================================================================== */

body.page-day-here .day-play__headline::before {
    content: "";

    position: absolute;

    z-index: 3;

    top: 52%;
    right: 21%;

    width: 92px;
    height: 25px;

    background:
        rgba(244, 207, 99, 0.76);

    transform:
        translateY(-50%)
        rotate(-2deg);

    pointer-events: none;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-day-here
    .day-play__headline::after {
        grid-column: auto;
        grid-row: auto;

        justify-self: start;

        width:
            min(
                420px,
                92%
            );

        margin-top: 0.5rem;
    }


    body.page-day-here
    .day-play__headline::before {
        display: none;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-day-here
    .day-play__headline::after {
        width: 100%;

        box-sizing: border-box;

        padding:
            1.7rem
            1.5rem
            1.8rem;

        font-size:
            clamp(
                1.6rem,
                8vw,
                2.2rem
            );

        transform: rotate(1deg);
    }

}

/* ==========================================================================
   TH_DAY_PLAY_BALANCE_FIX_V2
   A Day Here — toddler workplace update
   ========================================================================== */

body.page-day-here .day-play__headline {
    position: relative;
}


/* ==========================================================================
   TODDLER FIELD NOTE
   ========================================================================== */

body.page-day-here .day-play__headline::after {
    content:
        "WORKPLACE UPDATE\A\A"
        "“You do it.”\A"
        "Delegation skills developing nicely.";

    grid-column: 2;
    grid-row: 2;

    justify-self: center;
    align-self: center;

    width:
        min(
            390px,
            90%
        );

    box-sizing: border-box;

    padding:
        2.2rem
        2.4rem
        2.35rem;

    color: var(--color-graphite);

    background: #fffdf8;

    border:
        1px solid
        rgba(41, 42, 44, 0.08);

    box-shadow:
        0
        22px
        48px
        rgba(41, 42, 44, 0.12);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            1.45rem,
            2.3vw,
            2.25rem
        );

    font-weight: 900;

    line-height: 1.18;

    letter-spacing: -0.035em;

    white-space: pre-line;

    transform: rotate(2deg);
}


/* ==========================================================================
   TAPE
   ========================================================================== */

body.page-day-here .day-play__headline::before {
    content: "";

    position: absolute;

    z-index: 4;

    top: 49%;
    right: 20%;

    width: 94px;
    height: 25px;

    background:
        rgba(244, 207, 99, 0.78);

    transform:
        translateY(-50%)
        rotate(-3deg);

    pointer-events: none;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-day-here
    .day-play__headline::after {
        grid-column: auto;
        grid-row: auto;

        justify-self: start;

        width:
            min(
                420px,
                92%
            );

        margin-top: 0.5rem;
    }


    body.page-day-here
    .day-play__headline::before {
        display: none;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-day-here
    .day-play__headline::after {
        width: 100%;

        padding:
            1.7rem
            1.5rem
            1.8rem;

        font-size:
            clamp(
                1.4rem,
                7vw,
                2rem
            );

        transform: rotate(1deg);
    }

}

/* ==========================================================================
   TH_DAY_FOOD_V1
   A Day Here — Meals + Snacks
   ========================================================================== */

body.page-day-here .day-food {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fff8e9 0%,
            #fffdf8 100%
        );

    overflow: hidden;
}


/* Soft red outline */

body.page-day-here .day-food::before {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 23rem;
    height: 23rem;

    border:
        2px solid
        rgba(233, 92, 80, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


/* Butter blob */

body.page-day-here .day-food::after {
    content: "";

    position: absolute;

    left: -8rem;
    bottom: -10rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(244, 207, 99, 0.22);

    border-radius:
        60% 40% 57% 43%
        /
        44% 58% 42% 56%;

    transform: rotate(-14deg);

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-day-here .day-food__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1240px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(320px, 0.8fr);

    grid-template-rows: auto;

    gap:
        clamp(4rem, 7vw, 8rem);

    align-items: center;
}


/* ==========================================================================
   MEALTIME PHOTO
   ========================================================================== */

body.page-day-here .day-food__inner::before {
    content: "";

    grid-column: 1;
    grid-row: 1;

    display: block;

    width: 100%;

    aspect-ratio: 1.4 / 1;

    background-image:
        linear-gradient(
            180deg,
            rgba(41, 42, 44, 0.00) 55%,
            rgba(41, 42, 44, 0.09) 100%
        ),
        url("../images/routine/a-day-here-mealtime.png");

    background-size: cover;

    background-position:
        50%
        center;

    background-repeat: no-repeat;

    border-radius:
        68px
        38px
        76px
        42px;

    box-shadow:
        0
        28px
        65px
        rgba(41, 42, 44, 0.15);

    transform: rotate(0.5deg);
}


/* ==========================================================================
   BREAKING NEWS NOTE
   ========================================================================== */

body.page-day-here .day-food__note {
    position: relative;
    z-index: 4;

    grid-column: 1;
    grid-row: 1;

    align-self: end;
    justify-self: start;

    width:
        min(
            370px,
            calc(100% - 3rem)
        );

    margin:
        0
        0
        -2.7rem
        clamp(1.5rem, 4vw, 3.5rem);

    padding:
        1.5rem
        1.6rem
        1.65rem;

    color: #fffdf8;

    background: var(--color-graphite);

    box-shadow:
        0
        22px
        48px
        rgba(41, 42, 44, 0.22);

    transform: rotate(-1.7deg);
}


/* Tape */

body.page-day-here .day-food__note::before {
    content: "";

    position: absolute;

    top: -12px;
    left: 46%;

    width: 90px;
    height: 24px;

    background:
        rgba(244, 207, 99, 0.75);

    transform:
        translateX(-50%)
        rotate(2deg);
}


/* Red scribble */

body.page-day-here .day-food__note::after {
    content: "";

    position: absolute;

    right: 1.4rem;
    bottom: 1rem;

    width: 62px;
    height: 11px;

    border-top:
        7px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-7deg);
}


body.page-day-here .day-food__note span,
body.page-day-here .day-food__note strong,
body.page-day-here .day-food__note small {
    display: block;
}


body.page-day-here .day-food__note span {
    margin-bottom: 0.55rem;

    color: var(--color-butter);

    font-size: 0.68rem;
    font-weight: 950;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


body.page-day-here .day-food__note strong {
    max-width: 14ch;

    margin-bottom: 0.55rem;

    color: #fffdf8;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.8rem,
            2.8vw,
            2.7rem
        );

    font-weight: 950;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


body.page-day-here .day-food__note small {
    color:
        rgba(255, 253, 248, 0.60);

    font-size: 0.76rem;
    font-weight: 750;

    line-height: 1.4;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-day-here .day-food__copy {
    grid-column: 2;
    grid-row: 1;

    max-width: 560px;
}


body.page-day-here
.day-food__copy
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-day-here
.day-food__copy h2 {
    max-width: 9ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.7rem,
            5.4vw,
            5.5rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-day-here
.day-food__copy h2::after {
    content: "";

    display: block;

    width: 98px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        #507d52;

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-day-here
.day-food__copy p {
    max-width: 520px;

    margin:
        0
        0
        1.4rem;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.78;
}


body.page-day-here
.day-food__copy p:last-child {
    margin-bottom: 0;

    color:
        rgba(41, 42, 44, 0.54);

    font-size: 0.92rem;

    line-height: 1.68;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 920px) {

    body.page-day-here
    .day-food__inner {
        grid-template-columns: 1fr;

        gap: 5rem;
    }


    body.page-day-here
    .day-food__inner::before {
        grid-column: 1;
        grid-row: 1;

        width:
            min(
                820px,
                100%
            );
    }


    body.page-day-here
    .day-food__note {
        grid-column: 1;
        grid-row: 1;
    }


    body.page-day-here
    .day-food__copy {
        grid-column: 1;
        grid-row: 2;

        max-width: 720px;
    }


    body.page-day-here
    .day-food__copy h2 {
        max-width: 12ch;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-day-here .day-food {
        padding:
            5rem
            0;
    }


    body.page-day-here
    .day-food__inner {
        width:
            calc(100% - 2rem);

        gap: 4rem;
    }


    body.page-day-here
    .day-food__inner::before {
        aspect-ratio: 4 / 5;

        background-position:
            52%
            center;

        border-radius:
            48px
            26px
            52px
            30px;
    }


    body.page-day-here
    .day-food__note {
        width: auto;

        margin:
            0
            1rem
            1rem;

        align-self: end;
        justify-self: stretch;

        padding:
            1.2rem
            1.15rem
            1.3rem;
    }


    body.page-day-here
    .day-food__note strong {
        font-size:
            clamp(
                1.55rem,
                8vw,
                2rem
            );
    }


    body.page-day-here
    .day-food__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }

}

/* ==========================================================================
   TH_DAY_OUTDOOR_V1
   A Day Here — Energy Management / Outside
   ========================================================================== */

body.page-day-here .day-outdoor {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #edf4ff 0%,
            #f7faff 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-day-here .day-outdoor::before {
    content: "";

    position: absolute;

    top: -8rem;
    left: -7rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(130, 183, 132, 0.17);

    border-radius:
        58% 42% 63% 37%
        /
        44% 59% 41% 56%;

    transform: rotate(-14deg);

    pointer-events: none;
}


body.page-day-here .day-outdoor::after {
    content: "";

    position: absolute;

    right: -7rem;
    bottom: -8rem;

    width: 22rem;
    height: 22rem;

    border:
        2px solid
        rgba(77, 114, 216, 0.15);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-day-here .day-outdoor__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1240px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.78fr)
        minmax(0, 1.22fr);

    gap:
        clamp(4rem, 7vw, 8rem);

    align-items: center;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-day-here .day-outdoor__copy {
    max-width: 570px;
}


body.page-day-here
.day-outdoor__copy
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-day-here
.day-outdoor__copy h2 {
    max-width: 9ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.7rem,
            5.5vw,
            5.6rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-day-here
.day-outdoor__copy h2::after {
    content: "";

    display: block;

    width: 105px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-day-here
.day-outdoor__copy p {
    max-width: 520px;

    margin: 0;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.8;
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

body.page-day-here .day-outdoor__figure {
    position: relative;

    margin: 0;

    padding-bottom: 3.25rem;
}


body.page-day-here
.day-outdoor__figure img {
    display: block;

    width: 100%;

    aspect-ratio: 1.42 / 1;

    object-fit: cover;

    object-position:
        57%
        center;

    border-radius:
        40px
        78px
        44px
        72px;

    box-shadow:
        0
        30px
        68px
        rgba(41, 42, 44, 0.16);

    transform: rotate(0.5deg);
}


/* ==========================================================================
   VOLUME NOTE
   ========================================================================== */

body.page-day-here .day-outdoor__figure figcaption {
    position: absolute;

    z-index: 3;

    right:
        clamp(
            1.5rem,
            4vw,
            3.5rem
        );

    bottom: -0.5rem;

    width:
        min(
            355px,
            calc(100% - 3rem)
        );

    padding:
        1.45rem
        1.55rem
        1.6rem;

    color: #fffdf8;

    background: var(--color-blue);

    box-shadow:
        0
        22px
        48px
        rgba(41, 42, 44, 0.20);

    transform: rotate(1.6deg);
}


/* Tape */

body.page-day-here
.day-outdoor__figure figcaption::before {
    content: "";

    position: absolute;

    top: -12px;
    left: 48%;

    width: 88px;
    height: 24px;

    background:
        rgba(244, 207, 99, 0.76);

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* Green scribble */

body.page-day-here
.day-outdoor__figure figcaption::after {
    content: "";

    position: absolute;

    right: 1.35rem;
    bottom: 1rem;

    width: 62px;
    height: 11px;

    border-top:
        7px solid
        #82b784;

    border-radius: 50%;

    transform: rotate(-6deg);
}


body.page-day-here
.day-outdoor__figure figcaption span,
body.page-day-here
.day-outdoor__figure figcaption strong {
    display: block;
}


body.page-day-here
.day-outdoor__figure figcaption span {
    margin-bottom: 0.55rem;

    color: var(--color-butter);

    font-size: 0.67rem;
    font-weight: 950;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


body.page-day-here
.day-outdoor__figure figcaption strong {
    max-width: 13ch;

    color: #fffdf8;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.75rem,
            2.8vw,
            2.6rem
        );

    font-weight: 950;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 920px) {

    body.page-day-here
    .day-outdoor__inner {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }


    body.page-day-here
    .day-outdoor__copy {
        max-width: 720px;
    }


    body.page-day-here
    .day-outdoor__copy h2 {
        max-width: 12ch;
    }


    body.page-day-here
    .day-outdoor__figure {
        width:
            min(
                820px,
                100%
            );
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-day-here .day-outdoor {
        padding:
            5rem
            0;
    }


    body.page-day-here
    .day-outdoor__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-day-here
    .day-outdoor__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-day-here
    .day-outdoor__figure {
        padding-bottom: 0;
    }


    body.page-day-here
    .day-outdoor__figure img {
        aspect-ratio: 4 / 5;

        object-position:
            58%
            center;

        border-radius:
            30px
            52px
            32px
            48px;
    }


    body.page-day-here
    .day-outdoor__figure figcaption {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;

        width: auto;

        padding:
            1.2rem
            1.15rem
            1.3rem;
    }


    body.page-day-here
    .day-outdoor__figure figcaption strong {
        font-size:
            clamp(
                1.55rem,
                8vw,
                2rem
            );
    }

}

/* ==========================================================================
   TH_DAY_REST_V1
   A Day Here — The Quiet-ish Part
   ========================================================================== */

body.page-day-here .day-rest {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #f1edf8 0%,
            #faf7fc 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-day-here .day-rest::before {
    content: "";

    position: absolute;

    top: -9rem;
    right: -7rem;

    width: 25rem;
    height: 25rem;

    background:
        rgba(139, 114, 182, 0.10);

    border-radius:
        58% 42% 61% 39%
        /
        46% 57% 43% 54%;

    transform: rotate(14deg);

    pointer-events: none;
}


body.page-day-here .day-rest::after {
    content: "QUIET-ISH";

    position: absolute;

    left: -1rem;
    bottom: -1rem;

    color:
        rgba(139, 114, 182, 0.055);

    font-family: var(--font-display);

    font-size:
        clamp(
            7rem,
            14vw,
            14rem
        );

    font-weight: 950;

    line-height: 0.72;

    letter-spacing: -0.08em;

    white-space: nowrap;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-day-here .day-rest__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.82fr)
        minmax(0, 1.18fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   SHHH / ISH
   ========================================================================== */

body.page-day-here .day-rest__statement {
    position: relative;

    width: fit-content;

    max-width: 100%;

    padding:
        2rem
        0;
}


body.page-day-here
.day-rest__statement span,
body.page-day-here
.day-rest__statement strong {
    display: block;
}


body.page-day-here
.day-rest__statement span {
    color: #7d65a5;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            4rem,
            7vw,
            7rem
        );

    font-weight: 900;

    line-height: 0.88;

    letter-spacing: -0.05em;

    transform: rotate(-3deg);
}


body.page-day-here
.day-rest__statement strong {
    margin-top: 0.25rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            6rem,
            10vw,
            10rem
        );

    font-weight: 950;

    line-height: 0.78;

    letter-spacing: -0.075em;
}


/* Butter whisper stroke */

body.page-day-here
.day-rest__statement::after {
    content: "";

    position: absolute;

    left: 12%;
    bottom: 0;

    width: 72%;
    height: 14px;

    border-top:
        9px solid
        var(--color-butter);

    border-radius: 50%;

    transform: rotate(-2deg);
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-day-here .day-rest__copy {
    position: relative;

    max-width: 650px;

    padding-left:
        clamp(
            1.4rem,
            3vw,
            2rem
        );

    border-left:
        6px solid
        var(--color-blue);
}


body.page-day-here
.day-rest__copy
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: #7d65a5;
}


body.page-day-here
.day-rest__copy h2 {
    max-width: 11ch;

    margin:
        0
        0
        1.9rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.6rem,
            5.4vw,
            5.5rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-day-here
.day-rest__copy p {
    max-width: 580px;

    margin:
        0
        0
        1.35rem;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.8;
}


body.page-day-here
.day-rest__copy p:last-child {
    position: relative;

    width: fit-content;

    max-width: 500px;

    margin:
        2rem
        0
        0;

    padding:
        1.25rem
        1.4rem;

    color: var(--color-graphite);

    background:
        rgba(255, 253, 248, 0.82);

    border:
        1px solid
        rgba(41, 42, 44, 0.07);

    box-shadow:
        0
        14px
        32px
        rgba(41, 42, 44, 0.08);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            1.15rem,
            1.7vw,
            1.45rem
        );

    font-weight: 850;

    line-height: 1.45;

    transform: rotate(-1deg);
}


/* Tape on joke note */

body.page-day-here
.day-rest__copy p:last-child::before {
    content: "";

    position: absolute;

    top: -10px;
    left: 50%;

    width: 76px;
    height: 20px;

    background:
        rgba(244, 207, 99, 0.70);

    transform:
        translateX(-50%)
        rotate(2deg);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-day-here
    .day-rest__inner {
        grid-template-columns: 1fr;

        gap: 5rem;
    }


    body.page-day-here
    .day-rest__copy {
        max-width: 720px;
    }


    body.page-day-here
    .day-rest__copy h2 {
        max-width: 13ch;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-day-here .day-rest {
        padding:
            5rem
            0;
    }


    body.page-day-here
    .day-rest__inner {
        width:
            calc(100% - 2rem);

        gap: 4rem;
    }


    body.page-day-here
    .day-rest__statement {
        padding-bottom: 1.5rem;
    }


    body.page-day-here
    .day-rest__statement span {
        font-size:
            clamp(
                3.5rem,
                16vw,
                5rem
            );
    }


    body.page-day-here
    .day-rest__statement strong {
        font-size:
            clamp(
                5rem,
                23vw,
                7rem
            );
    }


    body.page-day-here
    .day-rest__copy {
        padding-left: 1rem;

        border-left-width: 4px;
    }


    body.page-day-here
    .day-rest__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-day-here
    .day-rest__copy p:last-child {
        width: auto;
    }


    body.page-day-here
    .day-rest::after {
        font-size: 5.5rem;
    }

}

/* ==========================================================================
   TH_DAY_PICKUP_V1
   A Day Here — End-of-Day Investigation
   ========================================================================== */

body.page-day-here .day-pickup {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fff5dd 0%,
            #fffaf0 100%
        );

    overflow: hidden;
}


/* Soft blue circle */

body.page-day-here .day-pickup::before {
    content: "";

    position: absolute;

    top: -8rem;
    left: -7rem;

    width: 23rem;
    height: 23rem;

    border:
        2px solid
        rgba(77, 114, 216, 0.13);

    border-radius: 50%;

    pointer-events: none;
}


/* Red organic shape */

body.page-day-here .day-pickup::after {
    content: "";

    position: absolute;

    right: -9rem;
    bottom: -10rem;

    width: 26rem;
    height: 26rem;

    background:
        rgba(233, 92, 80, 0.10);

    border-radius:
        61% 39% 55% 45%
        /
        45% 58% 42% 55%;

    transform: rotate(16deg);

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-day-here .day-pickup__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   HEADLINE
   ========================================================================== */

body.page-day-here
.day-pickup__inner
> div:first-child {
    max-width: 570px;
}


body.page-day-here
.day-pickup__inner
> div:first-child
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-day-here
.day-pickup__inner
> div:first-child
h2 {
    max-width: 10ch;

    margin: 0;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.7rem,
            5.6vw,
            5.7rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-day-here
.day-pickup__inner
> div:first-child
h2::after {
    content: "";

    display: block;

    width: 105px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


/* ==========================================================================
   RIGHT COPY
   ========================================================================== */

body.page-day-here .day-pickup__copy {
    max-width: 650px;
}


body.page-day-here
.day-pickup__copy
> p {
    max-width: 590px;

    margin:
        0
        0
        2.5rem;

    padding-left: 1.5rem;

    border-left:
        5px solid
        #507d52;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.8;
}


/* ==========================================================================
   "NOTHING" CARD
   ========================================================================== */

body.page-day-here
.day-pickup__copy
blockquote {
    position: relative;

    width:
        min(
            520px,
            92%
        );

    margin:
        0
        0
        0
        auto;

    padding:
        clamp(2.2rem, 4vw, 3rem);

    color: #fffdf8;

    background: var(--color-blue);

    box-shadow:
        0
        24px
        55px
        rgba(41, 42, 44, 0.18);

    transform: rotate(1.8deg);
}


/* Tape */

body.page-day-here
.day-pickup__copy
blockquote::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 48%;

    width: 96px;
    height: 25px;

    background:
        rgba(244, 207, 99, 0.78);

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* Butter scribble */

body.page-day-here
.day-pickup__copy
blockquote::after {
    content: "";

    position: absolute;

    right: 1.7rem;
    bottom: 1.5rem;

    width: 68px;
    height: 12px;

    border-top:
        7px solid
        var(--color-butter);

    border-radius: 50%;

    transform: rotate(-7deg);
}


/* ==========================================================================
   QUOTE
   ========================================================================== */

body.page-day-here
.day-pickup__copy
blockquote p {
    margin:
        0
        0
        1.1rem;

    color: #fffdf8;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            4rem,
            7vw,
            7rem
        );

    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -0.05em;

    transform: rotate(-2deg);
}


/* ==========================================================================
   EVIDENCE LINE
   ========================================================================== */

body.page-day-here
.day-pickup__copy
blockquote footer {
    max-width: 330px;

    color:
        rgba(255, 253, 248, 0.70);

    font-size: 0.85rem;

    font-weight: 800;

    line-height: 1.55;
}


/* ==========================================================================
   EXTRA STAMP
   ========================================================================== */

body.page-day-here
.day-pickup__copy
blockquote footer::before {
    content: "CASE CLOSED";

    display: block;

    width: fit-content;

    margin-bottom: 0.8rem;

    padding:
        0.35rem
        0.55rem;

    color: var(--color-butter);

    border:
        2px solid
        var(--color-butter);

    font-size: 0.63rem;
    font-weight: 950;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    transform: rotate(-2deg);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-day-here
    .day-pickup__inner {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }


    body.page-day-here
    .day-pickup__inner
    > div:first-child {
        max-width: 720px;
    }


    body.page-day-here
    .day-pickup__inner
    > div:first-child
    h2 {
        max-width: 12ch;
    }


    body.page-day-here
    .day-pickup__copy {
        max-width: 720px;
    }


    body.page-day-here
    .day-pickup__copy
    blockquote {
        margin-left: 0;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-day-here .day-pickup {
        padding:
            5rem
            0;
    }


    body.page-day-here
    .day-pickup__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-day-here
    .day-pickup__inner
    > div:first-child
    h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-day-here
    .day-pickup__copy
    > p {
        padding-left: 1rem;

        border-left-width: 4px;
    }


    body.page-day-here
    .day-pickup__copy
    blockquote {
        width: 100%;

        box-sizing: border-box;

        padding:
            2rem
            1.5rem;

        transform: rotate(1deg);
    }


    body.page-day-here
    .day-pickup__copy
    blockquote p {
        font-size:
            clamp(
                3.5rem,
                18vw,
                5.4rem
            );
    }

}

/* ==========================================================================
   TH_DAY_DEMO_NOTE_V1
   A Day Here — compact template disclaimer
   ========================================================================== */

body.page-day-here .day-demo {
    position: relative;

    width: 100%;

    padding:
        clamp(2.2rem, 4vw, 3.2rem)
        0;

    color: #fffdf8;

    background: #292a2c;

    overflow: hidden;
}


/* Faded background label */

body.page-day-here .day-demo::after {
    content: "SAMPLE DAY";

    position: absolute;

    top: 50%;
    right:
        clamp(
            1rem,
            4vw,
            4rem
        );

    color:
        rgba(255, 253, 248, 0.04);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.5rem,
            7vw,
            7rem
        );

    font-weight: 950;

    line-height: 1;

    letter-spacing: -0.07em;

    white-space: nowrap;

    transform:
        translateY(-50%)
        rotate(-3deg);

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

body.page-day-here .day-demo__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;
}


/* ==========================================================================
   NOTE
   ========================================================================== */

body.page-day-here
.day-demo__inner
p {
    max-width: 1030px;

    margin: 0;

    padding-left: 1.4rem;

    border-left:
        6px solid
        var(--color-blue);

    color:
        rgba(255, 253, 248, 0.68);

    font-size: 0.78rem;

    line-height: 1.72;
}


body.page-day-here
.day-demo__inner
strong {
    color: var(--color-butter);

    font-weight: 900;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-day-here .day-demo {
        padding:
            2.4rem
            0;
    }


    body.page-day-here
    .day-demo__inner {
        width:
            calc(100% - 2rem);
    }


    body.page-day-here
    .day-demo__inner
    p {
        padding-left: 1rem;

        border-left-width: 5px;

        font-size: 0.73rem;
    }


    body.page-day-here
    .day-demo::after {
        right: -3rem;

        font-size: 4.4rem;
    }

}

/* ==========================================================================
   TH_DAY_CTA_V1
   A Day Here — See a Real Day / final CTA
   ========================================================================== */

body.page-day-here .day-cta {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: #fffdf8;

    background: #4d72d8;

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-day-here .day-cta::before {
    content: "";

    position: absolute;

    top: -9rem;
    right: -7rem;

    width: 25rem;
    height: 25rem;

    border:
        2px solid
        rgba(255, 253, 248, 0.18);

    border-radius: 50%;

    pointer-events: none;
}


body.page-day-here .day-cta::after {
    content: "";

    position: absolute;

    left: -9rem;
    bottom: -11rem;

    width: 28rem;
    height: 28rem;

    background:
        rgba(233, 92, 80, 0.20);

    border-radius:
        60% 40% 56% 44%
        /
        45% 58% 42% 55%;

    transform: rotate(-16deg);

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-day-here .day-cta__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(320px, 0.72fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-day-here .day-cta__copy {
    max-width: 750px;
}


body.page-day-here
.day-cta__copy
.eyebrow {
    margin:
        0
        0
        1.5rem;

    color: var(--color-butter);
}


body.page-day-here
.day-cta__copy h2 {
    max-width: 12ch;

    margin:
        0
        0
        1.8rem;

    color: #fffdf8;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.7rem,
            5.6vw,
            5.8rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-day-here
.day-cta__copy h2::after {
    content: "";

    display: block;

    width: 105px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-butter);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-day-here
.day-cta__copy
> p:last-child {
    max-width: 620px;

    margin: 0;

    color:
        rgba(255, 253, 248, 0.76);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.78;
}


/* ==========================================================================
   ACTION CARD
   ========================================================================== */

body.page-day-here .day-cta__action {
    position: relative;

    min-height: 270px;

    padding:
        clamp(2.4rem, 4vw, 3.25rem);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    gap: 1.4rem;

    color: var(--color-graphite);

    background: var(--color-butter);

    box-shadow:
        0
        26px
        60px
        rgba(25, 35, 70, 0.24);

    transform: rotate(-2deg);
}


/* Tape */

body.page-day-here
.day-cta__action::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 50%;

    width: 98px;
    height: 25px;

    background:
        rgba(255, 253, 248, 0.74);

    transform:
        translateX(-50%)
        rotate(3deg);
}


/* Red marker scribble */

body.page-day-here
.day-cta__action::after {
    content: "";

    position: absolute;

    right: 1.6rem;
    bottom: 1.5rem;

    width: 68px;
    height: 12px;

    border-top:
        7px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-7deg);

    pointer-events: none;
}


/* ==========================================================================
   PRIMARY BUTTON
   ========================================================================== */

body.page-day-here
.day-cta__action
.button--primary {
    position: relative;
    z-index: 2;

    min-height: 54px;

    padding-inline: 1.7rem;

    color: #fffdf8 !important;

    background: var(--color-graphite) !important;

    box-shadow: none !important;
}


body.page-day-here
.day-cta__action
.button--primary:hover {
    color: var(--color-graphite) !important;

    background: #fffdf8 !important;

    box-shadow:
        0
        12px
        28px
        rgba(41, 42, 44, 0.15) !important;
}


/* ==========================================================================
   PARENT GUIDE LINK
   ========================================================================== */

body.page-day-here
.day-cta__action
.text-link {
    position: relative;
    z-index: 2;

    color: var(--color-graphite) !important;

    font-weight: 900 !important;
}


body.page-day-here
.day-cta__action
.text-link span {
    color: var(--color-red) !important;
}


body.page-day-here
.day-cta__action
.text-link:hover {
    color: var(--color-blue) !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-day-here
    .day-cta__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    body.page-day-here
    .day-cta__copy {
        max-width: 760px;
    }


    body.page-day-here
    .day-cta__copy h2 {
        max-width: 13ch;
    }


    body.page-day-here
    .day-cta__action {
        width:
            min(
                530px,
                94%
            );

        min-height: 235px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-day-here .day-cta {
        padding:
            5rem
            0;
    }


    body.page-day-here
    .day-cta__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-day-here
    .day-cta__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                13vw,
                4.3rem
            );
    }


    body.page-day-here
    .day-cta__action {
        width: 100%;

        min-height: 220px;

        padding:
            2.3rem
            1.5rem;

        box-sizing: border-box;

        transform: rotate(-1deg);
    }


    body.page-day-here
    .day-cta__action
    .button--primary {
        width: 100%;

        box-sizing: border-box;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    body.page-day-here
    .day-cta__action {
        transform: none;
    }

}

/* ==========================================================================
   TH_PARENT_HERO_V1
   Parent Guide — The useful stuff
   ========================================================================== */

body.page-parent-guide main {
    overflow: hidden;
}


/* ==========================================================================
   HERO
   ========================================================================== */

body.page-parent-guide .parent-hero {
    position: relative;

    width: 100%;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fff7e8 0%,
            #fffdf8 100%
        );

    overflow: hidden;
}


/* Soft green outline */

body.page-parent-guide .parent-hero::before {
    content: "";

    position: absolute;

    top: 4rem;
    left: -8rem;

    width: 23rem;
    height: 23rem;

    border:
        2px solid
        rgba(80, 125, 82, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


/* Soft blue organic shape */

body.page-parent-guide .parent-hero::after {
    content: "";

    position: absolute;

    right: -10rem;
    bottom: -12rem;

    width: 29rem;
    height: 29rem;

    background:
        rgba(77, 114, 216, 0.13);

    border-radius:
        60% 40% 56% 44%
        /
        45% 58% 42% 55%;

    transform: rotate(17deg);

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-parent-guide .parent-hero__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1220px,
            calc(100% - 3rem)
        );

    min-height: 720px;

    margin:
        0
        auto;

    padding:
        clamp(5rem, 8vw, 8rem)
        0
        clamp(5.5rem, 9vw, 8.5rem);

    display: grid;

    grid-template-columns:
        minmax(340px, 0.84fr)
        minmax(0, 1.16fr);

    gap:
        clamp(3rem, 6vw, 7rem);

    align-items: center;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-parent-guide .parent-hero__content {
    position: relative;
    z-index: 4;

    max-width: 575px;
}


body.page-parent-guide
.parent-hero__content
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-parent-guide .parent-hero__title {
    max-width: 10ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.9rem,
            5.8vw,
            5.9rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


body.page-parent-guide
.parent-hero__title
span {
    display: block;

    margin-top: 0.35rem;

    color: #507d52;
}


body.page-parent-guide
.parent-hero__title
span::after {
    content: "";

    display: block;

    width: 118px;
    height: 12px;

    margin-top: 1.35rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-parent-guide .parent-hero__intro {
    max-width: 530px;

    margin:
        0
        0
        2rem;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.76;
}


body.page-parent-guide .parent-hero__actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 1.4rem;
}


body.page-parent-guide
.parent-hero__actions
.text-link {
    color: var(--color-graphite);

    font-weight: 900;
}


body.page-parent-guide
.parent-hero__actions
.text-link span {
    color: var(--color-red);
}


/* ==========================================================================
   VISUAL
   ========================================================================== */

body.page-parent-guide .parent-hero__visual {
    position: relative;

    min-width: 0;
    min-height: 590px;
}


body.page-parent-guide .parent-hero__photo {
    position: absolute;

    inset:
        1rem
        0
        1.5rem
        0;

    margin: 0;

    overflow: hidden;

    border-radius:
        74px
        38px
        84px
        44px;

    background: #e9e1d3;

    box-shadow:
        0
        28px
        60px
        rgba(41, 42, 44, 0.14);

    transform: rotate(0.5deg);
}


body.page-parent-guide
.parent-hero__photo::after {
    content: "";

    position: absolute;

    inset: 0;

    border:
        1px solid
        rgba(41, 42, 44, 0.08);

    border-radius: inherit;

    pointer-events: none;
}


body.page-parent-guide
.parent-hero__photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        60%
        center;
}


/* ==========================================================================
   DECORATIVE SHAPES
   ========================================================================== */

body.page-parent-guide .parent-hero__shape {
    position: absolute;

    z-index: 5;

    pointer-events: none;
}


body.page-parent-guide
.parent-hero__shape--blue {
    left: -1.2rem;
    bottom: 3.2rem;

    width: 92px;
    height: 92px;

    background: var(--color-blue);

    border-radius:
        46% 54% 61% 39%
        /
        60% 40% 53% 47%;

    transform: rotate(-16deg);
}


body.page-parent-guide
.parent-hero__shape--yellow {
    top: -0.4rem;
    right: 1.4rem;

    width: 118px;
    height: 118px;

    background: var(--color-butter);

    border-radius:
        59% 41% 55% 45%
        /
        43% 58% 42% 57%;

    transform: rotate(13deg);
}


/* ==========================================================================
   PARENT INVENTORY NOTE
   ========================================================================== */

body.page-parent-guide .parent-hero__note {
    position: absolute;

    z-index: 6;

    right: 1rem;
    bottom: -0.5rem;

    width: 255px;

    padding:
        1.4rem
        1.45rem
        1.5rem;

    color: #fffdf8;

    background: var(--color-graphite);

    box-shadow:
        0
        20px
        44px
        rgba(41, 42, 44, 0.20);

    transform: rotate(-2.5deg);
}


/* Tape */

body.page-parent-guide
.parent-hero__note::before {
    content: "";

    position: absolute;

    top: -12px;
    left: 50%;

    width: 86px;
    height: 24px;

    background:
        rgba(244, 207, 99, 0.78);

    transform:
        translateX(-50%)
        rotate(3deg);
}


/* Red scribble */

body.page-parent-guide
.parent-hero__note::after {
    content: "";

    position: absolute;

    right: 1.25rem;
    bottom: 1rem;

    width: 59px;
    height: 11px;

    border-top:
        7px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-7deg);
}


body.page-parent-guide
.parent-hero__note span,
body.page-parent-guide
.parent-hero__note strong,
body.page-parent-guide
.parent-hero__note small {
    display: block;
}


body.page-parent-guide
.parent-hero__note span {
    margin-bottom: 0.5rem;

    color: var(--color-butter);

    font-size: 0.67rem;
    font-weight: 950;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


body.page-parent-guide
.parent-hero__note strong {
    max-width: 10ch;

    margin-bottom: 0.5rem;

    color: #fffdf8;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            1.8rem,
            2.5vw,
            2.25rem
        );

    font-weight: 900;

    line-height: 1;

    letter-spacing: -0.04em;
}


body.page-parent-guide
.parent-hero__note small {
    color:
        rgba(255, 253, 248, 0.62);

    font-size: 0.77rem;
    font-weight: 750;

    line-height: 1.4;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1000px) {

    body.page-parent-guide
    .parent-hero__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    body.page-parent-guide
    .parent-hero__content {
        max-width: 760px;
    }


    body.page-parent-guide
    .parent-hero__title {
        max-width: 12ch;
    }


    body.page-parent-guide
    .parent-hero__visual {
        width:
            min(
                100%,
                840px
            );

        min-height: 600px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-parent-guide
    .parent-hero__inner {
        width:
            calc(100% - 2rem);

        min-height: 0;

        padding:
            4rem
            0
            5rem;

        gap: 3.5rem;
    }


    body.page-parent-guide
    .parent-hero__title {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-parent-guide
    .parent-hero__visual {
        min-height: 470px;
    }


    body.page-parent-guide
    .parent-hero__photo {
        inset:
            0
            0
            1rem
            0;

        border-radius:
            50px
            26px
            54px
            30px;
    }


    body.page-parent-guide
    .parent-hero__photo img {
        object-position:
            60%
            center;
    }


    body.page-parent-guide
    .parent-hero__shape--blue {
        left: -0.8rem;

        width: 68px;
        height: 68px;
    }


    body.page-parent-guide
    .parent-hero__shape--yellow {
        top: -1rem;
        right: 0;

        width: 82px;
        height: 82px;
    }


    body.page-parent-guide
    .parent-hero__note {
        right: 0.5rem;
        bottom: -1rem;

        width: 205px;

        padding:
            1.15rem
            1.1rem
            1.25rem;
    }


    body.page-parent-guide
    .parent-hero__note strong {
        font-size: 1.65rem;
    }

}

/* ==========================================================================
   TH_PARENT_START_V1
   Parent Guide — Before the First Morning
   ========================================================================== */

body.page-parent-guide .parent-start {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #edf3ff 0%,
            #f7f9ff 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-parent-guide .parent-start::before {
    content: "";

    position: absolute;

    top: -9rem;
    right: -7rem;

    width: 25rem;
    height: 25rem;

    border:
        2px solid
        rgba(80, 125, 82, 0.15);

    border-radius: 50%;

    pointer-events: none;
}


body.page-parent-guide .parent-start::after {
    content: "MORNING";

    position: absolute;

    left: -1rem;
    bottom: -1rem;

    color:
        rgba(77, 114, 216, 0.045);

    font-family: var(--font-display);

    font-size:
        clamp(
            8rem,
            16vw,
            16rem
        );

    font-weight: 950;

    line-height: 0.72;

    letter-spacing: -0.08em;

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

body.page-parent-guide .parent-start__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;
}


body.page-parent-guide
.parent-start__inner
> .eyebrow {
    margin:
        0
        0
        clamp(3rem, 5vw, 4.5rem);

    color: var(--color-blue);
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-parent-guide .parent-start__layout {
    display: grid;

    grid-template-columns:
        minmax(320px, 0.84fr)
        minmax(0, 1.16fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   PREPARED / IS NICE
   ========================================================================== */

body.page-parent-guide .parent-start__statement {
    position: relative;

    width: fit-content;

    max-width: 100%;
}


body.page-parent-guide
.parent-start__statement span,
body.page-parent-guide
.parent-start__statement strong {
    display: block;
}


body.page-parent-guide
.parent-start__statement span {
    margin-bottom: 0.6rem;

    color: #507d52;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            3rem,
            5.4vw,
            5rem
        );

    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -0.045em;

    transform: rotate(-3deg);
}


body.page-parent-guide
.parent-start__statement strong {
    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            4.8rem,
            8vw,
            8rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.07em;
}


/* red marker stroke */

body.page-parent-guide
.parent-start__statement::after {
    content: "";

    position: absolute;

    left: 11%;
    bottom: -1.5rem;

    width: 73%;
    height: 14px;

    border-top:
        9px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-2deg);
}


/* ==========================================================================
   COPY / MEMO
   ========================================================================== */

body.page-parent-guide .parent-start__copy {
    position: relative;

    max-width: 650px;

    padding:
        clamp(2.2rem, 4vw, 3.1rem);

    background: #fffdf8;

    border:
        1px solid
        rgba(41, 42, 44, 0.07);

    box-shadow:
        0
        24px
        55px
        rgba(41, 42, 44, 0.11);

    transform: rotate(1deg);
}


/* tape */

body.page-parent-guide .parent-start__copy::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 50%;

    width: 96px;
    height: 25px;

    background:
        rgba(244, 207, 99, 0.78);

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* green scribble */

body.page-parent-guide .parent-start__copy::after {
    content: "";

    position: absolute;

    right: 1.6rem;
    bottom: 1.45rem;

    width: 67px;
    height: 12px;

    border-top:
        7px solid
        #507d52;

    border-radius: 50%;

    transform: rotate(-7deg);
}


body.page-parent-guide
.parent-start__copy h2 {
    max-width: 11ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.3rem,
            4.8vw,
            4.9rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-parent-guide
.parent-start__copy p {
    max-width: 560px;

    margin:
        0
        0
        1.35rem;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.78;
}


body.page-parent-guide
.parent-start__copy p:last-child {
    width: fit-content;

    max-width: 470px;

    margin:
        1.8rem
        0
        0;

    color: var(--color-blue);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            1.15rem,
            1.7vw,
            1.45rem
        );

    font-weight: 850;

    line-height: 1.45;

    transform: rotate(-1deg);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-parent-guide
    .parent-start__layout {
        grid-template-columns: 1fr;

        gap: 5rem;
    }


    body.page-parent-guide
    .parent-start__copy {
        max-width: 720px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-parent-guide .parent-start {
        padding:
            5rem
            0;
    }


    body.page-parent-guide
    .parent-start__inner {
        width:
            calc(100% - 2rem);
    }


    body.page-parent-guide
    .parent-start__layout {
        gap: 4rem;
    }


    body.page-parent-guide
    .parent-start__statement span {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.7rem
            );
    }


    body.page-parent-guide
    .parent-start__statement strong {
        font-size:
            clamp(
                4rem,
                18vw,
                5.8rem
            );
    }


    body.page-parent-guide
    .parent-start__copy {
        padding:
            2.1rem
            1.5rem;

        transform: rotate(0.5deg);
    }


    body.page-parent-guide
    .parent-start__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                2.9rem,
                13vw,
                4.2rem
            );
    }


    body.page-parent-guide
    .parent-start::after {
        font-size: 6rem;
    }

}

/* ==========================================================================
   TH_PARENT_BRING_V1
   Parent Guide — What to Bring
   ========================================================================== */

body.page-parent-guide .parent-bring {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fff8e9 0%,
            #fffdf8 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-parent-guide .parent-bring::before {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(244, 207, 99, 0.20);

    border-radius:
        59% 41% 63% 37%
        /
        45% 58% 42% 55%;

    transform: rotate(14deg);

    pointer-events: none;
}


body.page-parent-guide .parent-bring::after {
    content: "";

    position: absolute;

    left: -7rem;
    bottom: -8rem;

    width: 22rem;
    height: 22rem;

    border:
        2px solid
        rgba(77, 114, 216, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-parent-guide .parent-bring__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1240px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.14fr)
        minmax(340px, 0.86fr);

    gap:
        clamp(4rem, 7vw, 8rem);

    align-items: center;
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

body.page-parent-guide .parent-bring__figure {
    position: relative;

    margin: 0;

    padding-bottom: 3.4rem;
}


body.page-parent-guide
.parent-bring__figure img {
    display: block;

    width: 100%;

    aspect-ratio: 1.36 / 1;

    object-fit: cover;

    object-position:
        58%
        center;

    border-radius:
        70px
        38px
        76px
        42px;

    box-shadow:
        0
        28px
        65px
        rgba(41, 42, 44, 0.15);

    transform: rotate(-0.45deg);
}


/* ==========================================================================
   BAG CHECK NOTE
   ========================================================================== */

body.page-parent-guide
.parent-bring__figure figcaption {
    position: absolute;

    z-index: 3;

    left:
        clamp(
            1.5rem,
            4vw,
            3.3rem
        );

    bottom: -0.45rem;

    width:
        min(
            370px,
            calc(100% - 3rem)
        );

    padding:
        1.45rem
        1.55rem
        1.6rem;

    color: #fffdf8;

    background: var(--color-graphite);

    box-shadow:
        0
        22px
        48px
        rgba(41, 42, 44, 0.21);

    transform: rotate(-1.6deg);
}


/* Tape */

body.page-parent-guide
.parent-bring__figure figcaption::before {
    content: "";

    position: absolute;

    top: -12px;
    left: 47%;

    width: 90px;
    height: 24px;

    background:
        rgba(244, 207, 99, 0.76);

    transform:
        translateX(-50%)
        rotate(2deg);
}


/* Red scribble */

body.page-parent-guide
.parent-bring__figure figcaption::after {
    content: "";

    position: absolute;

    right: 1.35rem;
    bottom: 1rem;

    width: 63px;
    height: 11px;

    border-top:
        7px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-7deg);
}


body.page-parent-guide
.parent-bring__figure figcaption span,
body.page-parent-guide
.parent-bring__figure figcaption strong {
    display: block;
}


body.page-parent-guide
.parent-bring__figure figcaption span {
    margin-bottom: 0.55rem;

    color: var(--color-butter);

    font-size: 0.67rem;
    font-weight: 950;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


body.page-parent-guide
.parent-bring__figure figcaption strong {
    max-width: 14ch;

    color: #fffdf8;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.75rem,
            2.8vw,
            2.6rem
        );

    font-weight: 950;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-parent-guide .parent-bring__copy {
    max-width: 590px;
}


body.page-parent-guide
.parent-bring__copy
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-parent-guide
.parent-bring__copy h2 {
    max-width: 10ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.7rem,
            5.4vw,
            5.5rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-parent-guide
.parent-bring__copy h2::after {
    content: "";

    display: block;

    width: 100px;
    height: 12px;

    margin-top: 1.45rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-parent-guide
.parent-bring__copy
> p {
    max-width: 545px;

    margin:
        0
        0
        clamp(2.8rem, 5vw, 4rem);

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.78;
}


/* ==========================================================================
   PRACTICAL LIST
   ========================================================================== */

body.page-parent-guide .parent-bring__list {
    border-top:
        1px solid
        rgba(41, 42, 44, 0.16);
}


body.page-parent-guide
.parent-bring__list
> div {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(145px, 0.42fr)
        minmax(0, 1fr);

    gap: 1.8rem;

    align-items: start;

    padding:
        1.8rem
        0;

    border-bottom:
        1px solid
        rgba(41, 42, 44, 0.16);
}


/* Marker strokes */

body.page-parent-guide
.parent-bring__list
> div::before {
    content: "";

    position: absolute;

    top: 1.55rem;
    left: 0;

    width: 46px;
    height: 7px;

    background: var(--color-blue);

    transform:
        translateY(-4px)
        rotate(-2deg);
}


body.page-parent-guide
.parent-bring__list
> div:nth-child(2)::before {
    background: var(--color-red);
}


body.page-parent-guide
.parent-bring__list
> div:nth-child(3)::before {
    background: #507d52;
}


body.page-parent-guide
.parent-bring__list
> div:nth-child(4)::before {
    background: var(--color-butter);
}


/* ==========================================================================
   LIST TITLES
   ========================================================================== */

body.page-parent-guide
.parent-bring__list
strong {
    display: block;

    padding-top: 0.55rem;

    color: var(--color-blue);

    font-family: var(--font-display);

    font-size:
        clamp(
            1.65rem,
            2.4vw,
            2.3rem
        );

    font-weight: 950;

    line-height: 0.95;

    letter-spacing: -0.04em;
}


body.page-parent-guide
.parent-bring__list
> div:nth-child(2)
strong {
    color: var(--color-red);
}


body.page-parent-guide
.parent-bring__list
> div:nth-child(3)
strong {
    color: #507d52;
}


body.page-parent-guide
.parent-bring__list
> div:nth-child(4)
strong {
    color: #987419;
}


/* ==========================================================================
   LIST COPY
   ========================================================================== */

body.page-parent-guide
.parent-bring__list
span {
    display: block;

    max-width: 330px;

    padding-top: 0.45rem;

    color:
        rgba(41, 42, 44, 0.64);

    font-size: 0.94rem;

    line-height: 1.66;
}


/* Give Patience a tiny handwritten nudge */

body.page-parent-guide
.parent-bring__list
> div:nth-child(4)
span {
    font-style: italic;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 940px) {

    body.page-parent-guide
    .parent-bring__inner {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }


    body.page-parent-guide
    .parent-bring__figure {
        width:
            min(
                820px,
                100%
            );
    }


    body.page-parent-guide
    .parent-bring__copy {
        max-width: 760px;
    }


    body.page-parent-guide
    .parent-bring__copy h2 {
        max-width: 12ch;
    }


    body.page-parent-guide
    .parent-bring__list
    span {
        max-width: 520px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-parent-guide .parent-bring {
        padding:
            5rem
            0;
    }


    body.page-parent-guide
    .parent-bring__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-parent-guide
    .parent-bring__figure {
        padding-bottom: 0;
    }


    body.page-parent-guide
    .parent-bring__figure img {
        aspect-ratio: 4 / 5;

        object-position:
            60%
            center;

        border-radius:
            48px
            26px
            52px
            30px;
    }


    body.page-parent-guide
    .parent-bring__figure figcaption {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;

        width: auto;

        padding:
            1.2rem
            1.15rem
            1.3rem;
    }


    body.page-parent-guide
    .parent-bring__figure figcaption strong {
        font-size:
            clamp(
                1.55rem,
                8vw,
                2rem
            );
    }


    body.page-parent-guide
    .parent-bring__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-parent-guide
    .parent-bring__list
    > div {
        grid-template-columns: 1fr;

        gap: 0.55rem;

        padding:
            1.8rem
            0;
    }


    body.page-parent-guide
    .parent-bring__list
    strong {
        padding-top: 0.7rem;
    }


    body.page-parent-guide
    .parent-bring__list
    span {
        max-width: 100%;

        padding-top: 0;
    }

}

/* ==========================================================================
   TH_PARENT_LABELS_V1
   Parent Guide — Label Literally Everything
   ========================================================================== */

body.page-parent-guide .parent-labels {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: #fffdf8;

    background: #292a2c;

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-parent-guide .parent-labels::before {
    content: "LABEL IT.";

    position: absolute;

    left: -1rem;
    bottom: -1rem;

    color:
        rgba(255, 253, 248, 0.045);

    font-family: var(--font-display);

    font-size:
        clamp(
            8rem,
            17vw,
            17rem
        );

    font-weight: 950;

    line-height: 0.72;

    letter-spacing: -0.08em;

    white-space: nowrap;

    pointer-events: none;
}


body.page-parent-guide .parent-labels::after {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 23rem;
    height: 23rem;

    border:
        2px solid
        rgba(244, 207, 99, 0.16);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-parent-guide .parent-labels__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.88fr)
        minmax(0, 1.12fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   HEADLINE
   ========================================================================== */

body.page-parent-guide .parent-labels__headline {
    max-width: 590px;
}


body.page-parent-guide
.parent-labels__headline
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-butter);
}


body.page-parent-guide
.parent-labels__headline h2 {
    max-width: 9ch;

    margin: 0;

    color: #fffdf8;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.7vw,
            5.8rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


body.page-parent-guide
.parent-labels__headline h2::after {
    content: "";

    display: block;

    width: 104px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


/* ==========================================================================
   RIGHT COPY
   ========================================================================== */

body.page-parent-guide .parent-labels__copy {
    max-width: 650px;
}


body.page-parent-guide
.parent-labels__copy
> p {
    max-width: 590px;

    margin:
        0
        0
        clamp(3rem, 5vw, 4rem);

    padding-left: 1.5rem;

    border-left:
        5px solid
        var(--color-blue);

    color:
        rgba(255, 253, 248, 0.70);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.82;
}


/* ==========================================================================
   UNIDENTIFIED OBJECT NOTE
   ========================================================================== */

body.page-parent-guide .parent-labels__note {
    position: relative;

    width:
        min(
            430px,
            92%
        );

    margin:
        0
        0
        0
        auto;

    padding:
        clamp(2rem, 4vw, 2.7rem);

    color: var(--color-graphite);

    background: var(--color-butter);

    box-shadow:
        0
        24px
        55px
        rgba(0, 0, 0, 0.24);

    transform: rotate(2deg);
}


/* tape */

body.page-parent-guide .parent-labels__note::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 48%;

    width: 94px;
    height: 25px;

    background:
        rgba(255, 253, 248, 0.72);

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* blue scribble */

body.page-parent-guide .parent-labels__note::after {
    content: "";

    position: absolute;

    right: 1.5rem;
    bottom: 1.35rem;

    width: 65px;
    height: 12px;

    border-top:
        7px solid
        var(--color-blue);

    border-radius: 50%;

    transform: rotate(-7deg);
}


body.page-parent-guide .parent-labels__note span,
body.page-parent-guide .parent-labels__note strong,
body.page-parent-guide .parent-labels__note small {
    display: block;
}


body.page-parent-guide .parent-labels__note span {
    margin-bottom: 0.7rem;

    color: var(--color-blue);

    font-size: 0.67rem;
    font-weight: 950;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


body.page-parent-guide .parent-labels__note strong {
    margin-bottom: 0.7rem;

    color: var(--color-graphite);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            2.6rem,
            4.5vw,
            4.1rem
        );

    font-weight: 900;

    line-height: 0.95;

    letter-spacing: -0.045em;
}


body.page-parent-guide .parent-labels__note small {
    color:
        rgba(41, 42, 44, 0.66);

    font-size: 0.84rem;
    font-weight: 800;

    line-height: 1.45;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-parent-guide
    .parent-labels__inner {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }


    body.page-parent-guide
    .parent-labels__headline {
        max-width: 720px;
    }


    body.page-parent-guide
    .parent-labels__headline h2 {
        max-width: 12ch;
    }


    body.page-parent-guide
    .parent-labels__copy {
        max-width: 720px;
    }


    body.page-parent-guide
    .parent-labels__note {
        margin-left: 0;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-parent-guide .parent-labels {
        padding:
            5rem
            0;
    }


    body.page-parent-guide
    .parent-labels__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-parent-guide
    .parent-labels__headline h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-parent-guide
    .parent-labels__copy
    > p {
        padding-left: 1rem;

        border-left-width: 4px;
    }


    body.page-parent-guide
    .parent-labels__note {
        width: 100%;

        box-sizing: border-box;

        padding:
            2rem
            1.5rem;

        transform: rotate(1deg);
    }


    body.page-parent-guide
    .parent-labels__note strong {
        font-size:
            clamp(
                2.5rem,
                13vw,
                3.6rem
            );
    }


    body.page-parent-guide
    .parent-labels::before {
        font-size: 6rem;
    }

}

/* ==========================================================================
   TH_PARENT_CLOTHES_V1
   Parent Guide — Clothing Strategy / Dress for Dirt
   ========================================================================== */

body.page-parent-guide .parent-clothes {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #f4f7ec 0%,
            #fffdf8 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-parent-guide .parent-clothes::before {
    content: "";

    position: absolute;

    top: -8rem;
    left: -8rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(130, 183, 132, 0.16);

    border-radius:
        60% 40% 56% 44%
        /
        45% 58% 42% 55%;

    transform: rotate(-15deg);

    pointer-events: none;
}


body.page-parent-guide .parent-clothes::after {
    content: "";

    position: absolute;

    right: -7rem;
    bottom: -8rem;

    width: 22rem;
    height: 22rem;

    border:
        2px solid
        rgba(233, 92, 80, 0.13);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-parent-guide .parent-clothes__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.82fr)
        minmax(0, 1.18fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   DRESS / FOR DIRT
   ========================================================================== */

body.page-parent-guide .parent-clothes__statement {
    position: relative;

    width: fit-content;

    max-width: 100%;
}


body.page-parent-guide
.parent-clothes__statement span,
body.page-parent-guide
.parent-clothes__statement strong {
    display: block;
}


body.page-parent-guide
.parent-clothes__statement span {
    margin-bottom: 0.55rem;

    color: #507d52;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            3.2rem,
            5.6vw,
            5.2rem
        );

    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -0.045em;

    transform: rotate(-3deg);
}


body.page-parent-guide
.parent-clothes__statement strong {
    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            4.8rem,
            8vw,
            8rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.07em;
}


body.page-parent-guide
.parent-clothes__statement::after {
    content: "";

    position: absolute;

    left: 10%;
    bottom: -1.5rem;

    width: 76%;
    height: 14px;

    border-top:
        9px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-2deg);
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-parent-guide .parent-clothes__copy {
    max-width: 650px;

    padding-left:
        clamp(
            1.4rem,
            3vw,
            2rem
        );

    border-left:
        6px solid
        var(--color-blue);
}


body.page-parent-guide
.parent-clothes__copy
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-parent-guide
.parent-clothes__copy h2 {
    max-width: 11ch;

    margin:
        0
        0
        1.9rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.6rem,
            5.3vw,
            5.4rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-parent-guide
.parent-clothes__copy p {
    max-width: 590px;

    margin:
        0
        0
        1.35rem;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.8;
}


/* final practical line */

body.page-parent-guide
.parent-clothes__copy p:last-child {
    position: relative;

    width: fit-content;

    max-width: 520px;

    margin:
        2rem
        0
        0;

    padding:
        1.25rem
        1.4rem;

    color: var(--color-graphite);

    background:
        rgba(255, 253, 248, 0.84);

    border:
        1px solid
        rgba(41, 42, 44, 0.07);

    box-shadow:
        0
        14px
        32px
        rgba(41, 42, 44, 0.08);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            1.1rem,
            1.65vw,
            1.4rem
        );

    font-weight: 850;

    line-height: 1.45;

    transform: rotate(-1deg);
}


body.page-parent-guide
.parent-clothes__copy p:last-child::before {
    content: "";

    position: absolute;

    top: -10px;
    left: 50%;

    width: 78px;
    height: 20px;

    background:
        rgba(244, 207, 99, 0.72);

    transform:
        translateX(-50%)
        rotate(2deg);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-parent-guide
    .parent-clothes__inner {
        grid-template-columns: 1fr;

        gap: 5rem;
    }


    body.page-parent-guide
    .parent-clothes__copy {
        max-width: 720px;
    }


    body.page-parent-guide
    .parent-clothes__copy h2 {
        max-width: 13ch;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-parent-guide .parent-clothes {
        padding:
            5rem
            0;
    }


    body.page-parent-guide
    .parent-clothes__inner {
        width:
            calc(100% - 2rem);

        gap: 4rem;
    }


    body.page-parent-guide
    .parent-clothes__statement span {
        font-size:
            clamp(
                2.7rem,
                13vw,
                4rem
            );
    }


    body.page-parent-guide
    .parent-clothes__statement strong {
        font-size:
            clamp(
                4rem,
                18vw,
                5.8rem
            );
    }


    body.page-parent-guide
    .parent-clothes__copy {
        padding-left: 1rem;

        border-left-width: 4px;
    }


    body.page-parent-guide
    .parent-clothes__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-parent-guide
    .parent-clothes__copy p:last-child {
        width: auto;
    }

}

/* ==========================================================================
   TH_PARENT_COMMUNICATION_V1
   Parent Guide — Communication / Tell us the useful things
   ========================================================================== */

body.page-parent-guide .parent-communication {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #f9dc83 0%,
            #fce7a5 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-parent-guide .parent-communication::before {
    content: "UPDATE";

    position: absolute;

    left: -1rem;
    bottom: -1rem;

    color:
        rgba(41, 42, 44, 0.045);

    font-family: var(--font-display);

    font-size:
        clamp(
            9rem,
            18vw,
            18rem
        );

    font-weight: 950;

    line-height: 0.72;

    letter-spacing: -0.08em;

    pointer-events: none;
}


body.page-parent-guide .parent-communication::after {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 23rem;
    height: 23rem;

    border:
        2px solid
        rgba(77, 114, 216, 0.15);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-parent-guide .parent-communication__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 1fr)
        minmax(320px, 0.82fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-parent-guide .parent-communication__copy {
    max-width: 650px;
}


body.page-parent-guide
.parent-communication__copy
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-parent-guide
.parent-communication__copy h2 {
    max-width: 9ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.7vw,
            5.8rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


body.page-parent-guide
.parent-communication__copy h2::after {
    content: "";

    display: block;

    width: 102px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-parent-guide
.parent-communication__copy p {
    max-width: 585px;

    margin:
        0
        0
        1.4rem;

    color:
        rgba(41, 42, 44, 0.72);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.8;
}


body.page-parent-guide
.parent-communication__copy p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   MORNING UPDATE CARD
   ========================================================================== */

body.page-parent-guide .parent-communication__report {
    position: relative;

    width:
        min(
            460px,
            100%
        );

    min-height: 315px;

    box-sizing: border-box;

    padding:
        clamp(2.2rem, 4vw, 3rem);

    display: flex;

    flex-direction: column;

    justify-content: center;

    color: #fffdf8;

    background: var(--color-blue);

    box-shadow:
        0
        26px
        58px
        rgba(41, 42, 44, 0.19);

    transform: rotate(2deg);
}


/* Tape */

body.page-parent-guide
.parent-communication__report::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 50%;

    width: 98px;
    height: 25px;

    background:
        rgba(255, 253, 248, 0.72);

    transform:
        translateX(-50%)
        rotate(-3deg);
}


/* Red scribble */

body.page-parent-guide
.parent-communication__report::after {
    content: "";

    position: absolute;

    right: 1.6rem;
    bottom: 1.5rem;

    width: 68px;
    height: 12px;

    border-top:
        7px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-7deg);
}


/* ==========================================================================
   REPORT TYPE
   ========================================================================== */

body.page-parent-guide
.parent-communication__report span,
body.page-parent-guide
.parent-communication__report strong,
body.page-parent-guide
.parent-communication__report small {
    display: block;
}


body.page-parent-guide
.parent-communication__report span {
    margin-bottom: 1.1rem;

    color: var(--color-butter);

    font-size: 0.69rem;
    font-weight: 950;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


body.page-parent-guide
.parent-communication__report strong {
    max-width: 11ch;

    margin-bottom: 1.2rem;

    color: #fffdf8;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            2.6rem,
            4.5vw,
            4rem
        );

    font-weight: 900;

    line-height: 1;

    letter-spacing: -0.045em;

    transform: rotate(-1deg);
}


body.page-parent-guide
.parent-communication__report small {
    max-width: 270px;

    color:
        rgba(255, 253, 248, 0.72);

    font-size: 0.86rem;
    font-weight: 800;

    line-height: 1.5;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-parent-guide
    .parent-communication__inner {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }


    body.page-parent-guide
    .parent-communication__copy {
        max-width: 720px;
    }


    body.page-parent-guide
    .parent-communication__copy h2 {
        max-width: 12ch;
    }


    body.page-parent-guide
    .parent-communication__report {
        width:
            min(
                520px,
                94%
            );
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-parent-guide .parent-communication {
        padding:
            5rem
            0;
    }


    body.page-parent-guide
    .parent-communication__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-parent-guide
    .parent-communication__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-parent-guide
    .parent-communication__report {
        width: 100%;

        min-height: 275px;

        padding:
            2rem
            1.5rem;

        transform: rotate(1deg);
    }


    body.page-parent-guide
    .parent-communication__report strong {
        font-size:
            clamp(
                2.5rem,
                13vw,
                3.6rem
            );
    }


    body.page-parent-guide
    .parent-communication::before {
        font-size: 6rem;
    }

}

/* ==========================================================================
   TH_PARENT_FOOD_V1
   Parent Guide — Food + Allergies
   ========================================================================== */

body.page-parent-guide .parent-food {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #edf3ff 0%,
            #f7f9ff 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-parent-guide .parent-food::before {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(130, 183, 132, 0.12);

    border-radius:
        58% 42% 63% 37%
        /
        44% 59% 41% 56%;

    transform: rotate(15deg);

    pointer-events: none;
}


body.page-parent-guide .parent-food::after {
    content: "IMPORTANT";

    position: absolute;

    left: -1rem;
    bottom: -1rem;

    color:
        rgba(77, 114, 216, 0.045);

    font-family: var(--font-display);

    font-size:
        clamp(
            7rem,
            14vw,
            14rem
        );

    font-weight: 950;

    line-height: 0.72;

    letter-spacing: -0.08em;

    white-space: nowrap;

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

body.page-parent-guide .parent-food__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

body.page-parent-guide .parent-food__header {
    display: grid;

    grid-template-columns:
        minmax(320px, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: end;

    margin-bottom:
        clamp(4rem, 7vw, 6.5rem);
}


body.page-parent-guide
.parent-food__header
.eyebrow {
    grid-column: 1 / -1;

    margin:
        0
        0
        -1rem;

    color: var(--color-blue);
}


body.page-parent-guide
.parent-food__header h2 {
    max-width: 10ch;

    margin: 0;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.7vw,
            5.8rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


body.page-parent-guide
.parent-food__header h2::after {
    content: "";

    display: block;

    width: 105px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-parent-guide
.parent-food__header
> p:last-child {
    max-width: 590px;

    margin: 0;

    padding-left: 1.5rem;

    border-left:
        5px solid
        #507d52;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.8;
}


/* ==========================================================================
   FACT GRID
   ========================================================================== */

body.page-parent-guide .parent-food__facts {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        rgba(41, 42, 44, 0.16);
}


body.page-parent-guide
.parent-food__facts
> div {
    position: relative;

    min-height: 210px;

    padding:
        2.3rem
        2rem
        2.4rem;

    border-bottom:
        1px solid
        rgba(41, 42, 44, 0.16);
}


body.page-parent-guide
.parent-food__facts
> div:nth-child(odd) {
    border-right:
        1px solid
        rgba(41, 42, 44, 0.16);
}


/* ==========================================================================
   MARKERS
   ========================================================================== */

body.page-parent-guide
.parent-food__facts
> div::before {
    content: "";

    position: absolute;

    top: 0;
    left: 2rem;

    width: 54px;
    height: 7px;

    background: var(--color-red);

    transform:
        translateY(-4px)
        rotate(-2deg);
}


body.page-parent-guide
.parent-food__facts
> div:nth-child(2)::before {
    background: var(--color-blue);
}


body.page-parent-guide
.parent-food__facts
> div:nth-child(3)::before {
    background: #507d52;
}


body.page-parent-guide
.parent-food__facts
> div:nth-child(4)::before {
    background: var(--color-butter);
}


/* ==========================================================================
   TITLES
   ========================================================================== */

body.page-parent-guide
.parent-food__facts
strong {
    display: block;

    margin:
        0
        0
        0.9rem;

    color: var(--color-red);

    font-family: var(--font-display);

    font-size:
        clamp(
            2rem,
            3vw,
            3rem
        );

    font-weight: 950;

    line-height: 0.95;

    letter-spacing: -0.045em;
}


body.page-parent-guide
.parent-food__facts
> div:nth-child(2)
strong {
    color: var(--color-blue);
}


body.page-parent-guide
.parent-food__facts
> div:nth-child(3)
strong {
    color: #507d52;
}


body.page-parent-guide
.parent-food__facts
> div:nth-child(4)
strong {
    color: #987419;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-parent-guide
.parent-food__facts
span {
    display: block;

    max-width: 430px;

    color:
        rgba(41, 42, 44, 0.65);

    font-size: 0.98rem;

    line-height: 1.7;
}


/* Give Labels one tiny extra wink */

body.page-parent-guide
.parent-food__facts
> div:nth-child(4)
span {
    font-style: italic;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-parent-guide
    .parent-food__header {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    body.page-parent-guide
    .parent-food__header
    .eyebrow {
        grid-column: auto;

        margin-bottom: 0;
    }


    body.page-parent-guide
    .parent-food__header h2 {
        max-width: 12ch;
    }


    body.page-parent-guide
    .parent-food__header
    > p:last-child {
        max-width: 700px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-parent-guide .parent-food {
        padding:
            5rem
            0;
    }


    body.page-parent-guide
    .parent-food__inner {
        width:
            calc(100% - 2rem);
    }


    body.page-parent-guide
    .parent-food__header {
        margin-bottom: 3.5rem;
    }


    body.page-parent-guide
    .parent-food__header h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-parent-guide
    .parent-food__header
    > p:last-child {
        padding-left: 1rem;

        border-left-width: 4px;
    }


    body.page-parent-guide
    .parent-food__facts {
        grid-template-columns: 1fr;
    }


    body.page-parent-guide
    .parent-food__facts
    > div {
        min-height: 0;

        padding:
            2rem
            1rem
            2.2rem;

        border-right: 0 !important;
    }


    body.page-parent-guide
    .parent-food__facts
    > div::before {
        left: 1rem;
    }


    body.page-parent-guide
    .parent-food::after {
        font-size: 5rem;
    }

}

/* ==========================================================================
   TH_PARENT_HEALTH_V1
   Parent Guide — The Germ Department
   ========================================================================== */

body.page-parent-guide .parent-health {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fff4ed 0%,
            #fffaf5 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-parent-guide .parent-health::before {
    content: "";

    position: absolute;

    top: -8rem;
    left: -8rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(233, 92, 80, 0.10);

    border-radius:
        59% 41% 63% 37%
        /
        44% 58% 42% 56%;

    transform: rotate(-14deg);

    pointer-events: none;
}


body.page-parent-guide .parent-health::after {
    content: "GERMS";

    position: absolute;

    right: -1rem;
    bottom: -1rem;

    color:
        rgba(233, 92, 80, 0.045);

    font-family: var(--font-display);

    font-size:
        clamp(
            8rem,
            16vw,
            16rem
        );

    font-weight: 950;

    line-height: 0.72;

    letter-spacing: -0.08em;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-parent-guide .parent-health__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.88fr)
        minmax(0, 1.12fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   HEADLINE
   ========================================================================== */

body.page-parent-guide .parent-health__headline {
    max-width: 590px;
}


body.page-parent-guide
.parent-health__headline
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-red);
}


body.page-parent-guide
.parent-health__headline h2 {
    max-width: 10ch;

    margin: 0;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.7vw,
            5.8rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


body.page-parent-guide
.parent-health__headline h2::after {
    content: "";

    display: block;

    width: 104px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-blue);

    border-radius: 50%;

    transform: rotate(-3deg);
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-parent-guide .parent-health__copy {
    max-width: 650px;
}


body.page-parent-guide
.parent-health__copy
> p {
    max-width: 590px;

    margin:
        0
        0
        clamp(3rem, 5vw, 4rem);

    padding-left: 1.5rem;

    border-left:
        5px solid
        #507d52;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.82;
}


/* ==========================================================================
   TODDLER MEDICAL REPORT
   ========================================================================== */

body.page-parent-guide .parent-health__note {
    position: relative;

    width:
        min(
            440px,
            92%
        );

    margin:
        0
        0
        0
        auto;

    padding:
        clamp(2rem, 4vw, 2.8rem);

    color: #fffdf8;

    background: var(--color-red);

    box-shadow:
        0
        24px
        55px
        rgba(41, 42, 44, 0.17);

    transform: rotate(-2deg);
}


/* Tape */

body.page-parent-guide
.parent-health__note::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 48%;

    width: 96px;
    height: 25px;

    background:
        rgba(244, 207, 99, 0.80);

    transform:
        translateX(-50%)
        rotate(3deg);
}


/* Blue scribble */

body.page-parent-guide
.parent-health__note::after {
    content: "";

    position: absolute;

    right: 1.5rem;
    bottom: 1.35rem;

    width: 66px;
    height: 12px;

    border-top:
        7px solid
        var(--color-blue);

    border-radius: 50%;

    transform: rotate(-7deg);
}


body.page-parent-guide
.parent-health__note span,
body.page-parent-guide
.parent-health__note strong,
body.page-parent-guide
.parent-health__note small {
    display: block;
}


body.page-parent-guide
.parent-health__note span {
    margin-bottom: 0.8rem;

    color: var(--color-butter);

    font-size: 0.67rem;
    font-weight: 950;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


body.page-parent-guide
.parent-health__note strong {
    margin-bottom: 0.8rem;

    color: #fffdf8;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            2.8rem,
            4.8vw,
            4.3rem
        );

    font-weight: 900;

    line-height: 0.95;

    letter-spacing: -0.045em;
}


body.page-parent-guide
.parent-health__note small {
    max-width: 300px;

    color:
        rgba(255, 253, 248, 0.76);

    font-size: 0.86rem;
    font-weight: 800;

    line-height: 1.5;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-parent-guide
    .parent-health__inner {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }


    body.page-parent-guide
    .parent-health__headline {
        max-width: 720px;
    }


    body.page-parent-guide
    .parent-health__headline h2 {
        max-width: 12ch;
    }


    body.page-parent-guide
    .parent-health__copy {
        max-width: 720px;
    }


    body.page-parent-guide
    .parent-health__note {
        margin-left: 0;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-parent-guide .parent-health {
        padding:
            5rem
            0;
    }


    body.page-parent-guide
    .parent-health__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-parent-guide
    .parent-health__headline h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-parent-guide
    .parent-health__copy
    > p {
        padding-left: 1rem;

        border-left-width: 4px;
    }


    body.page-parent-guide
    .parent-health__note {
        width: 100%;

        box-sizing: border-box;

        padding:
            2rem
            1.5rem;

        transform: rotate(-1deg);
    }


    body.page-parent-guide
    .parent-health__note strong {
        font-size:
            clamp(
                2.6rem,
                13vw,
                3.8rem
            );
    }


    body.page-parent-guide
    .parent-health::after {
        font-size: 6rem;
    }

}

/* ==========================================================================
   TH_PARENT_MEDICATION_V1
   Parent Guide — Medication / Please Ask First
   ========================================================================== */

body.page-parent-guide .parent-medication {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #edf3ff 0%,
            #fffdf8 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-parent-guide .parent-medication::before {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(77, 114, 216, 0.10);

    border-radius:
        58% 42% 63% 37%
        /
        44% 59% 41% 56%;

    transform: rotate(14deg);

    pointer-events: none;
}


body.page-parent-guide .parent-medication::after {
    content: "ASK FIRST";

    position: absolute;

    left: -1rem;
    bottom: -1rem;

    color:
        rgba(77, 114, 216, 0.045);

    font-family: var(--font-display);

    font-size:
        clamp(
            7rem,
            14vw,
            14rem
        );

    font-weight: 950;

    line-height: 0.72;

    letter-spacing: -0.08em;

    white-space: nowrap;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-parent-guide .parent-medication__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.82fr)
        minmax(0, 1.18fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   PLEASE / ASK FIRST
   ========================================================================== */

body.page-parent-guide .parent-medication__statement {
    position: relative;

    width: fit-content;

    max-width: 100%;
}


body.page-parent-guide
.parent-medication__statement span,
body.page-parent-guide
.parent-medication__statement strong {
    display: block;
}


body.page-parent-guide
.parent-medication__statement span {
    margin-bottom: 0.55rem;

    color: var(--color-blue);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            3.1rem,
            5.5vw,
            5.1rem
        );

    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -0.045em;

    transform: rotate(-3deg);
}


body.page-parent-guide
.parent-medication__statement strong {
    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            4.8rem,
            8vw,
            8rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.07em;
}


body.page-parent-guide
.parent-medication__statement::after {
    content: "";

    position: absolute;

    left: 10%;
    bottom: -1.5rem;

    width: 76%;
    height: 14px;

    border-top:
        9px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-2deg);
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-parent-guide .parent-medication__copy {
    max-width: 650px;

    padding-left:
        clamp(
            1.4rem,
            3vw,
            2rem
        );

    border-left:
        6px solid
        #507d52;
}


body.page-parent-guide
.parent-medication__copy
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-parent-guide
.parent-medication__copy h2 {
    max-width: 10ch;

    margin:
        0
        0
        1.9rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.6rem,
            5.3vw,
            5.4rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-parent-guide
.parent-medication__copy p {
    max-width: 590px;

    margin:
        0
        0
        1.35rem;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.8;
}


/* final reminder */

body.page-parent-guide
.parent-medication__copy p:last-child {
    position: relative;

    width: fit-content;

    max-width: 520px;

    margin:
        2rem
        0
        0;

    padding:
        1.25rem
        1.4rem;

    color: var(--color-graphite);

    background: #fffdf8;

    border:
        1px solid
        rgba(41, 42, 44, 0.07);

    box-shadow:
        0
        14px
        32px
        rgba(41, 42, 44, 0.08);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            1.08rem,
            1.6vw,
            1.38rem
        );

    font-weight: 850;

    line-height: 1.45;

    transform: rotate(-1deg);
}


body.page-parent-guide
.parent-medication__copy p:last-child::before {
    content: "";

    position: absolute;

    top: -10px;
    left: 50%;

    width: 78px;
    height: 20px;

    background:
        rgba(244, 207, 99, 0.74);

    transform:
        translateX(-50%)
        rotate(2deg);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-parent-guide
    .parent-medication__inner {
        grid-template-columns: 1fr;

        gap: 5rem;
    }


    body.page-parent-guide
    .parent-medication__copy {
        max-width: 720px;
    }


    body.page-parent-guide
    .parent-medication__copy h2 {
        max-width: 13ch;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-parent-guide .parent-medication {
        padding:
            5rem
            0;
    }


    body.page-parent-guide
    .parent-medication__inner {
        width:
            calc(100% - 2rem);

        gap: 4rem;
    }


    body.page-parent-guide
    .parent-medication__statement span {
        font-size:
            clamp(
                2.7rem,
                13vw,
                4rem
            );
    }


    body.page-parent-guide
    .parent-medication__statement strong {
        font-size:
            clamp(
                4rem,
                18vw,
                5.8rem
            );
    }


    body.page-parent-guide
    .parent-medication__copy {
        padding-left: 1rem;

        border-left-width: 4px;
    }


    body.page-parent-guide
    .parent-medication__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-parent-guide
    .parent-medication__copy p:last-child {
        width: auto;
    }


    body.page-parent-guide
    .parent-medication::after {
        font-size: 5rem;
    }

}

/* ==========================================================================
   TH_PARENT_PICKUP_V1
   Parent Guide — Pickup / Authorized Handoff
   ========================================================================== */

body.page-parent-guide .parent-pickup {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fff8e9 0%,
            #fffdf8 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-parent-guide .parent-pickup::before {
    content: "";

    position: absolute;

    top: -8rem;
    left: -8rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(244, 207, 99, 0.20);

    border-radius:
        60% 40% 56% 44%
        /
        44% 59% 41% 56%;

    transform: rotate(-15deg);

    pointer-events: none;
}


body.page-parent-guide .parent-pickup::after {
    content: "";

    position: absolute;

    right: -7rem;
    bottom: -8rem;

    width: 23rem;
    height: 23rem;

    border:
        2px solid
        rgba(77, 114, 216, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-parent-guide .parent-pickup__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1240px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.80fr)
        minmax(0, 1.20fr);

    gap:
        clamp(4rem, 7vw, 8rem);

    align-items: center;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-parent-guide .parent-pickup__copy {
    max-width: 570px;
}


body.page-parent-guide
.parent-pickup__copy
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-parent-guide
.parent-pickup__copy h2 {
    max-width: 9ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.7rem,
            5.5vw,
            5.6rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-parent-guide
.parent-pickup__copy h2::after {
    content: "";

    display: block;

    width: 102px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-parent-guide
.parent-pickup__copy p {
    max-width: 530px;

    margin:
        0
        0
        1.4rem;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.8;
}


/* Make the cousin-neighbor-boyfriend line feel like a field note */

body.page-parent-guide
.parent-pickup__copy p:last-child {
    position: relative;

    width: fit-content;

    max-width: 500px;

    margin:
        2rem
        0
        0;

    padding:
        1.25rem
        1.4rem;

    color: var(--color-graphite);

    background:
        rgba(237, 243, 255, 0.90);

    border:
        1px solid
        rgba(41, 42, 44, 0.07);

    box-shadow:
        0
        14px
        32px
        rgba(41, 42, 44, 0.08);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            1.08rem,
            1.6vw,
            1.38rem
        );

    font-weight: 850;

    line-height: 1.45;

    transform: rotate(-1deg);
}


/* tape */

body.page-parent-guide
.parent-pickup__copy p:last-child::before {
    content: "";

    position: absolute;

    top: -10px;
    left: 50%;

    width: 78px;
    height: 20px;

    background:
        rgba(244, 207, 99, 0.74);

    transform:
        translateX(-50%)
        rotate(2deg);
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

body.page-parent-guide .parent-pickup__figure {
    position: relative;

    margin: 0;

    padding-bottom: 3.4rem;
}


body.page-parent-guide
.parent-pickup__figure img {
    display: block;

    width: 100%;

    aspect-ratio: 1.42 / 1;

    object-fit: cover;

    object-position:
        57%
        center;

    border-radius:
        42px
        78px
        46px
        72px;

    box-shadow:
        0
        30px
        68px
        rgba(41, 42, 44, 0.16);

    transform: rotate(0.5deg);
}


/* ==========================================================================
   END-OF-DAY SECURITY NOTE
   ========================================================================== */

body.page-parent-guide
.parent-pickup__figure figcaption {
    position: absolute;

    z-index: 3;

    right:
        clamp(
            1.5rem,
            4vw,
            3.5rem
        );

    bottom: -0.5rem;

    width:
        min(
            360px,
            calc(100% - 3rem)
        );

    padding:
        1.45rem
        1.55rem
        1.6rem;

    color: #fffdf8;

    background: var(--color-blue);

    box-shadow:
        0
        22px
        48px
        rgba(41, 42, 44, 0.21);

    transform: rotate(1.6deg);
}


/* tape */

body.page-parent-guide
.parent-pickup__figure figcaption::before {
    content: "";

    position: absolute;

    top: -12px;
    left: 48%;

    width: 90px;
    height: 24px;

    background:
        rgba(244, 207, 99, 0.78);

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* red scribble */

body.page-parent-guide
.parent-pickup__figure figcaption::after {
    content: "";

    position: absolute;

    right: 1.35rem;
    bottom: 1rem;

    width: 64px;
    height: 11px;

    border-top:
        7px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-7deg);
}


body.page-parent-guide
.parent-pickup__figure figcaption span,
body.page-parent-guide
.parent-pickup__figure figcaption strong {
    display: block;
}


body.page-parent-guide
.parent-pickup__figure figcaption span {
    margin-bottom: 0.55rem;

    color: var(--color-butter);

    font-size: 0.67rem;
    font-weight: 950;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


body.page-parent-guide
.parent-pickup__figure figcaption strong {
    max-width: 13ch;

    color: #fffdf8;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.75rem,
            2.8vw,
            2.6rem
        );

    font-weight: 950;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 920px) {

    body.page-parent-guide
    .parent-pickup__inner {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }


    body.page-parent-guide
    .parent-pickup__copy {
        max-width: 720px;
    }


    body.page-parent-guide
    .parent-pickup__copy h2 {
        max-width: 12ch;
    }


    body.page-parent-guide
    .parent-pickup__figure {
        width:
            min(
                820px,
                100%
            );
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-parent-guide .parent-pickup {
        padding:
            5rem
            0;
    }


    body.page-parent-guide
    .parent-pickup__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-parent-guide
    .parent-pickup__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-parent-guide
    .parent-pickup__copy p:last-child {
        width: auto;
    }


    body.page-parent-guide
    .parent-pickup__figure {
        padding-bottom: 0;
    }


    body.page-parent-guide
    .parent-pickup__figure img {
        aspect-ratio: 4 / 5;

        object-position:
            58%
            center;

        border-radius:
            30px
            52px
            32px
            48px;
    }


    body.page-parent-guide
    .parent-pickup__figure figcaption {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;

        width: auto;

        padding:
            1.2rem
            1.15rem
            1.3rem;
    }


    body.page-parent-guide
    .parent-pickup__figure figcaption strong {
        font-size:
            clamp(
                1.55rem,
                8vw,
                2rem
            );
    }

}

/* ==========================================================================
   TH_PARENT_FIRST_WEEK_V1
   Parent Guide — The First Week / Adjustment is Allowed
   ========================================================================== */

body.page-parent-guide .parent-first-week {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #f1edf8 0%,
            #faf7fc 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-parent-guide .parent-first-week::before {
    content: "";

    position: absolute;

    top: -9rem;
    right: -7rem;

    width: 25rem;
    height: 25rem;

    background:
        rgba(139, 114, 182, 0.10);

    border-radius:
        59% 41% 62% 38%
        /
        45% 58% 42% 55%;

    transform: rotate(15deg);

    pointer-events: none;
}


body.page-parent-guide .parent-first-week::after {
    content: "DAY ONE";

    position: absolute;

    left: -1rem;
    bottom: -1rem;

    color:
        rgba(139, 114, 182, 0.055);

    font-family: var(--font-display);

    font-size:
        clamp(
            8rem,
            16vw,
            16rem
        );

    font-weight: 950;

    line-height: 0.72;

    letter-spacing: -0.08em;

    white-space: nowrap;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-parent-guide .parent-first-week__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.88fr)
        minmax(0, 1.12fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   HEADLINE
   ========================================================================== */

body.page-parent-guide
.parent-first-week__inner
> div:first-child {
    max-width: 590px;
}


body.page-parent-guide
.parent-first-week__inner
> div:first-child
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: #7d65a5;
}


body.page-parent-guide
.parent-first-week__inner
> div:first-child
h2 {
    max-width: 9ch;

    margin: 0;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.7vw,
            5.8rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


body.page-parent-guide
.parent-first-week__inner
> div:first-child
h2::after {
    content: "";

    display: block;

    width: 105px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-parent-guide .parent-first-week__copy {
    max-width: 650px;

    padding-left:
        clamp(
            1.4rem,
            3vw,
            2rem
        );

    border-left:
        6px solid
        var(--color-blue);
}


body.page-parent-guide
.parent-first-week__copy
> p {
    max-width: 590px;

    margin:
        0
        0
        1.4rem;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.82;
}


body.page-parent-guide
.parent-first-week__copy
> p:nth-of-type(2) {
    margin-bottom:
        clamp(
            2.6rem,
            5vw,
            3.8rem
        );
}


/* ==========================================================================
   "YOU CAME BACK" CARD
   ========================================================================== */

body.page-parent-guide
.parent-first-week__copy
blockquote {
    position: relative;

    width:
        min(
            500px,
            94%
        );

    margin:
        0
        0
        0
        auto;

    padding:
        clamp(2.2rem, 4vw, 3rem);

    color: #fffdf8;

    background: #7d65a5;

    box-shadow:
        0
        24px
        55px
        rgba(41, 42, 44, 0.17);

    transform: rotate(1.8deg);
}


/* Tape */

body.page-parent-guide
.parent-first-week__copy
blockquote::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 48%;

    width: 96px;
    height: 25px;

    background:
        rgba(244, 207, 99, 0.80);

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* Green scribble */

body.page-parent-guide
.parent-first-week__copy
blockquote::after {
    content: "";

    position: absolute;

    right: 1.6rem;
    bottom: 1.4rem;

    width: 67px;
    height: 12px;

    border-top:
        7px solid
        #82b784;

    border-radius: 50%;

    transform: rotate(-7deg);
}


/* ==========================================================================
   QUOTE
   ========================================================================== */

body.page-parent-guide
.parent-first-week__copy
blockquote p {
    margin:
        0
        0
        1rem;

    color: #fffdf8;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            3rem,
            5vw,
            4.8rem
        );

    font-weight: 900;

    line-height: 0.96;

    letter-spacing: -0.045em;

    transform: rotate(-1deg);
}


body.page-parent-guide
.parent-first-week__copy
blockquote footer {
    max-width: 300px;

    color:
        rgba(255, 253, 248, 0.74);

    font-size: 0.86rem;
    font-weight: 800;

    line-height: 1.5;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-parent-guide
    .parent-first-week__inner {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }


    body.page-parent-guide
    .parent-first-week__inner
    > div:first-child {
        max-width: 720px;
    }


    body.page-parent-guide
    .parent-first-week__inner
    > div:first-child
    h2 {
        max-width: 12ch;
    }


    body.page-parent-guide
    .parent-first-week__copy {
        max-width: 720px;
    }


    body.page-parent-guide
    .parent-first-week__copy
    blockquote {
        margin-left: 0;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-parent-guide .parent-first-week {
        padding:
            5rem
            0;
    }


    body.page-parent-guide
    .parent-first-week__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-parent-guide
    .parent-first-week__inner
    > div:first-child
    h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-parent-guide
    .parent-first-week__copy {
        padding-left: 1rem;

        border-left-width: 4px;
    }


    body.page-parent-guide
    .parent-first-week__copy
    blockquote {
        width: 100%;

        box-sizing: border-box;

        padding:
            2rem
            1.5rem;

        transform: rotate(1deg);
    }


    body.page-parent-guide
    .parent-first-week__copy
    blockquote p {
        font-size:
            clamp(
                2.7rem,
                14vw,
                4rem
            );
    }


    body.page-parent-guide
    .parent-first-week::after {
        font-size: 5.5rem;
    }

}

/* ==========================================================================
   TH_PARENT_QUESTIONS_V1
   Parent Guide — When in Doubt / Ask It
   ========================================================================== */

body.page-parent-guide .parent-questions {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #e9f1df 0%,
            #f6f8ef 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-parent-guide .parent-questions::before {
    content: "";

    position: absolute;

    top: -8rem;
    left: -8rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(77, 114, 216, 0.10);

    border-radius:
        59% 41% 63% 37%
        /
        45% 58% 42% 55%;

    transform: rotate(-14deg);

    pointer-events: none;
}


body.page-parent-guide .parent-questions::after {
    content: "?";

    position: absolute;

    right:
        clamp(
            -1rem,
            1vw,
            1rem
        );

    bottom: -3rem;

    color:
        rgba(80, 125, 82, 0.055);

    font-family: var(--font-display);

    font-size:
        clamp(
            15rem,
            25vw,
            25rem
        );

    font-weight: 950;

    line-height: 0.72;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-parent-guide .parent-questions__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.82fr)
        minmax(0, 1.18fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   GOOD QUESTION NOTE
   ========================================================================== */

body.page-parent-guide .parent-questions__note {
    position: relative;

    width:
        min(
            440px,
            100%
        );

    min-height: 340px;

    box-sizing: border-box;

    padding:
        clamp(2.2rem, 4vw, 3rem);

    display: flex;

    flex-direction: column;

    justify-content: center;

    color: #fffdf8;

    background: var(--color-graphite);

    box-shadow:
        0
        26px
        58px
        rgba(41, 42, 44, 0.18);

    transform: rotate(-2deg);
}


/* tape */

body.page-parent-guide
.parent-questions__note::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 50%;

    width: 98px;
    height: 25px;

    background:
        rgba(244, 207, 99, 0.78);

    transform:
        translateX(-50%)
        rotate(3deg);
}


/* red scribble */

body.page-parent-guide
.parent-questions__note::after {
    content: "";

    position: absolute;

    right: 1.6rem;
    bottom: 1.45rem;

    width: 68px;
    height: 12px;

    border-top:
        7px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-7deg);
}


/* ==========================================================================
   NOTE TYPE
   ========================================================================== */

body.page-parent-guide
.parent-questions__note span,
body.page-parent-guide
.parent-questions__note strong,
body.page-parent-guide
.parent-questions__note small {
    display: block;
}


body.page-parent-guide
.parent-questions__note span {
    margin-bottom: 1.1rem;

    color: var(--color-butter);

    font-size: 0.69rem;
    font-weight: 950;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


body.page-parent-guide
.parent-questions__note strong {
    margin-bottom: 1rem;

    color: #fffdf8;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            4rem,
            7vw,
            6.3rem
        );

    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -0.05em;

    transform: rotate(-2deg);
}


body.page-parent-guide
.parent-questions__note small {
    color:
        rgba(255, 253, 248, 0.68);

    font-size: 0.88rem;
    font-weight: 800;

    line-height: 1.45;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-parent-guide .parent-questions__copy {
    max-width: 650px;
}


body.page-parent-guide
.parent-questions__copy
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-parent-guide
.parent-questions__copy h2 {
    max-width: 9ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.7vw,
            5.8rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


body.page-parent-guide
.parent-questions__copy h2::after {
    content: "";

    display: block;

    width: 102px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-parent-guide
.parent-questions__copy p {
    max-width: 585px;

    margin:
        0
        0
        1.4rem;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.8;
}


/* final sentence gets a small editorial emphasis */

body.page-parent-guide
.parent-questions__copy p:last-child {
    width: fit-content;

    max-width: 520px;

    margin:
        2rem
        0
        0;

    padding-left: 1.3rem;

    border-left:
        5px solid
        var(--color-blue);

    color: var(--color-graphite);

    font-weight: 750;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-parent-guide
    .parent-questions__inner {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }


    body.page-parent-guide
    .parent-questions__note {
        width:
            min(
                520px,
                94%
            );

        min-height: 310px;
    }


    body.page-parent-guide
    .parent-questions__copy {
        max-width: 720px;
    }


    body.page-parent-guide
    .parent-questions__copy h2 {
        max-width: 12ch;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-parent-guide .parent-questions {
        padding:
            5rem
            0;
    }


    body.page-parent-guide
    .parent-questions__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-parent-guide
    .parent-questions__note {
        width: 100%;

        min-height: 270px;

        padding:
            2rem
            1.5rem;

        transform: rotate(-1deg);
    }


    body.page-parent-guide
    .parent-questions__note strong {
        font-size:
            clamp(
                3.5rem,
                18vw,
                5rem
            );
    }


    body.page-parent-guide
    .parent-questions__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-parent-guide
    .parent-questions__copy p:last-child {
        padding-left: 1rem;

        border-left-width: 4px;
    }


    body.page-parent-guide
    .parent-questions::after {
        font-size: 11rem;
    }

}

/* ==========================================================================
   TH_PARENT_DEMO_NOTE_V1
   Parent Guide — compact template disclaimer
   ========================================================================== */

body.page-parent-guide .parent-demo {
    position: relative;

    width: 100%;

    padding:
        clamp(2.2rem, 4vw, 3.2rem)
        0;

    color: #fffdf8;

    background: #292a2c;

    overflow: hidden;
}


/* Faded background label */

body.page-parent-guide .parent-demo::after {
    content: "PARENT DEMO";

    position: absolute;

    top: 50%;
    right:
        clamp(
            1rem,
            4vw,
            4rem
        );

    color:
        rgba(255, 253, 248, 0.04);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.5rem,
            7vw,
            7rem
        );

    font-weight: 950;

    line-height: 1;

    letter-spacing: -0.07em;

    white-space: nowrap;

    transform:
        translateY(-50%)
        rotate(-3deg);

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

body.page-parent-guide .parent-demo__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;
}


/* ==========================================================================
   NOTE
   ========================================================================== */

body.page-parent-guide
.parent-demo__inner
p {
    max-width: 1030px;

    margin: 0;

    padding-left: 1.4rem;

    border-left:
        6px solid
        #507d52;

    color:
        rgba(255, 253, 248, 0.68);

    font-size: 0.78rem;

    line-height: 1.72;
}


body.page-parent-guide
.parent-demo__inner
strong {
    color: var(--color-butter);

    font-weight: 900;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-parent-guide .parent-demo {
        padding:
            2.4rem
            0;
    }


    body.page-parent-guide
    .parent-demo__inner {
        width:
            calc(100% - 2rem);
    }


    body.page-parent-guide
    .parent-demo__inner
    p {
        padding-left: 1rem;

        border-left-width: 5px;

        font-size: 0.73rem;
    }


    body.page-parent-guide
    .parent-demo::after {
        right: -3rem;

        font-size: 4.4rem;
    }

}

/* ==========================================================================
   TH_PARENT_CTA_V1
   Parent Guide — Bring the Questions / final CTA
   ========================================================================== */

body.page-parent-guide .parent-cta {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: #fffdf8;

    background: #d9554a;

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-parent-guide .parent-cta::before {
    content: "";

    position: absolute;

    top: -9rem;
    right: -7rem;

    width: 25rem;
    height: 25rem;

    border:
        2px solid
        rgba(255, 253, 248, 0.18);

    border-radius: 50%;

    pointer-events: none;
}


body.page-parent-guide .parent-cta::after {
    content: "";

    position: absolute;

    left: -9rem;
    bottom: -11rem;

    width: 28rem;
    height: 28rem;

    background:
        rgba(244, 207, 99, 0.26);

    border-radius:
        60% 40% 56% 44%
        /
        45% 58% 42% 55%;

    transform: rotate(-16deg);

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-parent-guide .parent-cta__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(320px, 0.72fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-parent-guide .parent-cta__copy {
    max-width: 750px;
}


body.page-parent-guide
.parent-cta__copy
.eyebrow {
    margin:
        0
        0
        1.5rem;

    color: var(--color-butter);
}


body.page-parent-guide
.parent-cta__copy h2 {
    max-width: 11ch;

    margin:
        0
        0
        1.8rem;

    color: #fffdf8;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.7vw,
            5.8rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


body.page-parent-guide
.parent-cta__copy h2::after {
    content: "";

    display: block;

    width: 105px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-butter);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-parent-guide
.parent-cta__copy
> p:last-child {
    max-width: 620px;

    margin: 0;

    color:
        rgba(255, 253, 248, 0.78);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.78;
}


/* ==========================================================================
   ACTION PANEL
   ========================================================================== */

body.page-parent-guide .parent-cta__action {
    position: relative;

    min-height: 270px;

    padding:
        clamp(2.4rem, 4vw, 3.2rem);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    gap: 1.4rem;

    color: var(--color-graphite);

    background: #fffdf8;

    box-shadow:
        0
        26px
        60px
        rgba(75, 35, 30, 0.23);

    transform: rotate(2deg);
}


/* Tape */

body.page-parent-guide
.parent-cta__action::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 50%;

    width: 98px;
    height: 25px;

    background:
        rgba(244, 207, 99, 0.78);

    transform:
        translateX(-50%)
        rotate(-3deg);
}


/* Blue scribble */

body.page-parent-guide
.parent-cta__action::after {
    content: "";

    position: absolute;

    right: 1.6rem;
    bottom: 1.5rem;

    width: 68px;
    height: 12px;

    border-top:
        7px solid
        var(--color-blue);

    border-radius: 50%;

    transform: rotate(-7deg);

    pointer-events: none;
}


/* ==========================================================================
   PRIMARY BUTTON
   ========================================================================== */

body.page-parent-guide
.parent-cta__action
.button--primary {
    position: relative;
    z-index: 2;

    min-height: 54px;

    padding-inline: 1.7rem;

    color: #fffdf8 !important;

    background: var(--color-graphite) !important;

    box-shadow: none !important;
}


body.page-parent-guide
.parent-cta__action
.button--primary:hover {
    color: var(--color-graphite) !important;

    background: var(--color-butter) !important;

    box-shadow:
        0
        12px
        28px
        rgba(41, 42, 44, 0.15) !important;
}


/* ==========================================================================
   SECONDARY LINK
   ========================================================================== */

body.page-parent-guide
.parent-cta__action
.text-link {
    position: relative;
    z-index: 2;

    color: var(--color-graphite) !important;

    font-weight: 900 !important;
}


body.page-parent-guide
.parent-cta__action
.text-link span {
    color: var(--color-red) !important;
}


body.page-parent-guide
.parent-cta__action
.text-link:hover {
    color: var(--color-blue) !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-parent-guide
    .parent-cta__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    body.page-parent-guide
    .parent-cta__copy {
        max-width: 760px;
    }


    body.page-parent-guide
    .parent-cta__copy h2 {
        max-width: 13ch;
    }


    body.page-parent-guide
    .parent-cta__action {
        width:
            min(
                530px,
                94%
            );

        min-height: 235px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-parent-guide .parent-cta {
        padding:
            5rem
            0;
    }


    body.page-parent-guide
    .parent-cta__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-parent-guide
    .parent-cta__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                13vw,
                4.3rem
            );
    }


    body.page-parent-guide
    .parent-cta__action {
        width: 100%;

        min-height: 220px;

        padding:
            2.3rem
            1.5rem;

        box-sizing: border-box;

        transform: rotate(1deg);
    }


    body.page-parent-guide
    .parent-cta__action
    .button--primary {
        width: 100%;

        box-sizing: border-box;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    body.page-parent-guide
    .parent-cta__action {
        transform: none;
    }

}

/* ==========================================================================
   TH_ENROLL_HERO_V1
   Enrollment + Tours — Come See the Place
   ========================================================================== */

body.page-enrollment-tours main {
    overflow: hidden;
}


/* ==========================================================================
   HERO
   ========================================================================== */

body.page-enrollment-tours .enroll-hero {
    position: relative;

    width: 100%;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fff7e8 0%,
            #fffdf8 100%
        );

    overflow: hidden;
}


/* Soft blue outline */

body.page-enrollment-tours .enroll-hero::before {
    content: "";

    position: absolute;

    top: 4rem;
    left: -8rem;

    width: 23rem;
    height: 23rem;

    border:
        2px solid
        rgba(77, 114, 216, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


/* Soft green field */

body.page-enrollment-tours .enroll-hero::after {
    content: "";

    position: absolute;

    right: -10rem;
    bottom: -12rem;

    width: 29rem;
    height: 29rem;

    background:
        rgba(130, 183, 132, 0.15);

    border-radius:
        60% 40% 56% 44%
        /
        45% 58% 42% 55%;

    transform: rotate(17deg);

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-enrollment-tours .enroll-hero__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1220px,
            calc(100% - 3rem)
        );

    min-height: 720px;

    margin:
        0
        auto;

    padding:
        clamp(5rem, 8vw, 8rem)
        0
        clamp(5.5rem, 9vw, 8.5rem);

    display: grid;

    grid-template-columns:
        minmax(340px, 0.84fr)
        minmax(0, 1.16fr);

    gap:
        clamp(3rem, 6vw, 7rem);

    align-items: center;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-enrollment-tours .enroll-hero__content {
    position: relative;
    z-index: 4;

    max-width: 575px;
}


body.page-enrollment-tours
.enroll-hero__content
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-enrollment-tours .enroll-hero__title {
    max-width: 10ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.9rem,
            5.8vw,
            5.9rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


body.page-enrollment-tours
.enroll-hero__title
span {
    display: block;

    margin-top: 0.35rem;

    color: var(--color-blue);
}


body.page-enrollment-tours
.enroll-hero__title
span::after {
    content: "";

    display: block;

    width: 118px;
    height: 12px;

    margin-top: 1.35rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-enrollment-tours .enroll-hero__intro {
    max-width: 530px;

    margin:
        0
        0
        2rem;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.76;
}


body.page-enrollment-tours .enroll-hero__actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 1.4rem;
}


body.page-enrollment-tours
.enroll-hero__actions
.text-link {
    color: var(--color-graphite);

    font-weight: 900;
}


body.page-enrollment-tours
.enroll-hero__actions
.text-link span {
    color: var(--color-red);
}


/* ==========================================================================
   VISUAL
   ========================================================================== */

body.page-enrollment-tours .enroll-hero__visual {
    position: relative;

    min-width: 0;
    min-height: 590px;
}


body.page-enrollment-tours .enroll-hero__photo {
    position: absolute;

    inset:
        1rem
        0
        1.5rem
        0;

    margin: 0;

    overflow: hidden;

    border-radius:
        74px
        38px
        84px
        44px;

    background: #e8e1d5;

    box-shadow:
        0
        28px
        60px
        rgba(41, 42, 44, 0.14);

    transform: rotate(-0.5deg);
}


body.page-enrollment-tours
.enroll-hero__photo::after {
    content: "";

    position: absolute;

    inset: 0;

    border:
        1px solid
        rgba(41, 42, 44, 0.08);

    border-radius: inherit;

    pointer-events: none;
}


body.page-enrollment-tours
.enroll-hero__photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        60%
        center;
}


/* ==========================================================================
   DECORATIVE SHAPES
   ========================================================================== */

body.page-enrollment-tours .enroll-hero__shape {
    position: absolute;

    z-index: 5;

    pointer-events: none;
}


body.page-enrollment-tours
.enroll-hero__shape--yellow {
    top: -0.4rem;
    right: 1.4rem;

    width: 118px;
    height: 118px;

    background: var(--color-butter);

    border-radius:
        59% 41% 55% 45%
        /
        43% 58% 42% 57%;

    transform: rotate(13deg);
}


body.page-enrollment-tours
.enroll-hero__shape--blue {
    left: -1.2rem;
    bottom: 3.2rem;

    width: 92px;
    height: 92px;

    background: var(--color-blue);

    border-radius:
        46% 54% 61% 39%
        /
        60% 40% 53% 47%;

    transform: rotate(-16deg);
}


/* ==========================================================================
   TOUR STATUS NOTE
   ========================================================================== */

body.page-enrollment-tours .enroll-hero__note {
    position: absolute;

    z-index: 6;

    right: 1rem;
    bottom: -0.5rem;

    width: 270px;

    padding:
        1.4rem
        1.45rem
        1.5rem;

    color: #fffdf8;

    background: var(--color-graphite);

    box-shadow:
        0
        20px
        44px
        rgba(41, 42, 44, 0.20);

    transform: rotate(-2.5deg);
}


/* Tape */

body.page-enrollment-tours
.enroll-hero__note::before {
    content: "";

    position: absolute;

    top: -12px;
    left: 50%;

    width: 88px;
    height: 24px;

    background:
        rgba(244, 207, 99, 0.78);

    transform:
        translateX(-50%)
        rotate(3deg);
}


/* Red scribble */

body.page-enrollment-tours
.enroll-hero__note::after {
    content: "";

    position: absolute;

    right: 1.25rem;
    bottom: 1rem;

    width: 60px;
    height: 11px;

    border-top:
        7px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-7deg);
}


body.page-enrollment-tours
.enroll-hero__note span,
body.page-enrollment-tours
.enroll-hero__note strong,
body.page-enrollment-tours
.enroll-hero__note small {
    display: block;
}


body.page-enrollment-tours
.enroll-hero__note span {
    margin-bottom: 0.55rem;

    color: var(--color-butter);

    font-size: 0.67rem;
    font-weight: 950;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


body.page-enrollment-tours
.enroll-hero__note strong {
    max-width: 13ch;

    margin-bottom: 0.55rem;

    color: #fffdf8;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            1.65rem,
            2.25vw,
            2.1rem
        );

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -0.04em;
}


body.page-enrollment-tours
.enroll-hero__note small {
    max-width: 210px;

    color:
        rgba(255, 253, 248, 0.62);

    font-size: 0.77rem;
    font-weight: 750;

    line-height: 1.4;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1000px) {

    body.page-enrollment-tours
    .enroll-hero__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    body.page-enrollment-tours
    .enroll-hero__content {
        max-width: 760px;
    }


    body.page-enrollment-tours
    .enroll-hero__title {
        max-width: 12ch;
    }


    body.page-enrollment-tours
    .enroll-hero__visual {
        width:
            min(
                100%,
                840px
            );

        min-height: 600px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-enrollment-tours
    .enroll-hero__inner {
        width:
            calc(100% - 2rem);

        min-height: 0;

        padding:
            4rem
            0
            5rem;

        gap: 3.5rem;
    }


    body.page-enrollment-tours
    .enroll-hero__title {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-enrollment-tours
    .enroll-hero__visual {
        min-height: 470px;
    }


    body.page-enrollment-tours
    .enroll-hero__photo {
        inset:
            0
            0
            1rem
            0;

        border-radius:
            50px
            26px
            54px
            30px;
    }


    body.page-enrollment-tours
    .enroll-hero__photo img {
        object-position:
            60%
            center;
    }


    body.page-enrollment-tours
    .enroll-hero__shape--yellow {
        top: -1rem;
        right: 0;

        width: 82px;
        height: 82px;
    }


    body.page-enrollment-tours
    .enroll-hero__shape--blue {
        left: -0.8rem;

        width: 68px;
        height: 68px;
    }


    body.page-enrollment-tours
    .enroll-hero__note {
        right: 0.5rem;
        bottom: -1rem;

        width: 215px;

        padding:
            1.15rem
            1.1rem
            1.25rem;
    }


    body.page-enrollment-tours
    .enroll-hero__note strong {
        font-size: 1.55rem;
    }

}

/* ==========================================================================
   TH_ENROLL_SEE_V1
   Enrollment + Tours — Why Tour / See It. Feel It.
   ========================================================================== */

body.page-enrollment-tours .enroll-see {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #e9f1df 0%,
            #f5f8ee 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-enrollment-tours .enroll-see::before {
    content: "";

    position: absolute;

    top: -9rem;
    right: -7rem;

    width: 25rem;
    height: 25rem;

    border:
        2px solid
        rgba(77, 114, 216, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


body.page-enrollment-tours .enroll-see::after {
    content: "LOOK AROUND";

    position: absolute;

    left: -1rem;
    bottom: -1rem;

    color:
        rgba(80, 125, 82, 0.05);

    font-family: var(--font-display);

    font-size:
        clamp(
            7rem,
            14vw,
            14rem
        );

    font-weight: 950;

    line-height: 0.72;

    letter-spacing: -0.08em;

    white-space: nowrap;

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

body.page-enrollment-tours .enroll-see__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;
}


body.page-enrollment-tours
.enroll-see__inner
> .eyebrow {
    margin:
        0
        0
        clamp(3rem, 5vw, 4.5rem);

    color: var(--color-blue);
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-enrollment-tours .enroll-see__layout {
    display: grid;

    grid-template-columns:
        minmax(320px, 0.82fr)
        minmax(0, 1.18fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   SEE IT / FEEL IT
   ========================================================================== */

body.page-enrollment-tours .enroll-see__statement {
    position: relative;

    width: fit-content;

    max-width: 100%;
}


body.page-enrollment-tours
.enroll-see__statement span,
body.page-enrollment-tours
.enroll-see__statement strong {
    display: block;
}


body.page-enrollment-tours
.enroll-see__statement span {
    margin-bottom: 0.55rem;

    color: var(--color-blue);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            3.2rem,
            5.6vw,
            5.2rem
        );

    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -0.045em;

    transform: rotate(-3deg);
}


body.page-enrollment-tours
.enroll-see__statement strong {
    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            4.8rem,
            8vw,
            8rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.07em;
}


body.page-enrollment-tours
.enroll-see__statement::after {
    content: "";

    position: absolute;

    left: 10%;
    bottom: -1.5rem;

    width: 76%;
    height: 14px;

    border-top:
        9px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-2deg);
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-enrollment-tours .enroll-see__copy {
    max-width: 650px;

    padding-left:
        clamp(
            1.4rem,
            3vw,
            2rem
        );

    border-left:
        6px solid
        var(--color-blue);
}


body.page-enrollment-tours
.enroll-see__copy h2 {
    max-width: 11ch;

    margin:
        0
        0
        1.9rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.6rem,
            5.3vw,
            5.4rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-enrollment-tours
.enroll-see__copy p {
    max-width: 590px;

    margin:
        0
        0
        1.4rem;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.8;
}


/* Browser tabs punchline */

body.page-enrollment-tours
.enroll-see__copy p:last-child {
    position: relative;

    width: fit-content;

    max-width: 520px;

    margin:
        2rem
        0
        0;

    padding:
        1.3rem
        1.45rem;

    color: var(--color-graphite);

    background: #fffdf8;

    border:
        1px solid
        rgba(41, 42, 44, 0.07);

    box-shadow:
        0
        15px
        34px
        rgba(41, 42, 44, 0.08);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            1.08rem,
            1.6vw,
            1.38rem
        );

    font-weight: 850;

    line-height: 1.45;

    transform: rotate(-1deg);
}


/* Tape */

body.page-enrollment-tours
.enroll-see__copy p:last-child::before {
    content: "";

    position: absolute;

    top: -10px;
    left: 50%;

    width: 80px;
    height: 20px;

    background:
        rgba(244, 207, 99, 0.74);

    transform:
        translateX(-50%)
        rotate(2deg);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-enrollment-tours
    .enroll-see__layout {
        grid-template-columns: 1fr;

        gap: 5rem;
    }


    body.page-enrollment-tours
    .enroll-see__copy {
        max-width: 720px;
    }


    body.page-enrollment-tours
    .enroll-see__copy h2 {
        max-width: 13ch;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-enrollment-tours .enroll-see {
        padding:
            5rem
            0;
    }


    body.page-enrollment-tours
    .enroll-see__inner {
        width:
            calc(100% - 2rem);
    }


    body.page-enrollment-tours
    .enroll-see__layout {
        gap: 4rem;
    }


    body.page-enrollment-tours
    .enroll-see__statement span {
        font-size:
            clamp(
                2.7rem,
                13vw,
                4rem
            );
    }


    body.page-enrollment-tours
    .enroll-see__statement strong {
        font-size:
            clamp(
                4rem,
                18vw,
                5.8rem
            );
    }


    body.page-enrollment-tours
    .enroll-see__copy {
        padding-left: 1rem;

        border-left-width: 4px;
    }


    body.page-enrollment-tours
    .enroll-see__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-enrollment-tours
    .enroll-see__copy p:last-child {
        width: auto;
    }


    body.page-enrollment-tours
    .enroll-see::after {
        font-size: 5rem;
    }

}

/* ==========================================================================
   TH_ENROLL_EXPECT_V1
   Enrollment + Tours — What Happens on a Tour
   ========================================================================== */

body.page-enrollment-tours .enroll-expect {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fff8e9 0%,
            #fffdf8 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-enrollment-tours .enroll-expect::before {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(244, 207, 99, 0.20);

    border-radius:
        59% 41% 63% 37%
        /
        45% 58% 42% 55%;

    transform: rotate(14deg);

    pointer-events: none;
}


body.page-enrollment-tours .enroll-expect::after {
    content: "";

    position: absolute;

    left: -7rem;
    bottom: -8rem;

    width: 22rem;
    height: 22rem;

    border:
        2px solid
        rgba(77, 114, 216, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-enrollment-tours .enroll-expect__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1240px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.14fr)
        minmax(340px, 0.86fr);

    gap:
        clamp(4rem, 7vw, 8rem);

    align-items: center;
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

body.page-enrollment-tours .enroll-expect__figure {
    position: relative;

    margin: 0;

    padding-bottom: 3.4rem;
}


body.page-enrollment-tours
.enroll-expect__figure img {
    display: block;

    width: 100%;

    aspect-ratio: 1.36 / 1;

    object-fit: cover;

    object-position:
        48%
        center;

    border-radius:
        70px
        38px
        76px
        42px;

    box-shadow:
        0
        28px
        65px
        rgba(41, 42, 44, 0.15);

    transform: rotate(-0.45deg);
}


/* ==========================================================================
   TOUR ITINERARY NOTE
   ========================================================================== */

body.page-enrollment-tours
.enroll-expect__figure figcaption {
    position: absolute;

    z-index: 3;

    left:
        clamp(
            1.5rem,
            4vw,
            3.3rem
        );

    bottom: -0.45rem;

    width:
        min(
            380px,
            calc(100% - 3rem)
        );

    padding:
        1.45rem
        1.55rem
        1.6rem;

    color: #fffdf8;

    background: var(--color-graphite);

    box-shadow:
        0
        22px
        48px
        rgba(41, 42, 44, 0.21);

    transform: rotate(-1.6deg);
}


/* Tape */

body.page-enrollment-tours
.enroll-expect__figure figcaption::before {
    content: "";

    position: absolute;

    top: -12px;
    left: 47%;

    width: 90px;
    height: 24px;

    background:
        rgba(244, 207, 99, 0.76);

    transform:
        translateX(-50%)
        rotate(2deg);
}


/* Red scribble */

body.page-enrollment-tours
.enroll-expect__figure figcaption::after {
    content: "";

    position: absolute;

    right: 1.35rem;
    bottom: 1rem;

    width: 63px;
    height: 11px;

    border-top:
        7px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-7deg);
}


body.page-enrollment-tours
.enroll-expect__figure figcaption span,
body.page-enrollment-tours
.enroll-expect__figure figcaption strong {
    display: block;
}


body.page-enrollment-tours
.enroll-expect__figure figcaption span {
    margin-bottom: 0.55rem;

    color: var(--color-butter);

    font-size: 0.67rem;
    font-weight: 950;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


body.page-enrollment-tours
.enroll-expect__figure figcaption strong {
    max-width: 14ch;

    color: #fffdf8;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.75rem,
            2.8vw,
            2.6rem
        );

    font-weight: 950;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-enrollment-tours .enroll-expect__copy {
    max-width: 590px;
}


body.page-enrollment-tours
.enroll-expect__copy
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-enrollment-tours
.enroll-expect__copy h2 {
    max-width: 9ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.7rem,
            5.4vw,
            5.5rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-enrollment-tours
.enroll-expect__copy h2::after {
    content: "";

    display: block;

    width: 100px;
    height: 12px;

    margin-top: 1.45rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-enrollment-tours
.enroll-expect__copy
> p {
    max-width: 545px;

    margin:
        0
        0
        clamp(2.8rem, 5vw, 4rem);

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.78;
}


/* ==========================================================================
   TOUR LIST
   ========================================================================== */

body.page-enrollment-tours .enroll-expect__list {
    border-top:
        1px solid
        rgba(41, 42, 44, 0.16);
}


body.page-enrollment-tours
.enroll-expect__list
> div {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(125px, 0.36fr)
        minmax(0, 1fr);

    gap: 1.8rem;

    align-items: start;

    padding:
        1.8rem
        0;

    border-bottom:
        1px solid
        rgba(41, 42, 44, 0.16);
}


/* Marker strokes */

body.page-enrollment-tours
.enroll-expect__list
> div::before {
    content: "";

    position: absolute;

    top: 1.55rem;
    left: 0;

    width: 46px;
    height: 7px;

    background: var(--color-blue);

    transform:
        translateY(-4px)
        rotate(-2deg);
}


body.page-enrollment-tours
.enroll-expect__list
> div:nth-child(2)::before {
    background: var(--color-red);
}


body.page-enrollment-tours
.enroll-expect__list
> div:nth-child(3)::before {
    background: #507d52;
}


body.page-enrollment-tours
.enroll-expect__list
> div:nth-child(4)::before {
    background: var(--color-butter);
}


/* ==========================================================================
   LIST TITLES
   ========================================================================== */

body.page-enrollment-tours
.enroll-expect__list strong {
    display: block;

    padding-top: 0.55rem;

    color: var(--color-blue);

    font-family: var(--font-display);

    font-size:
        clamp(
            1.7rem,
            2.5vw,
            2.4rem
        );

    font-weight: 950;

    line-height: 0.95;

    letter-spacing: -0.04em;
}


body.page-enrollment-tours
.enroll-expect__list
> div:nth-child(2) strong {
    color: var(--color-red);
}


body.page-enrollment-tours
.enroll-expect__list
> div:nth-child(3) strong {
    color: #507d52;
}


body.page-enrollment-tours
.enroll-expect__list
> div:nth-child(4) strong {
    color: #987419;
}


/* ==========================================================================
   LIST COPY
   ========================================================================== */

body.page-enrollment-tours
.enroll-expect__list span {
    display: block;

    max-width: 350px;

    padding-top: 0.45rem;

    color:
        rgba(41, 42, 44, 0.64);

    font-size: 0.94rem;

    line-height: 1.66;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 940px) {

    body.page-enrollment-tours
    .enroll-expect__inner {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }


    body.page-enrollment-tours
    .enroll-expect__figure {
        width:
            min(
                820px,
                100%
            );
    }


    body.page-enrollment-tours
    .enroll-expect__copy {
        max-width: 760px;
    }


    body.page-enrollment-tours
    .enroll-expect__copy h2 {
        max-width: 12ch;
    }


    body.page-enrollment-tours
    .enroll-expect__list span {
        max-width: 520px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-enrollment-tours .enroll-expect {
        padding:
            5rem
            0;
    }


    body.page-enrollment-tours
    .enroll-expect__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-enrollment-tours
    .enroll-expect__figure {
        padding-bottom: 0;
    }


    body.page-enrollment-tours
    .enroll-expect__figure img {
        aspect-ratio: 4 / 5;

        object-position:
            48%
            center;

        border-radius:
            48px
            26px
            52px
            30px;
    }


    body.page-enrollment-tours
    .enroll-expect__figure figcaption {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;

        width: auto;

        padding:
            1.2rem
            1.15rem
            1.3rem;
    }


    body.page-enrollment-tours
    .enroll-expect__figure figcaption strong {
        font-size:
            clamp(
                1.55rem,
                8vw,
                2rem
            );
    }


    body.page-enrollment-tours
    .enroll-expect__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-enrollment-tours
    .enroll-expect__list
    > div {
        grid-template-columns: 1fr;

        gap: 0.55rem;

        padding:
            1.8rem
            0;
    }


    body.page-enrollment-tours
    .enroll-expect__list strong {
        padding-top: 0.7rem;
    }


    body.page-enrollment-tours
    .enroll-expect__list span {
        max-width: 100%;

        padding-top: 0;
    }

}

/* ==========================================================================
   TH_ENROLL_QUESTIONS_V1
   Enrollment + Tours — Good Tour Questions
   ========================================================================== */

body.page-enrollment-tours .enroll-questions {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: #fffdf8;

    background: #292a2c;

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-enrollment-tours .enroll-questions::before {
    content: "?";

    position: absolute;

    right: -1rem;
    top: -5rem;

    color:
        rgba(255, 253, 248, 0.035);

    font-family: var(--font-display);

    font-size:
        clamp(
            18rem,
            30vw,
            30rem
        );

    font-weight: 950;

    line-height: 0.8;

    pointer-events: none;
}


body.page-enrollment-tours .enroll-questions::after {
    content: "";

    position: absolute;

    left: -8rem;
    bottom: -9rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(77, 114, 216, 0.10);

    border-radius:
        59% 41% 63% 37%
        /
        45% 58% 42% 55%;

    transform: rotate(-14deg);

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

body.page-enrollment-tours .enroll-questions__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

body.page-enrollment-tours .enroll-questions__header {
    display: grid;

    grid-template-columns:
        minmax(320px, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: end;

    margin-bottom:
        clamp(4.5rem, 7vw, 6.5rem);
}


body.page-enrollment-tours
.enroll-questions__header
.eyebrow {
    grid-column: 1 / -1;

    margin:
        0
        0
        -1rem;

    color: var(--color-butter);
}


body.page-enrollment-tours
.enroll-questions__header h2 {
    max-width: 11ch;

    margin: 0;

    color: #fffdf8;

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.7vw,
            5.8rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


body.page-enrollment-tours
.enroll-questions__header h2::after {
    content: "";

    display: block;

    width: 105px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-enrollment-tours
.enroll-questions__header
> p:last-child {
    max-width: 590px;

    margin: 0;

    padding-left: 1.5rem;

    border-left:
        5px solid
        var(--color-blue);

    color:
        rgba(255, 253, 248, 0.68);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.8;
}


/* ==========================================================================
   QUESTION LIST
   ========================================================================== */

body.page-enrollment-tours .enroll-questions__items {
    border-top:
        1px solid
        rgba(255, 253, 248, 0.14);
}


body.page-enrollment-tours
.enroll-questions__items
> div {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(120px, 0.22fr)
        minmax(0, 1fr);

    gap:
        clamp(2rem, 5vw, 5rem);

    align-items: center;

    min-height: 150px;

    padding:
        2rem
        1rem;

    border-bottom:
        1px solid
        rgba(255, 253, 248, 0.14);
}


body.page-enrollment-tours
.enroll-questions__items
> div:nth-child(even) {
    background:
        rgba(255, 253, 248, 0.025);
}


/* ==========================================================================
   NUMBERS
   ========================================================================== */

body.page-enrollment-tours
.enroll-questions__items span {
    display: block;

    color:
        rgba(255, 253, 248, 0.18);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.2rem,
            5vw,
            5rem
        );

    font-weight: 950;

    line-height: 0.85;

    letter-spacing: -0.07em;
}


/* ==========================================================================
   QUESTIONS
   ========================================================================== */

body.page-enrollment-tours
.enroll-questions__items strong {
    position: relative;

    display: block;

    max-width: 760px;

    padding-left: 1.3rem;

    color: #fffdf8;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.8rem
        );

    font-weight: 950;

    line-height: 1;

    letter-spacing: -0.045em;
}


body.page-enrollment-tours
.enroll-questions__items strong::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0.15em;

    width: 6px;
    height: 1.15em;

    background: var(--color-blue);

    border-radius: 999px;
}


body.page-enrollment-tours
.enroll-questions__items
> div:nth-child(2)
strong::before {
    background: var(--color-red);
}


body.page-enrollment-tours
.enroll-questions__items
> div:nth-child(3)
strong::before {
    background: #82b784;
}


body.page-enrollment-tours
.enroll-questions__items
> div:nth-child(4)
strong::before {
    background: var(--color-butter);
}


body.page-enrollment-tours
.enroll-questions__items
> div:nth-child(5)
strong::before {
    background: #a78bd1;
}


body.page-enrollment-tours
.enroll-questions__items
> div:nth-child(6)
strong::before {
    background: var(--color-blue);
}


/* ==========================================================================
   ALSO VALID NOTE
   ========================================================================== */

body.page-enrollment-tours .enroll-questions__note {
    position: relative;

    width:
        min(
            500px,
            92%
        );

    margin:
        clamp(4rem, 7vw, 6rem)
        0
        0
        auto;

    padding:
        clamp(2rem, 4vw, 2.8rem);

    color: var(--color-graphite);

    background: var(--color-butter);

    box-shadow:
        0
        24px
        55px
        rgba(0, 0, 0, 0.24);

    transform: rotate(2deg);
}


/* Tape */

body.page-enrollment-tours
.enroll-questions__note::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 48%;

    width: 96px;
    height: 25px;

    background:
        rgba(255, 253, 248, 0.74);

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* Blue scribble */

body.page-enrollment-tours
.enroll-questions__note::after {
    content: "";

    position: absolute;

    right: 1.5rem;
    bottom: 1.35rem;

    width: 67px;
    height: 12px;

    border-top:
        7px solid
        var(--color-blue);

    border-radius: 50%;

    transform: rotate(-7deg);
}


body.page-enrollment-tours
.enroll-questions__note span,
body.page-enrollment-tours
.enroll-questions__note strong,
body.page-enrollment-tours
.enroll-questions__note small {
    display: block;
}


body.page-enrollment-tours
.enroll-questions__note span {
    margin-bottom: 0.8rem;

    color: var(--color-blue);

    font-size: 0.68rem;
    font-weight: 950;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


body.page-enrollment-tours
.enroll-questions__note strong {
    max-width: 15ch;

    margin-bottom: 0.75rem;

    color: var(--color-graphite);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.7rem
        );

    font-weight: 900;

    line-height: 1;

    letter-spacing: -0.045em;
}


body.page-enrollment-tours
.enroll-questions__note small {
    color:
        rgba(41, 42, 44, 0.66);

    font-size: 0.84rem;
    font-weight: 800;

    line-height: 1.45;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-enrollment-tours
    .enroll-questions__header {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    body.page-enrollment-tours
    .enroll-questions__header
    .eyebrow {
        grid-column: auto;

        margin-bottom: 0;
    }


    body.page-enrollment-tours
    .enroll-questions__header h2 {
        max-width: 13ch;
    }


    body.page-enrollment-tours
    .enroll-questions__header
    > p:last-child {
        max-width: 700px;
    }


    body.page-enrollment-tours
    .enroll-questions__note {
        margin-left: 0;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-enrollment-tours .enroll-questions {
        padding:
            5rem
            0;
    }


    body.page-enrollment-tours
    .enroll-questions__inner {
        width:
            calc(100% - 2rem);
    }


    body.page-enrollment-tours
    .enroll-questions__header {
        margin-bottom: 3.5rem;
    }


    body.page-enrollment-tours
    .enroll-questions__header h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-enrollment-tours
    .enroll-questions__header
    > p:last-child {
        padding-left: 1rem;

        border-left-width: 4px;
    }


    body.page-enrollment-tours
    .enroll-questions__items
    > div {
        grid-template-columns: 1fr;

        gap: 0.8rem;

        min-height: 0;

        padding:
            2rem
            0;
    }


    body.page-enrollment-tours
    .enroll-questions__items span {
        font-size:
            clamp(
                2.7rem,
                13vw,
                3.8rem
            );
    }


    body.page-enrollment-tours
    .enroll-questions__items strong {
        padding-left: 1rem;

        font-size:
            clamp(
                1.7rem,
                8vw,
                2.4rem
            );
    }


    body.page-enrollment-tours
    .enroll-questions__note {
        width: 100%;

        box-sizing: border-box;

        padding:
            2rem
            1.5rem;

        transform: rotate(1deg);
    }


    body.page-enrollment-tours
    .enroll-questions__note strong {
        font-size:
            clamp(
                2.1rem,
                11vw,
                3.2rem
            );
    }


    body.page-enrollment-tours
    .enroll-questions::before {
        font-size: 15rem;
    }

}

/* ==========================================================================
   TH_ENROLL_PROCESS_V1
   Enrollment + Tours — Enrollment Process
   ========================================================================== */

body.page-enrollment-tours .enroll-process {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fff8e9 0%,
            #fffdf8 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-enrollment-tours .enroll-process::before {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(130, 183, 132, 0.14);

    border-radius:
        59% 41% 63% 37%
        /
        45% 58% 42% 55%;

    transform: rotate(14deg);

    pointer-events: none;
}


body.page-enrollment-tours .enroll-process::after {
    content: "5 STEPS";

    position: absolute;

    left: -1rem;
    bottom: -1rem;

    color:
        rgba(77, 114, 216, 0.045);

    font-family: var(--font-display);

    font-size:
        clamp(
            8rem,
            16vw,
            16rem
        );

    font-weight: 950;

    line-height: 0.72;

    letter-spacing: -0.08em;

    white-space: nowrap;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-enrollment-tours .enroll-process__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.78fr)
        minmax(0, 1.22fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: start;
}


/* ==========================================================================
   HEADLINE
   ========================================================================== */

body.page-enrollment-tours .enroll-process__headline {
    position: sticky;

    top: 3rem;

    max-width: 560px;
}


body.page-enrollment-tours
.enroll-process__headline
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-enrollment-tours
.enroll-process__headline h2 {
    max-width: 9ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.6vw,
            5.7rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


body.page-enrollment-tours
.enroll-process__headline h2::after {
    content: "";

    display: block;

    width: 104px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-enrollment-tours
.enroll-process__headline
> p:last-child {
    max-width: 510px;

    margin: 0;

    color:
        rgba(41, 42, 44, 0.68);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.8;
}


/* ==========================================================================
   STEPS
   ========================================================================== */

body.page-enrollment-tours .enroll-process__steps {
    position: relative;

    border-top:
        1px solid
        rgba(41, 42, 44, 0.16);
}


body.page-enrollment-tours
.enroll-process__steps article {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(105px, 0.22fr)
        minmax(0, 1fr);

    gap:
        clamp(1.8rem, 4vw, 3.5rem);

    align-items: start;

    min-height: 185px;

    padding:
        2.4rem
        0;

    border-bottom:
        1px solid
        rgba(41, 42, 44, 0.16);
}


body.page-enrollment-tours
.enroll-process__steps article:nth-child(even) {
    background:
        rgba(77, 114, 216, 0.025);
}


/* ==========================================================================
   NUMBERS
   ========================================================================== */

body.page-enrollment-tours
.enroll-process__steps
article
> span {
    display: block;

    color:
        rgba(41, 42, 44, 0.16);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.2rem,
            5vw,
            5rem
        );

    font-weight: 950;

    line-height: 0.85;

    letter-spacing: -0.07em;
}


/* ==========================================================================
   STEP CONTENT
   ========================================================================== */

body.page-enrollment-tours
.enroll-process__steps
article
> div {
    position: relative;

    padding-left: 1.4rem;
}


body.page-enrollment-tours
.enroll-process__steps
article
> div::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0.15rem;

    width: 6px;
    height: 42px;

    background: var(--color-blue);

    border-radius: 999px;
}


body.page-enrollment-tours
.enroll-process__steps
article:nth-child(2)
> div::before {
    background: var(--color-red);
}


body.page-enrollment-tours
.enroll-process__steps
article:nth-child(3)
> div::before {
    background: var(--color-butter);
}


body.page-enrollment-tours
.enroll-process__steps
article:nth-child(4)
> div::before {
    background: #82b784;
}


body.page-enrollment-tours
.enroll-process__steps
article:nth-child(5)
> div::before {
    background: #8b72b6;
}


/* ==========================================================================
   TITLES
   ========================================================================== */

body.page-enrollment-tours
.enroll-process__steps h3 {
    margin:
        0
        0
        0.75rem;

    color: var(--color-blue);

    font-family: var(--font-display);

    font-size:
        clamp(
            2.1rem,
            3.3vw,
            3.2rem
        );

    font-weight: 950;

    line-height: 0.95;

    letter-spacing: -0.045em;
}


body.page-enrollment-tours
.enroll-process__steps
article:nth-child(2) h3 {
    color: var(--color-red);
}


body.page-enrollment-tours
.enroll-process__steps
article:nth-child(3) h3 {
    color: #987419;
}


body.page-enrollment-tours
.enroll-process__steps
article:nth-child(4) h3 {
    color: #507d52;
}


body.page-enrollment-tours
.enroll-process__steps
article:nth-child(5) h3 {
    color: #7d65a5;
}


/* ==========================================================================
   STEP COPY
   ========================================================================== */

body.page-enrollment-tours
.enroll-process__steps p {
    max-width: 520px;

    margin: 0;

    color:
        rgba(41, 42, 44, 0.66);

    font-size:
        0.98rem;

    line-height: 1.72;
}


/* ==========================================================================
   FINAL STEP EMPHASIS
   ========================================================================== */

body.page-enrollment-tours
.enroll-process__steps
article:last-child {
    background:
        rgba(130, 183, 132, 0.08);
}


body.page-enrollment-tours
.enroll-process__steps
article:last-child::after {
    content: "READY-ISH";

    position: absolute;

    right: 1rem;
    top: 50%;

    color:
        rgba(80, 125, 82, 0.10);

    font-family: var(--font-display);

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.7rem
        );

    font-weight: 950;

    letter-spacing: -0.06em;

    transform:
        translateY(-50%)
        rotate(-4deg);

    pointer-events: none;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-enrollment-tours
    .enroll-process__inner {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }


    body.page-enrollment-tours
    .enroll-process__headline {
        position: relative;

        top: auto;

        max-width: 720px;
    }


    body.page-enrollment-tours
    .enroll-process__headline h2 {
        max-width: 12ch;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-enrollment-tours .enroll-process {
        padding:
            5rem
            0;
    }


    body.page-enrollment-tours
    .enroll-process__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-enrollment-tours
    .enroll-process__headline h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-enrollment-tours
    .enroll-process__steps
    article {
        grid-template-columns: 1fr;

        gap: 0.9rem;

        min-height: 0;

        padding:
            2rem
            0;
    }


    body.page-enrollment-tours
    .enroll-process__steps
    article
    > span {
        font-size:
            clamp(
                2.8rem,
                13vw,
                3.8rem
            );
    }


    body.page-enrollment-tours
    .enroll-process__steps
    article
    > div {
        padding-left: 1rem;
    }


    body.page-enrollment-tours
    .enroll-process__steps h3 {
        font-size:
            clamp(
                2rem,
                10vw,
                2.8rem
            );
    }


    body.page-enrollment-tours
    .enroll-process__steps
    article:last-child::after {
        display: none;
    }


    body.page-enrollment-tours
    .enroll-process::after {
        font-size: 5.5rem;
    }

}

/* ==========================================================================
   TH_ENROLL_AVAILABILITY_V1
   Enrollment + Tours — Openings + Waitlists
   ========================================================================== */

body.page-enrollment-tours .enroll-availability {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #edf3ff 0%,
            #f7f9ff 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-enrollment-tours .enroll-availability::before {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 24rem;
    height: 24rem;

    border:
        2px solid
        rgba(80, 125, 82, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


body.page-enrollment-tours .enroll-availability::after {
    content: "OPENINGS";

    position: absolute;

    left: -1rem;
    bottom: -1rem;

    color:
        rgba(77, 114, 216, 0.045);

    font-family: var(--font-display);

    font-size:
        clamp(
            8rem,
            16vw,
            16rem
        );

    font-weight: 950;

    line-height: 0.72;

    letter-spacing: -0.08em;

    white-space: nowrap;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-enrollment-tours .enroll-availability__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.82fr)
        minmax(0, 1.18fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   CURRENT AVAILABILITY CARD
   ========================================================================== */

body.page-enrollment-tours .enroll-availability__note {
    position: relative;

    width:
        min(
            455px,
            100%
        );

    min-height: 330px;

    box-sizing: border-box;

    padding:
        clamp(2.3rem, 4vw, 3.1rem);

    display: flex;

    flex-direction: column;

    justify-content: center;

    color: var(--color-graphite);

    background: var(--color-butter);

    box-shadow:
        0
        26px
        58px
        rgba(41, 42, 44, 0.16);

    transform: rotate(-2deg);
}


/* Tape */

body.page-enrollment-tours
.enroll-availability__note::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 50%;

    width: 98px;
    height: 25px;

    background:
        rgba(255, 253, 248, 0.76);

    transform:
        translateX(-50%)
        rotate(3deg);
}


/* Red scribble */

body.page-enrollment-tours
.enroll-availability__note::after {
    content: "";

    position: absolute;

    right: 1.6rem;
    bottom: 1.45rem;

    width: 68px;
    height: 12px;

    border-top:
        7px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-7deg);
}


body.page-enrollment-tours
.enroll-availability__note span,
body.page-enrollment-tours
.enroll-availability__note strong,
body.page-enrollment-tours
.enroll-availability__note small {
    display: block;
}


body.page-enrollment-tours
.enroll-availability__note span {
    margin-bottom: 1rem;

    color: var(--color-blue);

    font-size: 0.69rem;
    font-weight: 950;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


body.page-enrollment-tours
.enroll-availability__note strong {
    max-width: 8ch;

    margin-bottom: 1rem;

    color: var(--color-graphite);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            3.4rem,
            6vw,
            5.4rem
        );

    font-weight: 900;

    line-height: 0.92;

    letter-spacing: -0.05em;

    transform: rotate(-2deg);
}


body.page-enrollment-tours
.enroll-availability__note small {
    color:
        rgba(41, 42, 44, 0.68);

    font-size: 0.88rem;
    font-weight: 800;

    line-height: 1.45;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-enrollment-tours .enroll-availability__copy {
    max-width: 650px;

    padding-left:
        clamp(
            1.4rem,
            3vw,
            2rem
        );

    border-left:
        6px solid
        #507d52;
}


body.page-enrollment-tours
.enroll-availability__copy
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-enrollment-tours
.enroll-availability__copy h2 {
    max-width: 10ch;

    margin:
        0
        0
        1.9rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.7rem,
            5.5vw,
            5.6rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-enrollment-tours
.enroll-availability__copy h2::after {
    content: "";

    display: block;

    width: 102px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-enrollment-tours
.enroll-availability__copy p {
    max-width: 590px;

    margin:
        0
        0
        1.4rem;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.8;
}


/* ==========================================================================
   LAST PARAGRAPH EMPHASIS
   ========================================================================== */

body.page-enrollment-tours
.enroll-availability__copy p:last-child {
    position: relative;

    width: fit-content;

    max-width: 540px;

    margin:
        2rem
        0
        0;

    padding:
        1.3rem
        1.45rem;

    color: var(--color-graphite);

    background: #fffdf8;

    border:
        1px solid
        rgba(41, 42, 44, 0.07);

    box-shadow:
        0
        14px
        32px
        rgba(41, 42, 44, 0.08);

    line-height: 1.68;

    transform: rotate(0.6deg);
}


/* Tape */

body.page-enrollment-tours
.enroll-availability__copy p:last-child::before {
    content: "";

    position: absolute;

    top: -10px;
    left: 50%;

    width: 78px;
    height: 20px;

    background:
        rgba(244, 207, 99, 0.72);

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-enrollment-tours
    .enroll-availability__inner {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }


    body.page-enrollment-tours
    .enroll-availability__note {
        width:
            min(
                520px,
                94%
            );

        min-height: 300px;
    }


    body.page-enrollment-tours
    .enroll-availability__copy {
        max-width: 720px;
    }


    body.page-enrollment-tours
    .enroll-availability__copy h2 {
        max-width: 12ch;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-enrollment-tours .enroll-availability {
        padding:
            5rem
            0;
    }


    body.page-enrollment-tours
    .enroll-availability__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-enrollment-tours
    .enroll-availability__note {
        width: 100%;

        min-height: 270px;

        padding:
            2rem
            1.5rem;

        transform: rotate(-1deg);
    }


    body.page-enrollment-tours
    .enroll-availability__note strong {
        font-size:
            clamp(
                3rem,
                16vw,
                4.6rem
            );
    }


    body.page-enrollment-tours
    .enroll-availability__copy {
        padding-left: 1rem;

        border-left-width: 4px;
    }


    body.page-enrollment-tours
    .enroll-availability__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-enrollment-tours
    .enroll-availability__copy p:last-child {
        width: auto;
    }


    body.page-enrollment-tours
    .enroll-availability::after {
        font-size: 5.5rem;
    }

}

/* ==========================================================================
   TH_ENROLL_REQUEST_V1
   Enrollment + Tours — Schedule a Tour Form
   ========================================================================== */

body.page-enrollment-tours .enroll-request {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: var(--color-graphite);

    background:
        linear-gradient(
            180deg,
            #fff7e8 0%,
            #fffdf8 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-enrollment-tours .enroll-request::before {
    content: "";

    position: absolute;

    top: -9rem;
    left: -8rem;

    width: 25rem;
    height: 25rem;

    background:
        rgba(244, 207, 99, 0.20);

    border-radius:
        60% 40% 56% 44%
        /
        45% 58% 42% 55%;

    transform: rotate(-15deg);

    pointer-events: none;
}


body.page-enrollment-tours .enroll-request::after {
    content: "TOUR";

    position: absolute;

    right: -1rem;
    bottom: -1rem;

    color:
        rgba(77, 114, 216, 0.045);

    font-family: var(--font-display);

    font-size:
        clamp(
            10rem,
            18vw,
            18rem
        );

    font-weight: 950;

    line-height: 0.72;

    letter-spacing: -0.08em;

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-enrollment-tours .enroll-request__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.78fr)
        minmax(0, 1.22fr);

    gap:
        clamp(4rem, 8vw, 8.5rem);

    align-items: start;
}


/* ==========================================================================
   INTRO
   ========================================================================== */

body.page-enrollment-tours .enroll-request__intro {
    position: sticky;

    top: 3rem;

    max-width: 560px;
}


body.page-enrollment-tours
.enroll-request__intro
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: var(--color-blue);
}


body.page-enrollment-tours
.enroll-request__intro h2 {
    max-width: 10ch;

    margin:
        0
        0
        1.8rem;

    color: var(--color-graphite);

    font-family: var(--font-display);

    font-size:
        clamp(
            3.8rem,
            5.6vw,
            5.7rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


body.page-enrollment-tours
.enroll-request__intro h2::after {
    content: "";

    display: block;

    width: 104px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-enrollment-tours
.enroll-request__intro
> p {
    max-width: 520px;

    margin:
        0
        0
        2.6rem;

    color:
        rgba(41, 42, 44, 0.68);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.1rem
        );

    line-height: 1.8;
}


/* ==========================================================================
   FORM EXPECTATION NOTE
   ========================================================================== */

body.page-enrollment-tours .enroll-request__status {
    position: relative;

    width:
        min(
            390px,
            92%
        );

    padding:
        1.7rem
        1.8rem
        1.8rem;

    color: #fffdf8;

    background: var(--color-blue);

    box-shadow:
        0
        20px
        44px
        rgba(41, 42, 44, 0.16);

    transform: rotate(-1.5deg);
}


body.page-enrollment-tours
.enroll-request__status::before {
    content: "";

    position: absolute;

    top: -11px;
    left: 50%;

    width: 84px;
    height: 22px;

    background:
        rgba(244, 207, 99, 0.78);

    transform:
        translateX(-50%)
        rotate(2deg);
}


body.page-enrollment-tours
.enroll-request__status::after {
    content: "";

    position: absolute;

    right: 1.3rem;
    bottom: 1rem;

    width: 62px;
    height: 11px;

    border-top:
        7px solid
        var(--color-red);

    border-radius: 50%;

    transform: rotate(-7deg);
}


body.page-enrollment-tours
.enroll-request__status span,
body.page-enrollment-tours
.enroll-request__status strong,
body.page-enrollment-tours
.enroll-request__status small {
    display: block;
}


body.page-enrollment-tours
.enroll-request__status span {
    margin-bottom: 0.6rem;

    color: var(--color-butter);

    font-size: 0.67rem;
    font-weight: 950;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


body.page-enrollment-tours
.enroll-request__status strong {
    max-width: 13ch;

    margin-bottom: 0.55rem;

    color: #fffdf8;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.6rem
        );

    font-weight: 950;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


body.page-enrollment-tours
.enroll-request__status small {
    color:
        rgba(255, 253, 248, 0.68);

    font-size: 0.82rem;
    font-weight: 750;

    line-height: 1.45;
}


/* ==========================================================================
   FORM PANEL
   ========================================================================== */

body.page-enrollment-tours .enroll-form {
    position: relative;

    margin: 0;

    padding:
        clamp(2.2rem, 4vw, 3.4rem);

    background: #fffdf8;

    border:
        1px solid
        rgba(41, 42, 44, 0.08);

    box-shadow:
        0
        28px
        65px
        rgba(41, 42, 44, 0.12);
}


/* Tape */

body.page-enrollment-tours .enroll-form::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 50%;

    width: 100px;
    height: 25px;

    background:
        rgba(244, 207, 99, 0.78);

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* ==========================================================================
   ROWS
   ========================================================================== */

body.page-enrollment-tours .enroll-form__row {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        1.25rem;

    margin-bottom: 1.3rem;
}


/* ==========================================================================
   FIELDS
   ========================================================================== */

body.page-enrollment-tours .enroll-form__field {
    min-width: 0;
}


body.page-enrollment-tours
.enroll-form__field--full {
    margin-top: 1.3rem;
}


body.page-enrollment-tours
.enroll-form__field label {
    display: block;

    margin:
        0
        0
        0.55rem;

    color: var(--color-graphite);

    font-size: 0.78rem;
    font-weight: 900;

    letter-spacing: 0.035em;
}


/* ==========================================================================
   CONTROLS
   ========================================================================== */

body.page-enrollment-tours
.enroll-form__field input,
body.page-enrollment-tours
.enroll-form__field select,
body.page-enrollment-tours
.enroll-form__field textarea {
    width: 100%;

    box-sizing: border-box;

    margin: 0;

    border:
        1px solid
        rgba(41, 42, 44, 0.18);

    border-radius: 0;

    color: var(--color-graphite);

    background: #f9f7f1;

    font: inherit;

    font-size: 0.95rem;

    outline: none;

    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease;
}


body.page-enrollment-tours
.enroll-form__field input,
body.page-enrollment-tours
.enroll-form__field select {
    min-height: 54px;

    padding:
        0
        1rem;
}


body.page-enrollment-tours
.enroll-form__field textarea {
    min-height: 150px;

    padding: 1rem;

    resize: vertical;

    line-height: 1.6;
}


body.page-enrollment-tours
.enroll-form__field input::placeholder,
body.page-enrollment-tours
.enroll-form__field textarea::placeholder {
    color:
        rgba(41, 42, 44, 0.40);
}


/* ==========================================================================
   FOCUS
   ========================================================================== */

body.page-enrollment-tours
.enroll-form__field input:focus,
body.page-enrollment-tours
.enroll-form__field select:focus,
body.page-enrollment-tours
.enroll-form__field textarea:focus {
    border-color: var(--color-blue);

    background: #fffdf8;

    box-shadow:
        0
        0
        0
        3px
        rgba(77, 114, 216, 0.12);
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

body.page-enrollment-tours .enroll-form__footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1.5rem;

    margin-top: 2rem;

    padding-top: 1.8rem;

    border-top:
        1px solid
        rgba(41, 42, 44, 0.12);
}


body.page-enrollment-tours
.enroll-form__footer p {
    max-width: 310px;

    margin: 0;

    color:
        rgba(41, 42, 44, 0.50);

    font-size: 0.72rem;

    line-height: 1.55;
}


/* ==========================================================================
   BUTTON
   ========================================================================== */

body.page-enrollment-tours
.enroll-form__footer
.button--primary {
    flex: 0 0 auto;

    min-height: 54px;

    padding-inline: 1.7rem;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-enrollment-tours
    .enroll-request__inner {
        grid-template-columns: 1fr;

        gap: 4.5rem;
    }


    body.page-enrollment-tours
    .enroll-request__intro {
        position: relative;

        top: auto;

        max-width: 720px;
    }


    body.page-enrollment-tours
    .enroll-request__intro h2 {
        max-width: 12ch;
    }


    body.page-enrollment-tours
    .enroll-request__status {
        width:
            min(
                440px,
                94%
            );
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-enrollment-tours .enroll-request {
        padding:
            5rem
            0;
    }


    body.page-enrollment-tours
    .enroll-request__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-enrollment-tours
    .enroll-request__intro h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-enrollment-tours
    .enroll-request__status {
        width: 100%;

        box-sizing: border-box;
    }


    body.page-enrollment-tours
    .enroll-form {
        padding:
            2rem
            1.25rem;
    }


    body.page-enrollment-tours
    .enroll-form__row {
        grid-template-columns: 1fr;

        gap: 1rem;

        margin-bottom: 1rem;
    }


    body.page-enrollment-tours
    .enroll-form__footer {
        align-items: stretch;

        flex-direction: column;
    }


    body.page-enrollment-tours
    .enroll-form__footer
    .button--primary {
        width: 100%;

        box-sizing: border-box;
    }


    body.page-enrollment-tours
    .enroll-form__footer p {
        max-width: 100%;
    }


    body.page-enrollment-tours
    .enroll-request::after {
        font-size: 6rem;
    }

}

/* ==========================================================================
   TH_ENROLL_AFTER_FIX_V2
   Enrollment + Tours — After You Reach Out
   ========================================================================== */

body.page-enrollment-tours .enroll-after {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: #292a2c;

    background:
        linear-gradient(
            180deg,
            #f1edf8 0%,
            #faf7fc 100%
        );

    overflow: hidden;
}


/* soft lavender shape */

body.page-enrollment-tours .enroll-after::before {
    content: "";

    position: absolute;

    top: -8rem;
    right: -7rem;

    width: 24rem;
    height: 24rem;

    background:
        rgba(139, 114, 182, 0.10);

    border-radius:
        59% 41% 63% 37%
        /
        45% 58% 42% 55%;

    transform: rotate(14deg);

    pointer-events: none;
}


/* giant faded REPLY */

body.page-enrollment-tours .enroll-after::after {
    content: "REPLY";

    position: absolute;

    left: -1rem;
    bottom: -1rem;

    color:
        rgba(139, 114, 182, 0.055);

    font-family:
        "Arial Rounded MT Bold",
        "Trebuchet MS",
        Arial,
        sans-serif;

    font-size:
        clamp(
            9rem,
            17vw,
            17rem
        );

    font-weight: 950;

    line-height: 0.72;

    letter-spacing: -0.08em;

    white-space: nowrap;

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

body.page-enrollment-tours .enroll-after__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.82fr)
        minmax(0, 1.18fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   THEN / WHAT?
   ========================================================================== */

body.page-enrollment-tours .enroll-after__statement {
    position: relative;

    width: fit-content;

    max-width: 100%;
}


body.page-enrollment-tours
.enroll-after__statement span,
body.page-enrollment-tours
.enroll-after__statement strong {
    display: block;
}


body.page-enrollment-tours
.enroll-after__statement span {
    margin-bottom: 0.55rem;

    color: #7d65a5;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            3.2rem,
            5.6vw,
            5.2rem
        );

    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -0.045em;

    transform: rotate(-3deg);
}


body.page-enrollment-tours
.enroll-after__statement strong {
    color: #292a2c;

    font-family:
        "Arial Rounded MT Bold",
        "Trebuchet MS",
        Arial,
        sans-serif;

    font-size:
        clamp(
            4.8rem,
            8vw,
            8rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.07em;
}


body.page-enrollment-tours
.enroll-after__statement::after {
    content: "";

    position: absolute;

    left: 10%;
    bottom: -1.5rem;

    width: 76%;
    height: 14px;

    border-top:
        9px solid
        #e95c50;

    border-radius: 50%;

    transform: rotate(-2deg);
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-enrollment-tours .enroll-after__copy {
    max-width: 650px;

    padding-left:
        clamp(
            1.4rem,
            3vw,
            2rem
        );

    border-left:
        6px solid
        #4d72d8;
}


body.page-enrollment-tours
.enroll-after__copy
.eyebrow {
    margin:
        0
        0
        1.4rem;

    color: #7d65a5;
}


body.page-enrollment-tours
.enroll-after__copy h2 {
    max-width: 11ch;

    margin:
        0
        0
        1.9rem;

    color: #292a2c;

    font-family:
        "Arial Rounded MT Bold",
        "Trebuchet MS",
        Arial,
        sans-serif;

    font-size:
        clamp(
            3.6rem,
            5.3vw,
            5.4rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


body.page-enrollment-tours
.enroll-after__copy p {
    max-width: 590px;

    margin:
        0
        0
        1.4rem;

    color:
        rgba(41, 42, 44, 0.70);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.8;
}


/* ==========================================================================
   FINAL REMINDER
   ========================================================================== */

body.page-enrollment-tours
.enroll-after__copy p:last-child {
    position: relative;

    width: fit-content;

    max-width: 540px;

    margin:
        2rem
        0
        0;

    padding:
        1.3rem
        1.45rem;

    color: #292a2c;

    background: #fffdf8;

    border:
        1px solid
        rgba(41, 42, 44, 0.07);

    box-shadow:
        0
        14px
        32px
        rgba(41, 42, 44, 0.08);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Marker Felt",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            1.08rem,
            1.6vw,
            1.38rem
        );

    font-weight: 850;

    line-height: 1.45;

    transform: rotate(-1deg);
}


body.page-enrollment-tours
.enroll-after__copy p:last-child::before {
    content: "";

    position: absolute;

    top: -10px;
    left: 50%;

    width: 80px;
    height: 20px;

    background:
        rgba(244, 207, 99, 0.76);

    transform:
        translateX(-50%)
        rotate(2deg);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-enrollment-tours
    .enroll-after__inner {
        grid-template-columns: 1fr;

        gap: 5rem;
    }


    body.page-enrollment-tours
    .enroll-after__copy {
        max-width: 720px;
    }


    body.page-enrollment-tours
    .enroll-after__copy h2 {
        max-width: 13ch;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-enrollment-tours .enroll-after {
        padding:
            5rem
            0;
    }


    body.page-enrollment-tours
    .enroll-after__inner {
        width:
            calc(100% - 2rem);

        gap: 4rem;
    }


    body.page-enrollment-tours
    .enroll-after__statement span {
        font-size:
            clamp(
                2.7rem,
                13vw,
                4rem
            );
    }


    body.page-enrollment-tours
    .enroll-after__statement strong {
        font-size:
            clamp(
                4rem,
                18vw,
                5.8rem
            );
    }


    body.page-enrollment-tours
    .enroll-after__copy {
        padding-left: 1rem;

        border-left-width: 4px;
    }


    body.page-enrollment-tours
    .enroll-after__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    body.page-enrollment-tours
    .enroll-after__copy p:last-child {
        width: auto;
    }


    body.page-enrollment-tours
    .enroll-after::after {
        font-size: 5.5rem;
    }

}

/* ==========================================================================
   TH_ENROLL_DEMO_NOTE_FIX_V2
   Enrollment + Tours — Template Note Repair
   ========================================================================== */

body.page-enrollment-tours section.enroll-demo {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding:
        clamp(2.3rem, 4vw, 3.2rem)
        0 !important;

    color: #fffdf8 !important;

    background: #292a2c !important;

    overflow: hidden !important;
}


/* ==========================================================================
   BACKGROUND LABEL
   ========================================================================== */

body.page-enrollment-tours section.enroll-demo::after {
    content: "ENROLLMENT DEMO";

    position: absolute;

    top: 50%;
    right:
        clamp(
            1rem,
            4vw,
            4rem
        );

    z-index: 0;

    color:
        rgba(255, 253, 248, 0.045);

    font-family:
        "Arial Rounded MT Bold",
        "Trebuchet MS",
        Arial,
        sans-serif;

    font-size:
        clamp(
            3.4rem,
            6.5vw,
            6.6rem
        );

    font-weight: 950;

    line-height: 1;

    letter-spacing: -0.07em;

    white-space: nowrap;

    transform:
        translateY(-50%)
        rotate(-3deg);

    pointer-events: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

body.page-enrollment-tours
section.enroll-demo
.enroll-demo__inner {
    position: relative !important;
    z-index: 2 !important;

    display: block !important;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        ) !important;

    margin:
        0
        auto !important;
}


/* ==========================================================================
   NOTE COPY
   ========================================================================== */

body.page-enrollment-tours
section.enroll-demo
.enroll-demo__inner
p {
    position: relative;

    max-width: 1020px !important;

    margin: 0 !important;

    padding:
        0.15rem
        0
        0.15rem
        1.45rem !important;

    border-left:
        6px solid
        #4d72d8 !important;

    color:
        rgba(255, 253, 248, 0.72) !important;

    background: transparent !important;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:
        0.79rem !important;

    font-weight: 450 !important;

    line-height: 1.74 !important;
}


body.page-enrollment-tours
section.enroll-demo
.enroll-demo__inner
p strong {
    color: #f4cf63 !important;

    font-weight: 900 !important;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-enrollment-tours
    section.enroll-demo {
        padding:
            2.4rem
            0 !important;
    }


    body.page-enrollment-tours
    section.enroll-demo
    .enroll-demo__inner {
        width:
            calc(100% - 2rem) !important;
    }


    body.page-enrollment-tours
    section.enroll-demo
    .enroll-demo__inner
    p {
        padding-left:
            1rem !important;

        border-left-width:
            5px !important;

        font-size:
            0.73rem !important;
    }


    body.page-enrollment-tours
    section.enroll-demo::after {
        right: -4rem;

        font-size: 4rem;
    }

}

/* ==========================================================================
   TH_ENROLL_CTA_V1
   Enrollment + Tours — Come Take a Look / Final CTA
   ========================================================================== */

body.page-enrollment-tours .enroll-cta {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    color: #fffdf8;

    background: #507d52;

    overflow: hidden;
}


/* ==========================================================================
   DECORATION
   ========================================================================== */

body.page-enrollment-tours .enroll-cta::before {
    content: "";

    position: absolute;

    top: -9rem;
    right: -7rem;

    width: 25rem;
    height: 25rem;

    border:
        2px solid
        rgba(255, 253, 248, 0.18);

    border-radius: 50%;

    pointer-events: none;
}


body.page-enrollment-tours .enroll-cta::after {
    content: "";

    position: absolute;

    left: -10rem;
    bottom: -12rem;

    width: 30rem;
    height: 30rem;

    background:
        rgba(244, 207, 99, 0.30);

    border-radius:
        60% 40% 56% 44%
        /
        45% 58% 42% 55%;

    transform: rotate(-16deg);

    pointer-events: none;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.page-enrollment-tours .enroll-cta__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 3rem)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(320px, 0.72fr);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.page-enrollment-tours .enroll-cta__copy {
    max-width: 750px;
}


body.page-enrollment-tours
.enroll-cta__copy
.eyebrow {
    margin:
        0
        0
        1.5rem;

    color: #f4cf63;
}


body.page-enrollment-tours
.enroll-cta__copy h2 {
    max-width: 11ch;

    margin:
        0
        0
        1.8rem;

    color: #fffdf8;

    font-family:
        "Arial Rounded MT Bold",
        "Trebuchet MS",
        Arial,
        sans-serif;

    font-size:
        clamp(
            3.8rem,
            5.7vw,
            5.8rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


body.page-enrollment-tours
.enroll-cta__copy h2::after {
    content: "";

    display: block;

    width: 105px;
    height: 12px;

    margin-top: 1.5rem;

    border-top:
        8px solid
        #e95c50;

    border-radius: 50%;

    transform: rotate(-3deg);
}


body.page-enrollment-tours
.enroll-cta__copy
> p:last-child {
    max-width: 620px;

    margin: 0;

    color:
        rgba(255, 253, 248, 0.80);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height: 1.78;
}


/* ==========================================================================
   ACTION PANEL
   ========================================================================== */

body.page-enrollment-tours .enroll-cta__action {
    position: relative;

    min-height: 275px;

    padding:
        clamp(2.4rem, 4vw, 3.2rem);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    gap: 1.45rem;

    color: #292a2c;

    background: #f4cf63;

    box-shadow:
        0
        26px
        60px
        rgba(27, 62, 29, 0.25);

    transform: rotate(2deg);
}


/* tape */

body.page-enrollment-tours
.enroll-cta__action::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 50%;

    width: 98px;
    height: 25px;

    background:
        rgba(255, 253, 248, 0.74);

    transform:
        translateX(-50%)
        rotate(-3deg);
}


/* blue scribble */

body.page-enrollment-tours
.enroll-cta__action::after {
    content: "";

    position: absolute;

    right: 1.6rem;
    bottom: 1.5rem;

    width: 68px;
    height: 12px;

    border-top:
        7px solid
        #4d72d8;

    border-radius: 50%;

    transform: rotate(-7deg);

    pointer-events: none;
}


/* ==========================================================================
   PRIMARY BUTTON
   ========================================================================== */

body.page-enrollment-tours
.enroll-cta__action
.button--primary {
    position: relative;
    z-index: 2;

    min-height: 54px;

    padding-inline: 1.7rem;

    color: #fffdf8 !important;

    background: #292a2c !important;

    box-shadow: none !important;
}


body.page-enrollment-tours
.enroll-cta__action
.button--primary:hover {
    color: #292a2c !important;

    background: #fffdf8 !important;

    box-shadow:
        0
        12px
        28px
        rgba(41, 42, 44, 0.15) !important;
}


/* ==========================================================================
   SECONDARY LINK
   ========================================================================== */

body.page-enrollment-tours
.enroll-cta__action
.text-link {
    position: relative;
    z-index: 2;

    color: #292a2c !important;

    font-weight: 900 !important;
}


body.page-enrollment-tours
.enroll-cta__action
.text-link span {
    color: #e95c50 !important;
}


body.page-enrollment-tours
.enroll-cta__action
.text-link:hover {
    color: #4d72d8 !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.page-enrollment-tours
    .enroll-cta__inner {
        grid-template-columns: 1fr;

        gap: 4rem;
    }


    body.page-enrollment-tours
    .enroll-cta__copy {
        max-width: 760px;
    }


    body.page-enrollment-tours
    .enroll-cta__copy h2 {
        max-width: 13ch;
    }


    body.page-enrollment-tours
    .enroll-cta__action {
        width:
            min(
                530px,
                94%
            );

        min-height: 235px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    body.page-enrollment-tours .enroll-cta {
        padding:
            5rem
            0;
    }


    body.page-enrollment-tours
    .enroll-cta__inner {
        width:
            calc(100% - 2rem);

        gap: 3.5rem;
    }


    body.page-enrollment-tours
    .enroll-cta__copy h2 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                13vw,
                4.3rem
            );
    }


    body.page-enrollment-tours
    .enroll-cta__action {
        width: 100%;

        min-height: 220px;

        box-sizing: border-box;

        padding:
            2.3rem
            1.5rem;

        transform: rotate(1deg);
    }


    body.page-enrollment-tours
    .enroll-cta__action
    .button--primary {
        width: 100%;

        box-sizing: border-box;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    body.page-enrollment-tours
    .enroll-cta__action {
        transform: none;
    }

}