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

/* ---- sections/diagnostic_evaluation/hero.css ---- */
/* ============================================
   SECTION: Diagnostic Evaluation Process — 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.
   ============================================ */

.de-hero {
    /* No top padding — hero photo sits flush under the sticky navbar. */
    padding: 0 var(--section-side-padding) 25px;
    background: var(--color-white);
    overflow: hidden;
}

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

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

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

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

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

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

/* ----- Right: photo (pink swirl behind child, flush to silhouette) ----- */
.de-hero__media {
    position: relative;
    justify-self: end;
    width: 100%;
    max-width: 689px;
}

.de-hero__swirl {
    position: absolute;
    inset: 0;
    width: 118%;
    max-width: none;
    height: auto;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

.de-hero__photo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
}

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

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

/* ----- Phones -----
   Centred copy with the full hero photo below — no crop so the
   image and pink swirl aren't clipped on mobile. */
@media (max-width: 600px) {
    .de-hero {
        padding-bottom: 56px;
    }

    .de-hero__inner {
        gap: 24px;
        border-bottom: none;
    }

    .de-hero__content {
        align-items: center;
        text-align: center;
    }

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

    .de-hero__swirl {
        width: 100%;
        left: 50%;
        top: 46%;
        transform: translate(-50%, -50%);
    }

    .de-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/diagnostic_evaluation/tools.css ---- */
/* ============================================
   SECTION: Diagnostic Evaluation Process — Tools (ADOS-2)
   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 "We believe" statement block.
   ============================================ */

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

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

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

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

.de-tools__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);
}

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

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

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

/* "We believe" statement block */
.de-tools__belief {
    position: relative;
    z-index: 1;
    margin-top: 40px;
    padding-right: 40px;
    display: flex;
    flex-direction: column;
    gap: 23px;
}

.de-tools__belief-eyebrow {
    color: #665e60;
}

.de-tools__statement {
    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 */
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .de-tools__inner {
        flex-direction: column;
        gap: 40px;
    }
    .de-tools__intro,
    .de-tools__card {
        flex: initial;
        max-width: none;
        width: 100%;
    }
}

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

/* ---- sections/diagnostic_evaluation/evaluation.css ---- */
/* ============================================
   SECTION: Diagnostic Evaluation Process — Evaluation
   Cream band, heading, three age-banded columns each with
   a white card listing assessment tools. A decorative
   orange swirl bleeds across the bottom-right corner.
   ============================================ */

.de-evaluation {
    position: relative;
    overflow: clip;
    padding: 100px var(--section-side-padding);
    background: #fef9ee;
}

.de-evaluation__swirl {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    right: 0;
    bottom: 0;
    width: 620px;
    aspect-ratio: 873 / 548;
    background: url("../../images/decorative/orange-swirl.a4eb3f162d58.png") no-repeat right bottom / contain;
}

.de-evaluation__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin-inline: auto;
}

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

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

.de-evaluation__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;
}

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

.de-evaluation__lede {
    flex: 0 1 600px;
    align-self: flex-end;
    font-size: 16px;
    line-height: 26px;
    color: #776d79;
    margin: 0;
}

/* ----- Columns ----- */
.de-evaluation__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 20px;
}

.de-evaluation__col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.de-evaluation__age {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    line-height: 20px;
    color: #ae9e76;
    margin: 0;
}

.de-evaluation__card {
    flex: 1 1 auto;
    list-style: none;
    margin: 0;
    padding: 24px 20px;
    background: var(--color-white);
    border: 2px solid #f6edd6;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.de-evaluation__tool {
    display: flex;
    align-items: center;
    gap: 12px;
}

.de-evaluation__check {
    flex-shrink: 0;
    display: inline-flex;
    width: 44px;
    height: 44px;
}

.de-evaluation__tool-name {
    flex: 1 1 0;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    line-height: 26px;
    color: #3e2e2d;
}

/* Scroll-position bars — phones only */
.de-evaluation__bars {
    display: none;
    gap: 7px;
    margin-top: 24px;
}

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

.de-evaluation__bar.is-active {
    background: var(--color-primary);
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .de-evaluation__header {
        flex-direction: column;
        gap: 24px;
    }
    .de-evaluation__heading-group,
    .de-evaluation__lede {
        flex: initial;
        max-width: none;
        align-self: auto;
    }
    .de-evaluation__grid {
        grid-template-columns: 1fr;
    }
}

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

