/* Hero milestones — same width as .wrapper / services (90vw) */
.hero-milestones {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 72px;
  position: relative;
  background: transparent;
  box-sizing: border-box;
}

.hero-milestones__nav,
.hero-milestones__btn {
  display: none !important;
}

.hero-milestones .swiper-container {
  overflow: hidden;
  width: 100%;
  padding: 12px 0 20px;
  margin: 0;
  cursor: grab;
  background: transparent !important;
  box-sizing: border-box;
}

.hero-milestones .swiper-container:active {
  cursor: grabbing;
}

.hero-milestones .swiper-wrapper {
  align-items: stretch;
}

.hero-milestones .swiper-slide {
  /* mobile / tablet default — full card, no mid-card crop at left edge */
  width: 240px;
  height: auto;
  box-sizing: border-box;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  margin-left: 0;
}

.hero-milestones .swiper-slide:first-child {
  margin-left: 0 !important;
}

.hero-milestones__card {
  display: block;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0;
  transition: transform 0.25s ease;
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}

.hero-milestones__card:hover {
  transform: translateY(-4px);
  box-shadow: none !important;
}

.hero-milestones .swiper-slide:hover .hero-milestones__card {
  transform: translateY(-4px);
}

.hero-milestones__card picture {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  background: #fff !important;
  box-shadow: none !important;
  filter: none !important;
}

.hero-milestones__card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  border-radius: 0;
  background: #fff !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.hero-milestones__head,
.hero-milestones__label,
.hero-milestones__pagination {
  display: none !important;
}

.paradigma-ticker {
  display: none !important;
}

/* PC: whole cards only — width = exact fraction of track so nothing is cut */
@media (min-width: 900px) {
  .hero-milestones .swiper-slide {
    /* 3 full cards + 2 gaps of 18px */
    width: calc((100% - 36px) / 3);
  }

}

@media (min-width: 1200px) {
  .hero-milestones .swiper-slide {
    /* 4 full cards + 3 gaps of 18px */
    width: calc((100% - 54px) / 4);
  }
}

@media (min-width: 1500px) {
  .hero-milestones .swiper-slide {
    /* 5 full cards + 4 gaps of 18px — all visible without scroll when 5 slides */
    width: calc((100% - 72px) / 5);
  }
}

@media (max-width: 899px) {
  .hero-milestones {
    padding: 0 0 80px;
    overflow: visible;
  }

  .hero-milestones .swiper-container {
    overflow: visible;
    /* extend past the block to the right so the last/peek card is not clipped */
    width: calc(100% + 6.875vw + 2.5rem);
    max-width: none;
    padding-top: 4px;
  }

  .hero-milestones .swiper-slide {
    width: min(68vw, 260px);
    overflow: visible;
  }

  .hero-milestones__card,
  .hero-milestones__card picture {
    overflow: hidden;
  }
}

@media (max-width: 600px) {
  .hero-milestones .swiper-slide {
    width: min(72vw, 270px);
  }
}

@media (min-width: 769px) and (max-width: 899px) {
  .hero-milestones .swiper-container {
    width: calc(100% + 5vw + 2.5rem);
  }
}