/* ── IES CTA Banner Widget ───────────────────────────────────────────── */

.ies-cta-banner {
    background: linear-gradient(89deg, var(--ies-purple, #4D4285) 0%, var(--ies-vibrant-purple, #5D43DE) 70%, var(--ies-light-purple, #A4A2E6) 100%);

    overflow: hidden;
    width: 100%;
}

.ies-cta-banner__inner {
    display: flex;
    align-items: center;
    padding: 0 60px;
    max-width: 1280px;
    margin: 0 auto;
    min-height: 587px;
}

/* ── Full width variant ──────────────────────────────────────────────── */

/*
 * Full-bleed technique: escape the Elementor container's max-width by
 * stretching to 100vw and pulling back with negative margins.
 * This makes the background and image truly viewport-wide regardless of
 * whatever Elementor container wraps the widget.
 *
 * The content column is then re-inset to the 1280px band — the same edge as
 * .header-wrapper / .inner-header (max-width 1280px, centered, no extra
 * padding inside the box). Adding the gutter on top of that centering was
 * pushing the copy 30px inboard of the logo. The gutter is only the floor
 * once the viewport is narrower than 1280px:
 *   max(--ies-site-gutter, (100vw - 1280px) / 2)
 */

.ies-cta-banner--full-width {
    --ies-cta-min-gutter: var(--ies-site-gutter, 30px);
    --ies-cta-content-inset: max(
        var(--ies-cta-min-gutter),
        calc((100vw - var(--ies-site-max-width, 1280px)) / 2)
    );
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    overflow: hidden;
}

.ies-cta-banner--full-width .ies-cta-banner__inner {
    max-width: 100%;
    padding: 0;
}

/* Content column: site content edge, with --ies-site-gutter as the floor */
.ies-cta-banner--full-width .ies-cta-banner__content {
    padding-left: var(--ies-cta-content-inset);
}

/* Image column: bleeds to the right edge — no right padding */
.ies-cta-banner--full-width .ies-cta-banner__media {
    padding-right: 0;
    overflow: hidden;
}

/* Image-left: mirror — image bleeds left, content insets from the right */
.ies-cta-banner--full-width.ies-cta-banner--img-left .ies-cta-banner__content {
    padding-right: var(--ies-cta-content-inset);
}

.ies-cta-banner--full-width.ies-cta-banner--img-left .ies-cta-banner__media {
    padding-left: 0;
}

/* ── Image position variants ─────────────────────────────────────────── */

.ies-cta-banner--img-right .ies-cta-banner__inner {
    flex-direction: row;
}

.ies-cta-banner--img-left .ies-cta-banner__inner {
    flex-direction: row-reverse;
}

/* ── Content column ──────────────────────────────────────────────────── */

.ies-cta-banner__content {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 60px;
    padding-bottom: 60px;
}

.ies-cta-banner__heading {
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    margin: 0;
    font-size: 55px !important;
}

/* ── Button ──────────────────────────────────────────────────────────── */
/*
 * Storefront `.hentry .entry-content a` (0,2,1) underlines body links.
 * Child `.entry-content a` recolors them. Prefix with `.hentry .entry-content a`
 * so module chrome wins on blog/archive pages without !important.
 */

.hentry .entry-content a.ies-cta-banner__btn,
.entry-content a.ies-cta-banner__btn,
.ies-cta-banner a.ies-cta-banner__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ies-font-display, Onest, sans-serif);
    font-size: var(--ies-button-font-size, 16px);
    font-weight: var(--ies-button-font-weight, 600);
    line-height: var(--ies-button-line-height, 1.2);
    padding: var(--ies-button-pad-y, 12px) var(--ies-button-pad-x, 24px);
    border-radius: var(--ies-button-radius, 50px);
    text-decoration: none;
    transition: var(--ies-button-transition, background 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease);
}

.hentry .entry-content a.ies-cta-banner__btn:hover,
.hentry .entry-content a.ies-cta-banner__btn:focus,
.entry-content a.ies-cta-banner__btn:hover,
.entry-content a.ies-cta-banner__btn:focus,
.ies-cta-banner a.ies-cta-banner__btn:hover,
.ies-cta-banner a.ies-cta-banner__btn:focus {
    text-decoration: none;
}

