/* ZoneFive Success Stories Slider v2.5.1
 * One geometry source:
 * - CSS calculates slide width from the original Elementor content box.
 * - The active Swiper viewport is safely expanded to the browser edges.
 * - Swiper owns the runtime spaceBetween margin.
 * - Fallback/editor use the same CSS variable as flex gap.
 */
.z5vss {
  --z5vss-ratio: 1.65;
  --z5vss-radius: 14px;
  --z5vss-play-size: 42px;
  --z5vss-inactive-opacity: .78;
  --z5vss-inactive-scale: .97;
  --z5vss-max-width: 1400px;
  --z5vss-spv-current: var(--z5vss-spv-desktop, 3.5);
  --z5vss-gap-current: var(--z5vss-gap-desktop, 16px);
  --z5vss-gutter-current: var(--z5vss-gutter-desktop, 0px);
  --z5vss-viewport-left: 0px;
  --z5vss-viewport-width: 100%;
  --swiper-wrapper-transition-timing-function: cubic-bezier(.625, .05, 0, 1);
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
}

.z5vss.has-viewport-track {
  /* The expanded shell clips at the actual viewport edges. Its contents can
   * therefore leave the Elementor column without creating page overflow. */
  overflow: visible;
}

.z5vss,
.z5vss * { box-sizing: border-box; }

.z5vss__inner {
  position: relative;
  left: 50%;
  width: min(
    var(--z5vss-max-width, 1400px),
    calc(100vw - (2 * var(--z5vss-gutter-current, 0px)))
  );
  max-width: none;
  transform: translateX(-50%);
  overflow: visible;
}

.z5vss[data-width-mode="parent"] .z5vss__inner {
  left: auto;
  width: 100%;
  max-width: var(--z5vss-max-width, 1400px);
  margin-inline: auto;
  transform: none;
}

.z5vss__slider-shell,
.z5vss__swiper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.z5vss.has-viewport-track .z5vss__slider-shell {
  width: var(--z5vss-viewport-width);
  max-width: none;
  margin-left: calc(-1 * var(--z5vss-viewport-left));
  overflow: hidden;
  overflow: clip;
}

.z5vss.has-viewport-track .z5vss__swiper {
  width: 100%;
  max-width: none;
  overflow: hidden;
  overflow: clip;
}

.z5vss__swiper {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.z5vss .swiper-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Width is container-relative. Swiper adds its inline margin-right for spaceBetween. */
.z5vss .z5vss__slide {
  width: calc(
    (100% - ((var(--z5vss-spv-current) - 1) * var(--z5vss-gap-current)))
    / var(--z5vss-spv-current)
  ) !important;
  flex: 0 0 calc(
    (100% - ((var(--z5vss-spv-current) - 1) * var(--z5vss-gap-current)))
    / var(--z5vss-spv-current)
  ) !important;
  max-width: none !important;
  min-width: 0;
  height: auto;
  margin-right: 0;
  opacity: var(--z5vss-inactive-opacity);
  transform: scale(var(--z5vss-inactive-scale));
  transform-origin: center;
  transition: opacity .35s ease, transform .35s cubic-bezier(.625,.05,0,1);
}

.z5vss.has-viewport-track .z5vss__slide {
  width: var(--z5vss-slide-width) !important;
  flex-basis: var(--z5vss-slide-width) !important;
}

/* Swiper's inline style wins over the non-important margin above. */
.z5vss.is-swiper-ready .z5vss__slide:last-child {
  margin-right: 0 !important;
}

.z5vss[data-emphasis="false"] .z5vss__slide,
.z5vss__slide.swiper-slide-active,
.z5vss__slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.z5vss__card {
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / var(--z5vss-ratio);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--z5vss-radius);
  background: #181818;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.z5vss__card picture { display: block; width: 100%; height: 100%; }
.z5vss__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.625,.05,0,1);
}
.z5vss__card:hover .z5vss__poster,
.z5vss__slide.swiper-slide-active .z5vss__poster,
.z5vss__slide.is-active .z5vss__poster { transform: scale(1.025); }

.z5vss__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.58) 100%);
  pointer-events: none;
}

.z5vss__play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--z5vss-play-size);
  height: var(--z5vss-play-size);
  border-radius: 999px;
  background: #CF2027;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  transform: translate(-50%,-50%);
  transition: transform .25s ease;
}
.z5vss__play svg { width: 48%; height: 48%; margin-left: 2px; }
.z5vss__card:hover .z5vss__play { transform: translate(-50%,-50%) scale(1.08); }

