/* =====================================================
       ABOUT US SECTION — colors taken from theme-1.svg
       fonts/spacing conventions taken from Medolia theme
    ===================================================== */
    .au-about-sec {
        --au-heading: #1C1C1C;      /* headline / icon-title color from svg */
        --au-text: #525252;         /* body copy color from svg */
        --au-border: #E5E5E5;       /* badge border color from svg */
        --au-green: #6BB408;        /* button color from svg */
        --au-green-dark: #538F00;   /* button hover color from svg */
        --au-icon-bg: #F2FAE6;      /* icon circle background from svg */
        --au-heading-font: "Albert Sans", sans-serif;
        --au-body-font: "Rubik", sans-serif;

        font-family: var(--au-body-font);
        padding: 130px 0 90px;
        overflow: hidden;
    }

    .au-about-sec * {
        box-sizing: border-box;
    }

    .au-container {
        /* width handled centrally in common-style.css */
    }

    /* ---------- Top: badge / heading / paragraph ---------- */
    .au-top {
        max-width: 700px;
        margin-bottom: 60px;
    }

    .au-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 18px;
        border: 1px solid var(--au-border);
        border-radius: 50px;
        font-family: var(--au-heading-font);
        font-size: 14px;
        font-weight: 600;
        color: var(--au-heading);
        margin-bottom: 20px;
    }

    .au-badge span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--au-heading);
        display: inline-block;
    }

    .au-top h2 {
        font-family: var(--au-heading-font);
        font-weight: 700;
        font-size: 38px;
        line-height: 1.2;
        color: var(--au-heading);
        margin: 0 0 20px;
    }

    .au-top p {
        font-family: var(--au-body-font);
        font-size: 16px;
        line-height: 1.7;
        color: var(--au-text);
        margin: 0;
    }

    /* ---------- Main row: image / content / image ---------- */
    .au-row {
        display: grid;
        grid-template-columns: 300px 1fr 300px;
        gap: 40px;
        align-items: stretch;
    }

    /* Left single image */
    .au-gallery-left {
        height: 100%;
    }

    .au-gallery-left img {
        width: 100%;
        height: 100%;
        min-height: 450px;
        object-fit: cover;
        border-radius: 16px;
        display: block;
    }

    /* Right single image - offset upward to match the figma layout */
    .au-gallery-right {
        height: 100%;
        margin-top: -60px;
    }

    .au-gallery-right img {
        width: 100%;
        height: 100%;
        min-height: 480px;
        object-fit: cover;
        border-radius: 16px;
        display: block;
    }

    /* Middle: feature list + button */
    .au-features {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 20px;
    }

    .au-feature {
        display: flex;
        align-items: flex-start;
        gap: 20px;
    }

    .au-feature .au-icon {
        flex: 0 0 70px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: var(--au-icon-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: var(--au-green);
    }

    .au-feature .au-feature-content h4 {
        font-family: var(--au-heading-font);
        font-weight: 700;
        font-size: 18px;
        color: var(--au-heading);
        margin: 0 0 8px;
    }

    .au-feature .au-feature-content p {
        font-family: var(--au-body-font);
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--au-text);
        margin: 0;
    }

    .au-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: var(--au-green);
        color: #ffffff;
        font-family: var(--au-heading-font);
        font-weight: 600;
        font-size: 15px;
        padding: 15px 26px;
        border-radius: 5px;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: background 0.3s ease;
        width: fit-content;
    }

    .au-btn i {
        font-size: 13px;
    }

    .au-btn:hover {
        background: var(--au-green-dark);
        color: #ffffff;
    }

@media (max-width: 1199.98px) {
    .au-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 260px;
        column-gap: 30px;
        row-gap: 28px;
    }
    .au-gallery-left {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 0;
    }
    .au-gallery-right {
        grid-column: 1;
        grid-row: 2;
        margin-top: 0;
    }
    .au-gallery-left img,
    .au-gallery-right img {
        min-height: 100% !important;
        height: 100%;
    }
    .au-content-col {
        grid-column: 2;
        grid-row: 1 / 3;
    }
}

