.services-stacking-container {
  position: relative;
  width: 100%;
  display: block;
  /* height controlled by JS — do not hardcode min-height here */
}

/* Individual Service Item — sticky is ALWAYS on, never toggled */
.service_page {
  position: sticky;
  top: 100px; /* adjust to your header height */
  width: 100%;
  box-sizing: border-box;
  padding: 40px;
  border-radius: 8px;

  opacity: 0;
  transform: translateY(100px);
  pointer-events: none;

  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* explicit stacking order so later items cover earlier ones */
.service_page:nth-of-type(1) { z-index: 1; }
.service_page:nth-of-type(2) { z-index: 2; }
.service_page:nth-of-type(3) { z-index: 3; }
.service_page:nth-of-type(4) { z-index: 4; }
.service_page:nth-of-type(5) { z-index: 5; }
.service_page:nth-of-type(6) { z-index: 6; }

.service_page.in-viewport {
  pointer-events: auto;
}

/* When service is stacked/visible — merged into one block */
.service_page.stacked {
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
  background: white;
}