/* Keep the approved landscape framing and automatic five-photo loop. */
.hero-image.hero-motion-frame{aspect-ratio:5/4;min-height:0;height:auto;max-height:none;align-self:start}
.hero-motion-frame::after{content:none}
.hero-motion-frame>.hero-poster,.hero-motion-frame>.hero-loop-slide{position:absolute;inset:0;width:100%;height:100%;border-radius:calc(var(--photo-radius) - var(--photo-border))}
.hero-motion-frame>.hero-poster{object-fit:cover;object-position:center;animation:hero-warmup 6s ease-in-out infinite alternate!important}
.hero-motion-frame>.hero-loop-slide{overflow:hidden;opacity:0;pointer-events:none}
.hero-motion-frame .hero-loop-slide>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;transform:var(--hero-from);animation:none!important}
/* This hero is automatic for every visitor, including reduced-motion mode, as requested. */
.hero-motion-frame.is-hero-running>.hero-poster{animation:none!important}
.hero-motion-frame.is-hero-running>.hero-loop-slide{animation:hero-photo-cycle 15s linear var(--hero-delay) infinite both!important}
.hero-motion-frame.is-hero-running .hero-loop-slide>img{animation:hero-photo-motion 15s cubic-bezier(.37,0,.63,1) var(--hero-delay) infinite both!important}
@keyframes hero-warmup{from{transform:scale(1.025)}to{transform:scale(1.055)}}
/* Incoming photos fade over a fully visible outgoing photo; the loop also dissolves smoothly. */
@keyframes hero-photo-cycle{
 0%{opacity:0;z-index:2;animation-timing-function:ease-in-out}
 4%,20%{opacity:1;z-index:2}
 20.01%,24%{opacity:1;z-index:1}
 24.01%,100%{opacity:0;z-index:0}
}
@keyframes hero-photo-motion{0%{transform:var(--hero-from)}24%,100%{transform:var(--hero-to)}}
@media(min-width:761px){.hero-image.hero-motion-frame{margin-top:32px}}
@media(max-width:760px){.hero-image.hero-motion-frame{align-self:stretch}}