.ies-cta-banner a.ies-cta-banner__btn--outline-white,
.hentry .entry-content a.ies-cta-banner__btn--outline-white {
    border: 2px solid var(--ies-white, #fff);
    color: var(--ies-white, #fff);
    background: transparent;
}

.ies-cta-banner a.ies-cta-banner__btn--outline-white:hover,
.ies-cta-banner a.ies-cta-banner__btn--outline-white:focus,
.hentry .entry-content a.ies-cta-banner__btn--outline-white:hover,
.hentry .entry-content a.ies-cta-banner__btn--outline-white:focus {
    background: transparent;
    border-color: var(--ies-primary-lighter, #D2D1F1);
    color: var(--ies-primary-lighter, #D2D1F1);
}

.ies-cta-banner a.ies-cta-banner__btn--filled-white,
.hentry .entry-content a.ies-cta-banner__btn--filled-white {
    background: var(--ies-button-primary-white-bg, #fff);
    color: var(--ies-button-primary-white-text, #5D43DE);
    border: 2px solid var(--ies-button-primary-white-bg, #fff);
}

.ies-cta-banner a.ies-cta-banner__btn--filled-white:hover,
.ies-cta-banner a.ies-cta-banner__btn--filled-white:focus,
.hentry .entry-content a.ies-cta-banner__btn--filled-white:hover,
.hentry .entry-content a.ies-cta-banner__btn--filled-white:focus {
    background: var(--ies-button-primary-white-hover-bg, #D2D1F1);
    border-color: var(--ies-button-primary-white-hover-bg, #D2D1F1);
    color: var(--ies-button-primary-white-text, #5D43DE);
}

.ies-cta-banner a.ies-cta-banner__btn--filled-primary,
.hentry .entry-content a.ies-cta-banner__btn--filled-primary {
    background: var(--ies-button-primary, #5D43DE);
    color: var(--ies-button-text, #fff);
    border: 2px solid var(--ies-button-primary, #5D43DE);
}

.ies-cta-banner a.ies-cta-banner__btn--filled-primary:hover,
.ies-cta-banner a.ies-cta-banner__btn--filled-primary:focus,
.hentry .entry-content a.ies-cta-banner__btn--filled-primary:hover,
.hentry .entry-content a.ies-cta-banner__btn--filled-primary:focus {
    background: var(--ies-button-hover, #4D4285);
    border-color: var(--ies-button-hover, #4D4285);
    color: var(--ies-button-text-hover, #fff);
}

/* ── Stats row ───────────────────────────────────────────────────────── */

.ies-cta-banner__stats {
    display: flex;
    flex-wrap: nowrap;
    gap: 50px;
    margin-top: 52px;
}

.ies-cta-banner__stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
}

.ies-cta-banner__stat-value {
    font-size: 55px !important;
    font-weight: 600 !important;
    line-height: 1;
    color: #ffffff;
}

.ies-cta-banner__stat-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    max-width: 200px;
}

/* ── Media column ────────────────────────────────────────────────────── */

/*
 * Media stays in the flex flow but stretches to the full banner height.
 * Negative margin cancels the inner's right padding so the column is flush
 * with the banner edge — letting the absolutely-positioned image bleed to it.
 */
.ies-cta-banner__media {
    flex: 1 1 50%;
    position: relative;
    align-self: stretch;
    margin-right: -60px; /* cancels .ies-cta-banner__inner padding-right */
}

.ies-cta-banner--img-left .ies-cta-banner__media {
    margin-right: 0;
    margin-left: -60px; /* cancels left padding when image is on the left */
}

/*
 * image-wrap: takes the absolute offset so both the image and callouts
 * share the same positioning context. The ::before ring sits on the wrap too.
 *
 * Circle (default):
 * - Bottom always bleeds (~100px) so the circle stays cut off underneath.
 * - Full-width: anchor to the site container's right edge (not the viewport).
 *   At normal widths the circle overhangs past the viewport and is clipped;
 *   as the window grows past the container, the circle stays put and more
 *   of it is revealed — no traveling off to the far right with a huge gap.
 */
.ies-cta-banner__image-wrap {
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: min(100%, 667px);
    aspect-ratio: 1 / 1;
}

.ies-cta-banner--img-left .ies-cta-banner__image-wrap {
    right: auto;
    left: -100px;
}

/*
 * Container-anchored side position.
 * Side margin from viewport edge to the 1280px content band:
 *   (100vw - max-width) / 2
 * Subtract a fixed overhang so that at ~1440px (80px side margin) we still
 * get right: -100px. Wider viewports increase the inset from the viewport
 * edge 1:1 with the side margin, keeping the circle locked to the container.
 */
.ies-cta-banner--full-width.ies-cta-banner--image-circle {
    --ies-cta-container-side: max(0px, calc((100vw - var(--ies-site-max-width, 1280px)) / 2));
    --ies-cta-circle-overhang: 180px; /* side margin 80px + 100px bleed at 1440 */
    --ies-cta-side-shift: max(-100px, calc(var(--ies-cta-container-side) - var(--ies-cta-circle-overhang)));
}

.ies-cta-banner--full-width.ies-cta-banner--image-circle .ies-cta-banner__image-wrap {
    right: var(--ies-cta-side-shift);
    bottom: -100px;
}

.ies-cta-banner--full-width.ies-cta-banner--image-circle.ies-cta-banner--img-left .ies-cta-banner__image-wrap {
    right: auto;
    left: var(--ies-cta-side-shift);
}

/*
 * Square full-width: image stays in the 1280px content band (plus an 80px
 * overhang), not absolutely pinned to the viewport. At ~1440px the photo is
 * flush to the viewport edge; wider viewports keep that content relationship
 * and unlock a top gap so the rounded top stays tethered to the bottom.
 */
.ies-cta-banner--full-width.ies-cta-banner--image-square {
    --ies-cta-container-side: max(0px, calc((100vw - var(--ies-site-max-width, 1280px)) / 2));
    --ies-cta-square-overhang: 80px;
    --ies-cta-side-shift: max(0px, calc(var(--ies-cta-container-side) - var(--ies-cta-square-overhang)));
}

/* Purple decorative ring behind the image (circle style only) */
.ies-cta-banner--image-circle .ies-cta-banner__image-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    z-index: 0;
}

/* Image fills the wrap; padding reveals the ring around it */
.ies-cta-banner--image-circle .ies-cta-banner__image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover;
    padding: 20px;
    box-sizing: border-box;
    z-index: 1;
}

/* ── Square image + teal flare ───────────────────────────────────────── */

.ies-cta-banner--image-square {
    --ies-cta-square-size: 583px;
    --ies-cta-square-radius: 20px;
    /* Floor 40px so the photo never hits the top; grows on larger viewports so the square scales down. */
    --ies-cta-square-top-gap: clamp(40px, calc((100vw - 1440px) * 58 / 480), 80px);
}

.ies-cta-banner--image-square .ies-cta-banner__media {
    overflow: hidden;
    margin-right: 0;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding-top: var(--ies-cta-square-top-gap);
}

.ies-cta-banner--image-square.ies-cta-banner--img-left .ies-cta-banner__media {
    align-items: flex-start;
}

.ies-cta-banner--full-width.ies-cta-banner--image-square .ies-cta-banner__media {
    padding-right: var(--ies-cta-side-shift, 0px);
}

.ies-cta-banner--full-width.ies-cta-banner--image-square.ies-cta-banner--img-left .ies-cta-banner__media {
    padding-right: 0;
    padding-left: var(--ies-cta-side-shift, 0px);
}

/*
 * In document flow, bottom-tethered. Sized as a square from leftover media
 * height (banner minus top gap) so it scales down as the gap grows.
 */
.ies-cta-banner--image-square .ies-cta-banner__image-wrap {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    flex: 0 0 auto;
    width: auto;
    height: min(100%, var(--ies-cta-square-size));
    min-height: 0;
    max-width: min(var(--ies-cta-square-size), 100%);
    aspect-ratio: 1 / 1;
    align-self: flex-end;
    border-radius: var(--ies-cta-square-radius) var(--ies-cta-square-radius) 0 0;
    overflow: hidden; /* keep flare inside the photo */
}

.ies-cta-banner--image-square.ies-cta-banner--img-left .ies-cta-banner__image-wrap {
    right: auto;
    left: auto;
    align-self: flex-start;
}

.ies-cta-banner--image-square .ies-cta-banner__image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--ies-cta-square-radius) var(--ies-cta-square-radius) 0 0 !important;
    object-fit: cover;
    padding: 0;
    box-sizing: border-box;
    z-index: 1;
}

/*
 * Teal lens flare — theme teal-flare.png (glow is bottom-right in the asset).
 * Flip for image-right so it sits bottom-left; screen drops the black matte.
 */
.ies-cta-banner--image-square .ies-cta-banner__image-wrap::before {
    content: none;
}

.ies-cta-banner--image-square .ies-cta-banner__image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/wp-content/themes/Storefront-child/assets/images/teal-flare.png') no-repeat bottom right / cover;
    transform: scaleX(-1);
    pointer-events: none;
    z-index: 2;
}

/* Image-left: use the asset's native bottom-right orientation */
.ies-cta-banner--image-square.ies-cta-banner--img-left .ies-cta-banner__image-wrap::after {
    transform: none;
}

/* ── Callout pills ───────────────────────────────────────────────────── */

/* Positioned relative to the image-wrap — always tied to the image */
.ies-cta-banner__callouts {
    position: absolute;
    top: 20%;
    left: -56px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 100;
}

.ies-cta-banner--img-left .ies-cta-banner__callouts {
    left: auto;
    right: -56px;
}

.ies-cta-banner__callout {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    background: #ffffff;
    border-radius: 100px;
    padding: 15px 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}

.ies-cta-banner__callout-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.ies-cta-banner__callout-text {
    font-size: 16px;
    font-weight: 500;
    color: #11294B;
    line-height: 1;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

/*
 * Tablet (still side-by-side): nudge type/media before the banner stacks.
 * Stats stay in a single row through this range.
 */
@media (max-width: 1279px) {
    .ies-cta-banner__heading {
        font-size: 42px !important;
    }

    .ies-cta-banner__stat-value {
        font-size: 48px !important;
    }

    /* Slightly smaller circle so callouts don't crowd the face */
    .ies-cta-banner--image-circle .ies-cta-banner__image-wrap {
        width: min(100%, 560px);
    }

    .ies-cta-banner__callout {
        padding: 15px 16px;
    }

    .ies-cta-banner__callout-text {
        font-size: 16px;
    }
}

/*
 * Narrow tablet: wrap stats to 2-up / 1-down while the L/R banner
 * split is still side-by-side.
 */
@media (max-width: 1024px) {
    .ies-cta-banner__inner {
        padding: 0 40px;
    }

    .ies-cta-banner--full-width {
        --ies-cta-min-gutter: var(--ies-site-gutter, 30px);
    }

    .ies-cta-banner__stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-top: 28px;
        gap: 24px 32px;
    }

    .ies-cta-banner__stat {
        min-width: 0;
    }

    .ies-cta-banner__stat-label {
        max-width: 160px;
    }
}

/*
 * Stack: content above, media below. Side-by-side is too tight here
 * (content loses breathing room; callouts crowd the face).
 */
@media (max-width: 899px) {
    /* Edge-to-edge gradient: remove Elementor column/container horizontal padding */
    .elementor-element:has(.elementor-widget-ies-cta-banner),
    .e-con:has(.elementor-widget-ies-cta-banner) {
        --padding-left: 0px !important;
        --padding-right: 0px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .e-con:has(.elementor-widget-ies-cta-banner) > .e-con-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .elementor-element.elementor-widget-ies-cta-banner {
        --padding-left: 0px !important;
        --padding-right: 0px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .elementor-widget-ies-cta-banner > .elementor-widget-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .ies-cta-banner--full-width {
        --ies-cta-min-gutter: var(--ies-site-gutter, 30px);
        width: 100%;
        left: auto;
        margin-left: 0;
    }

    .ies-cta-banner--full-width .ies-cta-banner__content,
    .ies-cta-banner--full-width.ies-cta-banner--img-left .ies-cta-banner__content {
        padding-left: var(--ies-cta-min-gutter);
        padding-right: var(--ies-cta-min-gutter);
    }

    /* Stacking only — vertical padding stays on the desktop value until 767. */
    .ies-cta-banner--img-right .ies-cta-banner__inner,
    .ies-cta-banner--img-left .ies-cta-banner__inner {
        flex-direction: column;
        align-items: stretch;
        padding-left: 0;
        padding-right: 0;
        min-height: 0;
    }

    .ies-cta-banner__content {
        flex: 0 0 auto;
        width: 100%;
        gap: 24px;
    }

    .ies-cta-banner__stats {
        margin-top: 12px;
        gap: 28px 40px;
    }

    .ies-cta-banner__media {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        margin-right: 0;
        margin-left: 0;
        margin-top: 0;
    }

    /* Square: compact centered photo, not a full-width 1:1 slab */
    .ies-cta-banner--image-square .ies-cta-banner__media,
    .ies-cta-banner--image-square.ies-cta-banner--img-left .ies-cta-banner__media {
        aspect-ratio: auto;
        padding-top: 16px;
        padding-right: 0;
        padding-left: 0;
        align-items: center;
        justify-content: flex-end;
    }

    .ies-cta-banner--full-width .ies-cta-banner__media {
        overflow: visible;
    }

    /*
     * Circle: keep image-wrap in normal flow so media height matches the
     * circle (not a full-viewport square). Negative margins recreate the
     * side/bottom bleed without leaving a gigantic empty gap.
     */
    .ies-cta-banner--image-circle .ies-cta-banner__image-wrap,
    .ies-cta-banner--full-width.ies-cta-banner--image-circle .ies-cta-banner__image-wrap,
    .ies-cta-banner--full-width.ies-cta-banner--image-circle.ies-cta-banner--img-left .ies-cta-banner__image-wrap {
        position: relative;
        width: min(520px, 92vw);
        height: auto;
        max-width: none;
        aspect-ratio: 1 / 1;
        inset: auto;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        margin-left: auto;
        margin-right: -48px;
        margin-bottom: -72px;
        transform: none;
    }

    .ies-cta-banner--image-circle.ies-cta-banner--img-left .ies-cta-banner__image-wrap,
    .ies-cta-banner--full-width.ies-cta-banner--image-circle.ies-cta-banner--img-left .ies-cta-banner__image-wrap {
        margin-left: -48px;
        margin-right: auto;
    }

    .ies-cta-banner--image-circle .ies-cta-banner__image-wrap::before {
        inset: 0;
    }

    .ies-cta-banner--image-circle .ies-cta-banner__image {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none;
    }

    .ies-cta-banner--image-square .ies-cta-banner__media {
        margin-top: 0;
        overflow: hidden;
    }

    .ies-cta-banner--image-square .ies-cta-banner__image-wrap,
    .ies-cta-banner--full-width.ies-cta-banner--image-square .ies-cta-banner__image-wrap,
    .ies-cta-banner--full-width.ies-cta-banner--image-square.ies-cta-banner--img-left .ies-cta-banner__image-wrap {
        position: relative;
        inset: auto;
        width: min(520px, 92vw);
        height: auto;
        flex: 0 0 auto;
        aspect-ratio: 1 / 1;
        max-width: min(520px, 92vw);
        right: auto;
        left: auto;
        bottom: auto;
        align-self: center;
    }

    /* Callouts sit on the circle's left edge without covering the face */
    .ies-cta-banner__callouts,
    .ies-cta-banner--img-left .ies-cta-banner__callouts {
        top: 22%;
        left: -8%;
        right: auto;
        transform: none;
        gap: 12px;
    }
}

@media (max-width: 767px) {
    .ies-cta-banner {
        background: linear-gradient(89deg, var(--ies-purple, #4D4285) 0%, var(--ies-vibrant-purple, #5D43DE) 70%, var(--ies-light-purple, #5D43DE) 100%);
    }

    .ies-cta-banner--full-width {
        --ies-cta-min-gutter: 24px;
    }

    .ies-cta-banner--img-right .ies-cta-banner__inner,
    .ies-cta-banner--img-left .ies-cta-banner__inner {
        padding: 40px 0 0;
    }

    .ies-cta-banner__content {
        padding-top: 0;
        padding-bottom: 24px;
    }

    .ies-cta-banner__heading {
        font-size: 36px !important;
    }

    .ies-cta-banner__stat-value {
        font-size: 44px !important;
    }

    .ies-cta-banner--image-circle .ies-cta-banner__image-wrap,
    .ies-cta-banner--full-width.ies-cta-banner--image-circle .ies-cta-banner__image-wrap {
        --ies-cta-circle-bleed-x: -36px;
        width: min(420px, 88vw);
        margin-right: var(--ies-cta-circle-bleed-x);
        margin-bottom: -56px;
    }

    .ies-cta-banner--image-circle.ies-cta-banner--img-left .ies-cta-banner__image-wrap,
    .ies-cta-banner--full-width.ies-cta-banner--image-circle.ies-cta-banner--img-left .ies-cta-banner__image-wrap {
        margin-left: var(--ies-cta-circle-bleed-x);
        margin-right: auto;
    }

    .ies-cta-banner--image-square .ies-cta-banner__image-wrap,
    .ies-cta-banner--full-width.ies-cta-banner--image-square .ies-cta-banner__image-wrap,
    .ies-cta-banner--full-width.ies-cta-banner--image-square.ies-cta-banner--img-left .ies-cta-banner__image-wrap {
        width: min(420px, 88vw);
        max-width: min(420px, 88vw);
    }

    /*
     * Image stays right-aligned; callouts unpin from the circle and sit on
     * the content left edge (same gutter as heading + stats).
     *
     * Containing block is the image-wrap. wrapOffset from the viewport:
     *   100vw - wrapWidth - marginRight = 100vw - 100% - bleed
     * (bleed is negative, so the circle overhangs the right edge).
     * left = gutter - wrapOffset = 100% - 100vw + gutter + bleed
     */
    .ies-cta-banner__callouts {
        top: 18%;
        left: calc(
            100% - 100vw
            + var(--ies-cta-min-gutter, 24px)
            + var(--ies-cta-circle-bleed-x, 0px)
        );
        right: auto;
        max-width: min(280px, calc(100vw - 2 * var(--ies-cta-min-gutter, 24px)));
    }

    .ies-cta-banner--img-left .ies-cta-banner__callouts {
        left: calc(
            var(--ies-cta-min-gutter, 24px)
            - var(--ies-cta-circle-bleed-x, 0px)
        );
        right: auto;
    }
}

@media (max-width: 440px) {
    .ies-cta-banner--image-circle .ies-cta-banner__image-wrap,
    .ies-cta-banner--full-width.ies-cta-banner--image-circle .ies-cta-banner__image-wrap {
        --ies-cta-circle-bleed-x: -28px;
        width: min(360px, 92vw);
        margin-right: var(--ies-cta-circle-bleed-x);
        margin-bottom: -48px;
    }

    .ies-cta-banner--image-circle.ies-cta-banner--img-left .ies-cta-banner__image-wrap,
    .ies-cta-banner--full-width.ies-cta-banner--image-circle.ies-cta-banner--img-left .ies-cta-banner__image-wrap {
        margin-left: var(--ies-cta-circle-bleed-x);
        margin-right: auto;
    }

    .ies-cta-banner--image-square .ies-cta-banner__image-wrap,
    .ies-cta-banner--full-width.ies-cta-banner--image-square .ies-cta-banner__image-wrap,
    .ies-cta-banner--full-width.ies-cta-banner--image-square.ies-cta-banner--img-left .ies-cta-banner__image-wrap {
        width: min(360px, 92vw);
        max-width: min(360px, 92vw);
    }

    .ies-cta-banner__callouts {
        top: 14%;
        left: calc(
            100% - 100vw
            + var(--ies-cta-min-gutter, 24px)
            + var(--ies-cta-circle-bleed-x, 0px)
        );
        max-width: min(240px, calc(100vw - 2 * var(--ies-cta-min-gutter, 24px)));
    }

    .ies-cta-banner--img-left .ies-cta-banner__callouts {
        left: calc(
            var(--ies-cta-min-gutter, 24px)
            - var(--ies-cta-circle-bleed-x, 0px)
        );
    }

    .ies-cta-banner__callout {
        white-space: normal;
        max-width: 100%;
        padding: 12px 14px;
    }

    .ies-cta-banner__callout-text {
        font-size: 14px;
    }
}