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

/* ---- sections/home/hero.css ---- */
/* ============================================
   SECTION: Hero
   Pink rounded card: text column on the left, and a
   large child photograph that bleeds off the right
   AND bottom edges (clipped by the card).
   Layout mirrors the Figma Dev Mode export.
   ============================================ */

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

.hero__card {
    position: relative;
    max-width: var(--container-max);
    min-height: 600px;
    margin: 0 auto;
    padding: 56px 80px;
    background-color: var(--color-primary-light);
    border-radius: 12px;
    overflow: hidden;
}

/* ----- Text column (left) ----- */
.hero__content {
    position: relative;
    z-index: 3;
    width: 567px;
    max-width: 100%;
    margin-top: 96px;
    display: flex;
    flex-direction: column;
    gap: 48px;                 /* design gap between text group and buttons */
}

.hero__text {
    display: flex;
    flex-direction: column;
    gap: 16px;                 /* design gap between heading and lede */
}

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

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

.hero__lede {
    font-size: 17px;
    font-weight: var(--font-weight-medium);
    line-height: 28px;
    color: var(--color-text-heading);
    max-width: 440px;
    margin: 0;
}

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

/* ----- Media layer: fills the card, holds photo + swirls ----- */
.hero__media {
    position: absolute;
    inset: 0;
    pointer-events: none;      /* never block clicks on the text/buttons */
}

/* Large cutout photo: anchored top-right with right padding so the
   subject's hand is not clipped by the card edge. */
.hero__image {
    position: absolute;
    z-index: 1;
    right: 0px;
    top: 50px;
    width: 62%;
    height: auto;
    aspect-ratio: 3 / 2;
    max-width: none;
    object-fit: contain;
    object-position: right bottom;
    border-radius: 0;
}

