/* Layered hero crossfade: enhances existing single image without hiding it before JavaScript. */
.hero-photo .ot-hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;visibility:hidden;transform:scale(1.045);animation:none!important;transition:opacity 1.25s ease,transform 7s ease,visibility 1.25s linear;will-change:opacity}
.hero-photo .ot-hero-slide.is-current{opacity:1;visibility:visible;transform:scale(1);z-index:1}
/* Feather the former 32% image edge to remove the vertical seam without moving the photo. */
.hero .hero-photo{-webkit-mask-image:linear-gradient(to right,transparent 0px,#000 58px);mask-image:linear-gradient(to right,transparent 0px,#000 58px)}
.hero-photo::after{z-index:2;pointer-events:none}
.hero-photo-curtain{pointer-events:none;z-index:3}
.ot-hero-controls{position:absolute;z-index:5;right:0;bottom:91px;display:flex;align-items:center;gap:13px;color:#fff}
.ot-hero-nav{color:#f0e9dd;background:rgba(20,29,25,.36);border:1px solid rgba(255,255,255,.45);border-radius:50%;width:35px;height:35px;display:grid;place-items:center;font-size:24px;line-height:1;backdrop-filter:blur(5px)}
.ot-hero-nav:hover,.ot-hero-nav:focus-visible{background:#d7c5a6;color:#233128}
.ot-hero-dots{display:flex;gap:9px;align-items:center}
.ot-hero-dot{width:7px;height:7px;border-radius:50%;padding:0;border:1px solid rgba(255,255,255,.9);background:transparent;transition:background .3s,transform .3s}
.ot-hero-dot.is-current{background:#e4cfac;transform:scale(1.5)}
@media(max-width:740px){.ot-hero-controls{bottom:65px;right:0;gap:9px}.ot-hero-nav{width:31px;height:31px;font-size:22px}.ot-hero-dots{gap:8px}}
@media(prefers-reduced-motion:reduce){.hero-photo .ot-hero-slide{transition:none!important;transform:none!important}}