/* =====================================================================
   home-cta.css
   Fix: CTA / "Agency Help" section (data-id="0feec84") responsive text.
   The elementor-generated post-6782.css sets px-fixed font sizes that
   overflow on narrow screens.  We override them here with fluid values
   and a mobile breakpoint, keeping desktop exactly as designed.
   ===================================================================== */

/* ── Scoping: only this section on this page ─────────────────────────── */

/* ── 1. Section container: prevent any child from breaking out ────────── */
.elementor-6782 .elementor-element-0feec84 {
    overflow: hidden;
}

.elementor-6782 .elementor-element-0feec84 .elementor-widget-wrap {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ── 2. Main headline (506e610) ──────────────────────────────────────── */
/*
   Desktop value from elementor: 52px.
   clamp(min, preferred, max):
   - min  = 26px  → safe floor on very narrow screens (320px)
   - pref = 5.5vw → scales fluidly with viewport
   - max  = 52px  → clamps at the original desktop value
*/
.elementor-6782 .elementor-element.elementor-element-506e610
    .elementor-heading-title {
    font-size: clamp(26px, 5.5vw, 52px) !important;
    line-height: 1.2 !important;
    /* Prevent long single words from escaping the container */
    overflow-wrap: break-word;
    word-break: break-word;
    /* Improve readability on narrow screens */
    text-wrap: balance;
    /* Keep full-width so centering still works */
    width: 100%;
}

/* ── 3. Phone number / large text (8b1270f) ──────────────────────────── */
/*
   Desktop: 36px.  Scale down to min 20px on narrow screens.
*/
.elementor-6782 .elementor-element.elementor-element-8b1270f {
    font-size: clamp(20px, 4vw, 36px) !important;
    overflow-wrap: break-word;
    word-break: break-word;
}

.elementor-6782 .elementor-element.elementor-element-8b1270f a {
    /* links inside should inherit, not revert to browser default */
    font-size: inherit;
    /* allow very long phone numbers to wrap */
    overflow-wrap: break-word;
    word-break: break-word;
    display: inline-block;
    max-width: 100%;
}

/* ── 4. Description paragraph (73580e5) ──────────────────────────────── */
/*
   Desktop: 20px.  Min 15px on mobile.
*/
.elementor-6782 .elementor-element.elementor-element-73580e5 {
    font-size: clamp(15px, 2.5vw, 20px) !important;
}

.elementor-6782 .elementor-element.elementor-element-73580e5
    > .elementor-widget-container {
    padding-left: 16px;
    padding-right: 16px;
}

/* ── 5. Divider margin fix on narrow screens ─────────────────────────── */
/*
   The divider has margin: 0% 47% 0% 47% which collapses to near-zero
   width on mobile.  Keep it sensible.
*/
@media (max-width: 767px) {
    .elementor-6782 .elementor-element.elementor-element-a79b9ff
        > .elementor-widget-container {
        margin-left: 35% !important;
        margin-right: 35% !important;
    }
}

/* ── 6. Hard mobile breakpoint overrides ─────────────────────────────── */
@media (max-width: 767px) {
    /* Section vertical rhythm */
    .elementor-6782 .elementor-element.elementor-element-0feec84 {
        margin-bottom: 40px !important;
    }

    /* Headline */
    .elementor-6782 .elementor-element.elementor-element-506e610
        .elementor-heading-title {
        /* Enforce a hard cap so it never overflows a 360px screen */
        font-size: clamp(22px, 7vw, 36px) !important;
        line-height: 1.25 !important;
    }

    /* Headline widget container margin */
    .elementor-6782 .elementor-element.elementor-element-506e610
        > .elementor-widget-container {
        margin-bottom: 16px !important;
    }

    /* Phone number */
    .elementor-6782 .elementor-element.elementor-element-8b1270f {
        font-size: clamp(18px, 5.5vw, 28px) !important;
    }

    /* Phone widget container bottom margin */
    .elementor-6782 .elementor-element.elementor-element-8b1270f
        > .elementor-widget-container {
        margin-bottom: 24px !important;
    }

    /* Description */
    .elementor-6782 .elementor-element.elementor-element-73580e5 {
        font-size: 15px !important;
    }

    .elementor-6782 .elementor-element.elementor-element-73580e5
        > .elementor-widget-container {
        padding: 16px 16px 8px !important;
    }
}

/* ── 7. Tiny screens (≤ 375px) ───────────────────────────────────────── */
@media (max-width: 375px) {
    .elementor-6782 .elementor-element.elementor-element-506e610
        .elementor-heading-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .elementor-6782 .elementor-element.elementor-element-8b1270f {
        font-size: 18px !important;
    }
}

/* ── 8. RTL support ─────────────────────────────────────────────────── */
/*
   All rules above use text-align: center (inherited from elementor),
   overflow-wrap, and word-break — these work correctly in both directions.
   No physical left/right overrides needed.
*/

/* ── 9. Reduced-motion: no transitions to worry about ───────────────── */