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

/* ---- sections/autism_screening/hero.css ---- */
/* ============================================
   SECTION: Autism Screening — Hero
   Two-column layout (copy left, photo right) capped at the
   site container width — the photo stays within the
   container rather than bleeding off the edge. Accent
   script is pink here. Mirrors the Autism Testing hero.
   ============================================ */

.as-hero {
    padding: 36px var(--section-side-padding) 25px;
    background: var(--color-white);
    overflow: hidden;
}

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

/* ----- Left: copy ----- */
.as-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.as-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;
}

.as-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 */
}

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

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

/* ----- Right: photo ----- */
.as-hero__media {
    justify-self: end;
}

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

/* ----- Responsive ----- */
@media (max-width: 900px) {
    .as-hero {
        padding: 24px var(--section-side-padding) 56px;
    }
    .as-hero__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .as-hero__media {
        justify-self: center;
    }
}

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

/* ----- Phones -----
   Centred copy, matching the sibling heroes. The photo keeps its natural
   size here — no crop — so only the text alignment changes. */
@media (max-width: 600px) {
    .as-hero__content {
        align-items: center;
        text-align: center;
    }
}

/* ---- 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/autism_screening/definition.css ---- */
/* ============================================
   SECTION: Autism Screening — Definition
   Heading + intro on the left, a pink card on the right.
   The card reuses the ndbi/definition pink-card shell
   (.ndbi-def-card--pink); this file adds the two-column
   layout and the closing statement block.
   ============================================ */

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

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

/* ----- Intro (left) ----- */
.as-definition__intro {
    flex: 0 1 505px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.as-definition__heading-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
}

.as-definition__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);
}

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

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

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

/* Closing quote + attribution */
.as-definition__statement {
    position: relative;
    z-index: 1;
    margin: 40px 0 0;
    padding-right: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.as-definition__quote-mark {
    display: inline-flex;
    width: 32px;
    height: 32px;
}

.as-definition__statement-text {
    margin: 0;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: var(--font-weight-normal);
    line-height: 44px;
    color: var(--color-primary-text);   /* pink #ff6485 */
}

.as-definition__person {
    display: flex;
    align-items: center;
    gap: 16px;
}

.as-definition__avatar {
    flex-shrink: 0;
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-primary-light);
}

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

.as-definition__person-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

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

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .as-definition__inner {
        flex-direction: column;
        gap: 40px;
    }
    .as-definition__intro,
    .as-definition__card {
        flex: initial;
        max-width: none;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .as-definition {
        padding: 60px var(--section-side-padding);
    }
    .as-definition__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .as-definition__statement-text {
        font-size: 26px;
        line-height: 36px;
    }
}

/* ---- sections/autism_screening/conditions.css ---- */
/* ============================================
   SECTION: Autism Screening — Conditions
   Full-bleed cream panel with a decorative swirl behind, a
   centered header, and a staggered set of tilted cards
   (icon circle + title). Mirrors parent_coaching/how_it_works.
   ============================================ */

.as-conditions {
    position: relative;
    overflow: clip;
    padding: 100px var(--section-side-padding) 112px;
    background-color: var(--color-accent-yellow-bg-soft);   /* #fffbf1 */
}

/* Decorative swirl backdrop, behind the content */
.as-conditions::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 ----- */
.as-conditions__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;
}

.as-conditions__header .eyebrow {
    margin-bottom: 18px;
    color: #846c30;
}

.as-conditions__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;
}

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

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

