/* ============================================
   SECTION: Naturalistic ABA Care — Hero
   Copy on the left; the hero photo (swirls baked in)
   is the section background, anchored bottom-right.
   No bottom padding so the photo sits flush to the
   bottom edge. Accent script is teal here.
   Mirrors the ABA Therapy hero.
   ============================================ */

.ndbi-hero {
    position: relative;
    overflow: hidden;
    max-width: 2000px;
    margin: auto;
    min-height: 600px;
    padding: 36px var(--section-side-padding) 0;   /* no bottom padding */
    display: flex;
    align-items: stretch;
    background-color: var(--color-white);
    background-image: url("../../../images/ndbi-therapy/ndbi-therapy__ndbi-therapy-hero.493ecd6ade52.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 100%;
}

.ndbi-hero__inner {
    max-width: var(--container-max);
    width: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--color-surface-line-soft);
}

/* ----- Copy (left) ----- */
.ndbi-hero__content {
    position: relative;
    z-index: 1;
    max-width: 520px;
    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: #4cb7a4;                  /* 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;
}

/* ----- Responsive: photo drops below the copy ----- */
@media (max-width: 900px) {
    .ndbi-hero {
        display: block;
        min-height: 0;
        padding: 24px var(--section-side-padding) 0;
        background-position: center bottom;
        background-size: 92% auto;
        padding-bottom: 86vw;
    }
    .ndbi-hero__inner {
        display: block;
        border-bottom: none;
    }
    .ndbi-hero__content {
        max-width: none;
        padding: 0 0 24px;
    }
}

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

/* ----- Phones -----
   Centred copy over a tighter crop of the hero photo, per the 360px frame.
   The desktop asset is a wider composition (full body, plus a second teal
   shape at the right), so it is scaled up and anchored left to push that
   shape off-screen, then pulled below the section edge so the visible band
   shows the frame and the boy's upper body rather than his legs.
   In the asset the frame+boy occupy 3.6%–74% of the width and the stray
   shape starts at 79.2%; at 131% the viewport edge falls in the gap between
   them. That makes the image 122.6vw tall, so dropping it 30.6vw below the
   section edge leaves the 92vw band the design shows. */
@media (max-width: 600px) {
    .ndbi-hero {
        padding-bottom: 92vw;
        background-size: 131% auto;
        background-position: left bottom -30.6vw;
    }

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