/* ----- Decorative swirls (anchored to the card) ----- */
.hero__swirl {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

/* White swirl (vector-271): BEHIND the photo, large loop sweeping top-center to right */
.hero__swirl--white {
    z-index: 0;
    width: 82%;
    aspect-ratio: 1106 / 383;
    top: 0;
    right: 2%;
    background-image: url("../../images/decorative/vector-271.c28ecf86ba27.webp");
}

/* ----- Tablet and below: the photo is dropped and the column is centred -----
   Below the desktop breakpoint the photograph has nowhere to sit without
   leaving a large empty band, so the hero becomes the centred, text-only
   composition the phone design uses. The swirls stay on as background
   flourishes and keep their percentage geometry, so they scale with the card. */
@media (max-width: 1024px) {
    .hero__card {
        padding: 64px 32px 72px;
        min-height: 0;
    }

    .hero__content {
        width: 100%;
        max-width: 700px;      /* keeps "and joy" on the heading's second line */
        margin: 0 auto;
        align-items: center;
        text-align: center;
        gap: 32px;
    }

    .hero__text {
        align-items: center;
        gap: 16px;
    }

    .hero__heading {
        font-size: 42px;
        line-height: 48px;
        letter-spacing: -1.2px;
    }

    .hero__lede {
        max-width: none;
    }

    .hero__actions {
        justify-content: center;
    }

    /* Media layer now carries only the swirls */
    .hero__media {
        position: absolute;
        inset: 0;
        margin-top: 0;
    }

    .hero__image {
        display: none;
    }

    /* Desktop's swirl sizes are tuned to sit around the photograph; without
       it they crowd the centred text, so both are pulled back to the corners
       and mostly cropped, the way the phone design uses them. */
    .hero__swirl--white {
        width: 46%;
        top: -12%;
        right: -6%;
        left: auto;
        bottom: auto;
    }
}

/* ----- Small tablets: same composition, tighter type ----- */
@media (max-width: 768px) {
    .hero {
        padding: 12px var(--section-side-padding) 40px;
    }
    .hero__card {
        padding: 56px 24px 64px;
    }
    .hero__heading {
        font-size: 34px;
        line-height: 40px;
        letter-spacing: -0.8px;
    }
    .hero__lede {
        font-size: 16px;
        line-height: 26px;
    }
}

/* ----- Phones: the Figma mobile composition -----
   Not a narrower desktop hero: the photograph is dropped, the
   decorative swirls come back, and the text column is centred
   inside a 16px-padded card. Geometry from the 360px frame
   (card 328x597): heading 240 wide, lede and buttons 296.
   Capped at 600px because the design's narrow column looks
   marooned in the wide card at tablet widths. */
@media (max-width: 600px) {
    .hero__card {
        padding: 64px 16px 56px;
    }

    .hero__content {
        width: 100%;
        margin-top: 0;
        align-items: center;
        text-align: center;
        gap: 24px;                 /* text group -> buttons */
    }

    .hero__text {
        align-items: center;
        gap: 4px;                  /* heading -> lede */
    }

    .hero__heading {
        max-width: 240px;
        font-size: 36px;
        line-height: 36px;
        letter-spacing: -1.8px;
    }

    /* Lede and buttons run to the card's 16px padding (296 at 360w);
       only the heading keeps a hard cap, which is what gives it the
       designed ragged line breaks. */
    .hero__lede {
        max-width: none;
        font-size: 16px;
        line-height: 24px;
    }

    .hero__actions {
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
        gap: 13px;
    }

    .hero__actions .btn {
        width: 100%;
    }

    /* Media layer carries only the swirls now */
    .hero__media {
        position: absolute;
        inset: 0;
        margin-top: 0;
    }

    .hero__image {
        display: none;
    }

    .hero__swirl {
        display: block;
        aspect-ratio: auto;
    }

    /* Placed at the PNG's own size and tuned by eye, NOT with the design's
       geometry (which is 690x339 rotated -150deg). Figma renders this brush
       path at a 2.04 aspect while vector-271.png is a 2.89 raster of it, so
       reproducing the design's transform stretches the stroke and lands the
       loop in the wrong place. Replace this with the design's numbers only
       if the mobile artwork is re-exported at its own proportions. */
    .hero__swirl--white {
        width: 1106px;
        height: 383px;
        top: -200px;
        left: -391px;
        right: auto;
        background-size: 100% 100%;
    }
}

/* ---- sections/home/services_overview.css ---- */
/* ============================================
   SECTION: Services Overview
   Intro (left) + two stacked service cards (right),
   matched to the Figma export: 468px intro / 610px
   cards, content-driven heights, decorative swirls.
   ============================================ */

.services-overview {
    /* cap content at 1240 (gutter sits OUTSIDE the cap), aligning with hero/navbar */
    max-width: calc(var(--container-max) + 2 * var(--section-side-padding));
    margin-inline: auto;
    padding: 100px var(--section-side-padding);
    background: var(--color-white);
    display: flex;
    justify-content: space-between;   /* ~162px gap between intro and cards at full width */
    align-items: flex-start;
}

.services-overview__intro {
    flex: 0 1 468px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Stick the intro in view while the taller cards column scrolls past,
       filling the otherwise-empty left gap. align-self:flex-start keeps the
       intro at its content height (not stretched) so sticky has room to move. */
    position: sticky;
    top: 100px;                /* clears the 76px sticky navbar + breathing room */
    align-self: flex-start;
}

.services-overview__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-medium);
    line-height: 50px;
    letter-spacing: -1.26px;
    color: var(--color-text-heading);
    margin: 0;
    max-width: 440px;
}

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

.services-overview__cards {
    flex: 0 1 610px;
    display: flex;
    flex-direction: column;
}

/* The track holds the cards; it only becomes a horizontal scroller on
   phones (see the mobile block at the end of this file). */
.services-overview__track {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Scroll-position bars — phones only */
.services-overview__bars {
    display: none;
    gap: 7px;
}

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

.services-overview__bar.is-active {
    background: var(--color-primary);
}

/* ----- Service card ----- */
.service-card {
    position: relative;
    padding: 32px;
    border-radius: 12px;
    overflow: hidden;            /* clips the decorative swirl */
    display: flex;
    flex-direction: column;
}

.service-card--pink { background-color: var(--color-primary-light); }
.service-card--yellow { background-color: var(--color-accent-yellow-bg); }

/* Decorative swirl (reuses the hero pink swirl at low opacity; tan card is tinted). */
.service-card__swirl {
    position: absolute;
    z-index: 0;
    width: 760px;
    aspect-ratio: 828 / 285;
    background: url("../../images/decorative/vector-270.8eb995b1d292.webp") no-repeat center / contain;
    opacity: 0.2;
    pointer-events: none;
}
.service-card--pink .service-card__swirl {
    top: -39px;
    left: -37px;
    opacity: 1;
}
.service-card--yellow .service-card__swirl {
    /* dedicated tan asset (610x145), sits across the top of the card */
    width: 100%;
    aspect-ratio: 610 / 145;
    top: 0;
    left: 0;
    /* full opacity — tan-on-cream is low-contrast, so no fade */
    opacity: 1;
    background-image: url("../../images/decorative/vector-270-tan.123d6c80d10c.webp");
}

.service-card__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--color-white);
    border-radius: 12px;
    color: #4f2a33;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.02);
    flex-shrink: 0;
}