@media (max-width: 767.98px) {
    .au-about-sec {
        padding: 60px 0;
    }
    .au-top h2 {
        font-size: 28px;
    }
    .au-row {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        row-gap: 24px;
    }
    .au-gallery-left,
    .au-gallery-right,
    .au-content-col {
        grid-column: 1;
        grid-row: auto;
    }
    .au-gallery-left img,
    .au-gallery-right img {
        height: auto;
        min-height: 190px;
    }
    .au-features {
        gap: 20px;
        margin-bottom: 24px;
    }
    .au-feature .au-icon {
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
        font-size: 22px;
    }
}

    /* =====================================================
       WHY CHOOSE US SECTION — colors taken from theme-1.svg
       fonts/spacing conventions taken from Medolia theme
    ===================================================== */
    .wcu-sec {
        --wcu-heading: #1C1C1C;       /* headline / icon-title color from svg */
        --wcu-text: #525252;          /* body copy color from svg */
        --wcu-border: #E5E5E5;        /* badge border color from svg */
        --wcu-green: #6BB408;         /* brand green from svg */
        --wcu-green-dark: #538F00;    /* dark green from svg (stat numbers) */
        --wcu-icon-bg: #F2FAE6;       /* icon circle background from svg */
        --wcu-divider: #87BB3F;       /* stats divider color from svg (used at 40% opacity) */
        --wcu-heading-font: "Albert Sans", sans-serif;
        --wcu-body-font: "Rubik", sans-serif;

        font-family: var(--wcu-body-font);
        padding: 130px 0 90px;
        overflow: hidden;
    }

    .wcu-sec * {
        box-sizing: border-box;
    }

    .wcu-container {
        /* width handled centrally in common-style.css */
    }

    /* ---------- Main row: image collage / content ---------- */
    .wcu-row {
        display: grid;
        grid-template-columns: 460px 1fr;
        gap: 70px;
        align-items: center;
        margin-bottom: 90px;
    }

    /* Image collage */
    .wcu-gallery {
        position: relative;
        height: 460px;
    }

    .wcu-gallery img {
        position: absolute;
        border-radius: 16px;
        object-fit: cover;
        display: block;
    }

    .wcu-img-main {
        top: 0;
        right: 0;
        width: 78%;
        height: 72%;
        z-index: 1;
    }

    .wcu-img-sub {
        bottom: 0;
        left: 0;
        width: 58%;
        height: 62%;
        z-index: 2;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    }

    /* Content */
    .wcu-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 18px;
        border: 1px solid var(--wcu-border);
        border-radius: 50px;
        font-family: var(--wcu-heading-font);
        font-size: 14px;
        font-weight: 600;
        color: var(--wcu-heading);
        margin-bottom: 20px;
    }

    .wcu-badge span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--wcu-heading);
        display: inline-block;
    }

    .wcu-content h2 {
        font-family: var(--wcu-heading-font);
        font-weight: 700;
        font-size: 38px;
        line-height: 1.2;
        color: var(--wcu-heading);
        margin: 0 0 20px;
    }

    .wcu-content > p {
        font-family: var(--wcu-body-font);
        font-size: 16px;
        line-height: 1.7;
        color: var(--wcu-text);
        margin: 0 0 36px;
        max-width: 560px;
    }

    /* Feature grid (2 columns) */
    .wcu-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        padding-bottom: 25px;
        margin-bottom: 25px;
        border-bottom: 1px solid #eeeeee;
    }

    .wcu-feature .wcu-icon {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: var(--wcu-icon-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: var(--wcu-green);
        margin-bottom: 18px;
    }

    .wcu-feature h4 {
        font-family: var(--wcu-heading-font);
        font-weight: 700;
        font-size: 18px;
        color: var(--wcu-heading);
        margin: 0 0 8px;
    }

    .wcu-feature p {
        font-family: var(--wcu-body-font);
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--wcu-text);
        margin: 0;
    }

    /* Checklist row (2 columns, aligned under features) */
    .wcu-checklist {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .wcu-check-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .wcu-check-item i {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1.5px solid var(--wcu-green);
        color: var(--wcu-green);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        flex: 0 0 20px;
    }

    .wcu-check-item span {
        font-family: var(--wcu-body-font);
        font-size: 14.5px;
    }

    /* ---------- Stats row ---------- */
    .wcu-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .wcu-stat {
        text-align: center;
        padding: 0 20px;
        border-left: 1px solid rgba(135, 187, 63, 0.4);
    }

    .wcu-stat:first-child {
        border-left: none;
        padding-left: 0;
    }

    .wcu-stat h3 {
        font-family: var(--wcu-heading-font);
        font-weight: 700;
        font-size: 42px;
        margin: 0 0 8px;
    }

    .wcu-stat-star {
        width: 0.55em;
        height: 0.55em;
        vertical-align: 0.12em;
        margin-left: 4px;
        fill: #FFB03B;
    }

    .wcu-stat p {
        font-family: var(--wcu-body-font);
        font-size: 15px;
        color: var(--wcu-heading);
        margin: 0;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 1199.98px) {
        .wcu-sec {
            padding: 100px 0 70px;
        }
    }

    @media (max-width: 991px) {
        .wcu-sec {
            padding: 76px 0 40px;
        }
        .wcu-row {
            grid-template-columns: 1fr;
            margin-bottom: 50px;
        }
        .wcu-gallery {
            width: 100%;
            max-width: 400px;
            height: 340px;
            margin: 0 auto 36px;
        }
        .wcu-content h2 {
            font-size: 32px;
        }
    }

    @media (max-width: 767px) {
        .wcu-sec {
            padding: 56px 0 28px;
        }
        .wcu-row {
            margin-bottom: 36px;
        }
        .wcu-gallery {
            max-width: 320px;
            height: 280px;
            margin: 0 auto 28px;
        }
        .wcu-content h2 {
            font-size: 26px;
        }
        .wcu-content > p {
            font-size: 15px;
        }
        .wcu-features,
        .wcu-checklist {
            grid-template-columns: 1fr;
            gap: 18px;
        }
        .wcu-feature .wcu-icon {
            width: 52px;
            height: 52px;
            font-size: 20px;
        }
        .wcu-stats {
            grid-template-columns: repeat(2, 1fr);
            row-gap: 24px;
        }
        .wcu-stat:nth-child(3) {
            border-left: none;
        }
        .wcu-stat h3 {
            font-size: 28px;
        }
    }

    @media (max-width: 480px) {
        .wcu-sec {
            padding: 44px 0 24px;
        }
    }

    /* =====================================================
       OUR DOCTORS SECTION — colors taken from theme-1.svg
       fonts/spacing conventions taken from Medolia theme
    ===================================================== */
    .od-sec {
        --od-heading: #1C1C1C;      /* name / heading color from svg */
        --od-text: #525252;         /* body / specialty text color from svg */
        --od-border: #E5E5E5;       /* badge border color from svg */
        --od-star: #FFB03B;         /* rating star color from svg */
        --od-green: #538F00;        /* share button color from svg */
        --od-heading-font: "Albert Sans", sans-serif;
        --od-body-font: "Rubik", sans-serif;

        font-family: var(--od-body-font);
        padding: 130px 0 90px;
    }

    .od-sec * {
        box-sizing: border-box;
    }

    .od-container {
        /* width handled centrally in common-style.css */
    }

    /* ---------- Top: badge/heading (left) + paragraph (right) ---------- */
    .od-top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: start;
        margin-bottom: 60px;
    }

    .od-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 18px;
        border: 1px solid var(--od-border);
        border-radius: 50px;
        font-family: var(--od-heading-font);
        font-size: 14px;
        font-weight: 600;
        color: var(--od-heading);
        margin-bottom: 20px;
    }

    .od-badge span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--od-heading);
        display: inline-block;
    }

    .od-top h2 {
        font-family: var(--od-heading-font);
        font-weight: 700;
        font-size: 38px;
        line-height: 1.2;
        color: var(--od-heading);
        margin: 0;
    }

    .od-top .od-desc {
        font-family: var(--od-body-font);
        font-size: 16px;
        line-height: 1.7;
        color: var(--od-text);
        margin: 0;
        padding-top: 14px;
    }

    /* ---------- Doctors grid ---------- */
    .od-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }

    .od-card {
        position: relative;
    }

    .od-photo-wrap {
        position: relative;
        background: #ffffff;
        border-radius: 20px;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .od-photo-wrap img {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        display: block;
    }

    .od-rating {
        position: absolute;
        top: 16px;
        left: 16px;
        display: flex;
        align-items: center;
        gap: 6px;
        background: #ffffff;
        padding: 6px 12px;
        border-radius: 50px;
        font-family: var(--od-heading-font);
        font-size: 14px;
        font-weight: 600;
        color: var(--od-heading);
    }

    .od-rating i {
        color: var(--od-star);
        font-size: 13px;
    }

    .od-share {
        position: absolute;
        bottom: 16px;
        right: 16px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--od-green);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        border: none;
        cursor: pointer;
    }

    .od-card h4 {
        font-family: var(--od-heading-font);
        font-weight: 700;
        font-size: 18px;
        color: var(--od-heading);
        margin: 0 0 4px;
    }

    .od-card p {
        font-family: var(--od-body-font);
        font-size: 14.5px;
        color: var(--od-text);
        margin: 0;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 1199.98px) {
        .od-sec {
            padding: 100px 0 70px;
        }
    }

    @media (max-width: 991px) {
        .od-sec {
            padding: 76px 0 40px;
        }
        .od-top {
            grid-template-columns: 1fr;
            gap: 16px;
            margin-bottom: 40px;
        }
        .od-top h2 {
            font-size: 32px;
        }
        .od-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 22px;
        }
    }

    @media (max-width: 767.98px) {
        .od-sec {
            padding: 56px 0 28px;
        }
    }

    @media (max-width: 480px) {
        .od-sec {
            padding: 44px 0 24px;
        }
    }

    @media (max-width: 575px) {
        .od-top {
            margin-bottom: 30px;
        }
        .od-top h2 {
            font-size: 26px;
        }
        .od-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }
        .od-photo-wrap {
            border-radius: 14px;
            margin-bottom: 12px;
        }
        .od-card h4 {
            font-size: 15px;
        }
        .od-card p {
            font-size: 12.5px;
        }
        .od-rating {
            padding: 4px 9px;
            font-size: 11px;
            top: 10px;
            left: 10px;
        }
        .od-share {
            width: 32px;
            height: 32px;
            font-size: 12px;
            bottom: 10px;
            right: 10px;
        }
    }

    /* =====================================================
       OUR TESTIMONIALS SECTION — colors taken from theme-1.svg
       fonts/spacing conventions taken from Medolia theme
    ===================================================== */
    .ts-sec {
        --ts-heading: #1C1C1C;      /* headline color from svg */
        --ts-text: #525252;         /* body copy color from svg */
        --ts-border: #E5E5E5;       /* badge border color from svg */
        --ts-dark: #162600;         /* dark green badge card from svg */
        --ts-star: #FFB03B;         /* rating star color from svg */
        --ts-quote: #C7C7C7;        /* quote icon color */
        --ts-heading-font: "Albert Sans", sans-serif;
        --ts-body-font: "Rubik", sans-serif;

        font-family: var(--ts-body-font);
        padding: 130px 0 90px;
    }

    .ts-sec * {
        box-sizing: border-box;
    }

    .ts-container {
        /* width handled centrally in common-style.css */
    }

    .ts-row {
        display: grid;
        grid-template-columns: 1fr 460px;
        gap: 80px;
        align-items: center;
    }

    /* Content on the left, image on the right (desktop only — the HTML
       order stays image-then-content so mobile stacking is unaffected). */
    .ts-media {
        order: 2;
    }
    .ts-content {
        order: 1;
    }

    /* ---------- Left: image + floating review badge ---------- */
    .ts-media {
        position: relative;
    }

    .ts-media img {
        width: 100%;
        height: 520px;
        object-fit: cover;
        border-radius: 20px;
        display: block;
    }

    .ts-review-card {
        position: absolute;
        bottom: 24px;
        left: -24px;
        background: var(--ts-dark);
        border-radius: 16px;
        padding: 18px 28px;
        text-align: center;
    }

    .ts-review-card h5 {
        font-family: var(--ts-heading-font);
        font-weight: 700;
        font-size: 18px;
        color: #ffffff;
        margin: 0 0 8px;
        white-space: nowrap;
    }

    .ts-review-card .ts-stars {
        display: flex;
        justify-content: center;
    }

    /* ---------- Right: content ---------- */
    .ts-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 18px;
        border: 1px solid var(--ts-border);
        border-radius: 50px;
        font-family: var(--ts-heading-font);
        font-size: 14px;
        font-weight: 600;
        color: var(--ts-heading);
        margin-bottom: 20px;
    }

    .ts-badge span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--ts-heading);
        display: inline-block;
    }

    .ts-content h2 {
        font-family: var(--ts-heading-font);
        font-weight: 700;
        font-size: 38px;
        line-height: 1.2;
        color: var(--ts-heading);
        margin: 0 0 30px;
    }

    .ts-top-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .ts-stars {
        display: flex;
        align-items: center;
    }

    .ts-star-svg {
        width: 15px;
        height: 15px;
        fill: var(--ts-star);
        margin-right: 2px;
    }

    .ts-review-card .ts-star-svg {
        width: 13px;
        height: 13px;
    }

    .ts-quote-icon {
        width: 34px;
        height: 26px;
        fill: var(--ts-quote);
        flex: 0 0 auto;
    }

    /* ---------- Rotating slide area ---------- */
    .ts-slide-wrap {
        position: relative;
        overflow: hidden;
    }

    .ts-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        transform: translateX(50px);
        transition: opacity 0.55s ease, transform 0.55s ease;
        pointer-events: none;
    }

    .ts-slide.leaving {
        opacity: 0;
        transform: translateX(-50px);
        transition: opacity 0.55s ease, transform 0.55s ease;
    }

    .ts-slide.active {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }

    .ts-slide p {
        font-family: var(--ts-body-font);
        font-size: 16px;
        line-height: 1.7;
        color: var(--ts-text);
    }

    .ts-author {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 26px 0;
    }

    .ts-author img {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        object-fit: cover;
    }

    .ts-author h5 {
        font-family: var(--ts-heading-font);
        font-weight: 700;
        font-size: 16px;
        color: var(--ts-heading);
        margin: 0 0 2px;
    }

    .ts-author span {
        font-family: var(--ts-body-font);
        font-size: 14px;
        color: var(--ts-text);
    }

    /* ---------- Dots ---------- */
    .ts-dots {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .ts-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #1C1C1C;
        border: none;
        cursor: pointer;
        padding: 0;
        position: relative;
        opacity: 0.35;
    }

    .ts-dot.active {
        opacity: 1;
    }

    .ts-dot.active::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        transform: translate(-50%, -50%);
        border: 1px solid #1C1C1C;
        border-radius: 50%;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 1199.98px) {
        .ts-sec {
            padding: 100px 0 70px;
        }
    }

    @media (max-width: 991px) {
        .ts-sec {
            padding: 76px 0 40px;
        }
        .ts-row {
            grid-template-columns: 1fr;
            gap: 32px;
        }
        .ts-media {
            order: 0;
            max-width: 400px;
            margin: 0 auto 20px;
        }
        .ts-content {
            order: 0;
        }
        .ts-media img {
            height: 360px;
        }
        .ts-review-card {
            left: 12px;
        }
        .ts-content h2 {
            font-size: 32px;
        }
    }

    @media (max-width: 767.98px) {
        .ts-sec {
            padding: 56px 0 28px;
        }
    }

    @media (max-width: 480px) {
        .ts-sec {
            padding: 44px 0 24px;
        }
    }

    @media (max-width: 575px) {
        .ts-media {
            max-width: 300px;
        }
        .ts-media img {
            height: 280px;
            border-radius: 14px;
        }
        .ts-review-card {
            padding: 12px 18px;
            bottom: 14px;
        }
        .ts-review-card h5 {
            font-size: 14px;
        }
        .ts-content h2 {
            font-size: 26px;
            margin-bottom: 18px;
        }
        .ts-author {
            margin: 18px 0;
        }
    }

    /* =====================================================
       INSURANCE SECTION — colors taken from theme-1.svg
       fonts/spacing conventions taken from Medolia theme
    ===================================================== */
    .ins-sec {
        --ins-card-bg: #F7FCF0;       /* logo card background from svg */
        --ins-border: rgba(255, 255, 255, 0.25); /* badge border, lightened for dark bg */
        --ins-white: #ffffff;
        --ins-heading-font: "Albert Sans", sans-serif;
        --ins-body-font: "Rubik", sans-serif;

        font-family: var(--ins-body-font);
        padding: 130px 0 90px;
        text-align: center;
        overflow: hidden;
    }

    .ins-sec * {
        box-sizing: border-box;
    }

    .ins-container {
        /* width handled centrally in common-style.css */
    }

    .ins-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 18px;
        border: 1px solid var(--ins-border);
        border-radius: 50px;
        font-family: var(--ins-heading-font);
        font-size: 14px;
        font-weight: 600;
        color: var(--ins-white);
        margin-bottom: 20px;
    }

    .ins-badge span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--ins-white);
        display: inline-block;
    }

    .ins-sec h2 {
        font-family: var(--ins-heading-font);
        font-weight: 700;
        font-size: 38px;
        line-height: 1.2;
        color: var(--ins-white);
        margin: 0 0 50px;
    }

        /* Insurance Section */

    #ins-light .ins-badge {
        border-color: var(--border-color) !important;
        background: var(--white-color) !important;
        color: var(--heading-color) !important;
    }

    #ins-light .ins-badge span {
        background: var(--heading-color) !important;
    }

    #ins-light h2 {
        color: var(--heading-color) !important;
    }

    #ins-light .ins-card {
        background: var(--icon-bg-color) !important;
    }

    #ins-light .ins-card span {
        color: var(--heading-color) !important;
    }

    /* ---------- Marquee ---------- */
    .ins-marquee-wrap {
        position: relative;
        width: 100%;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    }

    .ins-marquee-track {
        display: flex;
        align-items: center;
        gap: 24px;
        width: max-content;
        animation: ins-scroll 30s linear infinite;
    }

    .ins-marquee-wrap:hover .ins-marquee-track {
        animation-play-state: paused;
    }

    .ins-card {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(6px, 1vw, 10px);
        background: var(--ins-card-bg);
        border-radius: 20px;
        /* Fluid sizing tuned to scale smoothly across the full viewport
           range (320px–1920px) instead of flattening out partway down,
           so the padding keeps shrinking gradually all the way to
           small phones. */
        padding: clamp(10px, 1vw + 7px, 26px) clamp(16px, 1.5vw + 11px, 40px);
        min-width: clamp(130px, 5.6vw + 112px, 220px);
        height: clamp(56px, 1.5vw + 51px, 80px);
    }

    .ins-card span {
        font-family: var(--ins-heading-font);
        font-weight: 700;
        font-size: clamp(13px, 0.45vw + 11.5px, 20px);
        color: #1C1C1C;
        white-space: nowrap;
    }

    @keyframes ins-scroll {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-50%);
        }
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 1199.98px) {
        .ins-sec {
            padding: 100px 0 70px;
        }
    }

    @media (max-width: 991px) {
        .ins-sec {
            padding: 76px 0 40px;
        }
        .ins-sec h2 {
            font-size: 32px;
            margin-bottom: 36px;
        }
    }

    @media (max-width: 767px) {
        .ins-sec {
            padding: 56px 0 28px;
        }
        .ins-sec h2 {
            font-size: 24px;
            margin-bottom: 28px;
        }
    }

    @media (max-width: 480px) {
        .ins-sec {
            padding: 44px 0 24px;
        }
    }

    /* =====================================================
       CONTACT US SECTION — colors taken from theme-1.svg
       fonts/spacing conventions taken from Medolia theme
    ===================================================== */
    .ct-sec {
        --ct-heading: #1C1C1C;      /* unified with global --heading-color (was #162600, off-brand) */
        --ct-form-heading: #1C1C1C;  /* unified with global --heading-color (was navy #0C193E, off-brand) */
        --ct-text: #525252;         /* body copy color from svg */
        --ct-label: #1C1C1C;        /* info label color from svg */
        --ct-border: #E5E5E5;       /* badge / input border color from svg */
        --ct-icon-bg: #F2FAE6;      /* unified with global --icon-bg-color (was #E7F5D4, off-brand) */
        --ct-dark-circle: #162600;  /* social icon circle background from svg */
        --ct-green: #6BB408;        /* button color from svg */
        --ct-green-dark: #538F00;   /* button hover color from svg */
        --ct-error: #D64545;
        --ct-heading-font: "Albert Sans", sans-serif;
        --ct-body-font: "Rubik", sans-serif;

        font-family: var(--ct-body-font);
        padding: 130px 0 90px;
    }

    .ct-sec * {
        box-sizing: border-box;
    }

    .ct-container {
        /* width handled centrally in common-style.css */
    }

    .ct-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: start;
    }

    /* ---------- Left column ---------- */
    .ct-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 18px;
        border: 1px solid var(--ct-border);
        border-radius: 50px;
        font-family: var(--ct-heading-font);
        font-size: 14px;
        font-weight: 600;
        color: #1C1C1C;
        margin-bottom: 20px;
        background: #ffffff;
    }

    .ct-badge span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #1C1C1C;
        display: inline-block;
    }

    .ct-left h2 {
        font-family: var(--ct-heading-font);
        font-weight: 700;
        font-size: 38px;
        line-height: 1.2;
        color: var(--ct-heading);
        margin: 0 0 40px;
    }

    .ct-info-item {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 22px;
    }

    .ct-info-icon {
        flex: 0 0 50px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: var(--ct-icon-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ct-green);
    }

    .ct-info-icon svg {
        width: 20px;
        height: 20px;
        fill: var(--ct-green);
    }

    .ct-info-text span {
        display: block;
        font-family: var(--ct-body-font);
        font-size: 14px;
        color: var(--ct-text);
        margin-bottom: 2px;
    }

    .ct-info-text a,
    .ct-info-text strong {
        display: block;
        font-family: var(--ct-heading-font);
        font-size: 15.5px;
        font-weight: 700;
        color: #1C1C1C;
        text-decoration: none;
    }

    .ct-info-text a:hover {
        color: var(--ct-green-dark);
    }

    .ct-divider {
        border: none;
        border-top: 1px solid var(--ct-border);
        margin: 30px 0 26px;
    }

    .ct-follow {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .ct-follow span {
        font-family: var(--ct-heading-font);
        font-weight: 700;
        font-size: 15px;
        color: #1C1C1C;
    }

    .ct-socials {
        display: flex;
        gap: 10px;
    }

    .ct-socials a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--ct-dark-circle);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.3s ease;
        color: #edffce;
    }

    .ct-socials a svg {
        width: 15px;
        height: 15px;
        fill: #ffffff;
    }

    .ct-socials a:hover {
        background: var(--ct-green);
    }

    /* ---------- Right column: form card ---------- */
    .ct-form-card {
        background: #ffffff;
        border-radius: 20px;
        padding: 44px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    }

    .ct-form-card h3 {
        font-family: var(--ct-heading-font);
        font-weight: 800;
        font-size: 26px;
        color: var(--ct-form-heading);
        margin: 0 0 26px;
    }

    .ct-field {
        margin-bottom: 18px;
    }

    .ct-field input,
    .ct-field textarea {
        width: 100%;
        border: 1px solid var(--ct-border);
        border-radius: 8px;
        padding: 15px 18px;
        font-family: var(--ct-body-font);
        font-size: 14.5px;
        color: #1C1C1C;
        background: #ffffff;
        transition: border-color 0.3s ease;
    }

    .ct-field input::placeholder,
    .ct-field textarea::placeholder {
        color: #8a8a8a;
    }

    .ct-field textarea {
        min-height: 130px;
        resize: vertical;
    }

    .ct-field input:focus,
    .ct-field textarea:focus {
        outline: none;
        border-color: var(--ct-green);
    }

    .ct-field.has-error input,
    .ct-field.has-error textarea {
        border-color: var(--ct-error);
    }

    .ct-field-error {
        display: none;
        color: var(--ct-error);
        font-size: 12.5px;
        margin-top: 6px;
        font-family: var(--ct-body-font);
    }

    .ct-field.has-error .ct-field-error {
        display: block;
    }

    .ct-submit-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: var(--ct-green);
        color: #ffffff;
        font-family: var(--ct-heading-font);
        font-weight: 700;
        font-size: 18px;
        padding: 15px 34px;
        border-radius: 10px;
        border: none;
        cursor: pointer;
        transition: background 0.3s ease;
    }

    .ct-submit-btn:hover {
        background: var(--ct-green-dark);
    }

    .ct-submit-btn:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .ct-form-message {
        display: none;
        margin-top: 18px;
        padding: 14px 18px;
        border-radius: 8px;
        font-family: var(--ct-body-font);
        font-size: 14px;
    }

    .ct-form-message.success {
        display: block;
        background: #EAF6DA;
        color: #3C6B00;
        border: 1px solid #cfe8a3;
    }

    .ct-form-message.error {
        display: block;
        background: #FBEAEA;
        color: #A5302F;
        border: 1px solid #f1c3c3;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 1199.98px) {
        .ct-sec {
            padding: 100px 0 70px;
        }
    }

    @media (max-width: 991px) {
        .ct-sec {
            padding: 76px 0 40px;
        }
        .ct-row {
            grid-template-columns: 1fr;
            gap: 36px;
        }
        .ct-left h2 {
            font-size: 30px;
        }
        .ct-form-card {
            padding: 32px;
        }
    }

    @media (max-width: 767.98px) {
        .ct-sec {
            padding: 56px 0 28px;
        }
    }

    @media (max-width: 480px) {
        .ct-sec {
            padding: 44px 0 24px;
        }
    }

    @media (max-width: 575px) {
        .ct-left h2 {
            font-size: 24px;
        }
        .ct-divider {
            margin: 24px 0 20px;
        }
        .ct-form-card {
            padding: 22px;
            border-radius: 16px;
        }
        .ct-form-card h3 {
            font-size: 21px;
        }
    }

