.car-hero{padding-top:clamp(1.5rem,3vw,2.5rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
/* slides overlay in one grid cell: only one visible at a time */
.car-hero .car-track{display:grid;position:relative;z-index:1}
.car-hero .car-slide{grid-area:1/1;min-width:0;display:flex;align-items:center;opacity:1;transition:opacity .6s ease,visibility .6s}
.car-hero.js .car-slide{opacity:0;visibility:hidden}
.car-hero.js .car-slide.is-active{opacity:1;visibility:visible}
.car-hero.reduced .car-slide{transition:none}
.hero-slide{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;width:100%}
.hero-text{position:relative;z-index:1}
.hero-visual{display:flex;align-items:center;justify-content:center;min-height:100%}
.hero-visual .loop{position:static;transform:none;width:100%;max-width:34rem}
.hero-visual img{display:block;height:auto}
.hero-visual img.cover{width:min(100%,19rem);box-shadow:0 1.5rem 3rem rgba(10,22,48,.18);border:1px solid var(--line);transform:rotate(-2deg)}
.hero-visual img.mark{width:min(70%,14rem);opacity:.9}
/* controls bar at the top of the hero, always in view */
.car-ctl-wrap{position:relative;z-index:2;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.car-ctl{display:flex;align-items:center;gap:.8rem}
.car-ctl[hidden]{display:none}
.car-count{font-size:.8rem;letter-spacing:.15em;color:var(--mut);font-variant-numeric:tabular-nums}
.car-count b{color:var(--acc);font-weight:600}
.car-dots{display:flex;gap:.45rem}
.car-ctl .car-dot{width:.75rem;height:.75rem;padding:0;border-radius:50%;background:#c9d2e6;border:0;cursor:pointer;transition:width .3s}
.car-ctl .car-dot[aria-current=true]{background:var(--acc);width:2rem;border-radius:.4rem}
.car-bar{flex:1;max-width:12rem;height:3px;background:var(--line);overflow:hidden}
.car-bar i{display:block;height:100%;width:100%;background:var(--acc);transform-origin:left;animation:carbar 6s linear forwards}
.car-hero.paused .car-bar i{animation-play-state:paused}
.car-hero.reduced .car-bar{display:none}
@keyframes carbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.car-ctl .car-prev,.car-ctl .car-next{font:inherit;font-size:1.3rem;line-height:1;cursor:pointer;background:#fff;border:1px solid var(--acc);color:var(--acc);width:2.6rem;height:2.6rem}
.car-ctl .car-prev{margin-left:auto}
.car-ctl button:hover,.car-ctl button:focus-visible{background:var(--acc);color:#fff;outline:2px solid var(--acc);outline-offset:2px}
@media (max-width:48rem){
 .hero-slide{grid-template-columns:1fr}
 .hero-visual{order:-1;justify-content:flex-start;min-height:0}
 .hero-visual .loop{width:60%;opacity:.5}
 .hero-visual img.cover{width:7.5rem}
 .hero-visual img.mark{width:5.5rem}
 .car-bar{max-width:5rem}
}
.car-hero.js .car-slide:not(.is-active){pointer-events:none}
/* home only: keep the consent card off the hero buttons on desktop (visual column is on the right) */
@media (min-width:48.01rem){body .cc-card{left:auto;right:1rem}}

.car-hero .hero-title.long{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.08}