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

/* ---- sections/aba/hero.css ---- */
/* ============================================
   SECTION: ABA Therapy — 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 blue here.
   ============================================ */

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

.aba-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) ----- */
.aba-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 36px 0;
}

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

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

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

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

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

.aba-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) {
    .aba-hero {
        padding: 24px var(--section-side-padding) 56px;
    }

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

    .aba-hero__content {
        padding: 0;
    }

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

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

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

/* ----- Phones -----
   Centred copy only — photo and decorative mark hidden. */
@media (max-width: 600px) {
    .aba-hero {
        padding-bottom: 56px;
    }

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

    .aba-hero__media {
        display: none;
    }
}

/* ---- sections/aba/program.css ---- */
/* ============================================
   SECTION: ABA Therapy — About Program
   Full-width pink band. Sticky intro on the left,
   four stacked info cards on the right. Decorative
   swirl pinned to the bottom-left. Same sticky-intro
   layout family as the home Our Services section.
   ============================================ */

.aba-program {
    position: relative;
    /* `clip` (not `hidden`) clips the swirl WITHOUT creating a scroll
       container — so the sticky intro below still works. */
    overflow: clip;
    padding: 100px var(--section-side-padding);
    background: var(--color-primary-light);   /* #ffebf0 — full screen width */
}

/* Decorative swirl, bottom-left */
.aba-program__swirl {
    position: absolute;
    z-index: 0;
    left: 0;
    bottom: 0;
    width: 700px;
    max-width: 55%;
    aspect-ratio: 1160 / 740;
    background: url("../../images/aba-therapy/pink-swirl.e7a665262b8c.png") no-repeat left bottom / contain;
    pointer-events: none;
}

.aba-program__inner {
    position: relative;
    z-index: 1;                      /* content above the swirl */
    max-width: var(--container-max);
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
}

/* ----- Sticky intro (left) ----- */
.aba-program__intro {
    flex: 0 1 468px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 100px;                      /* clears the sticky navbar */
    align-self: flex-start;
}

.aba-program__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-normal);
    line-height: 50px;
    letter-spacing: -0.03em;   /* Figma: -3% */
    color: var(--color-text-heading);
    margin: 0;
    max-width: 468px;
}

.aba-program__heading .accent-script {
    color: var(--color-primary-text);
    letter-spacing: -0.03em;
}

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

.aba-program-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 32px;
    background: var(--color-white);
    border: 2px solid var(--color-surface-line-soft);
    border-radius: 12px;
}

.aba-program-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.aba-program-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.aba-program-card__desc {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-muted);
    margin: 0;
}

.aba-program-card__link {
    color: var(--color-primary-text);
    text-decoration: underline;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .aba-program__inner {
        flex-direction: column;
        gap: 40px;
    }
    .aba-program__intro,
    .aba-program__cards {
        flex: initial;
        max-width: none;
        width: 100%;
        position: static;            /* stop sticking once stacked */
    }
}

@media (max-width: 768px) {
    .aba-program {
        padding: 60px var(--section-side-padding);
    }
    .aba-program__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .aba-program-card {
        padding: 24px;
    }
    .aba-program__swirl {
        max-width: 80%;
    }
}

/* ---- sections/aba/photo.css ---- */
/* ============================================
   SECTION: ABA Therapy — 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.
   ============================================ */

.aba-photo {
    width: 100%;
    aspect-ratio: 2880 / 1400;        /* full image, proportional at any width */
    background: var(--color-white) url("../../images/aba-therapy/clinic_floor_play_20260820_191835_swirl.032959deac6f.webp") no-repeat center center / cover;
}

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

/* ---- sections/aba/activities.css ---- */
/* ============================================
   SECTION: ABA Therapy — Activities
   Header (heading left, lede right) + a row of 5 small
   activity cards. The cards fit 1240 exactly on desktop
   and scroll horizontally on narrower screens.
   ============================================ */

