/* Carousel controls extend the approved specimen/photo composition. */
.hero-photo-stage { position: relative; height: 100%; overflow: hidden; border-radius: inherit; touch-action: pan-y pinch-zoom; }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; user-select: none; }
.hero-visual.is-carousel { padding-bottom: 108px; }
.hero-visual.is-carousel .hero-specimen { bottom: 64px; }
.hero-specimen [data-carousel-caption] { display: inline; color: inherit; margin: 0; font-size: 16px; line-height: inherit; }
.hero-carousel-controls { position: absolute; inset: auto 0 0 8px; display: flex; align-items: center; gap: 8px; padding-bottom: 12px; }
.hero-carousel-controls button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #e0c89e7a; color: var(--cream); background: #142b207a; border-radius: 50%; transition: background .2s var(--ease), transform .2s var(--ease); }
.hero-carousel-controls button:hover { background: #526044; transform: translateY(-2px); }
.hero-carousel-controls button:active { transform: scale(.93); }
.hero-carousel-controls .icon { width: 17px; height: 17px; }
.carousel-counter { flex: 1; text-align: center; white-space: nowrap; font-size: 16px; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: #e0c89e; }
.carousel-play-icon { display: none; }
[data-carousel-play][aria-pressed="true"] .carousel-play-icon { display: block; }
[data-carousel-play][aria-pressed="true"] .carousel-pause-icon { display: none; }
.hero-carousel-progress { position: absolute; inset: auto 0 0; height: 2px; overflow: hidden; background: #e0c89e35; }
.hero-carousel-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: #e0c89e; }
.application-panels { overflow-x: clip; }
.application-photo { touch-action: pan-y pinch-zoom; }
.application-navigation { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 26px; }
.application-navigation button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid #b6bca8; color: var(--cream); background: transparent; transition: background .22s var(--ease), transform .22s var(--ease); }
.application-navigation button:hover { background: #f8f5ed18; transform: translateX(2px); }
.application-navigation span { min-width: 70px; color: #ddcbaa; text-align: center; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
    .hero-carousel-controls { gap: 5px; inset-inline: 8px; }
    .application-navigation { justify-content: flex-start; }
}