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

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