.aba-activities {
    padding: 80px var(--section-side-padding);
    background: var(--color-white);
    overflow: hidden;
}

.aba-activities__inner {
    max-width: var(--container-max);
    margin-inline: auto;
}

/* ----- Header (heading left, lede right) ----- */
.aba-activities__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 56px;
}

.aba-activities__heading-group {
    flex: 0 1 610px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.aba-activities__heading .accent-script {
    color: var(--color-primary-text);
}

.aba-activities__lede {
    flex: 0 1 400px;
    margin-top: 30px;             /* aligns the lede top near the heading top */
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-body);
}

/* ----- Cards row ----- */
.aba-activities__cards {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 4px;                 /* room for the card outline */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Snap points align to the border edge, which would cancel the padding
       above and clip the first card's outline — keep it in the snap port. */
    scroll-padding-inline: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.aba-activities__cards::-webkit-scrollbar {
    display: none;
}

.aba-activity-card {
    flex: 0 0 232px;
    min-height: 312px;
    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;
}

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

/* Circle background colors (icons are just the glyph) */
.aba-activity-card__icon--yellow { background: #ffda8c; }
.aba-activity-card__icon--pink   { background: #ff98c6; }
.aba-activity-card__icon--blue   { background: #8cdcff; }
.aba-activity-card__icon--coral  { background: #ff6485; }
.aba-activity-card__icon--green  { background: #76f6ab; }

.aba-activity-card__text {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    line-height: 32px;
    color: var(--color-text-heading);
    margin: 0;
}

/* ----- Responsive ----- */
@media (max-width: 900px) {
    .aba-activities__header {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 40px;
    }
    /* Stacked, the desktop flex-basis would set the *height* of each block
       (610px / 400px) instead of its width — sizing them to their content. */
    .aba-activities__heading-group,
    .aba-activities__lede {
        flex: 0 1 auto;
    }
    .aba-activities__lede {
        margin-top: 0;
    }
}

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

/* ---- sections/aba/skills.css ---- */
/* ============================================
   SECTION: ABA Therapy — Skills
   Full-width cream band, centered header + 7 slightly-
   tilted skill cards arranged in a centered wrap
   (4 + 3 on wide screens).
   ============================================ */

.aba-skills {
    overflow: clip;
    padding: 80px var(--section-side-padding);
    background-color: var(--color-accent-yellow-bg-soft);   /* cream #fffbf1 — full width */
    background-image: url("../../images/aba-therapy/skills-swirl.2938e9f01d26.webp");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 1500px auto;     /* decorative swirl in the bottom-right */
}

.aba-skills__inner {
    max-width: 1320px;            /* wide enough for 4 tilted cards per row */
    margin-inline: auto;
}

/* ----- Header (centered) ----- */
.aba-skills__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    max-width: 688px;
    margin: 0 auto 56px;
}

.aba-skills__eyebrow {
    color: var(--color-accent-yellow-label);   /* gold */
    margin-bottom: 18px;
}

.aba-skills__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-normal);
    line-height: 50px;
    color: #484336;
    margin: 0;
}

.aba-skills__lede {
    max-width: 486px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-faint);
    margin: 0;
}

/* ----- Cards (centered wrap, tilted) ----- */
.aba-skills__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Scroll-position bars — phones only */
.aba-skills__bars {
    display: none;
    gap: 7px;
    margin-top: 24px;
}

.aba-skills__bar {
    flex: 1 1 0;
    height: 4px;
    border-radius: 100px;
    background: var(--color-primary-light);
    transition: background-color var(--transition-fast);
}

.aba-skills__bar.is-active {
    background: var(--color-primary);
}

.aba-skill-card {
    flex: 0 0 310px;
    min-height: 284px;
    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;
}

/* Alternating slight tilt for the scattered look */
.aba-skill-card:nth-child(odd)  { transform: rotate(-3deg); }
.aba-skill-card:nth-child(even) { transform: rotate(3deg); }

.aba-skill-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--color-primary-light);   /* #ffebf0 pink circle */
    border-radius: var(--radius-full);
}

