/* Full-image hero carousel. Each artwork lives in /banners and can be replaced without changing page layout. */
.hero { min-height: 0; background: #f3f7ff; }
.hero-carousel { width: 100%; max-width: none; min-height: 0; }
.banner-slide, .banner-slide.active { display: none; width: 100%; min-height: 0; }
.banner-slide.active { display: block; }
.hero-banner-image { display: block; width: 100%; height: auto; min-height: 430px; max-height: 650px; object-fit: cover; object-position: center; }
.banner-controls { z-index: 5; left: max(26px, calc((100vw - 1200px) / 2)); bottom: 28px; padding: 7px 13px; border: 1px solid rgba(255,255,255,.7); border-radius: 24px; background: rgba(255,255,255,.78); box-shadow: 0 10px 24px rgba(23,45,87,.12); backdrop-filter: blur(8px); }
.banner-controls button { color: #182d54; }
@media (max-width: 800px) { .hero-banner-image { min-height: 340px; height: 58vw; object-position: center; } .banner-controls { left: 18px; bottom: 16px; } }