/* One stable stage, full artwork proportions, shared readable hero copy. */
.hero-carousel{min-height:590px;isolation:isolate;overflow:hidden;background:#111315}
.hero-slides,.hero-slide{position:absolute;inset:0}
.hero-slide[hidden]{display:none}
.hero-scene{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(16px);opacity:.28}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#111315 0%,#111315f5 30%,#11131590 60%,#11131540);z-index:0}
.hero-frame{position:absolute;z-index:1;left:46%;right:4%;top:32px;bottom:90px;display:flex;align-items:center;justify-content:center}
.hero-frame img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 15px 22px #0006)}
.is-portrait .hero-frame{left:53%;right:11%}
.is-portrait .hero-frame img{padding:8px;background:#17191c80;border:1px solid #ffffff24;border-radius:5px;width:auto;max-width:100%}
.hero-carousel .hero-inner{padding-block:66px 120px;pointer-events:none}
.hero-carousel .hero-copy{width:42%;max-width:490px;pointer-events:auto}
.hero-carousel .hero-copy{position:relative;isolation:isolate}
.hero-carousel .hero-copy::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(90deg,#111315 0%,#111315eb 40%,#11131599 72%,#11131550 100%),linear-gradient(0deg,#111315 0%,#11131580 15%,transparent 40%,transparent 60%,#111315e8 84%,#111315 100%),url('../assets/automotive-hero.jpg');background-size:100% 100%,100% 100%,auto 180%;background-position:center,center,calc(100% + 230px) 20%;background-repeat:no-repeat;opacity:.65;filter:blur(.6px);mask-image:linear-gradient(90deg,transparent 0%,#000 25%,#000 92%,transparent 100%)}
@media(max-width:1100px) and (min-width:701px){.hero-carousel .hero-copy::before{background-position:center,center,calc(100% + 235px) 20%;opacity:.55}}
@media(max-width:700px){.hero-carousel .hero-copy::before{background-position:center,center,calc(100% + 180px) 20%;opacity:.5}}
.hero-carousel h1{font-size:clamp(38px,3.7vw,53px);letter-spacing:-1.8px}
.hero-carousel .hero-description{font-size:16px;margin-top:22px}
.hero-carousel .hero-note{margin-top:22px}
.hero-carousel .hero-controls{position:absolute;bottom:20px;left:0;right:0;display:flex;align-items:center;gap:20px;z-index:3;padding-top:16px;border-top:1px solid #ffffff25}
.hero-slide-count{font-size:12px;letter-spacing:2px;color:#ccc;min-width:66px}
.hero-dots{display:flex;align-items:center;gap:2px;margin-right:auto}
.hero-dot{display:grid;place-items:center;background:none;border:0;width:30px;height:44px;padding:0;cursor:pointer}
.hero-dot span{width:7px;height:7px;border-radius:50%;background:#b9b9bb;transition:background .2s,transform .2s}
.hero-dot[aria-pressed="true"] span{background:#ed3940;transform:scale(1.45)}
.hero-arrows{display:flex;gap:8px}
.hero-arrows button{width:44px;height:44px;border:1px solid #ffffff55;background:#17191c;color:#fff;border-radius:3px;font-size:24px;cursor:pointer;transition:background .2s}
.hero-arrows button:hover{background:#bd2025}
.hero-slide.is-current .hero-frame{animation:hero-enter .35s ease-out}
@keyframes hero-enter{from{opacity:.4;transform:translateX(8px)}to{opacity:1;transform:none}}
@media(max-width:1100px) and (min-width:701px){
 .hero-carousel .hero-copy{width:43%}
 .hero-carousel h1{font-size:40px}
 .hero-carousel .hero-description{font-size:14px}
 .hero-carousel .button-row{flex-wrap:wrap}
 .hero-carousel .button{font-size:12px;padding-inline:14px}
}
@media(max-width:700px){
 .hero-carousel{min-height:0}
 .hero-carousel .hero-inner{padding-block:32px 0}
 .hero-carousel .hero-copy{width:100%;max-width:none}
 .hero-carousel h1{font-size:37px;line-height:1.08;letter-spacing:-1.2px}
 .hero-carousel .hero-description{font-size:14px;max-width:100%;margin-top:16px}
 .hero-carousel .button-row{margin-top:18px}
 .hero-carousel .hero-note{margin-top:15px;font-size:11px}
 .hero-slides{position:relative;height:300px;margin-top:22px}
 .hero-carousel .hero-inner{position:relative}
 .hero-carousel{display:flex;flex-direction:column}
 .hero-carousel .hero-inner{order:0}
 .hero-slides{order:1}
 .hero-frame,.is-portrait .hero-frame{inset:8px 18px}
 .hero-slide::after{background:linear-gradient(#111315b0,#11131550)}
 .hero-carousel .hero-controls{position:relative;order:2;bottom:auto;padding-top:8px;margin-top:12px;margin-bottom:16px;gap:8px}
 .hero-dot{width:24px}
 .hero-slide-count{min-width:52px;font-size:10px;letter-spacing:1px}
 .hero-arrows{gap:5px}
 .hero-arrows button{width:38px;height:44px}
}
@media(prefers-reduced-motion:reduce){.hero-slide.is-current .hero-frame{animation:none}.hero-dot span,.hero-arrows button{transition:none}}