.destination-carousel{position:relative;isolation:isolate;width:100%;height:540px;min-width:0;overflow:hidden;background:#283d34}
.destination-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;pointer-events:none;color:white}
.destination-slide.is-active{opacity:1;pointer-events:auto;z-index:1}
.destination-slide img{width:100%;height:100%;object-fit:cover}
.destination-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,29,22,.85),transparent 65%)}
.destination-caption{position:absolute;z-index:1;left:7%;right:7%;bottom:94px;display:grid;gap:10px}
.destination-caption small{font:14px var(--sans);letter-spacing:.15em;text-transform:uppercase}
.destination-caption strong{font:clamp(32px,3.7vw,58px)/1.08 Georgia,serif}
.destination-caption>span{font:15px var(--sans)}
.destination-controls{position:absolute;z-index:3;bottom:24px;left:7%;right:7%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.destination-controls[hidden]{display:none}.destination-select{display:flex;gap:8px}
.destination-controls button{min-height:44px;border:1px solid #ffffff80;color:white;background:#18322680;font:14px var(--sans);padding:8px 12px;cursor:pointer}
.destination-controls button[aria-pressed="true"]{background:white;color:#283d34}
.destination-controls button:focus-visible{outline:3px solid white;outline-offset:3px}
@media(max-width:760px){.destination-carousel{height:440px;margin-top:24px}.destination-caption{bottom:100px}.destination-caption strong{font-size:36px}.destination-controls{left:5%;right:5%}.destination-controls button{padding:8px 10px}.destination-select{gap:5px}}
@media(prefers-reduced-motion:reduce){.destination-slide{transition:none}}

/* Blend the photos behind the hero heading, matching the original atlas placement. */
.hero .destination-carousel{position:absolute;inset:0 0 0 20%;width:auto;height:auto;margin:0;z-index:0}
.hero::after{z-index:1}
.hero .destination-caption{left:32%;right:6%;bottom:98px}
.hero .destination-controls{left:32%;right:6%}
.hero .destination-slide img{object-position:center}
@media(max-width:760px){
.hero .destination-carousel{inset:auto 0 0;height:365px;width:100%;margin:0}
.hero .destination-caption{left:6%;right:6%;bottom:88px}
.hero .destination-caption strong{font-size:32px}
.hero .destination-controls{left:6%;right:6%;bottom:20px}
}