/* ============================================
   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/approach__approach-hero.eab0085119dc.png");
}

.page-parent-coaching .approach-cta {
    background-image: url("../../../images/approach/aba-therapy__aba-therapy-hero.b7c9952da8de.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);
}

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

@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;
    }
}