.hero-carousel {
  position: relative;
  overflow: hidden;
  background: #06172a;
}

.carousel-track {
  position: relative;
  min-height: clamp(440px, 43vw, 660px);
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 560ms ease, visibility 560ms ease;
}

.carousel-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-slide-layout {
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: #06182b;
}

.hero-slide-layout::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: '';
  background: linear-gradient(90deg, rgba(3, 12, 22, .96) 0%, rgba(3, 12, 22, .91) 43%, rgba(3, 12, 22, .59) 58%, rgba(3, 12, 22, .08) 78%, transparent 100%);
}

.hero-slide-layout::after {
  position: absolute;
  z-index: 2;
  top: -12%;
  bottom: -12%;
  left: 53%;
  width: clamp(115px, 13vw, 230px);
  content: '';
  background: linear-gradient(180deg, rgba(28, 151, 218, .96), rgba(11, 83, 143, .92));
  clip-path: polygon(22% 0, 54% 0, 100% 100%, 68% 100%);
  opacity: .92;
  pointer-events: none;
}

.hero-slide-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  min-height: clamp(440px, 43vw, 660px);
  background-color: #dce8f0;
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-slide-photo--experience { background-image: url('../images/lifthpro-carousel-scissor.webp'); }
.hero-slide-photo--cargo { background-image: url('../images/lifthpro-carousel-lift-cart.webp'); }
.hero-slide-photo--scissor { background-image: url('../images/lifthpro-carousel-dock-leveler.webp'); }
.hero-slide-photo--steel { background-image: url('../images/lifthpro-carousel-steel-lifter.webp'); }
.hero-slide-photo--hydraulic-dock { background-image: url('../images/lifthpro-carousel-hydraulic-dock.webp'); }

.hero-slide-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  width: min(52%, 790px);
  min-height: clamp(440px, 43vw, 660px);
  padding: clamp(38px, 5.3vw, 90px) clamp(34px, 6.2vw, 108px);
  color: #fff;
  background: transparent;
}

.hero-slide-copy .eyebrow { color: #30b8f0; letter-spacing: .16em; }
.hero-slide-copy :is(h1, h2) { max-width: 620px; margin: 12px 0 20px; font-size: clamp(37px, 3.9vw, 63px); line-height: 1.08; }
.hero-slide-copy p { max-width: 590px; margin: 0 0 26px; color: #eff7fc; font-size: clamp(16px, 1.35vw, 21px); line-height: 1.5; }
.hero-slide-copy .button { min-width: 174px; background: #2684b0; }
.hero-slide-copy .button:hover, .hero-slide-copy .button:focus-visible { background: #21b7ee; outline: 3px solid rgba(255,255,255,.7); outline-offset: 3px; }

.hero-experience-mark { display: flex; align-items: flex-end; gap: 15px; margin-bottom: 17px; color: #fff; line-height: .8; }
.hero-experience-mark strong { font-size: clamp(76px, 10vw, 155px); font-weight: 800; letter-spacing: -.08em; }
.hero-experience-mark span { padding-bottom: 12px; font-size: clamp(26px, 3.2vw, 52px); font-weight: 800; letter-spacing: .04em; }
.hero-experience-mark em { display: block; margin-top: 8px; color: transparent; font-size: .8em; font-style: normal; -webkit-text-stroke: 1px #fff; }
.hero-rule { width: min(100%, 560px); height: 5px; margin: 0 0 25px; background: #1c9ae0; }
.hero-checklist { display: grid; gap: 12px; padding: 0; margin: 0 0 30px; list-style: none; color: #fff; font-size: clamp(16px, 1.55vw, 23px); font-weight: 700; }
.hero-checklist li { display: flex; gap: 12px; align-items: center; }
.hero-checklist li::before { content: '✓'; display: inline-grid; width: 23px; height: 23px; place-items: center; border: 2px solid #fff; border-radius: 3px; color: #fff; font-size: 16px; line-height: 1; }

.carousel-hit-area {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 16%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.carousel-hit-area--previous { left: 0; }
.carousel-hit-area--next { right: 0; }

.carousel-hit-area:focus-visible {
  outline: 3px solid #21b7ee;
  outline-offset: -6px;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  .carousel-track { min-height: 600px; }
  .carousel-slide img { object-position: 52% center; }
  .hero-slide-layout::before { background: linear-gradient(90deg, rgba(3, 12, 22, .93), rgba(3, 12, 22, .66) 74%, rgba(3, 12, 22, .12)); }
  .hero-slide-layout::after { left: 66%; width: 114px; opacity: .72; }
  .hero-slide-photo { min-height: 600px; background-position: 64% center; }
  .hero-slide-copy { width: min(82%, 500px); min-height: 600px; padding: 40px 30px 58px; }
  .hero-slide-copy :is(h1, h2) { font-size: 34px; }
  .hero-slide-copy p { margin-bottom: 19px; font-size: 16px; }
  .hero-experience-mark strong { font-size: 84px; }
  .hero-experience-mark span { font-size: 31px; }
  .hero-checklist { font-size: 16px; }
  .hero-checklist li::before { width: 19px; height: 19px; font-size: 13px; }
  .carousel-hit-area { width: 24%; }
}
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:28px; }
.hero-slide-copy .button--ghost { background:transparent; border:1px solid rgba(255,255,255,.72); }
.hero-slide-copy .button--ghost:hover,.hero-slide-copy .button--ghost:focus-visible { background:#fff; color:#07345b; }
.hero-proof { display:flex; align-items:center; gap:10px; padding-top:18px; border-top:1px solid rgba(255,255,255,.28); color:#d9edf8; }
.hero-proof strong { color:#38b9ef; font-size:28px; }
.hero-proof span { font-size:14px; letter-spacing:.04em; }
@media (max-width:760px) { .hero-actions { gap:9px; margin-bottom:20px; } .hero-slide-copy .button { min-width:0; padding:12px 15px; font-size:14px; } }