/* ----- Phones: the age bands become a horizontal, snapping scroller -----
   The grid gives way to a flex row that bleeds to the section edges so the
   next band peeks in from the right, with position bars underneath. */
@media (max-width: 600px) {
    .de-evaluation__grid {
        display: flex;
        flex-wrap: nowrap;
        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;
    }

    .de-evaluation__grid::-webkit-scrollbar {
        display: none;
    }

    .de-evaluation__col {
        flex: 0 0 288px;
        scroll-snap-align: start;
    }

    .de-evaluation__bars {
        display: flex;
    }
}

/* ---- sections/diagnostic_evaluation/photo.css ---- */
/* ============================================
   SECTION: Diagnostic Evaluation Process — Photo (full-width)
   Edge-to-edge photo as a CSS background (home hero-image
   smiling photo), with the decorative white swirl bleeding
   across the top. Mirrors ndbi/photo_play.
   ============================================ */

.de-photo {
    position: relative;
    overflow: clip;
    width: 100%;
    aspect-ratio: 2880 / 1400;       /* full image, proportional at any width */
    background: var(--color-white) url("../../images/hero/clinic_table_session_20260820_183203_swirl.212ba35f3876.webp") no-repeat center center / cover;
}

/* Decorative white swirl in the bottom-right corner */
.de-photo__swirl {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    bottom: 0;
    right: 0;
    width: 500px;
    max-width: 40%;
    aspect-ratio: 759 / 700;         /* preserve the swirl asset's intrinsic aspect */
    background: url("../../images/decorative/vector-280.ab5d1ef76e5b.webp") no-repeat bottom right / contain;
}

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

/* ---- sections/home/family_journey.css ---- */
/* ============================================
   SECTION: Family Journey
   4 numbered onboarding steps with arrows between
   each badge. Matched to Figma: heading-only header
   (no lede), step gap 32, title weight 400, arrow
   stroke #4F2A33 @ 1.5px, green check centred on
   badge top-right corner.
   ============================================ */

.family-journey {
    /* cap content at 1240 (gutter sits OUTSIDE the cap), aligning with hero/navbar */
    max-width: calc(var(--container-max) + 2 * var(--section-side-padding));
    margin-inline: auto;
    padding: 100px var(--section-side-padding);
    background: var(--color-white);
}

/* Journey page only (#journey-steps) — tighter top padding, without
   affecting the home page's Family Journey which shares these styles. */
#journey-steps {
    padding-top: 20px;
}

.family-journey__header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 424px;
    margin-bottom: 95px;
}

.family-journey__heading-group {
    flex: 0 1 550px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.family-journey__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;
}

/* Optional supporting line under the heading (used on the Journey page) */
.family-journey__lede {
    max-width: 400px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-body);
    margin: 0;
}

/* Home: title left, lede right (same pattern Centers used) */
.family-journey__header--aside {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    max-width: none;
}

/* Same rules the home Centers lede used before this copy moved here */
.family-journey__header--aside .family-journey__lede {
    flex: 0 1 400px;
    margin-top: 46px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-body);
    max-width: none;
}

.family-journey__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2xl);
    list-style: none;
    padding: 0;
    margin: 0 0 60px;
}

.journey-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;                       /* badge → text gap, per Figma */
    max-width: 295px;
    margin: 0 auto;
}

.journey-step__badge {
    width: 52px;
    height: 52px;
    padding-top: 18px;               /* optical centering — Borel digits look off without this */
    background-color: var(--color-primary-light);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-accent);
    font-size: 32px;
    color: var(--color-primary-text);
    letter-spacing: -0.96px;
}

.journey-step__connector {
    position: absolute;
    top: 0px;
    left: calc(50% + 30px);
    width: 100%;
    height: 24px;                    /* matches the steps-arrow.png asset height */
    pointer-events: none;
    background: url("../../images/decorative/steps-arrow.fdc68d27b464.png") no-repeat center center / contain;
}

.journey-step--last .journey-step__badge {
    position: relative;
}

.journey-step--last .journey-step__badge::after {
    content: '';
    position: absolute;
    top: -13px;
    right: -13px;
    width: 25px;
    height: 25px;
    background: #50d982;             /* Figma green */
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
}

.journey-step__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--font-weight-normal);   /* 400, per Figma */
    line-height: 28px;
    letter-spacing: -0.36px;
    color: #2c2626;
    margin: 0;
}

