/* Keep both banners in their layout while opacity blends the outgoing image. */
.kp-studio-slides{display:grid}
.kp-studio-slide{grid-area:1 / 1;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .65s ease-in-out,visibility 0s linear .65s}
.kp-studio-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:1;transition:opacity .65s ease-in-out}
.kp-hero-with-form{position:relative;isolation:isolate}
.kp-hero-backgrounds{position:absolute;inset:0;z-index:0;pointer-events:none}
.kp-hero-background{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity .65s ease-in-out}
.kp-hero-background.is-active{opacity:1}
.kp-hero-with-form>.kp-hero-banner,.kp-hero-with-form>.kp-hero-form{position:relative;z-index:1}
.kp-hero-with-form .kp-studio-controls{z-index:2}
.nueva-hero__slide{transition:opacity .65s ease-in-out,visibility 0s linear .65s}
.nueva-hero__slide.is-active{transition:opacity .65s ease-in-out}
@media(prefers-reduced-motion:reduce){.kp-studio-slide,.kp-studio-slide.is-active,.kp-hero-background,.nueva-hero__slide,.nueva-hero__slide.is-active{transition:none}}