/* Shared artwork only: retain each carousel's size, layout and native controls. */
html body :is(
    .cie-brand-carousel__button,
    .s3i-blog-navigation .s3i-post-prev,
    .s3i-blog-navigation .s3i-post-next,
    .cie-category-trusted-projects__arrow .elementor-button,
    .cie-solution-tablet-nav button[data-cie-solution-dir]
) {
    position: relative;
}

/* These two families originally include the entire green circle inside the SVG.
 * Keep that artwork in the layout and accessibility tree while replacing its paint. */
html body :is(
    .s3i-blog-navigation .s3i-post-prev,
    .s3i-blog-navigation .s3i-post-next,
    .elementor-45359 .elementor-element-aef222c > .elementor-swiper-button-prev,
    .elementor-45359 .elementor-element-aef222c > .elementor-swiper-button-next
) {
    background-color: #a6ce39;
    border-radius: 50%;
}

/* Standardise resting circles without replacing existing hover/focus treatments. */
html body :is(
    .cie-brand-carousel__button,
    .cie-category-trusted-projects__arrow .elementor-button,
    .cie-solution-tablet-nav button[data-cie-solution-dir]
):not(:hover):not(:focus) {
    background-color: #a6ce39 !important;
}

html body :is(
    .cie-brand-carousel__button > span[aria-hidden="true"],
    .s3i-blog-navigation .s3i-post-prev > img,
    .s3i-blog-navigation .s3i-post-next > img,
    .cie-category-trusted-projects__arrow .elementor-button-content-wrapper,
    .cie-solution-tablet-nav button[data-cie-solution-dir] > svg,
    .elementor-45359 .elementor-element-aef222c > .elementor-swiper-button-prev > svg,
    .elementor-45359 .elementor-element-aef222c > .elementor-swiper-button-next > svg
) {
    opacity: 0 !important;
}

html body :is(
    .cie-brand-carousel__button,
    .s3i-blog-navigation .s3i-post-prev,
    .s3i-blog-navigation .s3i-post-next,
    .cie-category-trusted-projects__arrow .elementor-button,
    .cie-solution-tablet-nav button[data-cie-solution-dir],
    .elementor-45359 .elementor-element-aef222c > .elementor-swiper-button-prev,
    .elementor-45359 .elementor-element-aef222c > .elementor-swiper-button-next
)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 11px;
    height: 20px;
    background-color: #292929;
    -webkit-mask: url("../img/project-chevron-left.svg") center / contain no-repeat;
    mask: url("../img/project-chevron-left.svg") center / contain no-repeat;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

html body :is(
    .cie-brand-carousel__button--next,
    .s3i-blog-navigation .s3i-post-next,
    .cie-category-trusted-projects__arrow--next .elementor-button,
    .cie-solution-tablet-nav button[data-cie-solution-dir="next"],
    .elementor-45359 .elementor-element-aef222c > .elementor-swiper-button-next
)::after {
    transform: translate(-50%, -50%) rotate(180deg);
}