/* =====================================================
   CTA SECTION — Cost Care
   Uses brand variables defined in common-style.css :root:
   --primary-color, --black-dark-color, --icon-bg-color,
   --heading-font, --body-font
===================================================== */
.cc-cta-sec {
    padding: 130px 0;
}

.cc-cta-card {
    position: relative;
    background-color: var(--black-dark-color, #111D00);
    border-radius: 30px;
    padding: 60px;
    overflow: hidden;
    isolation: isolate;
}

.cc-cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(107, 180, 8, 0.12);
    z-index: -1;
}
.cc-cta-shape.shape-one {
    width: 320px;
    height: 320px;
    top: -140px;
    right: -80px;
}
.cc-cta-shape.shape-two {
    width: 220px;
    height: 220px;
    bottom: -110px;
    left: 10%;
    background: rgba(107, 180, 8, 0.08);
}

.cc-cta-row {
    display: flex;
    align-items: center;
    gap: 50px;
}

.cc-cta-content {
    flex: 1 1 55%;
}

.cc-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--primary-color);
    font-family: var(--heading-font);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 22px;
}

.cc-cta-badge span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-color);
    display: inline-block;
}

.cc-cta-content h2 {
    color: #ffffff;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 38px;
    line-height: 1.2;
    max-width: 480px;
    margin-bottom: 25px;
}

