.hero-visual.hero-slider { min-height: 580px; isolation: isolate; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); background: #061725; box-shadow: 0 26px 70px rgba(0,0,0,.35); }
.hero-slide { position: absolute; inset: 0 0 68px; opacity: 0; visibility: hidden; transform: translateX(30px); transition: opacity .7s ease, transform .7s ease, visibility .7s; }
.hero-slide.is-active { opacity: 1; visibility: visible; transform: translateX(0); }
.hero-slide > img { width: 100%; height: 100%; object-fit: contain; }
.hero-brand { position: absolute; top: 20px; left: 20px; width: 172px; height: 78px; padding: 12px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 8px; box-shadow: 0 3px 18px rgba(0,0,0,.15); }
.hero-brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-brand.brand-navy { background: #12314b; }
.hero-brand.brand-thermon { width: 94px; height: 94px; padding: 8px; overflow: hidden; }
.hero-brand.brand-thermon img { position: absolute; width: 250px; height: 79px; max-width: none; left: 8px; top: 8px; object-fit: fill; clip-path: inset(0 175px 0 0); }
@media(max-width: 600px) { .hero-brand { top: 14px; left: 14px; width: 148px; height: 66px; padding: 10px; } .hero-brand.brand-thermon { width: 94px; height: 94px; } }
.hero-slide .image-shade { background: linear-gradient(transparent 45%,rgba(0,0,0,.85)); }
.hero-slide .hero-card-caption { left: 28px; bottom: 28px; }
.hero-slide .hero-card-caption span { font-size: 12px; }
.hero-slide .hero-card-caption strong { font-size: clamp(20px,2.3vw,30px); color: white; }
.hero-slider-controls { position: absolute; bottom: 0; left: 0; right: 0; height: 68px; display: flex; align-items: center; justify-content: center; gap: 12px; background: #061725; color: white; }
.hero-slider-controls[hidden] { display: none; }
.hero-slider-controls button { min-height: 44px; min-width: 44px; padding: 8px 12px; border: 1px solid #66849b; border-radius: 6px; background: #102d45; color: white; font: inherit; font-size: 13px; cursor: pointer; }
.hero-slider-controls button:hover { background: #184364; }
.hero-slider-controls button:focus-visible { outline: 3px solid #90dbff; outline-offset: 2px; }
.hero-slider-count { min-width: 42px; text-align: center; font-size: 13px; }
@media(max-width: 600px) { .hero-visual.hero-slider { min-height: 440px; } .hero-slider-controls { gap: 6px; } }
@media(prefers-reduced-motion: reduce) { .hero-slide { transition: none; transform: none; } }