/* ----- Condition cards (staggered) ----- */
.as-conditions__cards {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 1312px;               /* fits 4 cards (310) + 3 gaps → 7 wrap to 4 + 3 */
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.as-condition {
    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 for the playful stagger */
.as-condition:nth-child(odd)  { transform: rotate(-3deg); }
.as-condition:nth-child(even) { transform: rotate(3deg); }

.as-condition__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;
}

.as-condition__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. Sits above the section swirl. */
.as-conditions__bars {
    position: relative;
    z-index: 1;
    display: none;
    gap: 7px;
    margin-top: 24px;
}

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

.as-conditions__bar.is-active {
    background: var(--color-primary);
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .as-conditions {
        padding: 56px var(--section-side-padding);
    }
    .as-conditions__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .as-condition {
        transform: none !important;   /* drop the tilt when stacked */
        width: 100%;
        max-width: 340px;
        min-height: 0;
    }
}

/* ----- Phones: the cards become a horizontal, snapping scroller -----
   The track bleeds to the section edges so the next card peeks in from the
   right, with position bars underneath. */
@media (max-width: 600px) {
    .as-conditions__cards {
        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: 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;
    }

    .as-conditions__cards::-webkit-scrollbar {
        display: none;
    }

    .as-condition {
        flex: 0 0 288px;
        width: auto;
        max-width: none;
        scroll-snap-align: start;
    }

    .as-conditions__bars {
        display: flex;
    }
}

/* ---- sections/autism_screening/photo.css ---- */
/* ============================================
   SECTION: Autism Screening — Photo (full-width)
   Edge-to-edge photo as a CSS background (no swirl). Height
   is driven by the image's aspect ratio so the whole photo
   shows at any width. Mirrors the ABA / diagnostic photo bands.
   ============================================ */

.as-photo {
    width: 100%;
    aspect-ratio: 2880 / 1400;       /* full image, proportional at any width */
    background: var(--color-white) url("../../images/autism-screening/girls_whispering_bed_20260820_183203_swirl.2009ad73242c.webp") no-repeat center center / cover;
}

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

/* ---- sections/autism_screening/tools.css ---- */
/* ============================================
   SECTION: Autism Screening — Tools (M-CHAT-R)
   Full-width pink band. Header, then a white card with the
   image on the left (a decorative swirl bleeding to its
   right, behind the content) and the tool copy + CTA right.
   ============================================ */

.as-tools {
    padding: 100px var(--section-side-padding);
    background: var(--color-primary-light);   /* #ffebf0 */
}

/* ----- Header ----- */
.as-tools__header {
    max-width: var(--container-max);
    margin: 0 auto 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.as-tools__heading {
    max-width: 484px;
    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;
}

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

/* ----- Card ----- */
.as-tools__card {
    position: relative;
    overflow: hidden;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 20px;
    background: var(--color-white) url("../../images/autism-screening/cutout_toddler_bunny_20260825_213003_hero_diagonal_cutout.23c3edec4e24.webp") no-repeat left center / auto 100%;
    border: 2px solid var(--color-surface-line-soft);   /* #f6f6f6 */
    border-radius: 12px;
    display: flex;
    align-items: stretch;
    gap: 40px;
}

/* ----- Media (left) — transparent spacer over the card background photo ----- */
.as-tools__media {
    flex: 0 0 570px;
    max-width: 570px;
    align-self: stretch;
    min-height: 496px;
}

/* ----- Body (right) ----- */
.as-tools__body {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 500px;
    padding: 24px 0;
}

.as-tools__title {
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    line-height: 32px;
    color: var(--color-text-heading);
    margin: 0;
}

.as-tools__text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.as-tools__cta {
    align-self: flex-start;
}

/* ----- Responsive -----
   Below 1024 the card stacks, but the photo must move off the card
   background and onto the media box — otherwise `auto 100%` scales
   the wide cutout to the full stacked-card height and the copy sits
   on top of it. */
@media (max-width: 1024px) {
    .as-tools__card {
        flex-direction: column;
        gap: 24px;
        background-image: none;
    }

    .as-tools__media {
        flex: initial;
        max-width: none;
        min-height: 0;
        height: 360px;
        background: url("../../images/autism-screening/cutout_toddler_bunny_20260825_213003_hero_diagonal_cutout.23c3edec4e24.webp") no-repeat left center / auto 100%;
        border-radius: 12px;
    }

    .as-tools__body {
        max-width: none;
        align-self: stretch;
        padding: 0;
    }
}

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

/* ----- Phones ----- */
@media (max-width: 600px) {
    .as-tools__card {
        gap: 20px;
    }

    .as-tools__media {
        height: 220px;
        background-size: cover;
        background-position: left center;
    }

    .as-tools__cta {
        align-self: stretch;
        text-align: center;
    }
}

/* ---- sections/autism_screening/about.css ---- */
/* ============================================
   SECTION: Autism Screening — About (what to keep in mind)
   Header (title left, intro right) + a row of three cards
   with colored icon circles, title, and description, plus a
   pink "important note" banner underneath.
   ============================================ */

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

.as-about__inner {
    max-width: var(--container-max);
    margin-inline: auto;
}

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

.as-about__heading-group {
    flex: 0 1 505px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.as-about__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;
}

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

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

/* ----- Cards ----- */
.as-about__cards {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 20px;
}

.as-about-card {
    flex: 1 1 0;
    padding: 24px;
    background: var(--color-white);
    border: 2px solid var(--color-primary-light);   /* #ffebf0 */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 54px;
}

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

.as-about-card__icon--a { background: #ffda8c; }   /* amber */
.as-about-card__icon--b { background: #ff98c6; }   /* pink */
.as-about-card__icon--c { background: #8cdcff; }   /* blue */

.as-about-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.as-about-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;
}

.as-about-card__desc {
    font-size: 16px;
    line-height: 26px;
    color: #776d79;
    margin: 0;
}

/* ----- Important-note banner ----- */
.as-about__note {
    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;
}

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

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

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .as-about__header {
        flex-direction: column;
        gap: 24px;
    }
    .as-about__heading-group,
    .as-about__intro {
        flex: initial;
        max-width: none;
        align-self: auto;
    }
    .as-about__cards {
        flex-wrap: wrap;
    }
    .as-about-card {
        flex: 1 1 45%;
    }
}

@media (max-width: 768px) {
    .as-about {
        padding: 60px var(--section-side-padding);
    }
    .as-about__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .as-about-card {
        flex: 1 1 100%;
        gap: 32px;
    }
}

/* ---- sections/autism_screening/neurodiversity.css ---- */
/* ============================================
   SECTION: Autism Screening — A note on Neurodiversity
   Cream band. Heading on the left, a white testimonial card
   on the right. A swirl bleeds across the top-right corner.
   Mirrors ndbi/why.
   ============================================ */

.as-neuro {
    position: relative;
    overflow: clip;
    padding: 120px var(--section-side-padding);
    background: #fcf7ea;
}

.as-neuro__swirl {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: -90px;
    right: 0;
    width: 340px;
    aspect-ratio: 700 / 630;
    background: url("../../images/decorative/why-ndbi-swirl.8ae18575f9db.png") no-repeat top right / contain;
}

/* Bottom-left swirl */
.as-neuro__swirl--bl {
    top: auto;
    right: auto;
    left: 0;
    bottom: 0;
    width: 520px;
    aspect-ratio: 566 / 313;
    background: url("../../images/decorative/vector-274.2c3d01b48edf.png") no-repeat left bottom / contain;
}

.as-neuro__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) ----- */
.as-neuro__intro {
    flex: 0 1 447px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.as-neuro__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;
}

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

/* ----- Testimonial card (right) ----- */
.as-neuro__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);
}