.aba-skill-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

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

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .aba-skills {
        padding: 56px var(--section-side-padding);
        background-size: 90% auto;
    }
    .aba-skills__heading {
        font-size: 32px;
        line-height: 38px;
    }
    /* straighten the cards when they stack on small screens */
    .aba-skill-card:nth-child(odd),
    .aba-skill-card:nth-child(even) {
        transform: none;
        flex-basis: 100%;
        max-width: 360px;
        min-height: 0;
    }
}

/* ----- Phones: cards become a horizontal, snapping scroller -----
   Same mechanism as the Our Services scroller on the home page: the track
   bleeds to the section edges so the next card peeks in from the right,
   with position bars underneath. */
@media (max-width: 600px) {
    .aba-skills__cards {
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;         /* equal heights, ragged looks broken */
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        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;
    }

    .aba-skills__cards::-webkit-scrollbar {
        display: none;
    }

    /* Matches the specificity of the straighten-the-cards rule above. */
    .aba-skill-card:nth-child(odd),
    .aba-skill-card:nth-child(even) {
        flex: 0 0 300px;
        max-width: none;
        scroll-snap-align: start;
    }

    .aba-skills__bars {
        display: flex;
    }
}

/* ---- sections/aba/collaborative.css ---- */
/* ============================================
   SECTION: ABA Therapy — Collaborative Approach
   Header (heading + CTA left, lede right) above a wide
   photo in a pink rounded frame. Capped at 1240.
   ============================================ */

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

.aba-collab__inner {
    max-width: var(--container-max);
    margin-inline: auto;
}

/* ----- Header (heading + CTA left, lede right) ----- */
.aba-collab__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 24px;
}

.aba-collab__heading-group {
    flex: 0 1 491px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

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

.aba-collab__heading .accent-script {
    color: #ea627e;              /* rose accent per the design */
}

.aba-collab__lede {
    flex: 0 1 400px;
    margin: 0;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-body);
}

/* ----- Photo frame ----- */
.aba-collab__frame {
    background: var(--color-primary-light);   /* #ffebf0 */
    border-radius: 12px;
    overflow: hidden;
}

.aba-collab__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1240 / 700;
    object-fit: cover;
    object-position: center center;
}

/* ----- Responsive ----- */
@media (max-width: 900px) {
    .aba-collab__header {
        flex-direction: column;
        gap: 16px;
    }
    /* Stacked, the desktop flex-basis would set the *height* of each block
       (491px / 400px) instead of its width — size them to their content. */
    .aba-collab__heading-group,
    .aba-collab__lede {
        flex: 0 1 auto;
    }
}

/* Below the desktop breakpoint the photo runs edge to edge — the side gutter
   and the corner radius both go, matching the other photo bands. The header
   keeps the section's padding, so the frame bleeds out on its own. */
@media (max-width: 1024px) {
    .aba-collab__frame {
        margin-inline: calc(-1 * var(--section-side-padding));
        border-radius: 0;
    }
}

@media (max-width: 768px) {
    .aba-collab {
        padding: 56px var(--section-side-padding);
    }
    .aba-collab__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .aba-collab__photo {
        aspect-ratio: 4 / 3;
    }
}

/* ---- sections/aba/advantages.css ---- */
/* ============================================
   SECTION: ABA Therapy — Advantages
   Header on the left, five horizontal icon rows on the
   right. Capped at the container width.
   ============================================ */

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

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