.service-card__content {
    position: relative;
    z-index: 1;
    margin-top: 64px;            /* 32 pad + 52 icon + 64 = content at ~148 (Figma) */
    max-width: 514px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.service-card__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.service-card__title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    line-height: 32px;
    letter-spacing: -0.48px;
    color: var(--color-text-heading);
    margin: 0;
}

.service-card__desc {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

/* ----- Feature list (Diagnostic card) ----- */
.service-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.service-card__list-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 8px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-muted);
}

.service-card__list-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: #b7a5a1;
}

.service-card__cta {
    align-self: flex-start;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .services-overview {
        flex-direction: column;
        gap: 48px;
    }
    .services-overview__intro,
    .services-overview__cards {
        flex: initial;
        max-width: none;
        width: 100%;
    }
    .services-overview__intro {
        position: static;      /* no sticking once the layout stacks to one column */
    }
    .services-overview__heading {
        font-size: 36px;
        line-height: 42px;
    }
}

@media (max-width: 768px) {
    .services-overview {
        padding: 60px var(--section-side-padding);
    }
    .service-card {
        padding: 24px;
    }
    .service-card__content {
        margin-top: 40px;
    }
}

/* ----- Phones: cards become a horizontal, snapping scroller -----
   Geometry from the 360px frame: 56/64 vertical padding, 48px between the
   intro and the cards, 308px cards with the next one peeking, and two
   position bars underneath. */
@media (max-width: 600px) {
    .services-overview {
        padding: 56px var(--section-side-padding) 64px;
        gap: 48px;
    }

    .services-overview__intro {
        gap: 16px;
    }

    .services-overview__heading {
        font-size: 32px;
        line-height: 34px;
        letter-spacing: -0.96px;
    }

    .services-overview__lede {
        font-size: 16px;
        line-height: 24px;
    }

    .services-overview__cards {
        gap: 32px;
    }

    /* Bleed to the section edges so a card can peek in from the right,
       while the first card still lines up with the intro text. */
    .services-overview__track {
        flex-direction: row;
        gap: 32px;
        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;
    }

    .services-overview__track::-webkit-scrollbar {
        display: none;
    }

    .services-overview__bars {
        display: flex;
    }

    .service-card {
        flex: 0 0 308px;
        min-height: 466px;
        scroll-snap-align: start;
    }

    /* Icon sits at 24/24, content starts at 120 from the card top. */
    .service-card__content {
        margin-top: 44px;
        flex: 1;
        justify-content: space-between;
    }

    .service-card__title {
        font-family: var(--font-body);
        font-size: 20px;
        line-height: 28px;
        letter-spacing: normal;
    }

    /* The design runs a single short paragraph per card. */
    .service-card__tagline,
    .service-card__list {
        display: none;
    }

    .service-card__cta {
        align-self: stretch;
    }

    /* Both swirls drop to 20% and sweep across the card: the pink one enters
       from the top-left, the tan one is the same stroke turned 180deg. */
    .service-card__swirl {
        width: 1051px;
        aspect-ratio: 1051 / 298;
        opacity: 0.2;
    }

    .service-card--pink .service-card__swirl {
        top: -56px;
        left: -266px;
        opacity: 0.2;
    }

    .service-card--yellow .service-card__swirl {
        width: 1051px;
        aspect-ratio: 1051 / 298;
        top: 192px;
        left: 491px;
        transform: rotate(180deg);
        transform-origin: top left;
    }
}

/* ---- sections/home/hero_image.css ---- */
/* ============================================
   SECTION: Hero Image
   Wide rounded photo capped at 1240 with a
   decorative white swirl bleeding across the
   top-right. Sizes scale by % so it stays clean
   on any viewport.
   ============================================ */

