/* Bundled: pages/parent_coaching.css — generated by scripts/bundle_page_css.py */

/* ---- sections/parent_coaching/hero.css ---- */
/* ============================================
   SECTION: Parent Coaching — Hero
   Copy on the left, hero photo on the right (swirls
   baked in). Grid layout so the photo scales inside its
   column on mid widths instead of shrinking over the
   copy (background-image heroes overlap 901–1400px).
   Accent script is pink here. Long heading uses a
   narrower copy column; stacks by 1400px.
   ============================================ */

.pc-hero {
    padding: 36px var(--section-side-padding) 0;
    background: var(--color-white);
    overflow: hidden;
    max-width: 2000px;
    margin: auto;
}

.pc-hero__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    align-items: end;
    gap: 48px;
    border-bottom: 2px solid var(--color-surface-line-soft);
}

/* ----- Copy (left) ----- */
.pc-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 36px 0;
}

.pc-hero__heading {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: var(--font-weight-normal);
    line-height: 58px;
    letter-spacing: -2px;
    color: var(--color-text-heading);
    margin: 0;
}

.pc-hero__heading .accent-script {
    font-size: var(--text-5xl);
    line-height: 58px;
    letter-spacing: -0.03em;
    color: var(--color-primary-text);     /* pink accent for this page */
}

.pc-hero__lede {
    max-width: 480px;
    font-size: var(--text-md);
    font-weight: var(--font-weight-medium);
    line-height: 28px;
    color: var(--color-text-heading);
    margin: 0;
}

.pc-hero__actions {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
}

/* ----- Photo (right) — centered in the media column ----- */
.pc-hero__media {
    justify-self: center;
}

.pc-hero__photo {
    width: 100%;
    max-width: 689px;
    height: auto;
    display: block;
}

/* ----- Responsive: photo drops below the copy -----
   Stack by 1400px — this heading is much longer, so
   side-by-side leaves too little room for the photo. */
@media (max-width: 1400px) {
    .pc-hero {
        padding: 24px var(--section-side-padding) 56px;
    }

    .pc-hero__inner {
        grid-template-columns: 1fr;
        gap: 32px;
        border-bottom: none;
    }

    .pc-hero__content {
        padding: 0;
    }

    .pc-hero__media {
        justify-self: center;
    }

    .pc-hero__photo {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .pc-hero__heading,
    .pc-hero__heading .accent-script {
        font-size: var(--text-3xl);
        line-height: 1.15;
    }
}

/* ----- Phones -----
   Centred copy with the full hero photo below — no crop/scale so the
   pink frame isn't clipped on the right. */
@media (max-width: 600px) {
    .pc-hero {
        padding-bottom: 56px;
    }

    .pc-hero__content {
        align-items: center;
        text-align: center;
        padding-bottom: 0;
    }

    .pc-hero__media {
        width: 100%;
        justify-self: stretch;
    }

    .pc-hero__photo {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
    }
}

/* ---- sections/ndbi/definition.css ---- */
/* ============================================
   SECTION: Naturalistic ABA Care — What is NDBI?
   Sticky intro (left) + two stacked cards (right):
   pink (two areas of science, with two tilted mini-
   cards + a "+" connector) and cream (how NDBI supports
   learning). Mirrors the neuroaffirming Definition.
   ============================================ */

.ndbi-def {
    max-width: calc(var(--container-max) + 2 * var(--section-side-padding));
    margin-inline: auto;
    padding: 100px var(--section-side-padding);
    background: var(--color-white);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* ----- Intro (sticky, left) ----- */
.ndbi-def__intro {
    flex: 0 1 468px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 100px;
    align-self: flex-start;
}

.ndbi-def__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-normal);
    line-height: 50px;
    letter-spacing: -1.26px;
    color: #484336;
    margin: 0;
    max-width: 532px;
}

.ndbi-def__heading .accent-script {
    color: var(--color-accent-yellow-text);   /* #e09b2b */
}

.ndbi-def__lede {
    max-width: 468px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-faint);
    margin: 0;
}