.as-neuro__quote-mark {
    display: inline-flex;
    width: 32px;
    height: 32px;
}

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

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

.as-neuro__person {
    display: flex;
    align-items: center;
    gap: 16px;
}

.as-neuro__avatar {
    flex-shrink: 0;
    display: block;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffce64;   /* yellow backing */
}

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

.as-neuro__person-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

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

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .as-neuro {
        padding: 80px var(--section-side-padding);
    }
    .as-neuro__inner {
        flex-direction: column;
        gap: 40px;
    }
    .as-neuro__intro,
    .as-neuro__card {
        flex: initial;
        max-width: none;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .as-neuro {
        padding: 56px var(--section-side-padding);
    }
    .as-neuro__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .as-neuro__card {
        padding: 28px;
        gap: 32px;
    }
}

/* ---- sections/autism_testing/centers.css ---- */
/* ============================================
   SECTION: Autism Testing — Explore Our Centers
   Header (title + intro) + horizontal-scroll location
   cards (image left, city/address right) + a contact CTA
   row + a pink insurance banner. Mirrors home/centers.
   ============================================ */

.at-centers {
    padding: 100px 0;
    background: var(--color-white);
}

/* The section itself has no side padding so the card track can bleed to the
   edges, which means the inner blocks have to carry the gutter themselves —
   without it the header and contact rows sit flush to the screen edges below
   the container width. */
.at-centers__inner {
    max-width: calc(var(--container-max) + 2 * var(--section-side-padding));
    margin-inline: auto;
    padding-inline: var(--section-side-padding);
}

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

.at-centers__heading-group {
    flex: 0 1 690px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.at-centers__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;
}

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

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

/* ----- Carousel ----- */
.at-centers__carousel {
    position: relative;
    margin-bottom: 56px;
}