.cc-cta-content p {
    color: #f7ffeb;
    font-family: var(--heading-font);
    font-size: 18px;
    line-height: 1.2;
    max-width: 480px;
    margin-bottom: 30px;
}

.cc-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.cc-cta-buttons .theme-btn.style-one {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cc-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 44px;
    border-radius: 10px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 18px;
    transition: all 0.3s ease;
}

.cc-btn-outline i {
    font-size: 18px;
    color: var(--primary-color);
}

.cc-btn-outline:hover {
    background-color: var(--icon-bg-color);
    border-color: var(--primary-color-dark);
    color: var(--primary-color-dark);
}

.cc-cta-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 44px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 18px;
    transition: all 0.3s ease;
}

.cc-cta-btn-outline i {
    font-size: 18px;
    color: #25D366;
}

.cc-cta-btn-outline:hover {
    background-color: #ffffff12;
    border-color: var(--primary-color);
    color: #ffffff;
}

.cc-cta-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.12);
}

.cc-cta-info {
    flex: 1 1 40%;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.cc-cta-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.cc-cta-icon {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--icon-bg-color, #F2FAE6);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.cc-cta-info-text span {
    display: block;
    color: var(--primary-color);
    font-family: var(--body-font);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.cc-cta-info-text p {
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--body-font);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 2px;
}

/* Phone numbers: on tablet (where cc-cta-row has already stacked into a
   single column and there's plenty of horizontal room again) lay the
   three numbers out side-by-side; drop back to one-per-line on mobile
   where that width isn't available. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .cc-cta-phone-list {
        display: flex;
        flex-wrap: wrap;
        column-gap: 22px;
        row-gap: 4px;
    }
    .cc-cta-phone-list p {
        margin: 0;
    }
}

.cc-cta-info-text p a {
    color: rgba(255, 255, 255, 0.9);
}
.cc-cta-info-text p a:hover {
    color: var(--primary-color);
}

.cc-cta-hours {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 13px !important;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 991.98px) {
    .cc-cta-sec {
        padding: 60px 0;
    }
    .cc-cta-row {
        flex-direction: column;
        align-items: stretch;
        gap: 35px;
    }
    .cc-cta-divider {
        width: 100%;
        height: 1px;
    }
    .cc-cta-content h2 {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .cc-cta-card {
        padding: 40px 24px;
        border-radius: 20px;
    }
    .cc-cta-content h2 {
        font-size: 30px;
    }
    .cc-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .cc-cta-buttons .theme-btn.style-one,
    .cc-cta-btn-outline {
        text-align: center;
        justify-content: center;
    }
}

/* =====================================================
   OUR BENEFITS SECTION — Cost Care (Home 02)
===================================================== */
.ob-sec {
    padding: 100px 0;
}

.ob-row {
    display: flex;
    gap: 60px;
    margin-bottom: 70px;
}

.ob-content {
    flex: 1 1 45%;
}

.ob-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    color: var(--heading-color);
    font-family: var(--body-font);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
}
.ob-badge span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--heading-color);
    display: inline-block;
}

