/* ============================================
   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);     /* 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 photo below, cropped so the hero stays compact. The
   media box is shallower than the photo's own ratio, so the image fills the
   width and the bottom is clipped — here showing roughly the top 80%, sitting
   flush to the section edge. */
@media (max-width: 600px) {
    /* Phones only: drop the section's bottom padding so the inner's divider
       lands directly under the photo instead of floating below it. Tablet
       keeps its 56px gap. */
    .de-hero {
        padding-bottom: 0;
    }

    .de-hero__inner {
        gap: 24px;
    }

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

    .de-hero__media {
        justify-self: stretch;
        aspect-ratio: 1378 / 1029;
        overflow: hidden;
    }

    .de-hero__photo {
        max-width: none;
    }
}