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

/* ---- sections/ndbi/hero.css ---- */
/* ============================================
   SECTION: Naturalistic ABA Care — Hero
   Copy on the left, hero photo on the right (swirls
   baked in). Grid layout so the photo scales inside its
   column on mid widths instead of shrinking over the
   copy (background-image heroes overlap 901–1024px).
   Accent script is teal here.
   ============================================ */

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

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

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

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

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

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

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

/* ----- Photo (right) ----- */
.ndbi-hero__media {
    justify-self: end;
}

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

/* ----- Responsive: photo drops below the copy -----
   Stack by 1100px — with 100px section padding above 1024, a
   side-by-side grid leaves only ~270px for the photo at 1040. */
@media (max-width: 1100px) {
    .ndbi-hero {
        padding: 24px var(--section-side-padding) 56px;
    }

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

    .ndbi-hero__content {
        padding: 0;
    }

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

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

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

/* ----- Phones -----
   Centred copy only — photo hidden (the desktop crop left a clipped
   half-image of the teal frame on narrow screens). */
@media (max-width: 600px) {
    .ndbi-hero {
        padding-bottom: 56px;
    }

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

    .ndbi-hero__media {
        display: none;
    }
}

/* ---- 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/ndbi/principles.css ---- */
/* ============================================
   SECTION: Naturalistic ABA Care — Core Principles of NDBI
   Header (eyebrow + big heading) + horizontally-scrolling
   row of principle cards. Carousel mirrors the values
   section (400px cards, hidden scrollbar, prev/next arrows
   driven by carousel.js).
   ============================================ */

.ndbi-principles {
    padding: 80px var(--section-side-padding);
    background: var(--color-white);
    overflow-x: clip;
}

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

.ndbi-principles__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;
}

.ndbi-principles__heading .accent-script {
    color: var(--color-primary-text);
}

/* ----- Carousel ----- */
.ndbi-principles__carousel {
    position: relative;
}

.ndbi-principles__row {
    width: 100%;
    display: flex;
    justify-content: safe center;
    gap: 20px;
    overflow-x: auto;
    padding: 20px 4px;
    margin: 0;
    list-style: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ndbi-principles__row::-webkit-scrollbar {
    display: none;
}

.ndbi-principles__arrow {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--color-white);
    border: 2px solid var(--color-primary-light);
    box-shadow: var(--shadow-card);
    color: var(--color-primary-text);
    cursor: pointer;
    transition: background-color var(--transition-fast), opacity var(--transition-fast);
}
.ndbi-principles__arrow:hover {
    background: var(--color-primary-light);
}
.ndbi-principles__arrow--prev {
    left: 0;
}
.ndbi-principles__arrow--next {
    left: auto;
    right: 0;
    transform: translate(50%, -50%);
}
.ndbi-principles__arrow[hidden] {
    display: none;
}
.ndbi-principles__arrow:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}

/* ----- Principle card ----- */
.ndbi-principle-card {
    flex: 0 0 400px;
    max-width: min(400px, calc(100vw - 2 * var(--section-side-padding) - 8px));
    min-height: 320px;
    padding: 24px;
    background: var(--color-white);
    border: 2px solid var(--color-primary-light);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    box-sizing: border-box;
}

.ndbi-principle-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    margin-bottom: 54px;
}