/* ----- Cards (stacked, right) ----- */
.ndbi-def__cards {
    flex: 0 1 610px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ndbi-def-card {
    position: relative;
    padding: 32px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ndbi-def-card--pink { background-color: var(--color-primary-light); }
.ndbi-def-card--cream { background-color: var(--color-accent-yellow-bg); }

/* Decorative swirls — same assets as the neuroaffirming/home cards */
.ndbi-def-card__swirl {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
.ndbi-def-card--pink .ndbi-def-card__swirl {
    top: -39px;
    left: -37px;
    width: 760px;
    aspect-ratio: 828 / 285;
    background: url("../../images/decorative/vector-270.f060f4d8b30d.png") no-repeat center / contain;
}
.ndbi-def-card--cream .ndbi-def-card__swirl {
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 610 / 145;
    background: url("../../images/decorative/vector-270-tan.af3e16a592bf.png") no-repeat center / contain;
}

.ndbi-def-card__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.02);
    flex-shrink: 0;
    margin-bottom: 32px;
}

.ndbi-def-card__title {
    position: relative;
    z-index: 1;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    line-height: 32px;
    color: var(--color-text-heading);
    margin: 0;
    max-width: 516px;
}

/* ----- Pink card: the two tilted science cards + "+" ----- */
.ndbi-def__sciences {
    position: relative;
    z-index: 1;
    margin-top: 28px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
}

.ndbi-def-mini {
    flex: 1 1 0;
    min-width: 0;
    min-height: 207px;
    padding: 24px 20px;
    background: var(--color-white);
    border: 2px solid var(--color-primary-light);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.ndbi-def-mini--a { transform: rotate(-3deg); }
.ndbi-def-mini--b { transform: rotate(2deg); }

.ndbi-def-mini__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    flex-shrink: 0;
}

.ndbi-def-mini__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ndbi-def-mini__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--font-weight-normal);
    line-height: 28px;
    color: #2c2626;
    margin: 0;
}

.ndbi-def-mini__sub {
    font-size: 15px;
    line-height: 22px;
    color: #5b6e78;
    margin: 0;
}

/* "+" connector between the two science cards */
.ndbi-def__plus {
    position: absolute;
    left: 50%;
    top: 34%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-text-heading);   /* #0c2733 */
}

/* ----- Cream card: how NDBI supports learning ----- */
.ndbi-def-card__desc {
    position: relative;
    z-index: 1;
    margin: 16px 0 0;
    max-width: 525px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-faint);
}

.ndbi-def-card__eyebrow {
    position: relative;
    z-index: 1;
    margin: 40px 0 0;
    color: var(--color-accent-yellow-label);   /* gold */
}

.ndbi-def-card__statement {
    position: relative;
    z-index: 1;
    margin: 24px 0 0;
    max-width: 546px;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: var(--font-weight-normal);
    line-height: 44px;
    color: var(--color-accent-yellow-text);       /* #e09b2b */
}

/* Scroll-position bars — phones only, and only for the scrolling variant */
.ndbi-def__bars {
    display: none;
    gap: 7px;
    width: 100%;
    margin-top: 24px;
}

.ndbi-def__bar {
    flex: 1 1 0;
    height: 4px;
    border-radius: 100px;
    background: var(--color-primary-light);
    transition: background-color var(--transition-fast);
}

.ndbi-def__bar.is-active {
    background: var(--color-primary);
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .ndbi-def {
        flex-direction: column;
        gap: 48px;
    }
    .ndbi-def__intro,
    .ndbi-def__cards {
        flex: initial;
        max-width: none;
        width: 100%;
        position: static;
    }
    .ndbi-def__heading {
        font-size: 36px;
        line-height: 42px;
    }
}

@media (max-width: 768px) {
    .ndbi-def {
        padding: 60px var(--section-side-padding);
    }
    .ndbi-def-card {
        padding: 24px;
    }
    .ndbi-def__sciences {
        flex-direction: column;
        gap: 28px;
    }
    /* Stacked, the desktop `flex: 1 1 0` would set each card's *height* to
       zero instead of splitting the row's width — collapsing the box and
       spilling its text. Size them to their content instead. */
    .ndbi-def-mini {
        width: 100%;
        min-height: 0;
        flex: 0 0 auto;
    }

    /* Stacked, the two cards overlap and tilt against each other: the first
       card carries extra bottom padding for the second to ride up into. */
    .ndbi-def-mini--a {
        transform: rotate(-2deg);
        padding-bottom: 44px;
    }

    .ndbi-def-mini--b {
        transform: rotate(2deg);
        margin-top: -47px;
        margin-left: 0;
        max-width: 100%;
    }
    .ndbi-def__plus {
        top: 50%;
    }
    .ndbi-def-card__statement {
        font-size: 22px;
        line-height: 29px;
    }
}

