/* Solution hero text stays inside its existing rail at every breakpoint. */
html body.single-solution .elementor-location-single .elementor-element-9e5824d > .leftsection {
    box-sizing: border-box;
    min-width: 0;
    padding-block: var(--cie-section-padding-block-compact, clamp(36px, 3.125vw, 60px)) !important;
    padding-right: clamp(20px, 3.125vw, 60px) !important;
}

html body.single-solution .elementor-location-single .elementor-element-9e5824d > .leftsection > .elementor-widget {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* Shared image frame for every Solution hero. Keep the original images and copy. */
html body.single-solution .elementor-location-single .elementor-element-9e5824d > .elementor-element-8a0cd56 {
    position: relative;
    align-self: stretch;
    aspect-ratio: 960 / 430;
    overflow: hidden;
}

html body.single-solution .elementor-location-single .elementor-element-8a0cd56 > .elementor-element-307f3e9 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

html body.single-solution .elementor-location-single .elementor-element-307f3e9 .elementor-widget-container,
html body.single-solution .elementor-location-single .elementor-element-307f3e9 img {
    display: block;
    width: 100%;
    height: 100%;
}

html body.single-solution .elementor-location-single .elementor-element-307f3e9 img {
    object-fit: cover;
    object-position: center;
}

html body.single-solution .elementor-location-single .elementor-element-9e5824d > .elementor-element-8a0cd56:not(:has(img.wp-image-20957))::after {
    /* The approved Assistive Hearing PNG already contains this fade. */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, #cad1d6 0%, rgba(202, 209, 214, .88) 14%, rgba(202, 209, 214, .45) 45%, rgba(202, 209, 214, .08) 100%);
}

/* Elementor switches these heroes to columns at 880px. Above that, the
 * image must stretch with longer text instead of stopping at the old 400px cap. */
@media (min-width: 880.01px) and (max-width: 1024px) {
    html body.single-solution .elementor-location-single .elementor-element-9e5824d > .elementor-element-8a0cd56 {
        position: relative;
        align-self: stretch !important;
        height: auto !important;
        min-height: clamp(340px, 46.875vw, 400px) !important;
        max-height: none !important;
    }

    html body.single-solution .elementor-location-single .elementor-element-8a0cd56 > .elementor-element-307f3e9 {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100% !important;
    }
}