/* ===== Scroll-Pin Container ===== */
.scroll-pin {
  position: relative;
}

/* Default flow (mobile, reduced-motion, no-JS, unrecognized mode):
   children stack naturally and remain fully accessible. */

/* JS-active state: pin the section, allow modes to absolutely-position children */
.scroll-pin.is-active {
  height: 100vh;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ----- Chrome (progress bar + dot nav) ----- */
.scroll-pin__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0, 0, 0, 0.1);
  z-index: 10;
}
.scroll-pin__progress-bar {
  height: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.scroll-pin__nav {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 10;
}
.scroll-pin__nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  transition: background 0.3s, transform 0.3s;
}
.scroll-pin__nav-dot.is-current {
  background: currentColor;
  transform: scale(1.4);
}

.scroll-pin:not(.is-active) .scroll-pin__progress,
.scroll-pin:not(.is-active) .scroll-pin__nav {
  display: none;
}

/* ----- Mode: slides ----- */
.scroll-pin[data-scroll-pin-mode="slides"] > .et_pb_row {
  min-height: 100vh;
  display: flex;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
}

/* Anchor row: shorter, sits at the top of the section */
.scroll-pin[data-scroll-pin-mode="slides"] > .et_pb_row.scroll-pin__anchor {
  min-height: 0;
  align-items: flex-start;
}

/* Active state: slide rows stack absolutely; anchor stays in flow */
.scroll-pin[data-scroll-pin-mode="slides"].is-active > .et_pb_row:not(.scroll-pin__anchor) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-height: 0;
}
.scroll-pin[data-scroll-pin-mode="slides"].is-active > .et_pb_row.scroll-pin__anchor {
  position: relative;
  z-index: 5;
}

/* Slides occupy the area below the anchor.
   Adjust --anchor-h if your anchor row is taller/shorter than ~25vh. */
.scroll-pin[data-scroll-pin-mode="slides"].is-active {
  --anchor-h: 25vh;
}
.scroll-pin[data-scroll-pin-mode="slides"].is-active > .et_pb_row:not(.scroll-pin__anchor) {
  top: var(--anchor-h);
  height: calc(100vh - var(--anchor-h));
}

/* Hide dot nav for modes where it doesn't make sense.
   Add per-mode overrides here as you register new modes:
   .scroll-pin[data-scroll-pin-mode="video"] .scroll-pin__nav { display: none; }
*/