/* ----- Phones: the two cards become a horizontal, snapping scroller -----
   Scoped to the --scroll modifier — .ndbi-def__cards is reused by five
   other pages whose cards stay stacked. Geometry from the 360px frame:
   308px cards, 12px apart, the next one peeking past the right edge. */
@media (max-width: 600px) {
    .ndbi-def__cards--scroll {
        flex-direction: row;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* Bleed to the section edges so a card can peek in from the right,
           while the first card still lines up with the intro text. */
        margin-inline: calc(-1 * var(--section-side-padding));
        padding-inline: var(--section-side-padding);
        /* keeps the snap point from cancelling the padding above */
        scroll-padding-inline: var(--section-side-padding);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .ndbi-def__cards--scroll::-webkit-scrollbar {
        display: none;
    }

    .ndbi-def__cards--scroll .ndbi-def-card {
        flex: 0 0 min(308px, calc(100vw - 2 * var(--section-side-padding)));
        max-width: calc(100vw - 2 * var(--section-side-padding));
        scroll-snap-align: start;
    }

    .ndbi-def__bars {
        display: flex;
    }
}

/* ---- sections/parent_coaching/background.css ---- */
/* ============================================
   SECTION: Parent Coaching — Background in therapy
   Heading + intro on the left, a cream card on the right.
   The card itself reuses the ndbi/definition cream-card
   styles (.ndbi-def-card--cream + swirl); this file adds
   the two-column layout and the three skill outcome rows.
   ============================================ */

.pc-background {
    padding: 100px var(--section-side-padding);
    background: var(--color-white);
}

.pc-background__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
}

/* ----- Intro (left) ----- */
.pc-background__intro {
    flex: 0 1 505px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pc-background__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-normal);
    line-height: 50px;
    letter-spacing: -1.26px;
    color: var(--color-text-heading);
    margin: 0;
}

.pc-background__heading .accent-script {
    color: var(--color-primary-text);   /* pink */
}

.pc-background__lede {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-faint);
    margin: 0;
}

/* ----- Cream card (right) ----- */
.pc-background__card {
    flex: 0 1 610px;
}

/* Three skill-outcome rows inside the cream card */
.pc-background__list {
    position: relative;
    z-index: 1;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pc-background__item {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    background: var(--color-white);
    border: 2px solid var(--color-primary-light);   /* #ffebf0 */
    border-radius: 12px;
}

.pc-background__item-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.pc-background__item-text {
    flex: 1 1 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--font-weight-normal);
    line-height: 28px;
    color: #2c2626;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .pc-background__inner {
        flex-direction: column;
        gap: 40px;
    }
    .pc-background__intro,
    .pc-background__card {
        flex: initial;
        max-width: none;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .pc-background {
        padding: 60px var(--section-side-padding);
    }
    .pc-background__heading {
        font-size: 32px;
        line-height: 38px;
    }
}

/* ---- sections/parent_coaching/photo.css ---- */
/* ============================================
   SECTION: Parent Coaching — Photo band (full-width)
   Edge-to-edge photo as a CSS background. Height is driven
   by the image's aspect ratio so the whole photo shows at
   any width. Mirrors the ABA Therapy photo band.
   ============================================ */

.pc-photo {
    width: 100%;
    aspect-ratio: 1440 / 700;        /* full image, proportional at any width */
    background: var(--color-white) url("../../images/parent-coaching/meadow_magnifiers_20260818_063741.3a11842ce391.webp") no-repeat center center / cover;
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .pc-photo {
        aspect-ratio: 4 / 3;         /* taller crop on phones */
    }
}

/* ---- sections/parent_coaching/approach.css ---- */
/* ============================================
   SECTION: Parent Coaching — Our Approach (Project ImPACT)
   White band. Heading + intro on the left, a white
   testimonial card on the right. A pink swirl bleeds
   across the top-right corner. Mirrors ndbi/why.
   ============================================ */

.pc-approach {
    position: relative;
    overflow: clip;
    padding: 120px var(--section-side-padding);
    background: var(--color-white);
}

.pc-approach__swirl {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: -90px;
    right: 0;
    width: 340px;
    aspect-ratio: 700 / 630;
    background: url("../../images/decorative/pink-w-swirl.25caff9dd604.png") no-repeat top right / contain;
}

.pc-approach__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
}

/* ----- Intro (left) ----- */
.pc-approach__intro {
    flex: 0 1 505px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pc-approach__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-normal);
    line-height: 50px;
    letter-spacing: -1.26px;
    color: var(--color-text-heading);
    margin: 0;
}