/* ----- Intro (left) ----- */
.aba-advantages__intro {
    flex: 0 1 450px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

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

.aba-advantages__heading .accent-script {
    color: var(--color-accent-yellow-text);   /* #e09b2b */
}

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

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

.aba-advantage {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 60px 20px 20px;
    background: var(--color-white);
    border: 2px solid var(--color-primary-light);
    border-radius: 12px;
}

.aba-advantage__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 */
.aba-advantage__icon img {
    width: 68px;
    height: 68px;
    max-width: none;
}

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

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .aba-advantages__inner {
        flex-direction: column;
        gap: 40px;
    }
    .aba-advantages__intro,
    .aba-advantages__list {
        flex: initial;
        max-width: none;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .aba-advantages {
        padding: 56px var(--section-side-padding);
    }
    .aba-advantages__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .aba-advantage {
        padding: 16px 20px;
    }
}

/* ---- sections/home/insurance.css ---- */
/* ============================================
   SECTION: Insurance
   Cream rounded panel with two decorative wave
   accents, centered heading + lede, tinted logo
   strip, and a white verify-coverage CTA bar.
   ============================================ */

.insurance {
    padding: 20px var(--section-side-padding);
    background: var(--color-white);
}

/* Variant used on the ABA Therapy page — no bottom padding
   (kept off the base rule so the home Insurance section is unaffected). */
.insurance--flush {
    padding-bottom: 0;
}

.insurance__panel {
    position: relative;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 80px 32px 32px;
    background-color: #fbf6ea;       /* Figma cream */
    border-radius: 12px;
    overflow: hidden;
}

/* ----- Decorative cream waves (top-left + bottom-right corners) -----
   Each span renders cream-wave.png; clipped by the panel's overflow:hidden.
   Until the asset is exported the spans render as no-ops. */
.insurance__wave {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
}
.insurance__wave--top {
    top: 0;
    left: 0;
    width: 71%;                          /* 884 / 1240 — asset width vs panel */
    aspect-ratio: 884 / 197;
    background-image: url("../../images/decorative/insurance-top-swirl.91162277fed0.webp");
}
.insurance__wave--bottom {
    bottom: 0;
    right: 0;
    width: 92%;                          /* 1143 / 1240 */
    aspect-ratio: 1143 / 195;
    background-image: url("../../images/decorative/insurance-btm-swirl.f653494778e1.webp");
}

/* ----- Header (centered) ----- */
.insurance__header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 auto 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.eyebrow--gold {
    color: var(--color-accent-yellow-label);
}

.insurance__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-medium);
    line-height: 50px;
    letter-spacing: -1.26px;
    color: #484336;
    margin: 0;
}
.insurance__heading .accent-script {
    color: var(--color-primary-text);
}

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

/* ----- Logo strip -----
   Full-colour logos visually unified with a CSS filter that approximates
   Figma's muted-tan tint (#B3AB94). Swap for pre-tinted PNGs if you want
   it pixel-exact. */
.insurance__logos {
    position: relative;
    z-index: 1;
    /* span the panel's full width — negate the panel's 32px side padding */
    margin: 24px -32px 40px;
}
.insurance__logos-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ----- Verify CTA bar ----- */
.insurance__verify {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 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);
}

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

.insurance__verify-text {
    flex: 1;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-body);
    margin: 0;
}
.insurance__verify-text strong {
    color: var(--color-text-heading);
    font-weight: var(--font-weight-semibold);
}

.insurance__verify-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary-text);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    line-height: 20px;
    flex-shrink: 0;
    white-space: nowrap;
    text-decoration: none;
}
.insurance__verify-chevron {
    transition: transform var(--transition-fast);
}
.insurance__verify-cta:hover .insurance__verify-chevron {
    transform: translateX(2px);
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .insurance__panel {
        padding: 56px 20px 20px;
    }
    .insurance__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .insurance__verify {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 12px;
    }
    .insurance__logos {
        /* match the mobile panel padding (20px) so the image still goes full-width */
        margin: 16px -20px 24px;
    }
}

/* ----- Phones -----
   The logo strip scrolls instead of shrinking to fit, and the verify card
   puts its icon and CTA on one row with the copy underneath. */
