/* Home hero slider - reproduces the former Slider Revolution module (fullwidth, grid 1360/1024/778/480). */
.pv-hero {
    --gw: var(--gw0); --gh: var(--gh0);
    position: relative; height: var(--gh0); overflow: hidden; background: #e9f3f6;
    /* "fullwidth" layout like the original Slider Revolution module: break out of the boxed
       Elementor section and span the whole browser width (the text grid stays centred). */
    width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.pv-hero-track { position: absolute; inset: 0; }
.pv-hero { --pv-ease: cubic-bezier(.4, 0, .2, 1); --pv-xfade: 1.4s; }
/* Crossfade: the incoming slide fades in on top while the outgoing one stays fully visible underneath */
.pv-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; z-index: 1; transition: opacity var(--pv-xfade) var(--pv-ease), visibility 0s linear var(--pv-xfade); }
.pv-hero-slide.is-active { opacity: 1; visibility: visible; z-index: 3; transition: opacity var(--pv-xfade) var(--pv-ease); }
.pv-hero-slide.is-leaving { opacity: 1; visibility: visible; z-index: 2; transition: none; }
/* "slide" transition: a short glide combined with the fade instead of a full-width wipe */
.pv-hero.is-ready .pv-hero-slide.pv-t-slide.is-active { animation: pvSlideIn var(--pv-xfade) cubic-bezier(.22, .61, .36, 1) both; }
/* Beats Elementor's ".elementor img { height: auto; max-width: 100% }" so the image always fills the slide */
.pv-hero .pv-hero-slide img.pv-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; border-radius: 0; }
.pv-hero-bg { backface-visibility: hidden; }
/* Slow zoom keeps running (same animation) while the slide is leaving, so it never snaps back mid-fade */
.pv-hero.is-ready .pv-kenburns.is-active .pv-hero-bg, .pv-hero.is-ready .pv-kenburns.is-leaving .pv-hero-bg { animation: pvKen 12s cubic-bezier(.25, .1, .25, 1) forwards; will-change: transform; }

.pv-hero-grid {
    position: absolute; top: 0; left: 50%; width: var(--gw); height: var(--gh);
    transform: translateX(-50%) scale(var(--bp-scale, 1)); transform-origin: top center;
}
.pv-hero-group {
    position: absolute; left: var(--x0); top: calc((var(--gh) - var(--h0)) / 2 + var(--y0));
    width: var(--w0); height: var(--h0);
}
.pv-hero-line {
    position: absolute; left: var(--x0); top: var(--y0); width: 100%; margin: 0; padding: 0;
    font-size: var(--fs0); line-height: var(--lh0); letter-spacing: 0; white-space: normal; text-transform: none;
}
.pv-hero-btn {
    position: absolute; left: var(--x0); bottom: var(--y0); display: inline-block; white-space: nowrap;
    font-size: var(--fs0); line-height: var(--lh0); padding: 0 var(--pd0); border-radius: 55px;
    background: var(--bg); color: var(--fg); text-decoration: none;
    transition: background-color .3s ease, color .3s ease, filter .3s ease;
}
.pv-hero-btn:hover, .pv-hero-btn:focus-visible { background: var(--hbg); color: var(--hfg); filter: brightness(1.2); }

/* Text entrance: soft rise + fade, staggered per line (--d), button last */
.pv-hero:not(.is-ready) .pv-hero-line, .pv-hero:not(.is-ready) .pv-hero-btn { opacity: 0; }
.pv-hero.is-ready .pv-hero-slide.is-active .pv-hero-line,
.pv-hero.is-ready .pv-hero-slide.is-active .pv-hero-btn { animation: pvLayer .9s cubic-bezier(.22, .61, .36, 1) both; animation-delay: var(--d, 600ms); }
/* Outgoing text fades away quickly instead of lingering under the new slide */
.pv-hero-slide.is-leaving .pv-hero-line,
.pv-hero-slide.is-leaving .pv-hero-btn { opacity: 0; transition: opacity .45s ease; }