.at-centers__list {
    list-style: none;
    margin: 0;
    padding: 0 var(--section-side-padding);
    display: flex;
    gap: 20px;
    margin-top: 200px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-padding-left: var(--section-side-padding);
}
.at-centers__list::-webkit-scrollbar { display: none; }

.at-center-card {
    flex: 0 0 400px;
    max-width: 400px;
    scroll-snap-align: start;
}

.at-center-card__link {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 154px;
    overflow: hidden;
    background: var(--color-primary-light);   /* #ffebf0 */
    border: 2px solid var(--color-surface-line-soft);   /* #f6f6f6 */
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-fast);
}
.at-center-card__link:hover {
    box-shadow: var(--shadow-card);
}

.at-center-card__photo {
    flex: 0 0 176px;
    width: 176px;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* No photo yet (e.g. a just-added center) — keep the slot, show the
   card's pink background instead of a broken image. */
.at-center-card__photo--empty {
    background: var(--color-primary-light);
}

.at-center-card__body {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
}

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

.at-center-card__address {
    display: flex;
    align-items: center;
    gap: 6px;
    font-style: normal;
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    line-height: 20px;
    color: #3e2e2d;
}

.at-center-card__icon {
    flex-shrink: 0;
    display: inline-flex;
    width: 24px;
    height: 24px;
}

/* Scroll-position bars — phones only (arrows take over above) */
.at-centers__bars {
    display: none;
    gap: 7px;
    margin-top: 24px;
    padding-inline: var(--section-side-padding);
}

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

.at-centers__bar.is-active {
    background: var(--color-primary);
}

/* Carousel arrows */
.at-centers__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-white);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    color: var(--color-text-heading);
    cursor: pointer;
}
.at-centers__arrow--prev { left: calc(var(--section-side-padding) - 22px); }
.at-centers__arrow--next { right: calc(var(--section-side-padding) - 22px); }
.at-centers__arrow[hidden] { display: none; }

/* ----- Contact CTA row ----- */
.at-centers__contact {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 43px 0;
    border-top: 1px solid var(--color-surface-line-soft);
}

.at-centers__contact-icon {
    flex-shrink: 0;
    align-self: flex-start;
    display: inline-flex;
    width: 32px;
    height: 32px;
}

.at-centers__contact-text {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.at-centers__contact-title {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    line-height: 26px;
    color: var(--color-text-heading);
    margin: 0;
}

.at-centers__contact-body {
    font-size: 16px;
    line-height: 26px;
    color: #776d79;
    margin: 0;
}

.at-centers__contact-cta {
    flex-shrink: 0;
}

/* ----- Insurance banner ----- */
.at-centers__insurance {
    position: relative;
    overflow: hidden;
    margin-top: 8px;
    padding: 60px 0;
    border-radius: 12px;
    background: var(--color-primary-light);   /* #ffebf0 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Decorative swirls behind the banner content */
.at-centers__insurance-wave {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
}

.at-centers__insurance-wave--top {
    top: 0;
    left: 0;
    width: 884px;
    aspect-ratio: 884 / 127;
    background-image: url("../../images/decorative/swirl-top-left.34835c489e93.png");
    background-position: top left;
    background-size: contain;
}

.at-centers__insurance-wave--bottom {
    bottom: 0;
    right: 0;
    width: 1143px;
    aspect-ratio: 1143 / 61;
    background-image: url("../../images/decorative/swirl-bottom-right.61354c0db5f0.png");
    background-position: bottom right;
    background-size: contain;
}

.at-centers__insurance-text {
    position: relative;
    z-index: 1;
    max-width: 560px;
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-faint);
    margin: 0;
}

.at-centers__insurance-logos {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container-max);
}

.at-centers__insurance-logos-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .at-centers__header {
        flex-direction: column;
        gap: 24px;
    }
    .at-centers__heading-group,
    .at-centers__lede {
        flex: initial;
        max-width: none;
        align-self: auto;
    }
    /* The 200px gap is deliberate breathing room beside the desktop two-column
       header; once that stacks it is just dead space. */
    .at-centers__list {
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    .at-centers {
        padding: 60px 0;
    }
    .at-centers__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .at-centers__contact {
        flex-direction: column;
        align-items: flex-start;
    }
    .at-centers__insurance {
        padding: 40px 20px;
    }
    /* On touch devices, hide the arrows and let users swipe the row */
    .at-centers__arrow {
        display: none;
    }
}

/* ----- Phones -----
   Cards turn vertical (photo above the details) so they fit the screen, and
   position bars replace the arrows — matching the home page centers row. */