.z5vss__content {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px 18px 18px;
}
.z5vss__result { display: block; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
.z5vss__name { display: block; color: #fff; font-size: 17px; font-weight: 700; line-height: 1.2; }
.z5vss__meta { display: block; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.25; }

.z5vss__controls {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  margin-top: 32px;
  pointer-events: none;
}
.z5vss__arrows,
.z5vss__pagination { pointer-events: auto; }
.z5vss__arrows { display: flex; align-items: center; gap: .75rem; flex: none; }
.z5vss__arrow {
  appearance: none;
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #CF2027;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .25s ease, transform .25s ease, background-color .25s ease, color .25s ease;
}
.z5vss__arrow::before { content: ''; position: absolute; inset: -6px; border-radius: inherit; }
.z5vss__arrow svg { width: 21px; height: 21px; }
.z5vss__arrow.is--flipped { transform: scaleX(-1); }
.z5vss__arrow:hover:not([disabled]) { transform: translateY(-2px); }
.z5vss__arrow.is--flipped:hover:not([disabled]) { transform: scaleX(-1) translateY(-2px); }
.z5vss__arrow[disabled] { opacity: 1; cursor: default; pointer-events: none; background: #C8C8C8; color: #fff; transform: none; }
.z5vss__arrow.is--flipped[disabled] { transform: scaleX(-1); }

.z5vss__pagination { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 1rem; min-width: 0; }
.z5vss__pagination--progress { max-width: 32rem; }
.z5vss__progress-track { position: relative; flex: 1; min-width: 0; height: 2px; overflow: hidden; background: #D6D6D6; }
.z5vss__progress-bar { display: block; width: 100%; height: 100%; background: #CF2027; transform: scaleX(0); transform-origin: left center; transition: transform .35s ease; }
.z5vss__counter { display: inline-flex; align-items: baseline; gap: .35em; white-space: nowrap; color: #171214; font-size: .875rem; font-variant-numeric: tabular-nums; }
.z5vss__counter-separator { opacity: .4; }
.z5vss__dots.swiper-pagination { position: static; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; width: auto; }
.z5vss__dots .swiper-pagination-bullet { width: .65rem; height: .65rem; margin: 0 !important; border-radius: 50%; background: rgba(0,0,0,.18); opacity: 1; }
.z5vss__dots .swiper-pagination-bullet-active { background: #CF2027; }

/* Visible, functional non-JS/editor fallback. */
.z5vss.is-swiper-fallback .z5vss__swiper,
.z5vss.is-swiper-initializing .z5vss__swiper,
.z5vss.is-elementor-editor .z5vss__swiper,
.elementor-editor-active .z5vss__swiper {
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.z5vss.is-swiper-fallback .z5vss__swiper::-webkit-scrollbar,
.z5vss.is-swiper-initializing .z5vss__swiper::-webkit-scrollbar,
.z5vss.is-elementor-editor .z5vss__swiper::-webkit-scrollbar,
.elementor-editor-active .z5vss__swiper::-webkit-scrollbar { display: none; }

.z5vss.is-swiper-fallback .swiper-wrapper,
.z5vss.is-swiper-initializing .swiper-wrapper,
.z5vss.is-elementor-editor .swiper-wrapper,
.elementor-editor-active .z5vss .swiper-wrapper {
  display: flex !important;
  flex-wrap: nowrap;
  gap: var(--z5vss-gap-current);
  width: 100%;
  transform: none !important;
}

.z5vss.is-swiper-ready .swiper-wrapper { gap: 0; }

.z5vss.is-swiper-fallback .z5vss__slide,
.z5vss.is-swiper-initializing .z5vss__slide,
.z5vss.is-elementor-editor .z5vss__slide,
.elementor-editor-active .z5vss__slide {
  margin-right: 0 !important;
  opacity: 1;
  scroll-snap-align: start;
  transform: none;
}

.z5vss.is-swiper-pending:not(.is-layout-ready) .z5vss__slider-shell,
.z5vss.is-swiper-pending:not(.is-layout-ready) .z5vss__controls { visibility: hidden; opacity: 0; }
.z5vss.is-layout-ready .z5vss__slider-shell,
.z5vss.is-layout-ready .z5vss__controls,
.z5vss.is-swiper-fallback .z5vss__slider-shell,
.z5vss.is-swiper-fallback .z5vss__controls,
.z5vss.is-swiper-initializing .z5vss__slider-shell,
.z5vss.is-swiper-initializing .z5vss__controls { visibility: visible; opacity: 1; }

.z5vss-modal[hidden] { display: none !important; }
.z5vss-modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.86); }
.z5vss-modal__dialog { position: relative; width: min(1000px, 100%); outline: none; }
.z5vss-modal__content { overflow: hidden; border-radius: var(--z5vss-modal-radius,16px); background: #000; }
.z5vss-modal__content video,
.z5vss-modal__content iframe { display: block; width: 100%; max-height: 84vh; aspect-ratio: 16/9; border: 0; background: #000; }
.z5vss-modal__close { position: absolute; z-index: 2; top: -10px; right: -10px; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: 999px; background: #fff; color: #111; font-size: 30px; line-height: 1; cursor: pointer; }
body.z5vss-modal-open { overflow: hidden !important; }

@media (max-width: 1024px) {
  .z5vss {
    --z5vss-spv-current: var(--z5vss-spv-tablet, 1.8);
    --z5vss-gap-current: var(--z5vss-gap-tablet, 12px);
    --z5vss-gutter-current: var(--z5vss-gutter-tablet, 24px);
  }
}

@media (max-width: 767px) {
  .z5vss {
    --z5vss-gutter-current: var(--z5vss-gutter-mobile, 20px);
  }
  .z5vss__controls { gap: 12px; flex-wrap: nowrap; }
  .z5vss__arrows { gap: 8px; }
  .z5vss__pagination { flex: 1 1 auto; gap: 10px; width: auto; }
  .z5vss__pagination--progress { max-width: none; }
  .z5vss__progress-track { flex: 1 1 auto; min-width: 40px; }
  .z5vss__counter { flex: 0 0 auto; }
}

@media (max-width: 767px) {
  .z5vss {
    --z5vss-spv-current: var(--z5vss-spv-mobile, 1.25);
    --z5vss-gap-current: var(--z5vss-gap-mobile, 10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .z5vss__poster,
  .z5vss__play,
  .z5vss__arrow,
  .z5vss__slide { transition: none !important; }
}