/* ============================================
   MOXIE SLIDER
   ============================================ */

.moxie-slider {
  position: relative;
  overflow: hidden;
  border-bottom: .5px solid #e5e5e5;
}

.moxie-slider__track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.moxie-slider__slide {
  display: grid;
  grid-template-columns: 44% 56%;
  min-height: 550px;
  flex-shrink: 0;
  width: 100%;
  color: #fff;
}

.moxie-slider__slide--dark { color: #0a0a0a; }

/* Left — text */
.moxie-slider__left {
  padding: 48px 32px 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

.moxie-slider__brand-img {
  max-height: 36px;
  width: auto;
  margin-bottom: 18px;
  object-fit: contain;
}

.moxie-slider__eyebrow {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #c1d101;
  margin-bottom: 20px;
  font-weight: 500;
}

.moxie-slider__slide--dark .moxie-slider__eyebrow { color: #888; }

.moxie-slider__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 72px;
  font-weight: 800;
  line-height: .95;
  margin-bottom: 28px;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.moxie-slider__title em {
  font-style: normal;
  color: #c1d101;
}

.moxie-slider__slide--dark .moxie-slider__title em { color: #0a0a0a; font-style: italic; }

.moxie-slider__subtitle {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  margin-bottom: 24px;
  line-height: 1.6;
}

.moxie-slider__slide--dark .moxie-slider__subtitle { color: #888; }

.moxie-slider__ctas {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Buttons */
.moxie-slider__btn {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  padding: 12px 24px;
  border-radius: 5px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background .15s, border-color .15s;
  border: none;
  cursor: pointer;
}

.moxie-slider__btn--primary {
  background: #0a0a0a;
  color: #fff !important;
}

.moxie-slider__btn--primary:hover { background: #222; }

.moxie-slider__slide--dark .moxie-slider__btn--primary {
  background: #0a0a0a;
  color: #fff !important;
}

.moxie-slider__btn--outline {
  background: transparent;
  border: .5px solid rgba(255,255,255,.4);
  color: #fff !important;
}

.moxie-slider__btn--outline:hover { border-color: #fff; }

.moxie-slider__slide--dark .moxie-slider__btn--outline {
  border-color: #ccc;
  color: #0a0a0a !important;
}

.moxie-slider__slide--dark .moxie-slider__btn--outline:hover { border-color: #0a0a0a; }

/* Right — image */
.moxie-slider__right {
  position: relative;
  overflow: hidden;
}

.moxie-slider__photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Navigation */
.moxie-slider__nav {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 10;
}

.moxie-slider__arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.3);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s, border-color .15s;
}

.moxie-slider__arrow:hover {
  background: rgba(0,0,0,.6);
  border-color: rgba(255,255,255,.6);
}

.moxie-slider__dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.moxie-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s;
}

.moxie-slider__dot.is-active {
  background: #c1d101;
  transform: scale(1.3);
}

.moxie-slider__dot:hover { background: rgba(255,255,255,.7); }
.moxie-slider__dot.is-active:hover { background: #c1d101; }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 992px) {
  .moxie-slider__slide {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .moxie-slider__left {
    min-height: 320px;
    padding: 32px 24px;
  }

  .moxie-slider__right { min-height: 300px; }

  .moxie-slider__title { font-size: 52px; }
}

@media (max-width: 576px) {
  .moxie-slider__title { font-size: 42px; }

  .moxie-slider__left {
    padding: 24px 16px;
    min-height: 260px;
  }

  .moxie-slider__nav { bottom: 12px; }
  .moxie-slider__arrow { width: 30px; height: 30px; }
}