.pc-approach__heading .accent-script {
    color: var(--color-primary-text);   /* pink */
}

.pc-approach__lede {
    max-width: 465px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-faint);
    margin: 0;
}

/* ----- Testimonial card (right) ----- */
.pc-approach__card {
    flex: 0 1 610px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 0;
    padding: 40px;
    background: var(--color-white);
    border: 2px solid var(--color-surface-line-soft);   /* #f6f6f6 */
    border-radius: 12px;
    box-shadow: 0 15px 32px rgba(0, 0, 0, 0.05);
    transform: rotate(1deg);
}

.pc-approach__quote-mark {
    display: inline-flex;
    width: 32px;
    height: 32px;
}

.pc-approach__quote {
    margin: 0;
    font-size: 21px;
    font-weight: var(--font-weight-medium);
    line-height: 34px;
    color: var(--color-text-heading);
}

.pc-approach__quote-mark + .pc-approach__quote {
    margin-top: -20px;   /* tighten the 40px card gap between mark and text */
}

.pc-approach__person {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pc-approach__avatar {
    flex-shrink: 0;
    display: block;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffa34d;
}

.pc-approach__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pc-approach__person-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pc-approach__person-name {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 20px;
    color: var(--color-text-heading);
}

.pc-approach__person-role {
    font-size: 14px;
    line-height: 20px;
    color: #776d79;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .pc-approach {
        padding: 80px var(--section-side-padding);
    }
    .pc-approach__inner {
        flex-direction: column;
        gap: 40px;
    }
    .pc-approach__intro,
    .pc-approach__card {
        flex: initial;
        max-width: none;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .pc-approach {
        padding: 56px var(--section-side-padding);
    }
    .pc-approach__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .pc-approach__card {
        padding: 28px;
        gap: 32px;
    }
}

/* ---- sections/parent_coaching/how_it_works.css ---- */
/* ============================================
   SECTION: Parent Coaching — How it works
   A cream rounded panel with a decorative swirl behind,
   a centered header, and five tilted step cards laid out
   in a staggered 3 + 2 arrangement.
   ============================================ */

.pc-how {
    padding: 80px var(--section-side-padding);
    background: var(--color-white);
}

.pc-how__panel {
    position: relative;
    overflow: clip;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 80px 40px 88px;
    border-radius: 12px;
    background-color: var(--color-accent-yellow-bg-soft);   /* #fffbf1 */
}

/* Decorative swirl backdrop, behind the content */
.pc-how__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../../images/ndbi-therapy/bg-omparision.77b4eba313d9.png") no-repeat center center / cover;
    opacity: 0.5;
    pointer-events: none;
}

/* ----- Header ----- */
.pc-how__header {
    position: relative;
    z-index: 1;
    max-width: 688px;
    margin: 0 auto 56px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.pc-how__header .eyebrow {
    margin-bottom: 18px;
}

.pc-how__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-normal);
    line-height: 50px;
    letter-spacing: -1.26px;
    color: #484336;
    margin: 0;
}

.pc-how__accent {
    color: var(--color-primary-text);   /* pink, same display font */
}

.pc-how__lede {
    max-width: 488px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-faint);
    margin: 0;
}

/* ----- Step cards (staggered 3 + 2) ----- */
.pc-how__steps {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    max-width: 1002px;             /* fits 3 cards (310) + 2 gaps → 5 wrap to 3 + 2 */
    margin-inline: auto;
}

.pc-how__step {
    width: 310px;
    min-height: 284px;
    padding: 24px;
    background: var(--color-white);
    border: 2px solid var(--color-surface-line-soft);   /* #f6f6f6 */
    border-radius: 12px;
    box-shadow: 0 15px 32px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}

/* Alternating tilt to match the design's playful stagger */
.pc-how__step:nth-child(1),
.pc-how__step:nth-child(3),
.pc-how__step:nth-child(4) { transform: rotate(-3deg); }
.pc-how__step:nth-child(2),
.pc-how__step:nth-child(5) { transform: rotate(3deg); }

.pc-how__step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 67px;
    height: 67px;
    flex-shrink: 0;
    background: var(--color-primary-light);   /* #ffebf0 */
    border-radius: 60px;
}

.pc-how__step-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pc-how__step-title {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    line-height: 32px;
    color: var(--color-text-heading);
    margin: 0;
}

