/* Hero slideshow */
.hero-slider{position:relative; width:100%; aspect-ratio:var(--hero-ar, 40 / 21); overflow:hidden; border-radius:inherit; background:#dfe8e3; --hs-ms:900ms; --hs-s:5s;}
/* Each slide shows the WHOLE picture (object-fit:contain), whatever its shape; the empty space around a picture that is not the
   box's shape is filled with a soft blurred copy of the same picture, so wide, tall and square pictures all look finished. */
.hero-slider .hs{position:absolute; inset:0; width:100%; height:100%; overflow:hidden; background:#dfe8e3; opacity:0; z-index:1; will-change:transform,opacity;}
.hero-slider .hs::before, .hero-single::before{content:""; position:absolute; inset:-28px; background:var(--bg) center/cover no-repeat; filter:blur(22px) saturate(1.1); transform:translateZ(0);}
.hero-slider .hs img, .hero-single img{position:relative; display:block; width:100%; height:100%; object-fit:contain;}
.hero-single{position:relative; width:100%; aspect-ratio:var(--hero-ar, 40 / 21); overflow:hidden; border-radius:inherit; background:#dfe8e3;}
.hero-slider .hs.on{opacity:1;}
.hero-slider .hs-in{z-index:2;}
.hero-slider .hs-out{z-index:1;}
.hero-slider[data-t=flip]{perspective:1400px;}
.hero-slider[data-t] .hs-in, .hero-slider[data-t] .hs-out{animation-duration:var(--hs-ms); animation-fill-mode:both; animation-timing-function:cubic-bezier(.4,0,.2,1);}
.hero-slider[data-t=fade] .hs-in{animation-name:hs-fade-in;} .hero-slider[data-t=fade] .hs-out{animation-name:hs-fade-out;}
.hero-slider[data-t=slide-left] .hs-in{animation-name:hs-sl-in;} .hero-slider[data-t=slide-left] .hs-out{animation-name:hs-sl-out;}
.hero-slider[data-t=slide-right] .hs-in{animation-name:hs-sr-in;} .hero-slider[data-t=slide-right] .hs-out{animation-name:hs-sr-out;}
.hero-slider[data-t=slide-up] .hs-in{animation-name:hs-su-in;} .hero-slider[data-t=slide-up] .hs-out{animation-name:hs-su-out;}
.hero-slider[data-t=slide-down] .hs-in{animation-name:hs-sd-in;} .hero-slider[data-t=slide-down] .hs-out{animation-name:hs-sd-out;}
.hero-slider[data-t=zoom-in] .hs-in{animation-name:hs-zi-in;} .hero-slider[data-t=zoom-in] .hs-out{animation-name:hs-zi-out;}
.hero-slider[data-t=zoom-out] .hs-in{animation-name:hs-zo-in;} .hero-slider[data-t=zoom-out] .hs-out{animation-name:hs-zo-out;}
.hero-slider[data-t=flip] .hs-in{animation-name:hs-flip-in; backface-visibility:hidden;} .hero-slider[data-t=flip] .hs-out{animation-name:hs-flip-out; backface-visibility:hidden;}
.hero-slider[data-t=blur] .hs-in{animation-name:hs-blur-in;} .hero-slider[data-t=blur] .hs-out{animation-name:hs-blur-out;}
.hero-slider[data-t=wipe-right] .hs-in{animation-name:hs-wr-in;} .hero-slider[data-t=wipe-right] .hs-out{animation:none; opacity:1;}
.hero-slider[data-t=wipe-down] .hs-in{animation-name:hs-wd-in;} .hero-slider[data-t=wipe-down] .hs-out{animation:none; opacity:1;}
.hero-slider[data-t=spin] .hs-in{animation-name:hs-spin-in;} .hero-slider[data-t=spin] .hs-out{animation-name:hs-fade-out;}
.hero-slider[data-t=cut] .hs-in, .hero-slider[data-t=cut] .hs-out{animation:none;} .hero-slider[data-t=cut] .hs-out{opacity:0;}
@keyframes hs-fade-in{from{opacity:0}to{opacity:1}} @keyframes hs-fade-out{from{opacity:1}to{opacity:0}}
@keyframes hs-sl-in{from{transform:translateX(100%)}to{transform:none}} @keyframes hs-sl-out{from{transform:none}to{transform:translateX(-100%)}}
@keyframes hs-sr-in{from{transform:translateX(-100%)}to{transform:none}} @keyframes hs-sr-out{from{transform:none}to{transform:translateX(100%)}}
@keyframes hs-su-in{from{transform:translateY(100%)}to{transform:none}} @keyframes hs-su-out{from{transform:none}to{transform:translateY(-100%)}}
@keyframes hs-sd-in{from{transform:translateY(-100%)}to{transform:none}} @keyframes hs-sd-out{from{transform:none}to{transform:translateY(100%)}}
@keyframes hs-zi-in{from{transform:scale(.7); opacity:0}to{transform:none; opacity:1}} @keyframes hs-zi-out{from{transform:none; opacity:1}to{transform:scale(1.35); opacity:0}}
@keyframes hs-zo-in{from{transform:scale(1.35); opacity:0}to{transform:none; opacity:1}} @keyframes hs-zo-out{from{transform:none; opacity:1}to{transform:scale(.7); opacity:0}}
@keyframes hs-flip-in{from{transform:rotateY(-90deg)}to{transform:none}} @keyframes hs-flip-out{from{transform:none}to{transform:rotateY(90deg)}}
@keyframes hs-blur-in{from{filter:blur(22px); opacity:0}to{filter:none; opacity:1}} @keyframes hs-blur-out{from{filter:none; opacity:1}to{filter:blur(22px); opacity:0}}
@keyframes hs-wr-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}} @keyframes hs-wd-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes hs-spin-in{from{transform:rotate(-12deg) scale(1.4); opacity:0}to{transform:none; opacity:1}}
@keyframes hs-drift{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero-slider[data-drift] .hs.on:not(.hs-in):not(.hs-out){animation:hs-drift calc(var(--hs-s) + 1s) linear both;}
.hs-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.8); color:var(--evergreen-dark,#1f4338); font-size:26px; line-height:1; cursor:pointer;}
.hs-prev{left:10px;} .hs-next{right:10px;}
.hs-dots{position:absolute; left:0; right:0; bottom:10px; z-index:4; display:flex; gap:6px; justify-content:center;}
.hs-dot{width:11px; height:11px; border-radius:50%; border:0; padding:0; background:rgba(255,255,255,.65); cursor:pointer; box-shadow:0 0 0 1px rgba(0,0,0,.25);}
.hs-dot.on{background:#fff; transform:scale(1.25);}
.hs-dot::after{content:""; position:absolute; inset:-9px;}   /* a bigger tap target than the dot */
.hs-dot{position:relative;}
.hero-illustration .hero-reviews{z-index:5;}
@media (prefers-reduced-motion: reduce){ .hero-slider[data-drift] .hs.on{animation:none !important;} }

/* The picture window: its shape comes from the portal (the picture's own shape, or a chosen height), and on computers a very tall picture
   never grows taller than the screen (the whole picture still shows, on a soft blurred background). */
@media (min-width:1000px){ .hero-slider, .hero-single{max-height:calc(100vh - 150px);} }