.journey-step__description {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-body);
    margin: 0;
}

.family-journey__cta {
    display: flex;
    justify-content: center;
}

/* ----- Scroll-position bars (phones only) ----- */
.family-journey__bars {
    display: none;
    gap: 7px;
    margin-bottom: 60px;
}

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

.family-journey__bar.is-active {
    background: var(--color-primary);
}

.family-journey__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-body);
}

@media (max-width: 1024px) {
    .family-journey__steps {
        grid-template-columns: repeat(2, 1fr);
    }
    .journey-step__connector {
        display: none;
    }
    .family-journey__header--aside {
        flex-direction: column;
        gap: 24px;
    }
    .family-journey__heading-group,
    .family-journey__header--aside .family-journey__lede {
        flex: 0 1 auto;
    }
    .family-journey__header--aside .family-journey__lede {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .family-journey {
        padding: 60px var(--section-side-padding);
    }
    .family-journey__header {
        margin-bottom: 48px;
        max-width: none;
    }
    .family-journey__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .family-journey__steps {
        grid-template-columns: 1fr;
    }
}

/* ----- Phones: the steps become a snapping horizontal scroller -----
   Scoped to the --scroll modifier so the Journey page, which reuses these
   classes, keeps its stacked layout. */
@media (max-width: 600px) {
    .family-journey__steps--scroll {
        display: flex;
        gap: 32px;
        padding-top: 13px;
        margin-bottom: 32px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* bleed to the section edges so the next step peeks in; scroll-padding
           insets the snapport to match, otherwise the snap point cancels the
           padding and the first step sits flush against the viewport edge */
        margin-inline: calc(-1 * var(--section-side-padding));
        padding-inline: var(--section-side-padding);
        scroll-padding-inline: var(--section-side-padding);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .family-journey__steps--scroll::-webkit-scrollbar {
        display: none;
    }

    /* Steps read left-aligned on phones, not centred as on desktop. The
       uniform 32px step gap is split here so the description sits tight
       under its title while the badge keeps its breathing room. */
    .family-journey__steps--scroll .journey-step {
        flex: 0 0 284px;
        max-width: none;
        margin: 0;
        gap: 12px;
        align-items: flex-start;
        text-align: left;
        scroll-snap-align: start;
    }

    .family-journey__steps--scroll .journey-step__title {
        margin-top: 28px;
    }

    .family-journey__bars {
        display: flex;
    }

    /* CTA runs the full width of the card column */
    .family-journey__cta .btn {
        width: 100%;
    }
}
/* ---- sections/home/insurance.css ---- */
/* ============================================
   SECTION: Insurance
   Cream rounded panel with two decorative wave
   accents, centered heading + lede, tinted logo
   strip, and a white verify-coverage CTA bar.
   ============================================ */

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

/* Variant used on the ABA Therapy page — no bottom padding
   (kept off the base rule so the home Insurance section is unaffected). */
.insurance--flush {
    padding-bottom: 0;
}

.insurance__panel {
    position: relative;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 80px 32px 32px;
    background-color: #fbf6ea;       /* Figma cream */
    border-radius: 12px;
    overflow: hidden;
}

/* ----- Decorative cream waves (top-left + bottom-right corners) -----
   Each span renders cream-wave.png; clipped by the panel's overflow:hidden.
   Until the asset is exported the spans render as no-ops. */
.insurance__wave {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
}
.insurance__wave--top {
    top: 0;
    left: 0;
    width: 71%;                          /* 884 / 1240 — asset width vs panel */
    aspect-ratio: 884 / 197;
    background-image: url("../../images/decorative/insurance-top-swirl.91162277fed0.webp");
}
.insurance__wave--bottom {
    bottom: 0;
    right: 0;
    width: 92%;                          /* 1143 / 1240 */
    aspect-ratio: 1143 / 195;
    background-image: url("../../images/decorative/insurance-btm-swirl.f653494778e1.webp");
}

/* ----- Header (centered) ----- */
.insurance__header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 auto 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.eyebrow--gold {
    color: var(--color-accent-yellow-label);
}

.insurance__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-medium);
    line-height: 50px;
    letter-spacing: -1.26px;
    color: #484336;
    margin: 0;
}
.insurance__heading .accent-script {
    color: var(--color-primary-text);
}

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

/* ----- Logo strip -----
   Full-colour logos visually unified with a CSS filter that approximates
   Figma's muted-tan tint (#B3AB94). Swap for pre-tinted PNGs if you want
   it pixel-exact. */