@media (max-width: 600px) {
    .insurance__logos {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .insurance__logos::-webkit-scrollbar {
        display: none;
    }

    .insurance__logos-img {
        width: 780px;          /* keeps the marks legible; the strip scrolls */
        max-width: none;
    }

    .insurance__verify {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-areas:
            "icon cta"
            "text text";
        align-items: center;
        gap: 12px;
    }

    .insurance__verify-icon { grid-area: icon; }

    .insurance__verify-cta {
        grid-area: cta;
        justify-self: end;
    }

    .insurance__verify-text { grid-area: text; }

    /* Lead line sits on its own row, as in the design */
    .insurance__verify-text strong {
        display: block;
    }
}

/* ---- sections/home/get_in_touch.css ---- */
/* ============================================
   SECTION: Get In Touch
   Closing CTA. Left: heading + lede + 3 pink-check
   features + Get In Touch button. Right: child photo.
   A pink decorative swirl bleeds in from the right.
   ============================================ */

.get-in-touch {
    position: relative;
    overflow: hidden;
    background: var(--color-white);
    /* Same side inset as other homepage sections — was missing above
       768px, so stacked tablet layouts ran flush to the viewport edge. */
    padding: 100px var(--section-side-padding);
}

/* The decorative pink swirl is baked into the photo asset
   (kid-showing-muscules2.png) — no separate swirl layer. */

.get-in-touch__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 632px;
    gap: 88px;
    align-items: start;
}

/* ----- Left column: header + features + CTA ----- */
.get-in-touch__content {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-top: 69px;          /* design: heading at top:169 vs section padding 100 → 69 offset */
    max-width: 639px;
}

.get-in-touch__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.get-in-touch__heading {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: var(--font-weight-medium);
    line-height: 58px;
    letter-spacing: -1.68px;
    color: var(--color-text-heading);
    margin: 0;
}

.get-in-touch__heading .accent-script {
    color: var(--color-primary-text);
    font-weight: 400;
    letter-spacing: -0.03em;
}

.get-in-touch__lede {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-body);
    margin: 0;
    max-width: 586px;
}

/* ----- Features list (3 pink checks) ----- */
.get-in-touch__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.get-in-touch__feature {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 20px;
    color: var(--color-text-heading);
}

.get-in-touch__feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.get-in-touch__feature-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

/* ----- CTA button ----- */
.get-in-touch__cta {
    align-self: flex-start;
}

/* ----- Right column: photo ----- */
.get-in-touch__photo {
    width: 100%;
    max-width: 632px;
    height: auto;
    display: block;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .get-in-touch__inner {
        grid-template-columns: 1fr;
        gap: 48px;
        justify-items: center;
        text-align: left;
    }
    .get-in-touch__content {
        padding-top: 0;
        max-width: none;
        width: 100%;
    }
    .get-in-touch__photo {
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .get-in-touch {
        padding: 60px var(--section-side-padding);
    }
    .get-in-touch__heading {
        font-size: 40px;
        line-height: 46px;
        letter-spacing: -1.2px;
    }
}

/* ----- Phones -----
   Heading drops a step so "Ready when you are" stays on one line instead of
   orphaning "are", the CTA fills the column, and the photo runs edge to edge. */
@media (max-width: 600px) {
    .get-in-touch__heading {
        font-size: 32px;
        line-height: 38px;
        letter-spacing: -0.96px;
    }

    .get-in-touch__lede {
        font-size: 14px;
        line-height: 22px;
    }

    .get-in-touch__content {
        gap: 32px;
    }

    .get-in-touch__features {
        gap: 8px;
    }

    .get-in-touch__feature {
        gap: 12px;
        font-size: 15px;
    }

    .get-in-touch__feature-icon {
        width: 34px;
        height: 34px;
    }

    .get-in-touch__cta {
        width: 100%;
    }

    /* Full-bleed photo: negate the section's side padding */
    .get-in-touch__photo {
        width: calc(100% + 2 * var(--section-side-padding));
        max-width: none;
        margin-inline: calc(-1 * var(--section-side-padding));
    }
}