.hero>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);column-gap:clamp(20px,4vw,70px);align-items:center}.hero>.wrap>.eyebrow,.hero>.wrap>h1,.hero>.wrap>p,.hero>.wrap>a,.hero>.wrap>.stats{grid-column:1;position:relative;z-index:2}.hero>.wrap>.hero-carousel{grid-column:2;grid-row:1/span 6;min-width:0;width:100%;position:relative;z-index:2}.hero .car-stage{display:none!important}.slide-frame{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:30px;background:linear-gradient(140deg,#242432,#0b0d14);box-shadow:0 25px 70px #0009,0 0 0 1px #ffffff29}.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;pointer-events:none}.slide.active{opacity:1;pointer-events:auto}.slide img{width:100%;height:100%;object-fit:cover}.slide:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#080910ec,transparent 72%)}.slide-copy{position:absolute;z-index:2;bottom:54px;left:30px;right:24px;color:white;display:grid;gap:8px;text-shadow:0 2px 10px #000}.slide-copy small{color:#d3c5ff;letter-spacing:.16em;font-size:10px}.slide-copy strong{font-size:clamp(20px,2.4vw,32px);line-height:1.15}.slide-copy p{font-size:13px;color:#e2e2e9;margin:0}.slide-arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:#14151bbd;color:#fff;border:1px solid #ffffff55;font-size:30px;cursor:pointer}.slide-arrow:hover{background:#c5b4fa;color:#111}.prev{left:12px}.next{right:12px}.slide-dots{position:absolute;z-index:3;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:8px}.slide-dots button{border:0;background:#ffffff77;width:8px;height:8px;border-radius:20px;padding:0;cursor:pointer}.slide-dots button[aria-current=true]{background:#d5c5ff;width:25px}@media(max-width:850px){.hero>.wrap{display:flex;flex-direction:column;align-items:stretch;gap:18px}.hero>.wrap>.hero-carousel{max-width:650px;align-self:center;margin:12px 0}.slide-frame{aspect-ratio:16/10;border-radius:23px}}@media(prefers-reduced-motion:reduce){.slide{transition:none}}

/* V8.2: larger right-column hero slider; no changes to backend or slider logic. */
@media (min-width: 1101px) {
  .hero > .wrap {
    max-width: 1510px;
    padding-inline: clamp(28px, 4vw, 72px);
    grid-template-columns: minmax(0, .91fr) minmax(0, 1.09fr);
    column-gap: clamp(28px, 3.2vw, 56px);
    align-items: center;
  }
  .hero > .wrap > .hero-carousel {
    width: 100%;
    max-width: 710px;
    justify-self: end;
    align-self: center;
  }
  .hero .slide-frame {
    aspect-ratio: 4 / 3;
    min-height: 460px;
    max-height: 535px;
  }
  .hero { padding-block: 75px 65px; }
  .hero h1 { font-size: clamp(48px, 4.2vw, 73px); }
  .hero p { max-width: 530px; }
}
@media (min-width: 851px) and (max-width: 1100px) {
  .hero > .wrap { max-width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); column-gap: 24px; }
  .hero .slide-frame { aspect-ratio: 4 / 3; }
  .hero h1 { font-size: clamp(42px, 4.7vw, 56px); }
}
@media (max-width: 850px) {
  .hero > .wrap > .hero-carousel { width: 100%; max-width: 650px; }
  .hero .slide-frame { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 480px) {
  .hero .slide-frame { aspect-ratio: 5 / 4; border-radius: 20px; }
  .hero .slide-copy { left: 20px; right: 20px; bottom: 43px; }
  .hero .slide-arrow { width: 38px; height: 38px; }
}

/* V8.3 desktop alignment: raise only the right-column carousel by 65px.
   Preserve the existing frame dimensions and all left-column elements. */
@media (min-width: 1101px) {
  .hero > .wrap > .hero-carousel {
    transform: translateY(-65px);
  }
}

/* V8.4: match the second reference screenshot on large desktops.
   Shift the slider 93px right and 31px up from V8.3.
   Only its position changes; size and left content stay unchanged. */
@media (min-width: 1101px) {
  .hero > .wrap > .hero-carousel {
    transform: translate(93px, -96px);
  }
}

/* V8.5: restore V8's naturally sized, side-by-side hero buttons.
   Grid previously stretched each anchor across the whole left column.
   Do not modify the approved V8.4 carousel positioning. */
.hero .hero-carousel > .slider-tip {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-width: none;
  margin: 16px 0 0;
  color: #e2ddef;
  font-size: 14px;
  line-height: 1.6;
}
.slider-tip strong { color: #d3c5ff; }
@media (max-width: 850px) {
  .hero .hero-carousel > .slider-tip { position: static; }
}
.hero > .wrap > .hero-actions {
  grid-column: 1;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}
.hero .hero-actions > .btn,
.hero .hero-actions > .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  margin: 0;
  text-align: center;
  white-space: normal;
}
@media (max-width: 850px) {
  .hero > .wrap > .hero-actions { width: 100%; }
}