.insurance__logos {
    position: relative;
    z-index: 1;
    /* span the panel's full width — negate the panel's 32px side padding */
    margin: 24px -32px 40px;
}
.insurance__logos-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ----- Verify CTA bar ----- */
.insurance__verify {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--color-white);
    border: 2px solid var(--color-primary-light);
    border-radius: 12px;
    box-shadow: 0 11px 14px rgba(234, 98, 126, 0.10);
}

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

.insurance__verify-text {
    flex: 1;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-body);
    margin: 0;
}
.insurance__verify-text strong {
    color: var(--color-text-heading);
    font-weight: var(--font-weight-semibold);
}

.insurance__verify-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary-text);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    line-height: 20px;
    flex-shrink: 0;
    white-space: nowrap;
    text-decoration: none;
}
.insurance__verify-chevron {
    transition: transform var(--transition-fast);
}
.insurance__verify-cta:hover .insurance__verify-chevron {
    transform: translateX(2px);
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .insurance__panel {
        padding: 56px 20px 20px;
    }
    .insurance__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .insurance__verify {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 12px;
    }
    .insurance__logos {
        /* match the mobile panel padding (20px) so the image still goes full-width */
        margin: 16px -20px 24px;
    }
}

/* ----- Phones -----
   The logo strip scrolls instead of shrinking to fit, and the verify card
   puts its icon and CTA on one row with the copy underneath. */
@media (max-width: 600px) {
    .insurance__logos {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .insurance__logos::-webkit-scrollbar {
        display: none;
    }

    .insurance__logos-img {
        width: 780px;          /* keeps the marks legible; the strip scrolls */
        max-width: none;
    }

    .insurance__verify {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-areas:
            "icon cta"
            "text text";
        align-items: center;
        gap: 12px;
    }

    .insurance__verify-icon { grid-area: icon; }

    .insurance__verify-cta {
        grid-area: cta;
        justify-self: end;
    }

    .insurance__verify-text { grid-area: text; }

    /* Lead line sits on its own row, as in the design */
    .insurance__verify-text strong {
        display: block;
    }
}

/* ---- sections/diagnostic_evaluation/definitions.css ---- */
/* ============================================
   SECTION: Diagnostic Evaluation Process — Definitions
   Full-width pink band. Sticky intro on the left, a list of
   tool-definition cards on the right. Decorative swirl pinned
   to the bottom-left. Same sticky-intro layout as aba/program.
   ============================================ */

.de-definitions {
    position: relative;
    overflow: clip;                   /* clip swirl without breaking sticky */
    padding: 100px var(--section-side-padding);
    background: var(--color-primary-light);   /* #ffebf0 */
}

/* Decorative swirl, bottom-left */
.de-definitions__swirl {
    position: absolute;
    z-index: 0;
    left: 0;
    bottom: 0;
    width: 700px;
    max-width: 55%;
    aspect-ratio: 1160 / 740;
    background: url("../../images/aba-therapy/pink-swirl.e7a665262b8c.png") no-repeat left bottom / contain;
    pointer-events: none;
}

.de-definitions__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;
}

/* ----- Sticky intro (left) ----- */
.de-definitions__intro {
    flex: 0 1 468px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 100px;
    align-self: flex-start;
}

.de-definitions__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: 468px;
}

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

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

.de-definitions__email {
    color: var(--color-primary-text);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

/* ----- Definition cards (right) ----- */
.de-definitions__cards {
    flex: 0 1 610px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.de-def-card {
    padding: 16px 20px;
    background: var(--color-white);
    border: 2px solid var(--color-surface-line-soft);   /* #f6f6f6 */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.de-def-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.de-def-card__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--font-weight-normal);
    line-height: 28px;
    color: #3e2e2d;
    margin: 0;
}

.de-def-card__chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.de-def-card__desc {
    max-width: 490px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-faint);
    margin: 0;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .de-definitions__inner {
        flex-direction: column;
        gap: 40px;
    }
    .de-definitions__intro,
    .de-definitions__cards {
        flex: initial;
        max-width: none;
        width: 100%;
        position: static;            /* stop sticking once stacked */
    }
}

@media (max-width: 768px) {
    .de-definitions {
        padding: 60px var(--section-side-padding);
    }
    .de-definitions__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .de-definitions__swirl {
        max-width: 80%;
    }
}

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