/*
 * media.css — Wholemind Responsive Stylesheet
 * Covers: Header / Navbar, Footer, All Page Sections
 * Breakpoints: 1199px (tablet landscape), 991px (tablet), 767px (mobile)
 * DESKTOP (≥1200px) is UNTOUCHED — all rules are inside media queries.
 */

/* ============================================================
   1. HEADER / NAVBAR — Tablet & Mobile
   ============================================================ */

@media (max-width: 1199px) {
    .navbar {
        height: 70px !important;
        padding: 0 16px;
    }

    .navbar-brand img,
    .custom-logo-link img {
        width: 180px !important;
    }

    /* Collapsed menu slide-down panel */
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 24px 20px 28px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09);
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        z-index: 1050;
    }

    .navbar-nav {
        gap: 8px !important;
    }

    .navbar-nav>li>a {
        font-size: 1rem !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .navbar-nav>li:last-child>a {
        border-bottom: none;
    }

    /* Mobile CTA button full-width */
    .mobile-menu-cta .btn-wm-primary {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 1rem;
    }
}

@media (max-width: 767px) {
    body #hero {
        padding-top: 10px !important;
    }

    body #hero .col-lg-5 {
        padding-top: 0px !important;
    }

    .service-cta-section .row.align-items-end {
        min-height: 400px !important;
    }

    .navbar {
        height: 64px !important;
        padding: 0 12px;
    }

    .navbar-brand img,
    .custom-logo-link img {
        width: 200px !important;
    }

    .navbar .container {
        padding: 0px !important;
    }

    .navbar-toggler {
        padding: 4px 6px;
    }

    #what-we-treat .service-hero-divider:first-child {
        top: -40px !important
    }

    #what-we-treat .service-hero-divider:last-child {
        bottom: -40px !important
    }
}

/* ============================================================
   2. FOOTER — Tablet & Mobile
   ============================================================ */