@keyframes pvLayer { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes pvKen { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes pvSlideIn { from { transform: translate3d(5%, 0, 0); } to { transform: none; } }

@media (max-width: 1239px) {
    .pv-hero { --gw: var(--gw1); --gh: var(--gh1); height: var(--gh1); }
    .pv-hero-group { left: var(--x1); top: calc((var(--gh) - var(--h1)) / 2 + var(--y1)); width: var(--w1); height: var(--h1); }
    .pv-hero-line { left: var(--x1); top: var(--y1); font-size: var(--fs1); line-height: var(--lh1); }
    .pv-hero-btn { left: var(--x1); bottom: var(--y1); font-size: var(--fs1); line-height: var(--lh1); padding: 0 var(--pd1); }
}
@media (max-width: 1023px) {
    .pv-hero { --gw: var(--gw2); --gh: var(--gh2); height: var(--gh2); }
    .pv-hero-group { left: var(--x2); top: calc((var(--gh) - var(--h2)) / 2 + var(--y2)); width: var(--w2); height: var(--h2); }
    .pv-hero-line { left: var(--x2); top: var(--y2); font-size: var(--fs2); line-height: var(--lh2); }
    .pv-hero-btn { left: var(--x2); bottom: var(--y2); font-size: var(--fs2); line-height: var(--lh2); padding: 0 var(--pd2); }
}
@media (max-width: 777px) {
    .pv-hero { --gw: var(--gw3); --gh: var(--gh3); height: var(--gh3); }
    .pv-hero-group { left: var(--x3); top: calc((var(--gh) - var(--h3)) / 2 + var(--y3)); width: var(--w3); height: var(--h3); }
    .pv-hero-line { left: var(--x3); top: var(--y3); font-size: var(--fs3); line-height: var(--lh3); }
    .pv-hero-btn { left: var(--x3); bottom: var(--y3); font-size: var(--fs3); line-height: var(--lh3); padding: 0 var(--pd3); }
}
@media (prefers-reduced-motion: reduce) {
    .pv-hero-slide, .pv-hero-slide .pv-hero-line, .pv-hero-slide .pv-hero-btn, .pv-hero-bg { animation: none !important; transition: none !important; }
    .pv-hero .pv-hero-line, .pv-hero .pv-hero-btn { opacity: 1 !important; }
    .pv-hero-slide.is-leaving .pv-hero-line, .pv-hero-slide.is-leaving .pv-hero-btn { opacity: 0 !important; }
}

/* Leftover Slider Revolution helper paragraph (was hidden by the plugin stylesheet) */
.rs-p-wp-fix { display: none !important; margin: 0 !important; }

/* Optional white fade behind the slide text (per-slide "scrim" setting) */
.pv-hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 30%, rgba(255,255,255,.55) 46%, rgba(255,255,255,.18) 60%, rgba(255,255,255,0) 70%); }
.pv-hero-slide .pv-hero-grid { z-index: 2; }
@media (max-width: 777px) {
    .pv-hero-scrim { background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.3) 66%, rgba(255,255,255,0) 80%); }
}

/* ---- Phones: the desktop layer positions don't fit a narrow screen, so the text becomes a
        normal block anchored to the bottom of the slide, with side padding, phone-sized type
        and a soft white fade behind it. ---- */
@media (max-width: 777px) {
    .pv-hero { min-height: 500px; }
    .pv-hero-grid { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
    .pv-hero-group {
        left: 0; right: 0; top: auto; bottom: 0; width: auto; height: auto;
        display: flex; flex-direction: column; align-items: flex-start;
        padding: 0 22px 30px;
    }
    .pv-hero-line { position: static; width: auto; max-width: 30ch; margin: 0; }
    .pv-hero .pv-hero-line { font-size: 30px; line-height: 1.15; }
    .pv-hero .pv-hero-line.pv-hero-sub { max-width: 34ch; margin-top: 10px; font-size: 17px; line-height: 1.45; font-weight: 500 !important; }
    .pv-hero-line.title-text-shadow { text-shadow: 2px 2px var(--primary-color, #2ad2c1); }
    .pv-hero-btn { position: static; margin-top: 20px; font-size: 15px; line-height: 46px; padding: 0 26px; }
    /* Readability fade from the bottom, on every slide (replaces the desktop left-side fade) */
    .pv-hero .pv-hero-slide img.pv-hero-bg { object-position: var(--mpos, 50% 50%) !important; }
    .pv-hero-scrim { display: none; }
    .pv-hero-slide::after {
        content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background: linear-gradient(0deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 34%, rgba(255,255,255,.45) 52%, rgba(255,255,255,0) 66%);
    }
}
@media (max-width: 380px) {
    .pv-hero .pv-hero-line { font-size: 27px; }
    .pv-hero .pv-hero-line.pv-hero-sub { font-size: 16px; }
}

/* Phones: slide text centred; the second line stays dark so it reads on every photo */
@media (max-width: 777px) {
    .pv-hero-group { align-items: center; text-align: center; }
    .pv-hero .pv-hero-line, .pv-hero .pv-hero-line.pv-hero-sub { max-width: 100%; }
    .pv-hero-slide::after {
        background: linear-gradient(0deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 44%, rgba(255,255,255,.6) 60%, rgba(255,255,255,0) 76%);
    }
}
.pv-hero .pv-hero-line.pv-hero-sub { color: #1d2864 !important; }