.pc-how__step-desc {
    font-size: 16px;
    line-height: 26px;
    color: #776d79;
    margin: 0;
}

/* Scroll-position bars — phones only */
.pc-how__bars {
    position: relative;
    z-index: 1;
    display: none;
    gap: 7px;
    margin-top: 24px;
}

.pc-how__bar {
    flex: 1 1 0;
    height: 4px;
    border-radius: 100px;
    background: var(--color-primary-light);
    transition: background-color var(--transition-fast);
}

.pc-how__bar.is-active {
    background: var(--color-primary);
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .pc-how {
        padding: 56px var(--section-side-padding);
    }
    .pc-how__panel {
        padding: 48px 20px 56px;
    }
    .pc-how__heading {
        font-size: 32px;
        line-height: 38px;
    }
    /* Drop the tilt on small screens so stacked cards read cleanly */
    .pc-how__step {
        transform: none !important;
        width: 100%;
        max-width: 340px;
    }
}

/* ----- Phones: the steps become a horizontal, snapping scroller -----
   The track bleeds to the panel's edges so the next card peeks in from
   the right, with position bars underneath. The panel's own padding is
   20px at this width, so that is what the track reclaims. */
@media (max-width: 600px) {
    .pc-how__steps {
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;         /* equal heights; ragged looks broken */
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: -20px;
        padding-inline: 20px;
        /* keeps the snap point from cancelling the padding above */
        scroll-padding-inline: 20px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .pc-how__steps::-webkit-scrollbar {
        display: none;
    }

    .pc-how__step {
        flex: 0 0 288px;
        width: auto;
        max-width: none;
        min-height: 0;
        scroll-snap-align: start;
    }

    .pc-how__bars {
        display: flex;
    }
}

/* ---- sections/parent_coaching/benefits.css ---- */
/* ============================================
   SECTION: Parent Coaching — Benefits
   Header (title left, intro right), a row of four benefit
   cards with colored icon circles, and a pink summary
   banner underneath.
   ============================================ */

.pc-benefits {
    padding: 100px var(--section-side-padding);
    background: var(--color-white);
}

.pc-benefits__inner {
    max-width: var(--container-max);
    margin-inline: auto;
}

/* ----- Header ----- */
.pc-benefits__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    margin-bottom: 48px;
}

.pc-benefits__heading-block {
    flex: 0 1 552px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pc-benefits__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-normal);
    line-height: 50px;
    letter-spacing: -1.26px;
    color: var(--color-text-heading);
    margin: 0;
}

.pc-benefits__heading .accent-script {
    color: var(--color-accent-yellow-text);   /* #e09b2b */
}

.pc-benefits__intro {
    flex: 0 1 400px;
    align-self: center;
    font-size: 16px;
    line-height: 26px;
    color: #776d79;
    margin: 0;
}

/* ----- Benefit cards ----- */
.pc-benefits__grid {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.pc-benefits__card {
    min-height: 240px;
    padding: 24px;
    background: var(--color-white);
    border: 2px solid var(--color-primary-light);   /* #ffebf0 */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    gap: 24px;
}

.pc-benefits__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 60px;
}

