/* Only the existing hero image slot is affected. Approved composition stays intact. */
.hero-image.hero-carousel{height:auto;aspect-ratio:644/548;touch-action:pan-y pinch-zoom;isolation:isolate}
.hero-image.hero-carousel:after{display:none}
.hero-slide{position:absolute;inset:0;margin:0;animation:hero-reveal 160ms ease-out}
.hero-slide picture,.hero-slide img{display:block;width:100%;height:100%}
.hero-slide img{object-fit:contain;user-select:none;-webkit-user-drag:none}
.hero-control{position:absolute;z-index:3;padding:0;border:0;background:transparent;color:transparent;transform:translate(-50%,-50%);border-radius:50%;cursor:pointer}
.hero-control:focus-visible{outline:3px solid var(--lime);outline-offset:2px;box-shadow:0 0 0 5px var(--green)}
.hero-arrow{top:47.8%;width:8%;height:10%;min-width:44px;min-height:44px}
.hero-prev{left:5.6%}.hero-next{left:94.3%}
.hero-dot{left:var(--dot-x);top:96.1%;width:3.5%;min-width:16px;height:30px;border-radius:4px}
@keyframes hero-reveal{from{opacity:.65}to{opacity:1}}
@media(max-width:720px){.hero-image.hero-carousel{aspect-ratio:363/250;height:auto}.hero-arrow{display:none}.hero-dot{top:95%;left:calc(39.4% + var(--dot-index)*5.6%);width:5.6%;min-width:18px;height:30px}}
@media(prefers-reduced-motion:reduce){.hero-slide{animation:none}}
@media(forced-colors:active){.hero-control{color:ButtonText;background:ButtonFace;border:1px solid ButtonText}.hero-dot[aria-current=true]{background:Highlight}}