/* ScrollStack.css, page-scroll-driven pinned card stack */
.ss-track {
  position: relative;
  width: 100%;
}
.ss-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  overflow: hidden;
}
.ss-stage {
  margin: auto;
  width: 100%;
  max-width: 1240px;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 4vh, 48px);
}
.ss-cards {
  position: relative;
  width: min(840px, 100%);
  height: clamp(300px, 44vh, 440px);
  margin: 0 auto;
}
.scroll-stack-card {
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  padding: clamp(32px, 5vw, 56px);
  box-sizing: border-box;
  transform-origin: center top;
  will-change: transform, opacity;
  backface-visibility: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.28);
}
.ss-progress {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 0 auto;
}
.ss-progress i {
  width: 30px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.18);
  transition: background .35s ease, width .35s ease;
}
.ss-progress i.on { background: var(--turquoise); width: 46px; }

/* keep header padding in lockstep with .section so the eyebrow aligns exactly */
@media (max-width: 1024px) {
  .ss-stage { padding: 0 28px; }
}
@media (max-width: 680px) {
  .ss-stage { padding: 0 20px; gap: clamp(16px, 3vh, 30px); }
  .ss-cards { height: clamp(320px, 54vh, 440px); }
}