.ndbi-principle-card__icon--blue   { background: #8cdcff; }
.ndbi-principle-card__icon--yellow { background: #ffda8c; }
.ndbi-principle-card__icon--pink   { background: #ff98c6; }
.ndbi-principle-card__icon--coral  { background: var(--color-primary); }
.ndbi-principle-card__icon--teal   { background: #9ad9ce; }

.ndbi-principle-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 0 8px;
}

.ndbi-principle-card__desc {
    font-size: 16px;
    font-weight: var(--font-weight-normal);
    line-height: 26px;
    color: var(--color-text-body);
    margin: 0;
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .ndbi-principles__heading {
        font-size: 32px;
        line-height: 38px;
    }
    /* On touch devices, hide the arrows and let users swipe the row */
    .ndbi-principles__arrow {
        display: none;
    }
}

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

.ndbi-photo {
    width: 100%;
    aspect-ratio: 2880 / 1400;
    background: var(--color-white) url("../../images/ndbi-therapy/siblings_bed_banner_20260820_183203_swirl.01124db4f7cb.webp") no-repeat center center / cover;
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .ndbi-photo {
        aspect-ratio: 4 / 3;
    }
}

/* ---- sections/ndbi/comparison.css ---- */
/* ============================================
   SECTION: Naturalistic ABA Care — Comparison
   Header + paragraph, then a cream panel holding a
   NDBI-vs-Traditional comparison table + a closing note.
   ============================================ */

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

/* ----- Header ----- */
.ndbi-comparison__header {
    max-width: var(--container-max);
    margin: 0 auto 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ndbi-comparison__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;
}

.ndbi-comparison__heading .accent-script {
    color: var(--color-primary-text);
}

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

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

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

/* ----- Column switch (phones only; see the mobile block below) ----- */
.ndbi-comparison__switch {
    display: none;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 36px;
}

.ndbi-comparison__switch-label {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 24px;
    color: var(--color-text-heading);
}
.ndbi-comparison__switch-label--ndbi {
    color: var(--color-primary-text);
}

.ndbi-comparison__toggle {
    flex-shrink: 0;
    position: relative;
    width: 52px;
    height: 32px;
    padding: 0;
    background: var(--color-white);
    border: 2px solid var(--color-primary-light);
    border-radius: 100px;
    cursor: pointer;
}

.ndbi-comparison__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-full);
    background: var(--color-primary);
    box-shadow: 0 7px 14px rgba(255, 100, 133, 0.3);
    transition: left var(--transition-fast), background-color var(--transition-fast);
}

/* Traditional selected: the knob slides right and goes grey */
.is-traditional .ndbi-comparison__knob {
    left: 22px;
    background: #a6a8a8;
    box-shadow: 0 7px 14px rgba(166, 168, 168, 0.3);
}

/* ----- Table ----- */
.ndbi-comparison__scroll {
    position: relative;
    z-index: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.ndbi-comparison__scroll::-webkit-scrollbar { display: none; }

.ndbi-comparison__table {
    width: 100%;
    min-width: 860px;                /* keeps columns readable; scrolls on small screens */
    border-collapse: separate;
    border-spacing: 20px 8px;
    table-layout: fixed;
}

.ndbi-comparison__corner {
    width: 210px;
}

.ndbi-comparison__colhead {
    text-align: left;
    vertical-align: bottom;
    padding: 0 24px 12px;
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    line-height: 32px;
    color: var(--color-text-heading);
}
.ndbi-comparison__colhead--ndbi {
    color: var(--color-accent-yellow-text);   /* #e09b2b */
}

.ndbi-comparison__rowhead {
    width: 210px;
    text-align: left;
    vertical-align: middle;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 26px;
    color: var(--color-text-heading);
    padding-right: 12px;
}

.ndbi-comparison__cell {
    vertical-align: middle;
    height: 92px;
    padding: 20px 24px;
    background: var(--color-white);
    border: 2px solid var(--color-surface-line-soft);   /* grey (Traditional) */
    border-radius: 12px;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 26px;
    color: var(--color-text-heading);
}
.ndbi-comparison__cell--ndbi {
    border-color: var(--color-accent-yellow-text);           /* gold (NDBI) */
}

/* ----- Closing note bar ----- */
.ndbi-comparison__note {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 20px;
    padding: 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);
}

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

.ndbi-comparison__note-text {
    margin: 0;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-body);
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .ndbi-comparison {
        padding: 56px var(--section-side-padding);
    }
    .ndbi-comparison__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .ndbi-comparison__panel {
        padding: 24px 20px;
    }
    .ndbi-comparison__table {
        border-spacing: 12px 8px;
    }
}

/* ----- Tablets & phones: one column at a time, chosen by the switch -----
   The table's min-width (860px) will not fit below ~900px of content width,
   so unwind into a stack of "label above card" rows and drop the inactive
   column. Avoids trapped horizontal scroll on 768/820 tablets. */
