.parallax-slider__group, .parallax-slider__collection {
  width: 100%;
  margin-top: 50px;
  margin-bottom: 50px;
}

.parallax-slider__list {
  width: 100%;
  display: flex;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.parallax-slider__list:active,
.parallax-slider__list.is-dragging {
  cursor: grabbing;
}

/* Dependency-free drag slider (replaces Smooothy). The slides live in a track
   we translate on drag; the list just clips. Shows all images, always. */
.parallax-slider__list.ps-init {
  display: block;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.parallax-slider__list.ps-init.is-dragging {
  cursor: grabbing;
}
.ps-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.parallax-slider__item {
  flex: none;
  padding-left: 1vw;
  padding-right: 0;
  position: relative;
  cursor: grab;
}

.parallax-slider__item:active {
  cursor: grabbing;
}

.parallax-slider__item-inner {
  /* a defined aspect-ratio so the container never collapses to 0 height when the
     image's intrinsic size isn't resolved (portrait default; variants below) */
  aspect-ratio: 3 / 4;
  border-radius: 0;
  width: 35vw;
  position: relative;
  overflow: clip;
}
.parallax-slider__item--square .parallax-slider__item-inner { aspect-ratio: 1 / 1; }
.parallax-slider__item--horizontal .parallax-slider__item-inner { aspect-ratio: 16 / 10; }

.parallax-slider__item-img {
  display: block;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  /* fill the container's defined height; 130% width gives the parallax overshoot */
  width: 130%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  position: relative;
  /* Centre the oversized image so parallax shifts left and right from middle */
  left: 50%;
  transform: translateX(-50%);
  draggable: false;
}

.parallax-slider__item-visual {
  will-change: transform;
  width: 100%;
  position: relative;
}

/* Size variants matching original Webflow slide classes */
.parallax-slider__item--square .parallax-slider__item-inner {
  width: calc(35vw * 1.3); /* ~45.5vw — original .slide.square = 130% of mask */
}

.parallax-slider__item--horizontal .parallax-slider__item-inner {
  width: calc(35vw * 1.9); /* ~66.5vw — original .slide.horizontal = 190% of mask */
}

@media screen and (max-width: 767px) {
  .parallax-slider__item--square .parallax-slider__item-inner {
    width: calc(70vw * 1.3);
  }

  .parallax-slider__item--horizontal .parallax-slider__item-inner {
    width: 92vw;
  }
}

/* Suppress zoom cursor on slider images while interacting */
.parallax-slider__list [data-click-zoom],
.parallax-slider__list img[data-click-zoom] {
  cursor: grab;
}

.parallax-slider__list.is-dragging [data-click-zoom],
.parallax-slider__list.is-dragging img {
  cursor: grabbing;
}

@media screen and (max-width: 767px) {
  .parallax-slider__item {
    padding-left: .5em;
    padding-right: .5em;
  }

  .parallax-slider__item-inner {
    width: 70vw;
  }
}

/* ============================================================================
   Project slider driven by Embla Carousel (dependency-free, no webflow.js).
   .w-slider-mask is the Embla viewport (overflow:hidden), .pjs-track is the flex
   container Embla translates, and the slides carry fixed widths + aspect-ratios
   so mixed portrait/square/horizontal images fill without collapsing. The
   original Webflow arrows + dots are reused.
   ========================================================================== */
.slider-2.w-slider.pjs { cursor: grab; overflow: hidden; }
.slider-2.w-slider.pjs.is-dragging { cursor: grabbing; }
/* The Webflow `.mask` sets width:35vw; Embla's viewport must span the full
   slider so several slides are visible at once. */
.slider-2.w-slider.pjs .w-slider-mask { overflow: hidden; height: auto; width: 100%; max-width: 100%; }
.pjs-track { display: flex; align-items: stretch; will-change: transform; touch-action: pan-y; }
.slider-2.pjs .slide {
  flex: 0 0 auto;
  width: 34vw;
  min-width: 0;
  aspect-ratio: 3 / 4;
  height: auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 10px;
  margin-left: 1vw;
}
.slider-2.pjs .slide.square { width: 44vw; aspect-ratio: 1 / 1; }
/* Keep horizontals from dominating the viewport so every slider reads as a
   multi-image strip and each arrow step feels gentle (matching the
   portrait-led darktrace-rebrand slider). object-fit: cover frames the image. */
.slider-2.pjs .slide.horizontal { width: 46vw; aspect-ratio: 3 / 2; }
.slider-2.pjs .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* keep the arrows above the slides and clickable */
.slider-2.pjs .w-slider-arrow-left,
.slider-2.pjs .w-slider-arrow-right { z-index: 3; }
@media (max-width: 767px) {
  /* On mobile every slide is a square — the best middle ground for the mixed
     portrait/horizontal images (object-fit: cover frames each one). */
  .slider-2.pjs .slide,
  .slider-2.pjs .slide.square,
  .slider-2.pjs .slide.horizontal { width: 80vw; aspect-ratio: 1 / 1; }

  /* Bring the desktop blue arrow buttons onto mobile, grouped bottom-right
     BELOW the image (they otherwise stretch into full-height swipe zones).
     The slider gets bottom padding so the arrows sit under the slide, not
     over it. */
  .slider-2.w-slider.pjs { padding-bottom: 56px; }
  .slider-2.pjs .w-slider-arrow-left,
  .slider-2.pjs .w-slider-arrow-right {
    position: absolute;
    top: auto;
    left: auto;
    bottom: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
  }
  .slider-2.pjs .w-slider-arrow-right { right: 12px; }
  .slider-2.pjs .w-slider-arrow-left { right: 64px; }
  .slider-2.pjs .left-arrow-block,
  .slider-2.pjs .right-arrow-block {
    width: 40px;
    height: 40px;
    background-color: var(--the-blue);
    border-radius: 5px;
  }
}