.pc-benefits__icon--a { background: #ffda8c; }   /* amber */
.pc-benefits__icon--b { background: #ff98c6; }   /* pink */
.pc-benefits__icon--c { background: #8cdcff; }   /* blue */
.pc-benefits__icon--d { background: #ff6485; }   /* primary pink */

.pc-benefits__card-title {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    line-height: 32px;
    color: var(--color-text-heading);
    margin: 0;
}

/* Scroll-position bars — phones only */
.pc-benefits__bars {
    display: none;
    gap: 7px;
    margin: 24px 0 20px;
}

.pc-benefits__bar {
    flex: 1 1 0;
    height: 4px;
    border-radius: 100px;
    background: var(--color-primary-light);
    transition: background-color var(--transition-fast);
}

.pc-benefits__bar.is-active {
    background: var(--color-primary);
}

/* ----- Summary banner ----- */
.pc-benefits__banner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 19px 20px;
    background: var(--color-primary-light);   /* #ffebf0 */
    border-radius: 12px;
    box-shadow: 0 11px 14px rgba(255, 100, 133, 0.05);
    font-size: 16px;
    line-height: 26px;
    color: #776d79;
}

.pc-benefits__banner-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.pc-benefits__banner-text strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-heading);
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .pc-benefits__header {
        flex-direction: column;
        gap: 24px;
    }
    .pc-benefits__heading-block,
    .pc-benefits__intro {
        flex: initial;
        max-width: none;
        align-self: auto;
    }
    .pc-benefits__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pc-benefits {
        padding: 60px var(--section-side-padding);
    }
    .pc-benefits__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .pc-benefits__grid {
        grid-template-columns: 1fr;
    }
    .pc-benefits__card {
        min-height: 0;
    }
}

/* ----- Phones: the cards become a horizontal, snapping scroller -----
   The grid gives way to a flex row that bleeds to the section edges so the
   next card peeks in from the right, with position bars underneath.
   Card width matches the How It Works scroller on this page. */
@media (max-width: 600px) {
    .pc-benefits__grid {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;         /* equal heights; ragged looks broken */
        gap: 16px;
        margin-bottom: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: calc(-1 * var(--section-side-padding));
        padding-inline: var(--section-side-padding);
        /* keeps the snap point from cancelling the padding above */
        scroll-padding-inline: var(--section-side-padding);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .pc-benefits__grid::-webkit-scrollbar {
        display: none;
    }

    .pc-benefits__card {
        flex: 0 0 288px;
        scroll-snap-align: start;
    }

    .pc-benefits__bars {
        display: flex;
    }
}

/* ---- sections/parent_coaching/advantages.css ---- */
/* ============================================
   SECTION: Parent Coaching — Advantages
   Sticky heading/intro on the left; a pink card on the
   right (reuses .ndbi-def-card--pink + vector-270 swirl)
   holding three numbered points. Mirrors the neuroaffirming
   / ndbi definition layout.
   ============================================ */

.pc-advantages {
    max-width: calc(var(--container-max) + 2 * var(--section-side-padding));
    margin-inline: auto;
    padding: 100px var(--section-side-padding);
    background: var(--color-white);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* ----- Intro (sticky, left) ----- */
.pc-advantages__intro {
    flex: 0 1 505px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: sticky;
    top: 100px;
    align-self: flex-start;
}

.pc-advantages__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-normal);
    line-height: 50px;
    letter-spacing: -1.26px;
    color: var(--color-text-heading);
    margin: 0;
    max-width: 505px;
}

/* ----- Pink card (right) ----- */
.pc-advantages__card {
    flex: 0 1 610px;
}

/* Flip the reused pink-card swirl to the right (scoped to this
   section so the shared ndbi-def-card--pink swirl is unaffected) */
.pc-advantages__card .ndbi-def-card__swirl {
    left: auto;
    right: -37px;
    transform: scaleX(-1);
}

/* Three numbered sub-cards inside the pink card */
.pc-advantages__list {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pc-advantages__item {
    padding: 24px;
    background: var(--color-white);
    border: 2px solid var(--color-primary-light);   /* #ffebf0 */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pc-advantages__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background: var(--color-primary-light);   /* #ffebf0 */
    border-radius: 12px;
    font-family: var(--font-accent);          /* Borel script */
    font-size: 32px;
    line-height: 1;
    color: var(--color-primary-text);
    /* Borel sits high in its line box; nudge down to optically center */
    padding-top: 10px;
}

.pc-advantages__text {
    margin: 0;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-heading);
}

/* Scroll-position bars — phones only. Sits above the card's swirl. */
.pc-advantages__bars {
    position: relative;
    z-index: 1;
    display: none;
    gap: 7px;
    margin-top: 24px;
}

.pc-advantages__bar {
    flex: 1 1 0;
    height: 4px;
    border-radius: 100px;
    background: var(--color-white);
    transition: background-color var(--transition-fast);
}

.pc-advantages__bar.is-active {
    background: var(--color-primary);
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .pc-advantages {
        flex-direction: column;
        gap: 48px;
    }
    .pc-advantages__intro,
    .pc-advantages__card {
        flex: initial;
        max-width: none;
        width: 100%;
    }
    /* Only the intro is sticky. The card must keep the `position: relative`
       it gets from .ndbi-def-card — making it static sends its absolutely
       positioned swirl to the page origin, painting it over the hero. */
    .pc-advantages__intro {
        position: static;        /* stop sticking once stacked */
    }
    .pc-advantages__heading {
        font-size: 36px;
        line-height: 42px;
    }
}

@media (max-width: 768px) {
    .pc-advantages {
        padding: 60px var(--section-side-padding);
    }
    .pc-advantages__heading {
        font-size: 32px;
        line-height: 38px;
    }
}

/* ----- Phones: the numbered points become a horizontal scroller -----
   These sit inside the pink card, so the track bleeds to the card's own
   24px padding rather than the section gutter, and the card's
   `overflow: hidden` crops the next point to a peek. */
@media (max-width: 600px) {
    .pc-advantages__list {
        flex-direction: row;
        align-items: stretch;         /* equal heights; ragged looks broken */
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: -24px;
        padding-inline: 24px;
        /* keeps the snap point from cancelling the padding above */
        scroll-padding-inline: 24px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .pc-advantages__list::-webkit-scrollbar {
        display: none;
    }

    .pc-advantages__item {
        flex: 0 0 260px;
        scroll-snap-align: start;
    }

    .pc-advantages__bars {
        display: flex;
    }
}

/* ---- sections/home/faq.css ---- */
/* ============================================
   SECTION: FAQ
   Cream background runs full-bleed; inner content
   capped at 1240 so it aligns with the header.
   Two-column inside: intro on the left, accordion
   items on the right. Decorative swirl pinned to
   the bottom-left of the section.
   ============================================ */

.faq {
    position: relative;            /* anchor for the swirl */
    /* No overflow:hidden here — it would break position:sticky on the intro.
       The swirl clips itself via .faq__swirl. */
    padding: 100px var(--section-side-padding);
    background-color: var(--color-accent-yellow-bg);
}

.faq__inner {
    position: relative;            /* paint above the swirl */
    z-index: 1;
    max-width: var(--container-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Decorative cream swirl in the bottom-left.
   Full-bleed clip layer so the asset can't paint outside the section
   without trapping sticky descendants of .faq. */
.faq__swirl {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.faq__swirl::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40%;
    aspect-ratio: 566 / 313;
    background: url("../../images/decorative/vector-274.a9545bbc679e.webp") no-repeat left bottom / contain;
}

.faq__intro {
    max-width: 550px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Stick the intro while the taller FAQ column scrolls past —
       same pattern as .services-overview__intro. */
    position: sticky;
    top: 100px;                /* clears the 76px sticky navbar + breathing room */
    align-self: flex-start;
}

.faq__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-medium);
    line-height: 50px;
    letter-spacing: -1.26px;
    color: var(--color-text-heading);
    margin: 0;
}

.faq__lede {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-faint);
    margin: 0;
    max-width: 468px;
}

.faq__email {
    color: var(--color-primary-text);
    font-weight: var(--font-weight-semibold);
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 610px;
}

.faq__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq__group-label {
    margin: 0 0 4px;
    font-family: var(--font-label);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-yellow-label);   /* #846c30 */
}