.hero-image {
    /* room at top for the swirl bleed; side gutter matches other sections */
    /* padding: 80px var(--section-side-padding); */
    background: var(--color-white);
}

.hero-image__frame {
    position: relative;
    margin-inline: auto;
}

.hero-image__photo {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    display: block;
}


/* Smiling variant stacked over the base; cross-fades in on scroll */
.hero-image__photo--smile {
    position: absolute;
    inset: 0;
    z-index: 1;                   /* above the base photo, below the swirl (z-index 2) */
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.12s ease;   /* very fast fade */
}

/* Smile fades in on first hover and stays (class added by JS, never removed) */
.hero-image__frame.is-smiling .hero-image__photo--smile {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hero-image__photo--smile {
        transition: none;         /* no fade animation for reduced-motion users */
    }
}

.hero-image__swirl {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    width: 100%;                   /* swirl spans the full frame width */
    aspect-ratio: 1391 / 557;      /* preserve the swirl asset's intrinsic aspect */
    top: 0%;
    right: 0%;
    background: url("../../images/decorative/vector-279.fdf96332d35c.webp") no-repeat center / contain;
}

/* ----- Responsive -----
   Below the desktop breakpoint the photo runs edge to edge: the side
   gutter and the corner radius both go, so it reads as a full-bleed band
   rather than a contained card. */
@media (max-width: 1024px) {
    .hero-image {
        padding: 60px 0;
    }
    .hero-image__photo {
        border-radius: 0;
    }
}

@media (max-width: 768px) {
    .hero-image {
        padding: 40px 0;
    }
    /* Keep the photo's intrinsic ~2:1 ratio — a forced 4/3 box was
       stretching the subject (squished face / oval blocks) on mobile. */
}

/* ---- sections/home/family_journey.css ---- */
/* ============================================
   SECTION: Family Journey
   4 numbered onboarding steps with arrows between
   each badge. Matched to Figma: heading-only header
   (no lede), step gap 32, title weight 400, arrow
   stroke #4F2A33 @ 1.5px, green check centred on
   badge top-right corner.
   ============================================ */

.family-journey {
    /* cap content at 1240 (gutter sits OUTSIDE the cap), aligning with hero/navbar */
    max-width: calc(var(--container-max) + 2 * var(--section-side-padding));
    margin-inline: auto;
    padding: 100px var(--section-side-padding);
    background: var(--color-white);
}

/* Journey page only (#journey-steps) — tighter top padding, without
   affecting the home page's Family Journey which shares these styles. */
#journey-steps {
    padding-top: 20px;
}

.family-journey__header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 424px;
    margin-bottom: 95px;
}

.family-journey__heading-group {
    flex: 0 1 550px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.family-journey__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-medium);
    line-height: 50px;
    letter-spacing: -1.26px;
    color: var(--color-text-heading);
    margin: 0;
}

/* Optional supporting line under the heading (used on the Journey page) */
.family-journey__lede {
    max-width: 400px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-body);
    margin: 0;
}

/* Home: title left, lede right (same pattern Centers used) */
.family-journey__header--aside {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    max-width: none;
}

/* Same rules the home Centers lede used before this copy moved here */
.family-journey__header--aside .family-journey__lede {
    flex: 0 1 400px;
    margin-top: 46px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-body);
    max-width: none;
}

.family-journey__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2xl);
    list-style: none;
    padding: 0;
    margin: 0 0 60px;
}

.journey-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;                       /* badge → text gap, per Figma */
    max-width: 295px;
    margin: 0 auto;
}

.journey-step__badge {
    width: 52px;
    height: 52px;
    padding-top: 18px;               /* optical centering — Borel digits look off without this */
    background-color: var(--color-primary-light);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-accent);
    font-size: 32px;
    color: var(--color-primary-text);
    letter-spacing: -0.96px;
}

.journey-step__connector {
    position: absolute;
    top: 0px;
    left: calc(50% + 30px);
    width: 100%;
    height: 24px;                    /* matches the steps-arrow.png asset height */
    pointer-events: none;
    background: url("../../images/decorative/steps-arrow.fdc68d27b464.png") no-repeat center center / contain;
}