@media (max-width: 900px) {
    .ndbi-comparison__panel {
        margin-inline: calc(-1 * var(--section-side-padding));
        padding: 36px var(--section-side-padding) 40px;
        border-radius: 0;
    }

    .ndbi-comparison__switch {
        display: flex;
    }

    .ndbi-comparison__scroll {
        overflow-x: visible;
    }

    .ndbi-comparison__table {
        display: block;
        min-width: 0;
        border-spacing: 0;
    }

    .ndbi-comparison__table thead {
        display: none;          /* the switch labels replace the column heads */
    }

    .ndbi-comparison__table tbody,
    .ndbi-comparison__table tr {
        display: block;
    }

    .ndbi-comparison__table tr + tr {
        margin-top: 20px;
    }

    .ndbi-comparison__rowhead {
        display: block;
        width: auto;
        padding: 0 0 8px;
        font-size: 14px;
        line-height: 22px;
    }

    .ndbi-comparison__cell {
        height: auto;
        padding: 16px;
        font-size: 14px;
        line-height: 22px;
    }

    /* Hide every cell, then bring back the active column. Order matters:
       an NDBI cell carries both classes at equal specificity, so the
       --ndbi rule has to come second to win. */
    .ndbi-comparison__cell {
        display: none;
    }
    .ndbi-comparison__cell--ndbi {
        display: block;
        border-color: var(--color-primary-text);   /* pink here, gold on desktop */
    }

    /* Switch flipped: show Traditional, drop NDBI. */
    .is-traditional .ndbi-comparison__cell {
        display: block;
    }
    .is-traditional .ndbi-comparison__cell--ndbi {
        display: none;
    }

    /* Note bar stacks: icon above the text. */
    .ndbi-comparison__note {
        flex-direction: column;
        gap: 20px;
        margin-top: 24px;
        padding: 16px;
    }

    .ndbi-comparison__note-text {
        line-height: 24px;
    }
}

/* ---- sections/ndbi/research.css ---- */
/* ============================================
   SECTION: Naturalistic ABA Care — The Research
   Design v2: white two-column intro + cream
   "Studies have shown" panel with tilted cards.
   ============================================ */

.ndbi-research {
    padding: 100px var(--section-side-padding);
    background: var(--color-white);
    overflow-x: clip;
}

.ndbi-research__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
    align-items: start;
}

/* ----- Left column ----- */
.ndbi-research__header {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ndbi-research__heading {
    max-width: 520px;
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-normal);
    line-height: 50px;
    color: var(--color-text-heading);
    margin: 0;
}

.ndbi-research__heading .accent-script {
    white-space: nowrap;
}

@media (max-width: 430px) {
    .ndbi-research__heading .accent-script {
        white-space: normal;
    }
}

.ndbi-research__para {
    max-width: 560px;
    margin: 40px 0 0;
    font-family: var(--font-body);
    font-weight: var(--font-weight-normal);
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: var(--color-text-heading);
}

/* ----- Right column ----- */
.ndbi-research__lede {
    margin: 0;
    max-width: 480px;
    font-family: var(--font-body);
    font-weight: var(--font-weight-normal);
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0;
    color: var(--color-text-faint);
}

/* Align right body with the heading (below eyebrow) */
.ndbi-research__right {
    padding-top: 48px; /* approx eyebrow + gap */
}

/* ----- Studies cream panel ----- */
.ndbi-research__studies {
    position: relative;
    max-width: var(--container-max);
    margin: 64px auto 0;
    padding: 72px 48px 80px;
    background-color: #fbf6ea;
    border-radius: 12px;
    overflow: hidden;
}

.ndbi-research__wave {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
}

.ndbi-research__wave--top {
    top: 0;
    left: 0;
    width: 71%;
    aspect-ratio: 884 / 197;
    background-image: url("../../images/decorative/insurance-top-swirl.8f1345b8cdd1.png");
}

.ndbi-research__wave--bottom {
    bottom: 0;
    right: 0;
    width: 92%;
    aspect-ratio: 1143 / 195;
    background-image: url("../../images/decorative/insurance-btm-swirl.1a2883f33abe.png");
}

.ndbi-research__studies-header {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

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

.ndbi-research__studies-heading .accent-script {
    color: var(--color-primary-text);
}

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

.ndbi-research__cards {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 16px 0 40px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1px;
}

.ndbi-research__card {
    box-sizing: border-box;
    width: 320px;
    height: 240px;
    max-width: 100%;
    padding: 24px;
    background: var(--color-white);
    border: 2px solid var(--color-surface-line-soft);
    border-radius: 12px;
    box-shadow: 0 15px 32px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
}

.ndbi-research__card--a {
    transform: rotate(-3deg);
}

.ndbi-research__card--b {
    transform: rotate(3deg) translateY(28px);
}

.ndbi-research__card--c {
    transform: rotate(-3deg);
}

.ndbi-research__card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--color-primary-light);
    flex-shrink: 0;
}

.ndbi-research__card-badge img {
    width: 24px;
    height: 24px;
    display: block;
}

.ndbi-research__card-text {
    margin: 0;
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    line-height: 32px;
    color: var(--color-text-heading);
}

/* ----- Responsive ----- */
@media (max-width: 960px) {
    .ndbi-research__inner {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }
    .ndbi-research__right {
        padding-top: 0;
    }
    .ndbi-research__studies {
        padding: 56px 24px 64px;
    }
    .ndbi-research__cards {
        flex-wrap: wrap;
        padding: 0;
        gap: 16px;
    }
    .ndbi-research__card--a,
    .ndbi-research__card--b,
    .ndbi-research__card--c {
        transform: none;
    }
}