.faq-item {
    background: var(--color-white);
    border: 2px solid var(--color-accent-yellow-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.faq-item[data-open="true"] {
    border-color: var(--color-primary-text);
}

.faq-item__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 16px 20px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--color-text-strong);
}

.faq-item__question {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    line-height: 28px;
    letter-spacing: -0.36px;
    color: var(--color-text-strong);
    flex: 1;
}

.faq-item__indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-surface-soft);
    border-radius: var(--radius-full);
    flex-shrink: 0;
    color: var(--color-text-strong);
    transition: transform var(--transition-base), background-color var(--transition-fast);
}

.faq-item[data-open="true"] .faq-item__indicator {
    transform: rotate(180deg);
    background: var(--color-primary-light);
    color: var(--color-primary-text);
}

.faq-item__panel {
    padding: 0 20px 20px;
}

.faq-item__panel p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-faint);
    margin: 0;
}

.faq__empty {
    color: var(--color-text-body);
    text-align: center;
    padding: var(--space-2xl);
}

@media (max-width: 1024px) {
    .faq__inner {
        grid-template-columns: 1fr;
    }
    .faq__intro {
        position: static;      /* no sticking once the layout stacks to one column */
    }
}

@media (max-width: 768px) {
    .faq {
        padding: 60px var(--section-side-padding);
    }
    .faq__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .faq__swirl::before {
        width: 60%;
    }
}

/* ----- Phones -----
   Tighter accordion rows: the chevron loses its pill so the question gets
   the width back, and the type steps down a notch. */
@media (max-width: 600px) {
    .faq__lede {
        font-size: 14px;
        line-height: 22px;
    }

    .faq__list {
        gap: 12px;
    }

    .faq-item__question {
        font-size: 16px;
        line-height: 26px;
        letter-spacing: -0.32px;
    }

    .faq-item__indicator {
        width: 20px;
        height: 20px;
        background: none;
        border-radius: 0;
    }

    /* No pill to tint once open — just flip the chevron. */
    .faq-item[data-open="true"] .faq-item__indicator {
        background: none;
    }

    .faq-item__panel p {
        font-size: 15px;
        line-height: 24px;
    }
}