.journey-step--last .journey-step__badge {
    position: relative;
}

.journey-step--last .journey-step__badge::after {
    content: '';
    position: absolute;
    top: -13px;
    right: -13px;
    width: 25px;
    height: 25px;
    background: #50d982;             /* Figma green */
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
}

.journey-step__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--font-weight-normal);   /* 400, per Figma */
    line-height: 28px;
    letter-spacing: -0.36px;
    color: #2c2626;
    margin: 0;
}

.journey-step__description {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-body);
    margin: 0;
}

.family-journey__cta {
    display: flex;
    justify-content: center;
}

/* ----- Scroll-position bars (phones only) ----- */
.family-journey__bars {
    display: none;
    gap: 7px;
    margin-bottom: 60px;
}

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

.family-journey__bar.is-active {
    background: var(--color-primary);
}

.family-journey__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-body);
}

@media (max-width: 1024px) {
    .family-journey__steps {
        grid-template-columns: repeat(2, 1fr);
    }
    .journey-step__connector {
        display: none;
    }
    .family-journey__header--aside {
        flex-direction: column;
        gap: 24px;
    }
    .family-journey__heading-group,
    .family-journey__header--aside .family-journey__lede {
        flex: 0 1 auto;
    }
    .family-journey__header--aside .family-journey__lede {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .family-journey {
        padding: 60px var(--section-side-padding);
    }
    .family-journey__header {
        margin-bottom: 48px;
        max-width: none;
    }
    .family-journey__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .family-journey__steps {
        grid-template-columns: 1fr;
    }
}

/* ----- Phones: the steps become a snapping horizontal scroller -----
   Scoped to the --scroll modifier so the Journey page, which reuses these
   classes, keeps its stacked layout. */
@media (max-width: 600px) {
    .family-journey__steps--scroll {
        display: flex;
        gap: 32px;
        padding-top: 13px;
        margin-bottom: 32px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* bleed to the section edges so the next step peeks in; scroll-padding
           insets the snapport to match, otherwise the snap point cancels the
           padding and the first step sits flush against the viewport edge */
        margin-inline: calc(-1 * var(--section-side-padding));
        padding-inline: var(--section-side-padding);
        scroll-padding-inline: var(--section-side-padding);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .family-journey__steps--scroll::-webkit-scrollbar {
        display: none;
    }

    /* Steps read left-aligned on phones, not centred as on desktop. The
       uniform 32px step gap is split here so the description sits tight
       under its title while the badge keeps its breathing room. */
    .family-journey__steps--scroll .journey-step {
        flex: 0 0 284px;
        max-width: none;
        margin: 0;
        gap: 12px;
        align-items: flex-start;
        text-align: left;
        scroll-snap-align: start;
    }

    .family-journey__steps--scroll .journey-step__title {
        margin-top: 28px;
    }

    .family-journey__bars {
        display: flex;
    }

    /* CTA runs the full width of the card column */
    .family-journey__cta .btn {
        width: 100%;
    }
}
/* ---- 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/centers_v2.css ---- */
/* ============================================
   SECTION: Centers v2 (tabbed)
   Header + city tabs on the right; a 400px-tall panel per
   center with copy on the left and a tilted photo/video card
   overhanging on the right, over a clipped light-pink swirl.
   ============================================ */

.centers-v2 {
    padding: 100px var(--section-side-padding) 120px;
    background: var(--color-white);
    overflow: hidden;
}

.centers-v2__inner {
    max-width: var(--container-max);
    margin-inline: auto;
}

/* ----- Header: heading left, tabs right ----- */
.centers-v2__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 44px;
}

.centers-v2__heading-group {
    max-width: 550px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.centers-v2__heading-group .eyebrow {
    margin: 0;
}

.centers-v2__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-normal);
    line-height: 50px;
    letter-spacing: -1px;
    color: var(--color-text-heading);
    margin: 0;
}
.centers-v2__heading .accent-script {
    letter-spacing: -0.03em;
}

/* ----- Tabs ----- */
.centers-v2__tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.centers-v2__tab {
    padding: 8px;
    border: none;
    border-radius: 6px;
    background: var(--color-white);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--font-weight-normal);
    line-height: 28px;
    color: #3e2e2d;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}