/* -- 2a. Footer columns: stack properly on tablet -- */
@media (max-width: 991px) {
    .site-footer .row.gx-lg-5 {
        row-gap: 32px;
    }

    /* Remove side borders on stacked columns */
    .site-footer .col-lg-4:nth-child(2) {
        border-left: none !important;
        border-right: none !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Footer brand column: left-align on tablet */
    .site-footer .col-lg-4:first-child {
        text-align: left !important;
    }

    .site-footer .col-lg-4:first-child .footer-logo {
        text-align: left;
    }

    .site-footer .col-lg-4:first-child>div[style*="margin: 0 auto"] {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* Footer CTA button: full-width on tablet */
    .site-footer .col-lg-4:last-child .btn-wm-primary {
        width: 100%;
        justify-content: center;
    }

    /* Footer warning box: stack icon above text */
    .footer-warning-box .d-flex.flex-column.flex-md-row {
        flex-direction: column !important;
        text-align: center;
    }

    .footer-warning-box .warning-icon {
        margin: 0 auto 16px !important;
    }

    /* Footer bottom row: center on tablet */
    .footer-bottom .row {
        text-align: center !important;
    }

    .footer-bottom .col-md-4 {
        margin-bottom: 8px;
    }
}

/* -- 2b. Footer NAV MENU: 2-column grid on mobile / left-aligned -- */
@media (max-width: 991px) {

    /* Convert single-column list → 2-column grid */
    .site-footer .footer-nav {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 16px !important;
        max-width: 100% !important;
        margin: 0 !important;
        /* remove mx-auto centering */
        text-align: left !important;
    }

    .site-footer .footer-nav li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        padding: 10px 0 !important;
    }

    .site-footer .footer-nav a {
        font-size: 0.95rem !important;
        padding: 6px 0 !important;
        border-bottom: none !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        justify-content: flex-start !important;
    }

    /* Section heading for the nav column */
    .site-footer .col-lg-4:nth-child(2) {
        text-align: left !important;
    }
}

@media (max-width: 767px) {

    /* ── Footer: full redesign to match mobile mockup ── */

    /* Footer background & top padding */
    .site-footer {
        padding-top: 36px !important;
        padding-bottom: 0 !important;
    }

    /* Row gap between the 3 stacked columns */
    .site-footer .row.gx-lg-5 {
        row-gap: 0 !important;
    }

    /* === COLUMN 1: Logo + Brand (centered) === */
    .site-footer .col-lg-4:first-child {
        text-align: center !important;
        margin-bottom: 32px !important;
        padding-bottom: 32px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
    }

    .site-footer .col-lg-4:first-child .footer-logo {
        text-align: center !important;
        margin-bottom: 12px !important;
    }

    /* Logo image: centered, decent size */
    .site-footer .col-lg-4:first-child .footer-logo img {
        max-width: 220px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Tagline text: centered, large */
    .site-footer .col-lg-4:first-child p {
        font-size: 0.85rem !important;
        text-align: center !important;
        margin: 0 auto !important;
        max-width: 260px !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        color: #888 !important;
    }

    /* Divider line under logo */
    .site-footer .col-lg-4:first-child>div[style*="margin: 0 auto"] {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* === COLUMN 2: Nav Menu (2-column grid on mobile) === */
    .site-footer .col-lg-4:nth-child(2) {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
        border-left: none !important;
        border-right: none !important;
        text-align: left !important;
    }

    /* 2-column grid: 2 menu items side by side per row */
    .site-footer .footer-nav {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Each nav item: half-width cell with border separators */
    .site-footer .footer-nav li {
        width: 98% !important;
        padding: 14px 12px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        /* border-right: 1px solid rgba(0, 0, 0, 0.06) !important; */
        margin: 0 !important;
    }

    /* Right column items: remove right border */
    .site-footer .footer-nav li:nth-child(even) {
        border-right: none !important;
    }

    /* Last two items: remove bottom border */
    .site-footer .footer-nav li:nth-last-child(-n+2) {
        border-bottom: none !important;
    }

    /* Nav link: left-aligned text with arrow icon */
    .site-footer .footer-nav a {
        font-size: 0.9rem !important;
        padding: 0 !important;
        justify-content: flex-start !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        color: var(--wm-heading) !important;
        text-decoration: none !important;
        line-height: 1.3 !important;
    }

    /* Arrow icon inside nav link */
    .site-footer .footer-nav a img {
        width: 11px !important;
        opacity: 0.6 !important;
        flex-shrink: 0 !important;
    }

    /* === COLUMN 3: Info items (full width, no CTA button) === */
    .site-footer .col-lg-4:last-child {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 24px !important;
    }

    /* Hide the CTA button in footer on mobile (not in mockup) */
    .site-footer .col-lg-4:last-child .btn-wm-primary {
        display: none !important;
    }

    /* Info list: full width */
    .footer-contact-info {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Each info item: full width row */
    .footer-contact-info li {
        display: flex !important;
        align-items: center !important;
        padding: 14px 16px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        width: 100% !important;
        gap: 14px !important;
    }

    .footer-contact-info li:last-child {
        border-bottom: none !important;
    }

    /* Icon circle */
    .footer-contact-info .rounded-circle {
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
    }

    /* Info text */
    .footer-contact-info span {
        font-size: 0.9rem !important;
        color: var(--wm-body) !important;
        line-height: 1.4 !important;
    }

    /* === Warning box: icon left, text right, compact === */
    .footer-warning-box {
        padding: 16px !important;
        border-radius: 12px !important;
        min-height: unset !important;
        margin-top: 24px !important;
    }

    .footer-warning-box .d-flex.flex-column.flex-md-row {
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 12px !important;
    }

    .footer-warning-box .warning-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .footer-warning-box .warning-icon svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Hide vertical divider on mobile */
    .footer-warning-box .d-none.d-md-block {
        display: none !important;
    }

    .footer-warning-box .warning-text {
        text-align: left !important;
    }

    .footer-warning-box .warning-text div {
        font-size: 0.82rem !important;
        line-height: 1.55 !important;
    }

    /* === Footer bottom: fully centered === */
    .footer-bottom {
        padding-top: 20px !important;
        padding-bottom: 16px !important;
    }

    .footer-bottom .row {
        text-align: center !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .footer-bottom .col-md-4 {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 4px !important;
    }

    .footer-bottom p {
        font-size: 0.75rem !important;
        margin-bottom: 2px !important;
    }

    /* Privacy | Terms on same row, centered */
    .footer-bottom .col-md-4:last-child p {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        align-items: center !important;
    }
}

/* ============================================================
   3. HOMEPAGE SECTIONS
   ============================================================ */

@media (max-width: 991px) {

    /* Hero section */
    #hero-section,
    .home-hero {
        padding: 60px 0 !important;
        min-height: unset !important;
    }

    /* Features bar — 2 items per row on tablet, wrap pills */
    .features-bar .row {
        row-gap: 20px !important;
    }

    .features-bar .col-lg-3.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* How It Works: stack cards */
    .how-it-works-section .col-md-4,
    .how-it-works-section .col-lg-4 {
        margin-bottom: 20px;
    }

    /* How It Works: section padding on tablet */
    .how-it-works-section {
        padding: 40px 0 !important;
    }

    /* Right image column: hide on tablet (keep only steps) */
    .how-it-works-section .col-lg-5 {
        display: none !important;
    }

    /* Steps box: convert to vertical stack on tablet */
    .how-steps-box {
        flex-direction: column !important;
        padding: 24px 20px !important;
        text-align: center !important;
        /* Center text & icons */
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    }

    .how-step-item {
        border-right: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        padding-bottom: 20px !important;
        margin-bottom: 20px !important;
    }

    .how-step-item:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Step icon: smaller on tablet */
    .how-step-item .step-icon {
        width: 52px !important;
        height: 52px !important;
        margin-bottom: 12px !important;
    }

    /* Section title in how-it-works */
    .how-it-works-section h2.section-title {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }

    /* Footer action in how-it-works: stack on tablet */
    .how-it-works-section .d-flex.flex-column.flex-md-row {
        flex-direction: column !important;
        gap: 16px;
    }

    .how-it-works-section .d-flex.flex-column.flex-md-row p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .how-it-works-section .d-flex.flex-column.flex-md-row .btn-wm-primary {
        width: 100%;
        justify-content: center;
    }

    /* What We Treat */
    #what-we-treat {
        padding-bottom: 60px !important;
        background-size: cover !important;
    }

    /* Approach section image */
    .approach-image-wrapper {
        width: 100% !important;
        height: 320px !important;
        border-radius: 24px !important;
        margin: 0 auto 30px !important;
    }

    .approach-image-wrapper img {
        width: 100% !important;
        height: 100%;
        object-fit: cover;
    }

    #approach {
        min-height: unset !important;
    }

    /* Meet Provider: stack image + text */
    .meet-provider-section .col-lg-5,
    .meet-provider-section .col-lg-6,
    .meet-provider-section .col-lg-7 {
        margin-bottom: 24px;
    }

    /* CTA Quote section */
    .cta-quote-section {
        padding: 60px 0 !important;
    }

    /* Marquee slider — let it scroll */
    .marquee-slider-section {
        overflow: hidden;
    }
}

@media (max-width: 767px) {
    .service-hero-divider {
        position: absolute !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        overflow: hidden !important;
    }

    .service-hero-divider svg {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    #hero {
        padding-bottom: 0px !important;
    }

    /* Section padding global */
    .section-padding {
        padding: 50px 0 !important;
    }

    /* Hero column (col-lg-5.py-5): remove top padding, add bottom clearance */
    #hero .col-lg-5 {
        padding-top: 90px !important;
        padding-bottom: 20px !important;
    }

    /* Features bar: 2 items side-by-side, smaller icons */
    .features-bar .col-lg-3.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .features-bar .feature-icon-wrap {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 6px !important;
    }

    .features-bar .feature-icon-wrap img {
        width: 44px !important;
        height: 44px !important;
    }

    .features-bar .feature-icon-wrap>div {
        width: 44px !important;
        height: 44px !important;
    }

    .features-bar .feature-item-wrap>span {
        font-size: 0.78rem !important;
    }

    /* ============================================================
       ALL PAGE TITLE FONT SIZE — Fixed 40px on mobile (below 767px)
       Covers: h1, h2, display-3, display-4, section-title, and every
       custom hero/page title class used across all pages.
       ============================================================ */

    h1,
    h2,
    .display-3,
    .display-4,
    .display-5,
    .section-title,
    .about-hero-title,
    .hero-main-title,
    .faq-title,
    .prov-hero-title,
    .referral-hero-title,
    .ins-section-title,
    .ins-section-title.display-3,
    .ins-hero2-title,
    .prov-section-title,
    .prov-cta-title,
    .how-to-refer-title,
    .get-in-touch-title,
    .approach-title,
    .prov-specialty-section-title,
    .wm-section-title,
    .cd-hero-title,
    .footer-cta-title {
        font-size: 35px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.5px !important;
    }

    /* ============================================================
       WHAT WE TREAT section — mobile fixes
       ============================================================ */

    /* Section title: display-3 h2 uses d-flex which breaks wrapping */
    #what-we-treat h2.display-3 {
        font-size: 35px !important;
        line-height: 1.15 !important;
        display: block !important;
        /* override d-flex so text wraps normally */
        text-align: center !important;
    }

    /* Description text: reduce size slightly */
    #what-we-treat>.container>.row>.col-lg-10>.text-center>div[style*="max-width: 550px"] {
        font-size: 0.9rem !important;
    }

    /* Treat cards: slightly tighter padding on mobile */
    .treat-card {
        padding: 16px !important;
    }

    /* CTA banner inside what-we-treat */
    #what-we-treat .cta-banner {
        flex-direction: column !important;
        padding: 20px 16px !important;
        gap: 16px !important;
        text-align: center;
    }

    #what-we-treat .cta-banner .col-md-7 {
        border-left: none !important;
        padding-left: 0 !important;
    }

    #what-we-treat .cta-banner .col-md-7 div {
        font-size: 0.95rem !important;
    }

    /* ============================================================
       WHO WE SERVE / WHO WE HELP section — mobile fixes
       ============================================================ */

    /* Section heading — has inline style="font-size: 3.2rem" so we need
       a high-specificity selector to override it */
    #who-we-serve h2,
    #who-we-serve h2.display-4 {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }

    /* Description text */
    #who-we-serve .text-center>div[style*="max-width: 850px"] {
        font-size: 0.88rem !important;
    }

    /* Specialty/focus cards: stack full width */
    #who-we-serve .col-lg-4 {
        width: 100% !important;
        margin-bottom: 16px !important;
    }

    /* Card inner h3 — also has inline font-size: 1.6rem */
    #who-we-serve .specialty-card h3 {
        font-size: 1.15rem !important;
        line-height: 1.3 !important;
        max-width: 100% !important;
    }

    /* Row padding/margin fix: remove large py-5/px-5 on mobile */
    #who-we-serve .row.g-4.mt-5.pt-5.pb-3.justify-content-center.px-5 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 24px !important;
        margin-top: 0 !important;
    }

    /* CTA link: full width */
    #who-we-serve .text-center.mt-5.pt-5 {
        margin-top: 24px !important;
        padding-top: 0 !important;
    }

    #who-we-serve .btn-wm-primary {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }


    /* Testimonial cards */
    .testimonialsSwiper .swiper-slide {
        width: 88vw !important;
        max-width: 320px !important;
    }

    /* What We Treat Swiper - Mobile view override for 1-by-1 sliding */
    #what-we-treat .treat-swiper {
        overflow: hidden !important;
    }

    #what-we-treat .treat-swiper .swiper-slide {
        width: 100% !important;
        max-width: 100% !important;
    }

    .testimonial-card {
        padding: 28px 20px !important;
        height: auto !important;
        min-height: 380px;
    }

    /* Insurance pills: 3 per row on mobile with smaller text */
    .insurance-pay-section .insurance-pills-mobile {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .insurance-pay-section .insurance-pills-mobile .insurance-pill {
        flex: 0 1 calc(33.33% - 6px) !important;
        min-width: 0 !important;
        text-align: center !important;
        padding: 6px 4px !important;
        font-size: 0.65rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Dot inside pill: smaller */
    .insurance-pill::before {
        width: 5px !important;
        height: 5px !important;
        margin-right: 5px !important;
    }

    /* Who We Serve section */
    .who-we-serve-section .col-md-6,
    .who-we-serve-section .col-lg-4 {
        margin-bottom: 16px;
    }
}

/* ============================================================
   4. ABOUT US PAGE
   ============================================================ */

@media (max-width: 991px) {

    /* About hero */
    .about-hero-section {
        padding: 60px 0 !important;
        min-height: unset !important;
    }

    /* Founder/Clinical Focus: stack image */
    .founder-section .col-lg-5,
    .founder-section .col-lg-7 {
        margin-bottom: 24px;
    }

    /* Expertise cards: 2-col grid */
    .expertise-section .col-md-4 {
        margin-bottom: 20px;
    }

    /* Care Anywhere: stack */
    .care-anywhere-section .col-lg-6 {
        margin-bottom: 24px;
    }

    /* What To Expect steps */
    .what-to-expect-section .step-item {
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {

    /* About hero heading — use global 40px rule, just ensure line-height */
    .about-hero-section h1,
    .about-new-hero .about-hero-title {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }

    /* About-new page section titles */
    .practice-title,
    .section-title-sm,
    .care-works-main-title,
    .cta-banner-new .cta-title {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }

    /* About-new page sections: reduce padding */
    .about-new-hero {
        padding: 50px 0 0px 0 !important;
        flex-direction: column;
    }

    .about-new-practice,
    .about-new-cards,
    .about-new-focus-philosophy,
    .about-new-care-works {
        padding: 48px 0 !important;
    }

    .about-new-cta-section,
    .conditions-new-cta {
        padding: 48px 0 !important;
    }

    /* Why Choose Us cards: full width */
    .why-choose-section .col-md-6 {
        margin-bottom: 16px;
    }

    /* Psychiatric Care list */
    .psychiatric-care-section ul li {
        font-size: 0.93rem;
    }

    /* Foundation Mission — text spacing */
    .foundation-mission-section {
        padding: 50px 0 !important;
    }
}

/* ============================================================
   5. CONDITIONS PAGE
   ============================================================ */

@media (max-width: 991px) {

    /* Condition detail sections: remove desktop min-height on tablet */
    .condition-detail-page section,
    .condition-hero-section,
    .condition-symptoms-section,
    .condition-differences-section,
    .condition-hormones-section,
    .condition-help-section,
    .condition-journey-section,
    .condition-faqs-section,
    .condition-footer-cta-section {
        min-height: auto !important;
    }

    /* Condition hero */
    .condition-hero-section {
        padding: 60px 0 !important;
    }

    /* Condition info-cards: 2-col grid */
    .condition-cards-section .col-md-6 {
        margin-bottom: 20px;
    }

    /* Landscape section image */
    .condition-landscape-section .col-lg-6 {
        margin-bottom: 24px;
    }

    /* Perinatal section */
    .perinatal-section .col-lg-6 {
        margin-bottom: 24px;
    }

    /* Support / CTA */
    .condition-support-section {
        padding: 50px 0 !important;
    }
}

@media (max-width: 767px) {

    /* Condition detail sections: remove desktop min-height on mobile */
    .condition-detail-page section,
    .condition-hero-section,
    .condition-symptoms-section,
    .condition-differences-section,
    .condition-hormones-section,
    .condition-help-section,
    .condition-journey-section,
    .condition-faqs-section,
    .condition-footer-cta-section {
        min-height: auto !important;
    }

    /* Condition cards: single col */
    .condition-cards-section .col-md-6,
    .condition-cards-section .col-lg-4 {
        width: 100% !important;
        margin-bottom: 16px;
    }

    /* Condition hero heading — use global 40px rule */
    .condition-hero-section h1 {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }
}

/* ============================================================
   6. CONTACT US PAGE
   ============================================================ */

@media (max-width: 991px) {

    /* Contact hero */
    .contact-hero-section,
    .contactus-hero {
        padding: 60px 0 !important;
        min-height: unset !important;
    }

    /* Connect section: stack form & info */
    .contact-connect-section .col-lg-6 {
        margin-bottom: 24px;
    }

    /* Next Steps */
    .next-steps-section .col-md-6,
    .next-steps-section .col-lg-4 {
        margin-bottom: 20px;
    }

    /* Crisis section */
    .crisis-section {
        padding: 50px 0 !important;
    }

    /* Expectations: stack */
    .expectations-section .col-lg-6 {
        margin-bottom: 24px;
    }
}

@media (max-width: 767px) {

    /* Contact form fields: full width */
    .contact-form .col-md-6 {
        width: 100% !important;
    }

    /* Crisis links: center */
    .crisis-section .crisis-links {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    /* Contact page sections: reduce py-5 spacing */
    .contact-hero-section,
    .contactus-hero,
    .contact-connect-section,
    .contact-crisis,
    .contact-footer-cta {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
        min-height: unset !important;
    }

    /* Contact page heading */
    .contact-hero-section h1,
    .contactus-hero h1 {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }
}

/* ============================================================
   7. INSURANCE PAGE
   ============================================================ */

@media (max-width: 991px) {

    /* Insurance hero */
    .insurance-hero-section {
        padding: 60px 0 !important;
        min-height: unset !important;
    }

    /* Accepted plans grid: 2-col */
    .accepted-plans-section .col-md-4,
    .accepted-plans-section .col-lg-3 {
        margin-bottom: 16px;
    }

    /* Self-pay cards: stack */
    .self-pay-section .col-md-6 {
        margin-bottom: 20px;
    }

    /* Verification: stack */
    .verification-section .col-lg-6 {
        margin-bottom: 24px;
    }
}

@media (max-width: 767px) {

    /* ── 1. Hero section: .insurance-logos → single scrollable row ── */
    .insurance-logos {
        display: flex !important;
        flex-wrap: nowrap !important;
        /* force 1 row */
        align-items: center !important;
        gap: 12px !important;
        /* tighter than gap-4 (24px) */
        overflow-x: auto;
        /* allow swipe if logos overflow */
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        /* space for scrollbar on some browsers */
    }

    .insurance-logos img {
        max-height: 26px !important;
        /* was 40px — reduced for 1-row fit */
        width: auto !important;
        flex-shrink: 0;
        /* prevent squishing */
    }

    /* ── 2. Home /insurance section: tighter cards ── */
    #insurance .insurance-card,
    .insurance-card {
        padding: 10px 8px !important;
        /* was p-4 (24px) */
    }

    #insurance .insurance-card .h4 {
        font-size: 0.85rem !important;
    }

    /* ── 3. Insurance page accepted-plans: logo cards → compact single row ── */
    /* Stack left text col, then show logos in a tight 2-per-row grid */
    .ins-accepted-plans-section .col-lg-7 .row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .ins-accepted-plans-section .col-lg-7 .row .col-md-6 {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Reduce the logo image height inside ins-card */
    .ins-card>div[style*="height: 78px"] {
        height: 48px !important;
        /* was 78px — compact for mobile */
    }

    .ins-card>div[style*="height: 78px"] img {
        max-height: 42px !important;
    }

    .ins-card .fw-bold {
        font-size: 0.82rem !important;
    }

    /* Self-pay card: padding */
    .self-pay-card {
        padding: 24px 18px !important;
    }

    .self-pay-card .price {
        font-size: 2rem !important;
    }

    /* Insurance page sections: reduce py-5 spacing */
    .ins-hero2-section,
    .ins-accepted-plans-section,
    .ins-selfpay-section,
    .ins-verification-section,
    .ins-faq-section,
    .ins-footer-cta-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
        min-height: unset !important;
    }

    /* Insurance page hero and section titles */
    .ins-hero2-title,
    .ins-section-title {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }
}

/* ============================================================
   8. PROVIDER PAGE
   ============================================================ */

@media (max-width: 991px) {

    /* Provider hero: stack */
    .provider-hero-section .col-lg-6 {
        margin-bottom: 24px;
    }

    /* Expertise items */
    .provider-expertise-section .col-md-6 {
        margin-bottom: 20px;
    }

    /* What to expect: stack */
    .provider-expect-section .col-lg-5 {
        margin-bottom: 24px;
    }
}

@media (max-width: 767px) {

    /* Provider image: rounded */
    .provider-hero-section img.provider-photo {
        border-radius: 16px !important;
        max-height: 340px;
        width: 100%;
        object-fit: cover;
    }

    /* Provider page: reduce py-5 section spacing */
    .prov-hero-section {
        padding-top: 48px !important;
        padding-bottom: 0px !important;
    }

    .prov-expertise-section,
    .prov-expect-section,
    .prov-faq-section,
    .prov-cta-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    /* Provider hero title on mobile */
    .prov-hero-title {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }

    /* Provider section titles on mobile */
    .prov-section-title,
    .prov-specialty-section-title,
    .prov-cta-title {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }

    /* Provider specialty cards: 2-col on mobile */
    .prov-specialty-card {
        margin-bottom: 12px;
    }

    /* Stack image and text columns on mobile */
    .prov-hero-section .col-lg-6,
    .prov-expect-section .col-lg-7,
    .prov-expect-section .col-lg-5 {
        margin-bottom: 20px;
    }
}

/* ============================================================
   9. REFERRAL PAGE
   ============================================================ */

@media (max-width: 991px) {

    /* Referral hero */
    .referral-hero-section {
        padding: 60px 0 !important;
        min-height: unset !important;
    }

    /* Access / How-to / Partnering: stack */
    .referral-access-section .col-lg-6,
    .referral-howto-section .col-lg-6,
    .referral-partnering-section .col-lg-6 {
        margin-bottom: 24px;
    }

    /* Scope cards */
    .referral-scope-section .col-md-4 {
        margin-bottom: 20px;
    }

    /* Patients section */
    .refe-container {
        display: block !important;
        margin-top: 24px !important;
        border-radius: 16px;
        overflow: hidden;
    }
}

@media (max-width: 767px) {

    /* ══════════════════════════════════════════════════════
       REFERRAL PAGE — Complete Mobile Overhaul (≤767px)
       ══════════════════════════════════════════════════════ */
    .referral-section.referral-hero {
        flex-direction: column;
        padding-bottom: 0px !important;
        padding-top: 50px !important;
    }

    .referral-section.referral-bleed-section .mb-5 {
        margin-bottom: 1rem !important;
    }

    [class*="referral-"].referral-section.get-in-touch {
        background: #fbf7f5 !important;
    }

    .get-in-touch-card {
        padding: 0px !important;
    }

    .touch-right-wrapper {
        padding: 0px !important
    }

    .get-in-touch-row {
        padding: 20px 0 !important;
        gap: 10px !important
    }

    /* [class*="referral-"].referral-hero-title {
        padding: 0px !important
    } */

    [class*="referral-"] .tagline {
        justify-content: start;
    }

    [class*="referral-"].referral-image-container {
        padding-top: 0px !important;
        margin-top: 0px !important;
    }

    .contact-next-step {
        flex-direction: column;
    }

    .contact-next-step .tagline {
        justify-content: start;
    }

    .contact-form-card {
        padding: 15px !important
    }

    /* [class*="referral-"], */
    .scope-of-care,
    .how-to-refer,
    .approach,
    .difference,
    .get-in-touch,
    .patients-suited,
    .partnering,
    .access-statewide {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        min-height: unset !important;
    }

    h1,
    h2,
    .referral-hero-title,
    .how-to-refer-title,
    .approach-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    .referral-hero .d-flex.align-items-center.gap-4 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }


    .referral-image-container img {
        border-radius: 16px;
        width: 100% !important;
    }

    /* ── SCOPE OF CARE SECTION ── */
    .scope-of-care {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .scope-of-care h2 {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }

    .scope-intro {
        font-size: 0.97rem !important;
    }

    /* Scope cards: full width stack */
    .scope-of-care .col-md-6,
    .scope-of-care .col-lg-4 {
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    .scope-card {
        padding: 16px !important;
    }

    .scope-icon-box {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    .scope-card-text {
        font-size: 0.9rem !important;
    }

    .scope-right-wrapper {
        padding: 16px 0 !important;
        max-width: 100% !important;
    }

    /* Scope image: visible on mobile */
    .scope-image-container {
        display: block !important;
        border-radius: 16px;
        overflow: hidden;
        margin-top: 8px !important;
    }

    /* Scope note */
    .scope-note {
        flex-direction: column !important;
        text-align: center !important;
    }

    /* ── ACCESS STATEWIDE / BLEED SECTIONS ── */
    .access-statewide h2,
    .partnering h2,
    .difference h2 {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }

    .access-statewide p,
    .partnering p,
    .difference p {
        font-size: 0.97rem !important;
        line-height: 1.65 !important;
    }

    /* Partnering points: stack */
    .partnering-points {
        margin-top: 24px !important;
    }

    /* ── HOW TO REFER SECTION ── */
    .how-to-refer-title {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }

    .how-to-refer p {
        font-size: 0.97rem !important;
        line-height: 1.65 !important;
    }

    /* How-to columns: stack */
    .how-to-refer .col-lg-6,
    .how-to-refer .col-md-6 {
        width: 100% !important;
        margin-bottom: 24px !important;
    }

    /* Step circles: smaller on mobile */
    .step-circle {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    .step-num {
        font-size: 1rem !important;
    }

    .step-description {
        font-size: 0.92rem !important;
    }

    /* How-to image */
    .howto-image-container,
    .howto-right-wrapper {
        margin-top: 16px !important;
        padding: 0 !important;
    }

    .howto-img {
        width: 100% !important;
        border-radius: 16px !important;
    }

    /* Blobs: hide on mobile */
    .howto-blob,
    .scope-blob,
    .howto-leaf-decor {
        display: none !important;
    }

    /* ── APPROACH SECTION ── */
    .approach-title {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }

    .approach .col-lg-6,
    .approach .col-md-6 {
        width: 100% !important;
        margin-bottom: 24px !important;
    }

    .approach-testimonial-box {
        padding: 20px !important;
        margin-bottom: 24px !important;
    }

    .approach-testimonial-text {
        font-size: 0.97rem !important;
        line-height: 1.6 !important;
    }

    /* Approach cards: full width */
    .approach-cards-row {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .approach-card {
        width: 100% !important;
        padding: 20px !important;
    }

    .approach-card-title {
        font-size: 1rem !important;
    }

    .approach-card-text {
        font-size: 0.9rem !important;
    }

    /* ── DIFFERENCE SECTION ── */
    /* Cards: full width */
    .difference .col-md-6,
    .difference .col-lg-4 {
        width: 100% !important;
        margin-bottom: 16px !important;
    }

    /* Right bleed image */
    .difference .scope-right-wrapper {
        padding: 16px 0 !important;
    }

    .difference .scope-image-container {
        display: block !important;
        border-radius: 16px;
        overflow: hidden;
    }

    /* ── PATIENTS SUITED SECTION ── */
    .patients-suited h2 {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }

    /* Patient cards: 2 per row on mobile */
    .patients-suited .col-md-6,
    .patients-suited .col-lg-4 {
        width: 50% !important;
        margin-bottom: 12px !important;
    }

    .patient-card {
        padding: 16px !important;
    }

    .patient-card h5,
    .patient-card h6 {
        font-size: 0.92rem !important;
    }

    .patient-card p {
        font-size: 0.82rem !important;
    }

    /* Referral note: stack vertically */
    .referral-note {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
        padding: 20px !important;
    }

    /* ── GET IN TOUCH / CONTACT SECTION ── */
    .get-in-touch-title {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }

    .get-in-touch p {
        font-size: 0.97rem !important;
        line-height: 1.65 !important;
    }

    /* Form columns: full width */
    .get-in-touch .col-md-6,
    .get-in-touch .col-lg-6 {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    /* Form inputs: proper sizing on mobile */
    .get-in-touch input,
    .get-in-touch select,
    .get-in-touch textarea {
        font-size: 1rem !important;
        padding: 12px 16px !important;
    }

    /* ── Global referral text overrides ── */
    .referral-section .description,
    .referral-section p.description,
    .referral-section div.description {
        font-size: 0.97rem !important;
        line-height: 1.65 !important;
    }

    /* Referral section headings: standard 35px across all */
    .referral-section h2,
    .referral-section .display-5 {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }

    /* Stack all two-column rows */
    .referral-section .row.align-items-center {
        row-gap: 24px !important;
    }

    /* Accent lines: keep visible, reduce size */
    .access-accent-line,
    .approach-accent-line,
    .how-to-accent-line,
    .scope-accent-line,
    .hero-accent-line {
        width: 36px !important;
        height: 3px !important;
        margin: 16px 0 !important;
    }
}


/* ============================================================
   10. SERVICES / SINGLE SERVICE PAGE
   ============================================================ */

@media (max-width: 991px) {

    /* Service hero */
    .service-hero-section {
        padding: 60px 0 !important;
        min-height: unset !important;
    }

    /* Provides: stack */
    .service-provides-section .col-md-6 {
        margin-bottom: 20px;
    }

    /* Care For: grid 2-col */
    .service-care-section .col-md-4 {
        margin-bottom: 16px;
    }

    /* Approach: stack */
    .service-approach-section .col-lg-6 {
        margin-bottom: 24px;
    }
}

@media (max-width: 767px) {

    /* Service detail cards: full width */
    .service-detail-section .col-md-6,
    .service-detail-section .col-lg-4 {
        width: 100% !important;
        margin-bottom: 16px;
    }

    /* Services page sections: reduce py-5 spacing */
    .service-hero-section,
    .service-detail-section,
    .service-provides-section,
    .service-care-section,
    .service-approach-section,
    .service-cta-section,
    .service-care-for-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
        min-height: unset !important;
    }

    /* Service hero title */
    .service-hero-section h1 {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }

    /* Service section heading: display-5 in templates */
    .service-provides-section h2,
    .service-care-section h2,
    .service-approach-section h2,
    .service-cta-section h2,
    .service-care-for-section h2 {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }

    /* ── Approach Timeline: Mobile Column Card Layout ── */

    /* Section: clean padding */
    .service-approach-section {
        padding: 60px 0 50px !important;
        min-height: unset !important;
    }

    /* Timeline container */
    .approach-timeline {
        padding-top: 8px !important;
        padding-bottom: 24px !important;
        max-width: 100% !important;
        margin-top: 16px !important;
    }

    /* Row: vertical single-column stack */
    .approach-timeline>.row {
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Each step column: full width */
    .approach-timeline .col-lg.col-md-4.col-sm-6 {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-bottom: 0 !important;
    }

    /* Inner card: column-centered, generous padding & spacing */
    .approach-timeline .d-flex.flex-column.align-items-center {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        background: #FFFFFF;
        border-radius: 20px;
        padding: 28px 24px 28px !important;
        margin-bottom: 20px;
        box-shadow: 0 6px 24px rgba(46, 48, 48, 0.06);
        border-top: 3px solid #72A59F;
        position: relative !important;
        gap: 0 !important;
    }

    /* Number circle: positioned absolute at top-left of card */
    .approach-timeline .number-circle {
        position: absolute !important;
        top: -16px !important;
        left: 20px !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 0.85rem !important;
        margin-bottom: 0 !important;
        flex-shrink: 0;
        z-index: 3;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* Hide dashed connector line — only for desktop */
    .approach-timeline .number-circle>div[style*="border-left: 1.5px dashed"] {
        display: none !important;
    }

    /* Icon circle: centered, given breathing room */
    .approach-timeline .icon-circle {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
        margin-top: 16px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0;
        position: relative;
        z-index: 2;
    }

    .approach-timeline .icon-circle svg {
        width: 28px !important;
        height: 28px !important;
    }

    .approach-timeline .icon-circle img {
        width: 44px !important;
        height: 44px !important;
    }

    /* h5 title: sits below the icon with clear spacing */
    .approach-timeline h5 {
        position: relative !important;
        margin-top: 20px !important;
        margin-bottom: 10px !important;
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
        max-width: none !important;
        width: 100% !important;
        color: var(--wm-heading) !important;
        font-weight: 700 !important;
    }

    /* Description text: below h5 with enough room */
    .approach-timeline h5+div {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        max-width: none !important;
        margin: 0 !important;
        text-align: center !important;
        color: var(--wm-body) !important;
        padding: 0 4px !important;
    }

    /* Info notice box: stack vertically */
    .service-approach-section .d-inline-flex.align-items-center.rounded-3 {
        flex-direction: column !important;
        padding: 28px 20px !important;
        text-align: center !important;
        max-width: 100% !important;
        margin-top: 16px !important;
    }

    .service-approach-section .d-inline-flex.align-items-center.rounded-3>.me-4 {
        margin-right: 0 !important;
        margin-bottom: 16px !important;
        width: 60px !important;
        height: 60px !important;
    }

    .service-approach-section .d-inline-flex.align-items-center.rounded-3>p {
        font-size: 1rem !important;
        text-align: center !important;
    }
}



/* ============================================================
   11. FAQs PAGE
   ============================================================ */

@media (max-width: 991px) {

    /* FAQ hero */
    .faqs-hero-section {
        padding: 60px 0 !important;
    }

    /* Answers: stack */
    .faqs-answers-section .col-lg-8,
    .faqs-answers-section .col-lg-4 {
        width: 100% !important;
    }
}

@media (max-width: 767px) {

    /* FAQ accordion padding */
    .faq-item .accordion-button {
        padding: 14px 16px !important;
        font-size: 0.95rem !important;
    }

    .faq-item .accordion-body {
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
    }

    /* Payment section: stack columns */
    .faqs-payment-section .col-md-6 {
        margin-bottom: 20px;
    }

    /* Next steps: stack */
    .faqs-next-steps-section .col-md-4 {
        margin-bottom: 16px;
    }

    /* FAQs page sections: reduce py-5 spacing */
    .faqs-hero-section,
    .faqs-answers-section,
    .faqs-payment-section,
    .faqs-next-steps-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
        min-height: unset !important;
    }

    /* FAQ hero title */
    .faqs-hero-section h1,
    .faq-title {
        font-size: 35px !important;
        line-height: 1.15 !important;
    }
}

/* ============================================================
   12. CAROUSEL — Swiper mobile config (common cards carousel)
   ============================================================ */

/* Enable cards carousel swiper on mobile when .mobile-swiper class is added */
@media (max-width: 767px) {

    /* Mobile carousel wrapper */
    .mobile-swiper-wrapper {
        overflow: hidden;
        position: relative;
        padding-bottom: 48px !important;
    }

    .mobile-swiper-wrapper .swiper-slide {
        width: 85vw !important;
        max-width: 320px;
        height: auto !important;
    }

    /* Swiper pagination dots */
    .mobile-swiper-wrapper .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: var(--wm-muted);
        opacity: 0.45;
    }

    .mobile-swiper-wrapper .swiper-pagination-bullet-active {
        background: var(--wm-primary);
        opacity: 1;
    }
}

/* ============================================================
   13. GENERAL / UTILITY — All Pages
   ============================================================ */

@media (max-width: 991px) {

    /* Section titles scale down */
    .why-choose-section h2,
    .how-it-works-section h2.section-title,
    .section-title,
    h2.section-title {
        font-size: 30px !important;
        line-height: 1.15 !important;
        margin-bottom: 16px !important;
    }

    h2.section-title span span {
        display: none !important;
    }

    /* Tagline */
    .section-tagline {
        font-size: 0.8rem !important;
        letter-spacing: 1.5px !important;
        margin-bottom: 12px !important;
    }

    /* CTA footer sections */
    .footer-cta-section,
    .section-cta {
        padding: 50px 0 !important;
    }

    .footer-cta-section h2 {
        font-size: clamp(1.4rem, 4vw, 2rem) !important;
    }

    /* Btn size: slightly smaller on tablet */
    .btn-wm-primary {
        padding: 12px 22px !important;
        font-size: 0.97rem !important;
    }
}

@media (max-width: 767px) {

    /* Prevent horizontal overflow */
    body {
        overflow-x: hidden !important;
    }

    /* Section padding */
    section,
    .section-padding,
    .wm-section-padding {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    /* ── Condition Detail Pages Mobile Redesign ── */

    /* Hero Section */
    .condition-hero-section {
        padding: 56px 0 0 !important;
        min-height: unset !important;
        flex-direction: column;
    }

    .condition-hero-section>.container {
        padding-top: 0 !important;
        padding-bottom: 40px !important;
        min-height: unset !important;
    }

    .condition-hero-section .row {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    .cd-hero-right {
        margin-top: 0 !important;
        margin-bottom: 24px !important;
    }

    .cd-hero-img-wrap {
        margin: 0 auto !important;
        /* max-width: 320px !important; */
        width: 100% !important;
    }

    /* Hero image frame: show only when image present, hide empty arch */
    .cd-hero-img-frame {
        /* border-radius: 180px 180px 24px 180px !important; */
        height: auto !important;
        width: 100% !important;
    }

    /* Hide hero image frame & border if the frame has no image child */
    .cd-hero-img-frame:empty {
        display: none !important;
    }

    .cd-hero-img-frame:empty~.cd-hero-img-border,
    .cd-hero-img-wrap:has(.cd-hero-img-frame:empty) {
        display: none !important;
    }

    .cd-hero-img-border {
        border-radius: 180px 180px 24px 180px !important;
        top: 10px !important;
        left: 10px !important;
        right: -10px !important;
        bottom: -10px !important;
    }

    /* Hero left column text */
    .condition-hero-section .col-lg-6:first-child {
        text-align: center !important;
    }

    .condition-hero-section .tagline {
        justify-content: center !important;
    }

    .cd-hero-title {
        font-size: 35px !important;
        text-align: center !important;
    }

    .cd-hero-divider {
        margin: 16px auto 20px !important;
    }

    .cd-hero-desc {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
        font-size: 0.95rem !important;
    }

    .condition-hero-section .btn-wm-primary {
        margin-bottom: 24px !important;
        display: flex !important;
        justify-content: center !important;
        width: fit-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Feature cards bar: make inline-stack on mobile */
    .cd-feat-bar {
        background: white !important;
        border: none !important;
        box-shadow: none !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 20px !important;
        margin-top: 20px !important;
    }

    .cd-feat-item {
        padding: 0 !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .cd-feat-sep {
        display: none !important;
    }

    /* Service hero divider SVG on mobile */

    .about-new-hero .hero-image-container {
        margin-top: 0px;
        padding-top: 0px;
    }

    /* Symptoms Section */
    .condition-symptoms-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
        min-height: unset !important;
    }

    /* Reset negative top margin from desktop layout */
    .symptoms-badges-stack {
        margin: 32px 0 0 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        gap: 16px !important;
    }

    .symptom-pill-card {
        background: #fff !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
        border: 1px solid rgba(0, 0, 0, 0.04) !important;
        padding: 16px !important;
        min-height: auto !important;
        align-items: center !important;
        gap: 16px !important;
        border-radius: 16px !important;
    }

    .symptom-icon-wrap {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
    }

    .symptom-icon-wrap img,
    .symptom-icon-wrap svg {
        width: 30px !important;
        height: 30px !important;
    }

    .symptom-text {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
    }

    /* Symptoms section: left column text alignment */
    .condition-symptoms-section .col-lg-6:first-child {
        text-align: center !important;
    }

    .condition-symptoms-section .tagline {
        justify-content: center !important;
    }

    .condition-symptoms-section .wm-section-divider {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .condition-symptoms-section .symptoms-body-desc,
    .condition-symptoms-section .symptoms-bottom-desc {
        text-align: center !important;
    }

    /* Gender Differences Section */
    .condition-differences-section {
        padding-top: 48px !important;
        padding-bottom: 118px !important;
        min-height: unset !important;
        background-position: bottom center !important;
        background-size: 80% auto !important;
    }

    /* ── Differences right column: image card with white stat overlay ── */

    /* Right column: add top spacing below left text */
    .condition-differences-section .col-lg-6:last-child {
        margin-top: 36px !important;
    }

    /* Container: block, centered, full width */
    .differences-arch-container {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 340px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* Hide decorative blobs */
    .diff-bg-circle-blue,
    .diff-bg-circle-peach {
        display: none !important;
    }

    /* Arch wrapper: clip image into rounded rectangle */
    .diff-arch-wrapper {
        position: relative !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* Hide empty frame when no image set */
    .diff-img-frame--empty {
        display: none !important;
    }

    /* Image frame: tall rectangle, no arch border-radius (parent clips) */
    .diff-img-frame:not(.diff-img-frame--empty) {
        height: 420px !important;
        border-radius: 0 !important;
        width: 100% !important;
    }

    .diff-img-frame img,
    .diff-img-frame picture img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
        display: block !important;
    }

    /* Stat badge: absolute overlay at the BOTTOM of the image */
    .diff-floating-stat-card {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 20px 20px 24px 24px !important;
        padding: 20px 24px 24px !important;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08) !important;
        background: rgba(255, 255, 255, 0.97) !important;
        text-align: center !important;
    }

    /* Stat number */
    .diff-stat-number {
        font-size: 2.6rem !important;
        margin-bottom: 4px !important;
    }

    /* Stat title */
    .diff-stat-title {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }

    /* Stat description text */
    .diff-stat-desc {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    .diff-lifecycle-bar {
        display: none !important;
    }

    /* Differences CTA button: center */
    .differences-cta-wrap {
        text-align: center !important;
    }

    /* No-image fallback: stat card goes below as a normal centered card */
    .diff-col-no-image .diff-floating-stat-card {
        position: relative !important;
        bottom: -110px !important;
        left: auto !important;
        right: auto !important;
        width: 80% !important;
        margin: 16px auto 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    }

    /* How We Help Section */
    .condition-help-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
        text-align: center !important;
    }

    .condition-help-section .tagline {
        justify-content: center !important;
    }

    .condition-help-section h2 {
        text-align: center !important;
    }

    .help-body-desc {
        text-align: center !important;
        max-width: 100% !important;
    }

    /* Hide empty arch visual container */
    .help-arch-visual-container {
        display: none !important;
    }

    /* Help left column: full width on mobile */
    .condition-help-section .col-lg-5 {
        margin-bottom: 24px !important;
    }

    /* Solutions grid: 1 column on mobile */
    .condition-help-section .help-solutions-grid .col-sm-6 {
        width: 100% !important;
    }

    .solution-grid-card {
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 18px !important;
        border-radius: 16px !important;
        min-height: auto !important;
    }

    .solution-icon-box {
        margin-bottom: 0 !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        border-radius: 12px !important;
    }

    .solution-icon-box img,
    .solution-icon-box svg {
        width: 52px !important;
        height: 52px !important;
    }

    .solution-grid-card h4 {
        text-align: left !important;
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
    }

    .help-bottom-desc {
        font-size: 0.9rem !important;
        text-align: center !important;
    }

    /* Background decorators: hide on mobile */
    .help-bg-pink-blob,
    .help-bg-blue-wave,
    .help-bg-floral-top {
        display: none !important;
    }

    /* What To Expect (Journey) Section */
    .condition-journey-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    /* Journey cards: single col 2x2 on mobile (col-sm-6 is already 2-col) */
    .journey-step-column {
        margin-bottom: 16px !important;
    }

    .journey-card {
        padding: 28px 18px !important;
        border-radius: 16px !important;
    }

    .journey-icon-wrap {
        width: 60px !important;
        height: 60px !important;
    }

    .journey-step-title {
        font-size: 1.35rem !important;
        margin-top: 34px !important;
        min-height: auto !important;
    }

    .journey-step-divider {
        margin: 10px auto !important;
    }

    .journey-step-desc {
        font-size: 0.88rem !important;
    }

    /* FAQs Section */
    .condition-faqs-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .faq-accordion-card {
        padding: 20px !important;
        border-radius: 16px !important;
        gap: 12px !important;
    }

    .faq-icon-circle {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .faq-icon-circle svg,
    .faq-icon-circle img {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
    }

    /* Align card: icon stays top-aligned beside text */
    .faq-accordion-card {
        align-items: flex-start !important;
        gap: 14px !important;
    }

    .faq-accordion-card h4 {
        font-size: 1rem !important;
    }

    .faq-answer-inner {
        font-size: 0.9rem !important;
    }

    /* Footer CTA Section */
    .condition-footer-cta-section {
        padding-top: 56px !important;
        padding-bottom: 64px !important;
        text-align: center !important;
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    /* Tagline: centered */
    .condition-footer-cta-section .tagline {
        justify-content: center !important;
    }

    /* Title: reduce size for mobile (global 40px rule already applies via .wm-section-title) */
    .condition-footer-cta-section .footer-cta-title {
        margin-bottom: 16px !important;
    }

    /* Description: full width, centered */
    .footer-cta-desc {
        font-size: 0.95rem !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 32px !important;
    }

    /* Button row: stack vertically, full width */
    .condition-footer-cta-section .d-flex.flex-wrap.justify-content-center.gap-3 {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 32px !important;
        width: 100% !important;
    }

    /* Both buttons: full width capped at 320px */
    .condition-footer-cta-section .btn-wm-primary,
    .condition-footer-cta-section .btn-wm-contact-us {
        width: 100% !important;
        max-width: 320px !important;
        justify-content: center !important;
        text-align: center !important;
        display: flex !important;
    }

    /* Features bar: stack items vertically, full width card */
    .footer-cta-features-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px 16px !important;
        padding: 20px 16px !important;
        border-radius: 16px !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: unset !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    }

    /* Feature items: inline on mobile (wrap naturally) */
    .footer-feature-item {
        font-size: 0.82rem !important;
        white-space: nowrap !important;
    }

    .footer-feature-divider {
        display: none !important;
    }

    /* Footer divider wrap: reduce negative margin on mobile */
    .footer-divider-wrap {
        margin-top: -8.33vw !important;
    }

    .footer-divider-wrap img {
        width: 100% !important;
        height: auto !important;
    }

    /* Container horizontal padding */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Headings scale — NOTE: specific heading classes are set to 40px in section 3 above.
       These clamp values serve as sensible fallbacks for non-title text. */
    h3 {
        font-size: clamp(1.15rem, 4vw, 1.5rem) !important;
    }

    /* Button: full-width on very small screens when inside a text-center block */
    .text-center .btn-wm-primary,
    .text-center .btn-wm-secondary {
        width: 100%;
        max-width: 340px;
        justify-content: center;
    }

    /* Cards: consistent radius and shadow */
    .card,
    [class*="-card"] {
        border-radius: 12px !important;
    }

    /* Row gutters: tighter */
    .row {
        --bs-gutter-x: 16px;
    }

    /* Images inside content: full width */
    .content-image img,
    .section-image img {
        width: 100% !important;
        height: auto !important;
    }

    /* Back to top: smaller on mobile */
    .back-to-top {
        width: 38px !important;
        height: 38px !important;
        bottom: 20px !important;
        right: 16px !important;
    }
}

/* ============================================================
   Hero Divider Responsive Scaling (Mobile & Tablet)
   ============================================================ */
@media (max-width: 991px) {

    .hero-divider-svg,
    .hero-divider-img {
        width: 100% !important;
        height: auto !important;
        min-width: 100% !important;
        display: block !important;
    }
}

/* ============================================================
   Global title overrides (35px) for all pages under 767px
   ============================================================ */
@media (max-width: 767px) {

    h1,
    h2,
    .h1,
    .h2,
    .display-1,
    .display-2,
    .display-3,
    .display-4,
    .cd-hero-title,
    .prov-hero-title,
    .ins-hero2-title,
    .ins-section-title,
    .referral-hero-title,
    .about-hero-title,
    .faq-title,
    .section-title,
    .hero-main-title,
    .wm-section-title,
    .blog-hero-title,
    .blog-articles-title,
    .support-title,
    .crisis-title {
        font-size: 35px !important;
    }
}

/* ============================================================
   Condition Page Sections: Remove Min-Height on Tablet & Mobile
   ============================================================ */
@media (max-width: 991px) {

    .condition-detail-page section,
    .condition-hero-section,
    .condition-symptoms-section,
    .condition-differences-section,
    .condition-hormones-section,
    .condition-help-section,
    .condition-journey-section,
    .condition-faqs-section,
    .condition-footer-cta-section {
        min-height: auto !important;
    }
}

/* ============================================================
   Footer Adjustments: Mobile margin fixes
   ============================================================ */
@media (max-width: 767px) {

    .site-footer .col-lg-4.px-lg-5,
    .site-footer .col-lg-4.mb-5.mb-lg-0.px-lg-5 {
        margin-bottom: 0 !important;
    }
}

/* ============================================================
   Blog Page Sections: Responsive Styles
   ============================================================ */
@media (max-width: 991px) {
    .blog-hero-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .blog-hero-section .row {
        flex-direction: column-reverse !important;
        text-align: center !important;
    }

    .blog-hero-section .hero-desc {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .blog-hero-section .hero-image-container {
        margin-bottom: 40px !important;
        margin-top: 0 !important;
        float: none !important;
        display: inline-block !important;
    }

    .blog-hero-section .hero-image-frame,
    .blog-hero-section .hero-image-border {
        margin: 0 auto !important;
        float: none !important;
        max-width: 320px !important;
        height: 420px !important;
        border-radius: 160px 160px 0 0 !important;
    }

    .blog-hero-section .hero-image-border {
        top: -10px !important;
        right: -10px !important;
    }

    .hero-topic-pills-stack .blog-topic-pill:nth-child(1) {
        right: -10px !important;
        top: 10% !important;
    }

    .hero-topic-pills-stack .blog-topic-pill:nth-child(2) {
        right: -20px !important;
        top: 32% !important;
    }

    .hero-topic-pills-stack .blog-topic-pill:nth-child(3) {
        right: -15px !important;
        top: 54% !important;
    }

    .hero-topic-pills-stack .blog-topic-pill:nth-child(4) {
        right: -5px !important;
        top: 76% !important;
    }

    .blog-articles-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .blog-article-card {
        flex-direction: column !important;
    }

    .blog-article-card .card-image-wrapper {
        width: 100% !important;
        padding: 16px 16px 0 16px !important;
    }

    .blog-article-card .card-image-arched {
        width: 100% !important;
        height: 220px !important;
        border-radius: 12px 12px 0 0 !important;
    }

    .blog-support-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .blog-support-section .row {
        row-gap: 40px !important;
    }

    .support-steps-list {
        padding-left: 0 !important;
    }

    .blog-crisis-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .blog-crisis-section .row {
        row-gap: 40px !important;
    }

    .blog-crisis-section .crisis-image-frame,
    .blog-crisis-section .crisis-image-border {
        margin: 0 auto !important;
        float: none !important;
    }
}

@media (max-width: 767px) {
    .hero-topic-pills-stack .blog-topic-pill .blog-pill-name {
        font-size: 0.75rem !important;
    }

    .hero-topic-pills-stack .blog-topic-pill {
        padding: 6px 12px !important;
    }

    .hero-topic-pills-stack .blog-pill-icon-wrap {
        width: 24px !important;
        height: 24px !important;
    }

    .hero-topic-pills-stack .blog-pill-icon-wrap svg {
        width: 14px !important;
        height: 14px !important;
    }

    .steps-connector-line {
        left: 19px !important;
    }

    .step-badge-wrap {
        width: 40px !important;
        height: 40px !important;
    }

    .step-number {
        font-size: 0.8rem !important;
    }

    .crisis-alert-banner {
        flex-direction: column !important;
        text-align: center !important;
        padding: 24px !important;
    }

    .crisis-alert-banner .alert-icon-wrap {
        margin: 0 auto !important;
    }

    /* Set tagline flex alignment to match parent's text alignment below 767px mobile view */
    .tagline,
    .section-tagline,
    .ins-verify-tagline,
    .scope-tagline-container,
    .diff-tagline-container {
        justify-content: flex-start !important;
    }

    .text-center .tagline,
    .text-center .section-tagline,
    .text-center .ins-verify-tagline,
    .text-center .scope-tagline-container,
    .text-center .diff-tagline-container,
    .text-sm-center .tagline,
    .text-sm-center .section-tagline,
    [style*="text-align: center"] .tagline,
    [style*="text-align:center"] .tagline,
    [style*="text-align: center"] .section-tagline,
    [style*="text-align:center"] .section-tagline,
    .about-new-hero .tagline,
    .prov-hero-section .tagline,
    .blog-hero-section .tagline,
    .condition-hero-section .tagline,
    .condition-symptoms-section .tagline,
    .condition-help-section .tagline,
    .condition-footer-cta-section .tagline {
        justify-content: center !important;
    }

    /* Stack 2-button containers vertically and align center on mobile below 767px */
    .d-flex:has(> .btn-wm-primary):has(> .btn-wm-secondary),
    .d-flex:has(> .btn-wm-primary):has(> .btn-wm-outline),
    .d-flex:has(> .btn-wm-primary):has(> .btn-wm-contact-us),
    .d-flex:has(> .btn-wm-primary):has(> .btn),
    .crisis-buttons-wrap {
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 12px !important;
    }

    /* Set buttons in 2-button containers to have equal width and center text */
    .d-flex:has(> .btn-wm-primary):has(> .btn-wm-secondary)>a,
    .d-flex:has(> .btn-wm-primary):has(> .btn-wm-secondary)>button,
    .d-flex:has(> .btn-wm-primary):has(> .btn-wm-outline)>a,
    .d-flex:has(> .btn-wm-primary):has(> .btn-wm-outline)>button,
    .d-flex:has(> .btn-wm-primary):has(> .btn-wm-contact-us)>a,
    .d-flex:has(> .btn-wm-primary):has(> .btn-wm-contact-us)>button,
    .d-flex:has(> .btn-wm-primary):has(> .btn)>a,
    .d-flex:has(> .btn-wm-primary):has(> .btn)>button,
    .crisis-buttons-wrap>a,
    .crisis-buttons-wrap>button {
        width: 100% !important;
        max-width: 320px !important;
        justify-content: center !important;
        text-align: center !important;
        display: inline-flex !important;
    }

    /* Primary buttons mobile font-size and letter-spacing override */
    .btn-wm-primary,
    .conditions-new-page-wrapper .btn-wm-primary,
    .blog-page-wrapper .btn-wm-primary,
    .provider-page-wrapper .btn-wm-primary,
    .site-footer .btn-wm-primary {
        font-size: 0.88rem !important;
        letter-spacing: 0 !important;
        letter-spacing: normal !important;
    }

    /* Meet Provider Badges - Mobile Overrides */
    .meet-provider-section .provider-badges {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .meet-provider-section .provider-badges-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .meet-provider-section .provider-badge {
        display: flex !important;
        flex: 1 1 0px !important;
        min-width: 0 !important;
        height: 34px !important;
        padding: 0 4px !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 30px !important;
        font-size: clamp(0.58rem, 2.2vw, 0.72rem) !important;
        font-weight: 500 !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        text-align: center !important;
        line-height: 1.1 !important;
    }

    .meet-provider-section .badge-icon {
        margin-right: 4px !important;
        width: 14px !important;
        height: 14px !important;
    }

    .meet-provider-section .badge-icon svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* ============================================================
   14. MOBILE CAROUSEL AND PAGINATION OVERRIDES
   ============================================================ */

/* Swiper Pagination Mobile Overrides */
@media (max-width: 767px) {

    .treat-pagination,
    .testi-pagination,
    .serve-pagination,
    .choose-pagination {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        margin-top: 30px !important;
        margin-bottom: 10px !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 99 !important;
    }

    .treat-pagination .swiper-pagination-bullet,
    .testi-pagination .swiper-pagination-bullet,
    .serve-pagination .swiper-pagination-bullet,
    .choose-pagination .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
        background: #3C867C !important;
        opacity: 0.3 !important;
        margin: 0 6px !important;
        display: inline-block !important;
        border-radius: 50% !important;
        transition: all 0.3s ease !important;
    }

    .treat-pagination .swiper-pagination-bullet-active,
    .testi-pagination .swiper-pagination-bullet-active,
    .serve-pagination .swiper-pagination-bullet-active,
    .choose-pagination .swiper-pagination-bullet-active {
        opacity: 1 !important;
        background: #3C867C !important;
        width: 24px !important;
        border-radius: 4px !important;
    }

    /* Serve Swiper Mobile specific adjustments */
    .serve-swiper {
        overflow: hidden !important;
        padding-bottom: 20px !important;
        margin-top: 30px !important;
    }

    .serve-swiper .swiper-slide {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 10px !important;
    }

    /* Override large spacing and flex wrap on who-we-serve row */
    #who-we-serve .swiper-wrapper {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* How It Works Mobile Card Design */
    .how-steps-box {
        text-align: left !important;
        padding: 16px 20px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
        margin-bottom: 30px !important;
        flex-direction: column !important;
    }

    .how-step-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        margin-bottom: 0 !important;
        padding: 16px 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-right: none !important;
    }

    .how-step-item:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    .how-step-item .step-icon {
        margin: 0 16px 0 0 !important;
        width: 56px !important;
        height: 56px !important;
        flex-shrink: 0 !important;
    }

    .how-step-item .step-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .how-step-item h4 {
        font-size: 1.05rem !important;
        font-weight: 600 !important;
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
    }

    .how-step-item h4 br {
        display: inline !important;
        content: " " !important;
    }

    .how-step-item p {
        font-size: 0.82rem !important;
        line-height: 1.45 !important;
        color: #64748b !important;
    }

    /* Choose Swiper Mobile specific adjustments */
    .choose-swiper {
        overflow: hidden !important;
        padding-bottom: 20px !important;
        margin-top: 30px !important;
        width: 100% !important;
    }

    .choose-swiper .swiper-slide {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 20px 16px !important;
        background-color: #ffffff !important;
        border-radius: 24px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        margin-bottom: 0 !important;
        position: relative !important;
    }

    .choose-swiper .timeline-number-wrapper {
        width: 0 !important;
        height: 0 !important;
        position: static !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .choose-swiper .number-circle {
        position: absolute !important;
        top: 14px !important;
        left: 10px !important;
        width: 26px !important;
        height: 26px !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        background-color: #72A59F !important;
        color: #ffffff !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
        margin: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    }

    .choose-swiper .timeline-content-icon-wrap {
        width: 100% !important;
        display: flex !important;
        flex-direction: row-reverse !important;
        justify-content: flex-end !important;
        align-items: center !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    .choose-swiper .timeline-text {
        padding-right: 0 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .choose-swiper .timeline-text h4 {
        font-size: 1.15rem !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
        color: #2E3131 !important;
    }

    .choose-swiper .timeline-text p,
    .choose-swiper .timeline-text .mb-0 {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        color: var(--wm-body) !important;
    }

    .choose-swiper .custom-icon-box {
        margin: 0 16px 0 0 !important;
        width: 68px !important;
        height: 68px !important;
        position: relative !important;
        flex-shrink: 0 !important;
    }

    .choose-swiper .custom-icon-box-circle {
        width: 68px !important;
        height: 68px !important;
        border-radius: 50% !important;
    }

    .choose-swiper .custom-icon-box img {
        width: 48px !important;
        height: 48px !important;
    }
}

/* Serve & Choose Swiper Desktop Grid Layout */
@media (min-width: 768px) {
    .serve-swiper {
        overflow: visible !important;
    }

    .serve-swiper .swiper-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        width: calc(100% + 1.5rem) !important;
        margin-left: -0.75rem !important;
        margin-right: -0.75rem !important;
        transform: none !important;
        padding: 48px 24px 0 !important;
    }

    .serve-swiper .swiper-slide {
        width: 33.333% !important;
        padding: 0.75rem !important;
        flex: 0 0 auto !important;
        height: auto !important;
        margin-bottom: 0 !important;
    }

    .serve-pagination {
        display: none !important;
    }

    .choose-swiper {
        overflow: visible !important;
    }

    .choose-swiper .swiper-wrapper {
        display: block !important;
        transform: none !important;
    }

    .choose-swiper .swiper-slide {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 24px !important;
    }

    .choose-pagination {
        display: none !important;
    }
}

/* ============================================================
   15. INSURANCE PAY SECTION - MOBILE OVERRIDES
   ============================================================ */
@media (max-width: 767px) {

    /* Image container: relative so card can overlay */
    .insurance-pay-section .insurance-image-wrap {
        margin-right: 0 !important;
        margin-top: 20px !important;
        position: relative !important;
        border-radius: 30px !important;
        overflow: visible !important;
    }

    /* Main image: reduced height, full width, less radius */
    .insurance-pay-section .insurance-image-wrap > img.img-fluid {
        border-radius: 30px !important;
        width: 100% !important;
        height: 220px !important;
        object-fit: cover !important;
        object-position: top center !important;
        display: block !important;
    }

    /* Self-pay card: overlap bottom of image */
    .insurance-pay-section .self-pay-card {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: 0 !important;
        margin: -40px auto 0 auto !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 20px 20px 14px !important;
        border-radius: 24px !important;
        border: none !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
        z-index: 10 !important;
        display: block !important;
    }

    /* Title inside self-pay card */
    .insurance-pay-section .self-pay-title {
        font-size: 1.2rem !important;
        margin-bottom: 14px !important;
        text-align: left !important;
    }

    /* Rate rows */
    .insurance-pay-section .rate-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-direction: row !important;
        margin-bottom: 6px !important;
        padding-bottom: 10px !important;
    }

    .insurance-pay-section .rate-item .time {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
    }

    .insurance-pay-section .rate-item .desc {
        font-size: 0.7rem !important;
        opacity: 0.75 !important;
    }

    .insurance-pay-section .rate-item .price {
        font-size: 1.4rem !important;
        font-weight: 700 !important;
    }

    /* Sliding scale note */
    .insurance-pay-section .sliding-scale {
        font-size: 0.72rem !important;
        text-align: center !important;
        margin-top: 10px !important;
        opacity: 0.9 !important;
    }

    /* ---- RIGHT COLUMN: Accepted Insurance Plans ---- */

    /* Right wrap: white card, centered, flex column with reordering */
    .insurance-pay-section .insurance-right-wrap {
        margin-top: 24px !important;
        align-items: center !important;
        text-align: center !important;
        padding: 28px 20px 24px !important;
        background: #ffffff !important;
        border-radius: 24px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07) !important;
    }

    /* Reorder children on mobile: title (1) → desc (2) → pills (3) → button (4) */
    .insurance-pay-section .insurance-right-wrap .section-title {
        order: 1 !important;
        font-size: 1.9rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
        letter-spacing: -0.4px !important;
        margin-bottom: 14px !important;
        width: 100% !important;
    }

    .insurance-pay-section .insurance-desc {
        order: 2 !important;
        max-width: 100% !important;
        font-size: 0.9rem !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }

    /* Desktop pills: force hide on mobile */
    .insurance-pay-section .insurance-pills {
        order: 3 !important;
        display: none !important;
    }

    /* Mobile pills: show after description */
    .insurance-pay-section .insurance-pills-mobile {
        order: 3 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-bottom: 24px !important;
        width: 100% !important;
    }

    /* Individual pill: compact size */
    .insurance-pay-section .insurance-pills-mobile .insurance-pill {
        font-size: 0.76rem !important;
        padding: 6px 13px !important;
        white-space: nowrap !important;
    }

    /* Button wrapper: full width */
    .insurance-pay-section .insurance-right-wrap > div:last-child {
        order: 4 !important;
        width: 100% !important;
    }

    /* CTA button: full width, centered */
    .insurance-pay-section .insurance-right-wrap .btn-wm-primary {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        border-radius: 14px !important;
        padding: 16px 24px !important;
        font-size: 1rem !important;
    }
}