@media (max-width: 600px) {
    .at-centers__list {
        margin-top: 32px;
    }

    .at-center-card {
        flex: 0 0 308px;
        max-width: none;
    }
    .at-center-card__link {
        flex-direction: column;
        height: auto;
    }

    .at-center-card__photo {
        flex: 0 0 auto;
        width: 100%;
        height: 150px;
    }

    .at-center-card__body {
        gap: 12px;
        padding: 20px;
    }

    .at-centers__bars {
        display: flex;
    }

    .at-centers__contact-cta {
        width: 100%;
        text-align: center;
    }
}

/* ---- 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;
    }
}

/* ---- sections/autism_testing/get_in_touch.css ---- */
/* ============================================
   SECTION: Autism Testing — Get In Touch (closing CTA)
   Reuses the approach closing-CTA layout (.approach-cta,
   from css/sections/approach/get_in_touch.css) and only
   swaps in this page's background photo.

   Center detail pages can override per slug via
   body.page-center--{slug} (see center_detail.html).
   ============================================ */

.approach-cta--at {
    background-image: url("../../images/autism-testing/autism-testing__get-in-touch.add57296e924.webp");
}

/* Autism Screening: Custom #2 (same 689×645 footprint as AT default) */
.approach-cta--as {
    background-image: url("../../images/autism-testing/cutout_waving_girl_20260820_183203_hero_diagonal.50accea3d48e.webp");
}

/* Diagnostic Evaluation: Custom #2 (~1.5:1, 1200×800) */
.approach-cta--de {
    background-image: url("../../images/autism-testing/hero__hero-child.e4f7be64f49a.webp");
}

/* Wayland: Custom #1 (wider ~1.63:1) */
.page-center--wayland-ma .approach-cta--at {
    background-image: url("../../images/autism-testing/autism-screening__tools.a843c2365533.webp");
}

/* Andover: Custom #2 */
.page-center--andover-ma .approach-cta--at {
    background-image: url("../../images/autism-testing/cutout_waving_girl_20260820_183203_hero_diagonal.50accea3d48e.webp");
}

/* Braintree: Custom #3 */
.page-center--braintree-ma .approach-cta--at {
    background-image: url("../../images/autism-testing/diagnostic-evaluation__hero.28fb0047826b.webp");
}

/* Woburn: Custom #2 */
.page-center--woburn-ma .approach-cta--at {
    background-image: url("../../images/autism-testing/cutout_carer_toddler_20260825_213003_hero_diagonal.86ddeba9172c.webp");
}

/* Foxborough: Custom #2 */
.page-center--foxborough-ma .approach-cta--at {
    background-image: url("../../images/autism-testing/cutout_dad_toddler_20260826_064317_hero_diagonal.330cf31f62da.webp");
}

/* Weston: Custom #1 */
.page-center--weston-ma .approach-cta--at {
    background-image: url("../../images/autism-testing/approach__approach-our-services2.a4ff84e105c1.webp");
}

/* Sudbury: Custom #2 */
.page-center--sudbury-ma .approach-cta--at {
    background-image: url("../../images/autism-testing/cutout_crown_boy_20260821_054538_hero_diagonal.cbcd731f1ab6.webp");
}

/* Tablet: ~1.07:1 photo — tuck sparse top like the shared approach CTA. */
@media (max-width: 1100px) {
    .approach-cta--at {
        padding-bottom: calc(88% + 20px);
    }

    .page-center--wayland-ma .approach-cta--at {
        padding-bottom: calc(61% + 20px);
    }

    .page-center--andover-ma .approach-cta--at {
        padding-bottom: calc(92% + 20px);
    }

    .approach-cta--de {
        padding-bottom: calc(67% + 20px);
    }
}

/* ----- Phones -----
   This photo is 689x645 (1.068:1) where the Our Approach one is 1.083:1, so
   at 110% width it stands 103vw tall — 1vw more than the shared rule
   reserves, which left its top edge grazing the copy. */
@media (max-width: 600px) {
    .approach-cta--at {
        padding-bottom: 103vw;
    }

    .page-center--wayland-ma .approach-cta--at {
        padding-bottom: 68vw;
    }

    .page-center--andover-ma .approach-cta--at {
        padding-bottom: 102vw;
    }

    .approach-cta--de {
        padding-bottom: 74vw;
    }
}