.centers-v2__tab:hover {
    background: #f8f8f8;
}
.centers-v2__tab.is-active {
    background: #f8f8f8;
}

/* ----- Panels wrapper (the visible box; panels swap inside it) ----- */
.centers-v2__panels {
    position: relative;
    min-height: 400px;
    background: var(--color-white);
    border: 2px solid var(--color-surface-line-soft);   /* #f6f6f6 */
    border-radius: 12px;
    /* no overflow hidden — the tilted photo card pokes past the edges */
}

.centers-v2__panel {
    position: relative;
    min-height: 400px;
}
.centers-v2__panel[hidden] {
    display: none;
}

/* Light-pink swirl, clipped to the panel's rounded corners */
.centers-v2__swirl {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 12px;
    overflow: hidden;
    pointer-events: none;
}
.centers-v2__swirl::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../../images/decorative/pink-swirl-centersv2.08b1682ea342.webp") no-repeat center bottom;
}

/* ----- Copy (left) ----- */
.centers-v2__info {
    position: relative;
    z-index: 1;
    max-width: 470px;
    min-height: 400px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.centers-v2__id {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.centers-v2__name {
    font-size: 32px;
    font-weight: var(--font-weight-medium);
    line-height: 32px;
    color: var(--color-text-heading);
    margin: 0;
}

.centers-v2__address {
    display: flex;
    align-items: center;
    gap: 6px;
    font-style: normal;
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    line-height: 20px;
    color: #3e2e2d;
}
.centers-v2__pin {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.centers-v2__desc {
    max-width: 364px;
    font-size: 16px;
    line-height: 26px;
    color: rgba(0, 0, 0, 0.6);
    margin: 0;
}

.centers-v2__actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ----- Tilted photo / video card (right) ----- */
.centers-v2__media {
    position: absolute;
    z-index: 2;
    top: 16px;
    right: 44px;
    width: 588px;
    height: 424px;
    padding: 0;
    display: block;
    transform: rotate(-4deg);
    background: var(--color-white);
    border: 2px solid var(--color-surface-line-soft);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 32px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}
span.centers-v2__media {
    cursor: default;
}

.centers-v2__photo {
    position: absolute;
    inset: -8%;
    width: 116%;
    height: 116%;
    object-fit: cover;
    transform: rotate(4deg);   /* counter-tilt so the photo reads level */
}

.centers-v2__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(4deg);
    width: 113px;
    height: 113px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    box-shadow: 0 8px 61px rgba(166, 78, 101, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast);
}
.centers-v2__media:hover .centers-v2__play {
    transform: translate(-50%, -50%) rotate(4deg) scale(1.06);
}

/* ----- Video modal (lightbox) -----
   Built by js/sections/centers/video-popup.js; these rules mirror
   the ones in css/sections/centers/hero.css so the modal is styled
   on the home page too (which doesn't load that file). */
.center-video-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.center-video-modal[hidden] {
    display: none;
}
.center-video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}
.center-video-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(960px, 100%);
}
.center-video-modal__video {
    display: block;
    width: 100%;
    max-height: 80vh;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.center-video-modal__close {
    position: absolute;
    top: -46px;
    right: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}
.center-video-modal__close:hover {
    opacity: 0.8;
}

/* ----- Responsive ----- */
@media (max-width: 1140px) {
    .centers-v2__media {
        width: 480px;
        height: 348px;
    }
}

@media (max-width: 960px) {
    .centers-v2 {
        padding: 64px var(--section-side-padding) 80px;
    }
    .centers-v2__header {
        flex-direction: column;
        align-items: flex-start;
    }
    .centers-v2__tabs {
        justify-content: flex-start;
    }
    .centers-v2__panels,
    .centers-v2__panel {
        min-height: 0;
    }
    .centers-v2__info {
        max-width: none;
        min-height: 0;
        padding: 32px 32px 0;
    }
    /* Photo card drops into the flow below the copy */
    .centers-v2__media {
        position: relative;
        top: auto;
        right: auto;
        width: calc(100% - 64px);
        height: auto;
        aspect-ratio: 16 / 10;
        margin: 24px 32px 32px;
        transform: none;
    }
    .centers-v2__photo {
        inset: 0;
        width: 100%;
        height: 100%;
        transform: none;
    }
    .centers-v2__play {
        transform: translate(-50%, -50%);
        width: 84px;
        height: 84px;
    }
    .centers-v2__media:hover .centers-v2__play {
        transform: translate(-50%, -50%) scale(1.06);
    }
}

@media (max-width: 768px) {
    .centers-v2__heading {
        font-size: 32px;
        line-height: 40px;
    }
}

/* ---- sections/home/faq.css ---- */
/* ============================================
   SECTION: FAQ
   Cream background runs full-bleed; inner content
   capped at 1240 so it aligns with the header.
   Two-column inside: intro on the left, accordion
   items on the right. Decorative swirl pinned to
   the bottom-left of the section.
   ============================================ */

.faq {
    position: relative;            /* anchor for the swirl */
    /* No overflow:hidden here — it would break position:sticky on the intro.
       The swirl clips itself via .faq__swirl. */
    padding: 100px var(--section-side-padding);
    background-color: var(--color-accent-yellow-bg);
}

.faq__inner {
    position: relative;            /* paint above the swirl */
    z-index: 1;
    max-width: var(--container-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Decorative cream swirl in the bottom-left.
   Full-bleed clip layer so the asset can't paint outside the section
   without trapping sticky descendants of .faq. */
.faq__swirl {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.faq__swirl::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40%;
    aspect-ratio: 566 / 313;
    background: url("../../images/decorative/vector-274.a9545bbc679e.webp") no-repeat left bottom / contain;
}

.faq__intro {
    max-width: 550px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Stick the intro while the taller FAQ column scrolls past —
       same pattern as .services-overview__intro. */
    position: sticky;
    top: 100px;                /* clears the 76px sticky navbar + breathing room */
    align-self: flex-start;
}

.faq__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-medium);
    line-height: 50px;
    letter-spacing: -1.26px;
    color: var(--color-text-heading);
    margin: 0;
}

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

.faq__email {
    color: var(--color-primary-text);
    font-weight: var(--font-weight-semibold);
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 610px;
}

.faq__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq__group-label {
    margin: 0 0 4px;
    font-family: var(--font-label);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-yellow-label);   /* #846c30 */
}