@media (max-width: 768px) {
    .ndbi-research {
        padding: 56px var(--section-side-padding);
    }
    .ndbi-research__heading {
        font-size: 32px;
        line-height: 38px;
        max-width: none;
    }
    .ndbi-research__studies {
        margin-top: 40px;
        padding: 48px 16px 56px;
    }
    .ndbi-research__studies-heading {
        font-size: 32px;
        line-height: 40px;
    }
    .ndbi-research__card {
        width: 100%;
        height: auto;
        min-height: 0;
        gap: 16px;
    }
}

/* ---- sections/ndbi/practice.css ---- */
/* ============================================
   SECTION: Naturalistic ABA Care — Practice
   Header on the left, stacked example-moment rows on the
   right. One row is featured (lifted + slightly tilted).
   Mirrors the ABA Therapy "Advantages" layout.
   ============================================ */

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

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

/* ----- Intro (left) ----- */
.ndbi-practice__intro {
    flex: 0 1 424px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ndbi-practice__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;
}

.ndbi-practice__heading .accent-script {
    color: var(--color-primary-text);   /* pink #ea627e-ish */
}

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

/* ----- Rows (right) ----- */
.ndbi-practice__list {
    flex: 0 1 610px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

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

/* Featured row: lifted + slightly tilted */
.ndbi-practice__item--featured {
    transform: rotate(-2deg);
    box-shadow: 0 11px 24px rgba(234, 98, 126, 0.23);
}

.ndbi-practice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background: #fdf7ea;          /* cream tile */
    border-radius: 12px;
}

/* Sketchy icons intentionally overflow the cream tile */
.ndbi-practice__icon img {
    width: 68px;
    height: 68px;
    max-width: none;
}

.ndbi-practice__text {
    flex: 1 1 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--font-weight-normal);
    line-height: 28px;
    color: var(--color-text-strong);
    margin: 0;
}

.ndbi-practice__spark {
    flex-shrink: 0;
    display: inline-flex;
    width: 20px;
    height: 20px;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .ndbi-practice__inner {
        flex-direction: column;
        gap: 40px;
    }
    .ndbi-practice__intro,
    .ndbi-practice__list {
        flex: initial;
        max-width: none;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .ndbi-practice {
        padding: 56px var(--section-side-padding);
    }
    .ndbi-practice__heading {
        font-size: 32px;
        line-height: 38px;
    }
}

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

.ndbi-photo-play {
    position: relative;
    overflow: clip;
    width: 100%;
    aspect-ratio: 1798 / 875;        /* full image, proportional at any width */
    background: var(--color-white) url("../../images/hero/boy-playing-smile.8e49304bc779.webp") no-repeat center center / cover;
}

/* Decorative white swirl bleeding across the top */
.ndbi-photo-play__swirl {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    top: 0;
    right: 0;
    width: 100%;
    aspect-ratio: 1391 / 557;        /* preserve the swirl asset's intrinsic aspect */
    background: url("../../images/decorative/vector-279.fdf96332d35c.webp") no-repeat center / contain;
}

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

/* ---- sections/ndbi/why.css ---- */
/* ============================================
   SECTION: Naturalistic ABA Care — Why NDBI
   Cream band. Heading + intro on the left, a white
   testimonial card on the right. A decorative swirl
   bleeds across the top-right corner.
   ============================================ */

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

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

.ndbi-why__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) ----- */
.ndbi-why__intro {
    flex: 0 1 505px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ndbi-why__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;
}

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

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

/* ----- Testimonial card (right) ----- */
.ndbi-why__card {
    flex: 0 1 610px;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    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(3deg);
}

.ndbi-why__quote-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ndbi-why__quote-mark {
    display: inline-flex;
    width: 32px;
    height: 32px;
}

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

.ndbi-why__person {
    display: flex;
    align-items: center;
    gap: 16px;
}

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

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

.ndbi-why__person-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

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

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .ndbi-why {
        padding: 80px var(--section-side-padding);
    }
    .ndbi-why__inner {
        flex-direction: column;
        gap: 40px;
    }
    .ndbi-why__intro,
    .ndbi-why__card {
        flex: initial;
        max-width: none;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .ndbi-why {
        padding: 56px var(--section-side-padding);
    }
    .ndbi-why__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .ndbi-why__card {
        min-height: 0;
        padding: 28px;
        gap: 32px;
        transform: none;
    }
}

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