.hero-carousel{position:relative;width:100%;overflow:hidden;border-radius:6px;margin-top:0;z-index:0}
.hero-carousel.breakout,
/* make the landing section tolerant to a full-bleed child */
#landingHeroSection{padding-left:0 !important;padding-right:0 !important;overflow:visible !important}
#landingHeroSection > .hero-carousel,
#landingHeroSection .hero-carousel{
	width:100vw !important;
	max-width:100vw !important;
	box-sizing:border-box !important;
	position:relative !important;
	left:50% !important;
	transform:translateX(-50%) !important;
	right:auto !important;
	margin-left:0 !important;
	margin-right:0 !important;
	border-radius:0 !important;
	overflow:hidden !important;
}
.hero-carousel .slides{display:flex;transition:transform 600ms ease;will-change:transform;width:100%;}
.hero-carousel .slide{min-width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 100%}
.hero-carousel .slide a{display:block;width:100%;height:100%;color:inherit;text-decoration:none}
.hero-carousel .slide .media{position:absolute;inset:0;width:100%;height:100%;background-size:cover;background-position:center center;background-repeat:no-repeat}

/* support server-rendered hero images that may use <img> instead of background-image */
.hero-carousel .slide img{width:100%;height:100%;object-fit:cover;display:block}
.hero-carousel .slide .overlay{position:relative;z-index:2;padding:48px;max-width:640px;color:#fff}
.hero-carousel .controls{position:absolute;inset:auto 16px 16px 16px;display:flex;justify-content:space-between;z-index:3;pointer-events:none}
.hero-carousel .btn{background:rgba(0,0,0,0.5);border:none;color:#fff;padding:8px 12px;border-radius:4px;pointer-events:auto}
.hero-carousel .indicators{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:flex;gap:8px;z-index:4}
.hero-carousel .indicator{width:10px;height:10px;background:rgba(255,255,255,0.35);border-radius:50%;cursor:pointer}
.hero-carousel .indicator.active{background:#d4af37}
@media (max-width:768px){.hero-carousel .overlay{padding:20px;max-width:90%}}

/* hide original hero text blocks so carousel is full-bleed */
.hero-copy-stack, .gilded-title, .tagline { display: none !important; }

/* when our JS-inserted hero exists, hide the legacy carousel/container to avoid split layouts */
.hero-carousel ~ .carousel-container, .hero-carousel + .carousel-container, #landingHeroSection .carousel-container { display: none !important; }

/* ensure hero container doesn't cause horizontal scroll */
html, body { overflow-x: hidden; }