.ob-content h2 {
    font-family: var(--heading-font);
    font-size: 38px;
    line-height: 1.25;
    color: var(--heading-color);
    margin-bottom: 18px;
}

.ob-content > p {
    color: var(--text-color);
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 30px;
    max-width: 440px;
}

.ob-image img {
    width: 100%;
    border-radius: 16px;
    display: block;
}

.ob-list {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.ob-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 30px 0;
    border-bottom: 1px solid var(--border-color);
}
.ob-item:first-child {
    padding-top: 0;
}
.ob-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ob-icon {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--icon-bg-color);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.ob-item-content h4 {
    font-family: var(--heading-font);
    font-size: 18px;
    color: var(--heading-color);
    margin-bottom: 8px;
}

.ob-item-content p {
    font-family: var(--body-font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
}

/* Stats row */
.ob-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 100px;
}

.ob-stat {
    padding-left: 40px;
    border-left: 1px solid var(--border-color);
}
.ob-stat:first-child {
    padding-left: 0;
    border-left: none;
}

.ob-stat h3 {
    font-family: var(--heading-font);
    font-size: 32px;
    color: var(--heading-color);
    margin-bottom: 4px;
}

.ob-stat p {
    font-family: var(--body-font);
    font-size: 14px;
    color: var(--text-color);
    margin: 0;
}

