/* V17: last-card caption added; isolated repair of the scroll-card section. No global style changes.
   IMPORTANT: keep overflow visible on every ancestor of the sticky element. */
.boring-section {
  --cards-header: 92px;
  --cards-view: calc(100svh - 92px);
  --cards-travel: 2400px;
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #500775;
  overflow: visible;
}
/* Readable, ordinary document flow if JS or animation is unavailable. */
.boring-sticky { position: relative; width: 100%; }
.boring-stage { position: relative; padding: 72px 24px; }
.boring-title-frame { position: relative; }
.boring-title {
  width: auto;
  max-width: none;
  margin: 0 auto 48px;
  padding: 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(29px, 6.6vw, 100px);
  line-height: .97;
  letter-spacing: -.028em;
  text-transform: uppercase;
  color: #500775;
}
.boring-title > span { display: block; }
.boring-cards {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: start;
  gap: 28px;
  width: min(1120px,100%);
  margin: 0 auto;
}
.boring-card { position: relative; margin: 0; padding: 0; min-width: 0; }
.boring-card img { display: block; width: 100%; height: auto; border-radius: 6.4%; }
/* JS supplies viewport-aware sizing. The sticky parent itself is not clipped. */
.boring-section.is-enhanced { height: calc(var(--cards-view) + var(--cards-travel)); }
.boring-section.is-enhanced .boring-sticky {
  position: sticky;
  top: var(--cards-header);
  height: var(--cards-view);
}
.boring-section.is-enhanced .boring-stage {
  width: 100%;
  height: 100%;
  padding: 0;
  /* Clip only the moving stage, not an ancestor of position:sticky. */
  overflow: hidden;
  overflow: clip;
}
.boring-section.is-enhanced .boring-title-frame { position: absolute; inset: 0; }
.boring-section.is-enhanced .boring-title {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max-content;
  max-width: none;
  margin: 0;
  font-size: var(--cards-title-size,120px);
  transform: translate(-50%,-50%) scaleX(var(--cards-title-scale,1));
  transform-origin: center;
}
.boring-section.is-enhanced .boring-title > span { white-space: nowrap; }
.boring-section.is-enhanced .boring-cards {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  display: block;
  margin: 0;
  pointer-events: none;
}
.boring-section.is-enhanced .boring-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cards-width,420px);
  aspect-ratio: 900 / 989;
  opacity: 0;
  transform: translate(-50%,-50%) translateY(150vh);
  transform-origin: center;
  will-change: transform;
  /* No time-based CSS transition: movement follows scroll, including reverse. */
  transition: none;
}
.boring-section.is-enhanced .boring-card:nth-child(1) { z-index: 2; }
.boring-section.is-enhanced .boring-card:nth-child(2) { z-index: 3; }
.boring-section.is-enhanced .boring-card:nth-child(3) { z-index: 4; }
.boring-section.is-enhanced .boring-card img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
@media(max-width:640px) {
  .boring-stage { padding: 52px 18px; }
  .boring-cards { grid-template-columns: 1fr; max-width: 330px; gap: 22px; }
  .boring-title { font-size: clamp(27px,6.8vw,42px); margin-bottom: 32px; }
}
@media(prefers-reduced-motion:reduce) {
  .boring-card { will-change: auto !important; }
}
@media print {
  .boring-section.is-enhanced { height: auto !important; }
  .boring-section.is-enhanced .boring-sticky { position: static; height: auto; }
  .boring-section.is-enhanced .boring-stage { height: auto; overflow: visible; padding: 28px 0; }
  .boring-section.is-enhanced .boring-title-frame { position: relative; }
  .boring-section.is-enhanced .boring-title { position: static; width: auto; font-size: 36px; transform: none; }
  .boring-section.is-enhanced .boring-cards { position: static; display: flex; gap: 20px; margin-top: 24px; }
  .boring-section.is-enhanced .boring-card { position: static; width: 30%; opacity: 1 !important; transform: none !important; }
}

/* Caption follows the last yellow card, but remains horizontal. */
.boring-note {
  margin: 24px auto 0;
  padding: 0;
  width: calc(100% - 32px);
  max-width: 680px;
  color: #737373;
  font-family: var(--body, "DM Sans", Arial, sans-serif);
  font-size: clamp(11px, .92vw, 14px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}
.boring-section.is-enhanced .boring-note {
  position: absolute;
  top: var(--cards-note-top, calc(50% + 290px));
  left: 50%;
  z-index: 5;
  margin: 0;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
@media print {
  .boring-section.is-enhanced .boring-note {
    position: static;
    width: 100%;
    margin: 20px auto 0;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}