/* ---- sections/approach/get_in_touch.css ---- */
/* ============================================
   SECTION: Our Approach — Get In Touch (closing CTA)
   The photo (swirl baked in) is the section background,
   anchored top-right and spanning the full section
   height so it bleeds up to touch the section above.
   Copy sits in a left column over the transparent area.
   ============================================ */

.approach-cta {
    position: relative;
    max-width: var(--container-max);
    margin: auto;
    /* no top padding → background photo touches the section above */
    padding: 0 var(--section-side-padding);
    min-height: 560px;
    display: flex;
    align-items: center;
    background-color: var(--color-white);
    background-image: url("../../images/approach/approach__approach-our-services1.bd760084d4c4.png");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: auto 100%;     /* full section height, anchored top-right */
}

.approach-cta--ndbi {
    background-image: url("../../images/approach/approach__approach-our-services2.7d4478659e04.png");
}

.approach-cta--neuro {
    background-image: url("../../images/approach/cutout_toddler_bunny_20260825_213003_hero_diagonal.50cd93b2a6ce.png");
}

.page-parent-coaching .approach-cta {
    background-image: url("../../images/approach/cutout_shy_cardigan_girl_20260825_213003_hero_diagonal.a78ab3ef7d81.png");
}

.page-journey .approach-cta {
    background-image: url("../../images/approach/cutout_toddler_wave_20260825_213758_hero_diagonal.e59bc4771be5.png");
}


.approach-cta__inner {
    max-width: var(--container-max);
    width: 100%;
    margin-inline: auto;
}

/* ----- Copy (left) ----- */
.approach-cta__content {
    position: relative;
    z-index: 1;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 72px 0;
}

.approach-cta__heading {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: var(--font-weight-normal);
    line-height: 58px;
    letter-spacing: normal;
    color: var(--color-text-heading);
    margin: 0;
}

.approach-cta__heading .accent-script {
    color: var(--color-primary-text);
}

.approach-cta__lede {
    max-width: 586px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-body);
    margin: 0;
}

.approach-cta__actions {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
}

/* ----- Responsive: photo drops below the copy -----
   Side-by-side collides through ~iPad landscape (1024): the photo's opaque
   area eats into the 640px copy column. Stack instead.
   Photo is ~0.92:1, but its top ~18% is only the pink tip on the right —
   tuck that under the copy so the boy sits close under the CTA button
   instead of leaving a tall empty band. */
@media (max-width: 1100px) {
    .approach-cta {
        display: block;
        min-height: 0;
        background-position: bottom center;
        background-size: 100% auto;     /* full-width photo pinned to the bottom */
        /* 0.92 image height × ~0.82 subject offset + small breath */
        padding-bottom: calc(76% + 20px);
    }
    .approach-cta__content {
        max-width: none;
        padding: 48px 0 12px;
    }

    /* Journey Custom #2 is ~2:1 — shared 76% padding left a huge empty band */
    .page-journey .approach-cta {
        padding-bottom: calc(50% + 16px);
        background-size: 100% auto;
        background-position: bottom center;
    }
}

@media (max-width: 768px) {
    .approach-cta__heading {
        font-size: 36px;
        line-height: 42px;
    }
}

/* ----- Phones -----
   Tighter heading rhythm and a closer heading/lede pairing, and the photo
   widens slightly so it bleeds past both edges as in the design. */
@media (max-width: 600px) {
    /* The photo is ~1.08:1, so at 110% width it stands ~102vw tall — the
       bottom padding has to reserve that much or it rides up over the copy. */
    .approach-cta {
        background-size: 110% auto;
        background-position: left -17px bottom;
        padding-bottom: 102vw;
    }

    .approach-cta__content {
        padding-top: 88px;
        gap: 8px;
    }

    .approach-cta__heading {
        line-height: 36px;
    }

    /* CTA sits clear of the tightened heading/lede pairing */
    .approach-cta__actions {
        margin-top: 16px;
    }

    /* ~2:1 journey photo at 110% width ≈ 53vw tall */
    .page-journey .approach-cta {
        background-size: 110% auto;
        background-position: left -17px bottom;
        padding-bottom: 56vw;
    }
}