.ob-avatars {
    display: flex;
    margin-bottom: 12px;
}
.ob-avatars li {
    list-style: none;
    margin-left: -12px;
}
.ob-avatars li:first-child {
    margin-left: 0;
}
.ob-avatars img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--white-color);
    display: block;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 991.98px) {
    .ob-row {
        flex-direction: column;
        gap: 40px;
    }
    .ob-content > p {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .ob-sec {
        padding: 70px 0;
    }
    .ob-content h2 {
        font-size: 28px;
    }
    .ob-stats {
        gap: 24px;
    }
    .ob-stat {
        padding-left: 20px;
    }
}

/* =====================================================
   FLUID SCALING LAYER
   Applied last so it wins the cascade over the fixed-px
   breakpoint rules above. Rather than jumping between a
   few fixed sizes at each breakpoint, headings, badges,
   buttons and key images now scale continuously with the
   viewport (clamp: min, fluid preferred, max) so tablet
   and phone sizes always land somewhere proportionate
   instead of feeling like a sudden drop from desktop.
===================================================== */

/* All the small pill "eyebrow" badges across sections share
   this naming pattern: au-badge, wcu-badge, ts-badge, ins-badge,
   ct-badge, od-badge, ob-badge — one rule covers all of them. */
[class$="-badge"] {
    font-size: clamp(12px, 0.5vw + 10.5px, 14px) !important;
    padding: clamp(6px, 0.6vw + 4px, 8px) clamp(12px, 1.4vw + 8px, 18px) !important;
    margin-bottom: clamp(12px, 1.5vw + 6px, 20px) !important;
}

/* Custom section H2 headings (each section owns its own class,
   so no shared suffix — targeted individually) */
.au-top h2,
.wcu-content h2,
.od-top h2,
.ts-content h2,
.ins-sec h2,
.ct-left h2,
.ob-content h2 {
    font-size: clamp(23px, 2.6vw + 12px, 38px) !important;
}

.au-top p,
.wcu-content > p,
.ts-content > p,
.ct-left > p,
.ob-content > p {
    font-size: clamp(14px, 0.4vw + 13px, 16px);
}

/* Hero + page-banner H1s */
.medolia-hero .hero-content h1 {
    font-size: clamp(28px, 4vw + 14px, 56px) !important;
}

.page-banner .page-content h1 {
    font-size: clamp(24px, 3vw + 14px, 44px) !important;
    line-height: 1.25 !important;
}

/* Buttons — primary + both outline variants share the same
   scale so every CTA site-wide shrinks in step together */
.theme-btn {
    font-size: clamp(14px, 0.6vw + 12px, 18px) !important;
    padding: clamp(11px, 0.7vw + 8px, 15px) clamp(22px, 3.5vw + 8px, 44px) !important;
    line-height: 1.3 !important;
}

.cc-btn-outline,
.cc-cta-btn-outline {
    font-size: clamp(14px, 0.6vw + 12px, 18px) !important;
    padding: clamp(9px, 0.6vw + 6px, 10px) clamp(22px, 3.5vw + 8px, 44px) !important;
}

/* Tablet screens: buttons at this width still rendered close to their
   desktop size — nudge them down a bit further here specifically. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .theme-btn {
        font-size: 14px !important;
        padding: 11px 26px !important;
    }
    .cc-btn-outline,
    .cc-cta-btn-outline {
        font-size: 14px !important;
        padding: 9px 26px !important;
    }
}

.cc-btn-outline i,
.cc-cta-btn-outline i {
    font-size: clamp(14px, 0.6vw + 12px, 18px) !important;
}

/* Hero "Call Us Today" — the second CTA next to Book Appointment.
   It isn't a .theme-btn, so it wasn't shrinking in step with it at all;
   scale the icon and label fluidly the same way. */
.medolia-hero .medolia-author-box .author-thumbnail {
    width: clamp(42px, 2.2vw + 30px, 60px) !important;
    margin-right: clamp(8px, 0.6vw + 6px, 10px) !important;
}
.medolia-hero .medolia-author-box .author-thumbnail img {
    width: clamp(42px, 2.2vw + 30px, 60px) !important;
    height: clamp(42px, 2.2vw + 30px, 60px) !important;
}
.medolia-hero .medolia-author-box .author-info span {
    font-size: clamp(13px, 0.4vw + 12px, 15px);
}
.medolia-hero .medolia-author-box .author-info h5 {
    font-size: clamp(15px, 0.8vw + 12px, 20px) !important;
    margin-bottom: clamp(4px, 0.4vw + 2px, 10px) !important;
}

/* Icon circles used across feature lists — shrink gradually
   rather than staying full-size until a breakpoint snaps them.
   These icons sit in a flex row with a fixed flex-basis (e.g. "flex: 0 0
   70px" on .au-icon) set elsewhere; flex-basis wins over width in the
   main axis, so width alone getting clamped left the box's rendered
   width stuck at 70px while height shrank — a visibly oval "circle".
   Setting flex-basis to the same clamp keeps width and height locked
   together so it's always a true circle. */
.au-feature .au-icon,
.wcu-feature .wcu-icon,
.ob-icon {
    flex: 0 0 clamp(48px, 3vw + 32px, 64px) !important;
    width: clamp(48px, 3vw + 32px, 64px) !important;
    height: clamp(48px, 3vw + 32px, 64px) !important;
    aspect-ratio: 1 / 1;
    font-size: clamp(18px, 1vw + 14px, 26px) !important;
}

/* Key photography — fluid heights instead of stepped jumps.
   Only applies at desktop widths (>=1200px) where the two images sit in
   the original 3-column grid side by side. Below that, the two images
   stack in one column (see the 1199.98px query above) with fixed row
   heights + a row-gap between them — this rule used to apply there too
   and its min-height was taller than the row track, pushing the images
   past their row and straight over each other with no visible gap. */
@media (min-width: 1200px) {
    .au-gallery-left img,
    .au-gallery-right img {
        min-height: clamp(200px, 24vw + 60px, 480px) !important;
    }
}

.wcu-gallery {
    height: clamp(240px, 30vw + 60px, 460px) !important;
}

.ts-media img {
    height: clamp(260px, 30vw + 80px, 520px) !important;
}

/* Doctor photos: a fixed aspect-ratio (set on .od-photo-wrap img above)
   now keeps the exact same crop/framing at every screen width, so the
   image scales smoothly instead of "expanding" and re-cropping at each
   breakpoint. Height is intentionally left to aspect-ratio, not fixed. */

.medolia-service-item .thumbnail img {
    height: clamp(160px, 16vw + 90px, 220px) !important;
}

@media (max-width: 575.98px) {
    .wcu-gallery {
        max-width: clamp(260px, 70vw, 320px) !important;
    }
    .ts-media {
        max-width: clamp(260px, 70vw, 300px) !important;
    }
}

/* =====================================================
   SECTION HEADER + BUTTON ROWS
   "Our Dental Services" and "Our Dental Experts" put the
   heading in one column and a CTA button in another,
   side-by-side on desktop. Below tablet, Bootstrap already
   stacks the button under the heading, but it stayed
   right-aligned flush against the text. Switched it to
   left-aligned with breathing room above/below so it reads
   as its own clear next step rather than a leftover.
===================================================== */
@media (max-width: 991.98px) {
    .medolia-services-sec .col-lg-4.d-flex,
    .od-sec .col-lg-4.d-flex {
        justify-content: flex-start !important;
        margin-top: 4px;
        margin-bottom: 36px;
    }
    /* These two rows put a heading in one column and a button in another,
       side-by-side on desktop with align-items:center — which relies on
       the heading's own mb-60 spacing being irrelevant since it's a
       cross-axis sibling. Once the columns stack, that mb-60 becomes a
       real gap directly above the button, on top of the margin-top/bottom
       already added above, making the button feel disconnected from the
       heading. Pull it back in when stacked. */
    .medolia-services-sec .col-lg-8 .section-title.mb-60,
    .od-sec .col-lg-8 .section-title.mb-60 {
        margin-bottom: 20px;
    }
}

@media (max-width: 575.98px) {
    .medolia-services-sec .col-lg-4.d-flex,
    .od-sec .col-lg-4.d-flex {
        margin-bottom: 28px;
    }
}

/* =====================================================
   HIDE DECORATIVE IMAGES ON TABLET/MOBILE
   Why Choose Us, FAQ and Patient Feedback each pair a large
   photo with text content. On tablet/mobile the photo was
   taking significant vertical space; removing it lets the
   text content lead and keeps these sections tighter.
===================================================== */
@media (max-width: 991.98px) {
    .wcu-gallery {
        display: none !important;
    }
    .ts-media {
        display: none !important;
    }
    .medolia-faq-sec .medolia-image-box {
        display: none !important;
    }
    .ts-row,
    .medolia-faq-sec .row {
        justify-content: center;
    }
}

/* Same treatment for Why Choose Us + FAQ in the 992-1366px band: the
   nav now collapses to the hamburger menu there too, freeing up enough
   room that the images could technically fit, but they still crowd the
   content at this width — so keep them hidden through this range as
   well. (Testimonials/.ts-media are left alone here since they weren't
   reported as an issue at this width.) */
@media (min-width: 992px) and (max-width: 1365.98px) {
    .wcu-row {
        grid-template-columns: 1fr;
    }
    .wcu-gallery {
        display: none !important;
    }
    .medolia-faq-sec .medolia-image-box {
        display: none !important;
    }
    .medolia-faq-sec .row {
        justify-content: center;
    }
    /* With the image column hidden, the questions column was left at its
       desktop width (col-xl-7 / col-lg-8, ~58-66%), floating centered in
       the row instead of using the space that opened up. Let it fill the
       full row width so its edges line up with the same container
       margins every other section in this range uses. */
    .medolia-faq-sec .col-xl-7.col-lg-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}