.faq-item {
    background: var(--color-white);
    border: 2px solid var(--color-accent-yellow-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.faq-item[data-open="true"] {
    border-color: var(--color-primary-text);
}

.faq-item__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 16px 20px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--color-text-strong);
}

.faq-item__question {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    line-height: 28px;
    letter-spacing: -0.36px;
    color: var(--color-text-strong);
    flex: 1;
}

.faq-item__indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-surface-soft);
    border-radius: var(--radius-full);
    flex-shrink: 0;
    color: var(--color-text-strong);
    transition: transform var(--transition-base), background-color var(--transition-fast);
}

.faq-item[data-open="true"] .faq-item__indicator {
    transform: rotate(180deg);
    background: var(--color-primary-light);
    color: var(--color-primary-text);
}

.faq-item__panel {
    padding: 0 20px 20px;
}

.faq-item__panel p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-faint);
    margin: 0;
}

.faq__empty {
    color: var(--color-text-body);
    text-align: center;
    padding: var(--space-2xl);
}

@media (max-width: 1024px) {
    .faq__inner {
        grid-template-columns: 1fr;
    }
    .faq__intro {
        position: static;      /* no sticking once the layout stacks to one column */
    }
}

@media (max-width: 768px) {
    .faq {
        padding: 60px var(--section-side-padding);
    }
    .faq__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .faq__swirl::before {
        width: 60%;
    }
}

/* ----- Phones -----
   Tighter accordion rows: the chevron loses its pill so the question gets
   the width back, and the type steps down a notch. */
@media (max-width: 600px) {
    .faq__lede {
        font-size: 14px;
        line-height: 22px;
    }

    .faq__list {
        gap: 12px;
    }

    .faq-item__question {
        font-size: 16px;
        line-height: 26px;
        letter-spacing: -0.32px;
    }

    .faq-item__indicator {
        width: 20px;
        height: 20px;
        background: none;
        border-radius: 0;
    }

    /* No pill to tint once open — just flip the chevron. */
    .faq-item[data-open="true"] .faq-item__indicator {
        background: none;
    }

    .faq-item__panel p {
        font-size: 15px;
        line-height: 24px;
    }
}

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