/* ═════════════════════════════════════════════════════════════════
   PINNED-SCROLL GROUP (sections 4–6)

   Structure:
     .pinned-outer   — tall container, height = 100vh + contentOverflow (JS)
       ├─ .pinned-bg     — shared video/wash, siblings of .pinned-scroll
       │                   so its sticky is INDEPENDENT of the content
       │                   scrubber. Uses the FAQ pattern
       │                   (height:100vh + margin-bottom:-100vh) so it
       │                   pins for the FULL duration of .pinned-outer
       │                   — including the last viewport-height where
       │                   the content scrubber's sticky has already
       │                   released. Without this split the video
       │                   scrolls off at the bottom of the block.
       └─ .pinned-scroll — sticky content track (position:sticky; top:0)
           └─ .pinned-content — JS translates this upward in sync with
                                scroll progress so the three inner
                                sections flow past the fixed animation.
   ═════════════════════════════════════════════════════════════════ */

.pinned-outer {
	position: relative;
	width: 100%;
	/* Height is set by JS = 100vh + contentOverflow. Default = 100vh
	   so the block still renders correctly before JS runs.
	   `overflow: clip` (not hidden) keeps any stray horizontal overflow
	   contained without creating a scroll container — `overflow:hidden`
	   would break `position: sticky` on descendants. */
	height: 100vh;
	overflow: clip;
}

/* ── Shared background ──
   Sibling of .pinned-scroll (not a child) so its sticky release is
   decoupled from the content scrubber's. With margin-bottom:-100vh
   the bg collapses out of block flow, which lets the sibling content
   scroller overlap it — and the sticky's own release point is tied
   to the bottom edge of .pinned-outer rather than the scrubber's
   short sticky window. That's the same pattern .faq uses for its
   sticky video, and it makes the video stay put when the user
   reaches the end of the block instead of scrolling away. */
.pinned-outer > .pinned-bg {
	position: sticky;
	top: 0;
	height: 100vh;
	/* Pull following siblings up by 100vh so the bg occupies 0 height
	   in normal flow — content renders on top of it. */
	margin-bottom: -100vh;
	width: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.pinned-outer > .pinned-bg .pinned-bg-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Cream wash for text legibility across all three inner sections. */
.pinned-outer > .pinned-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(245, 243, 239, 0.55);
	pointer-events: none;
}

/* ── Content scrubber ── */
.pinned-scroll {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
	overflow: hidden;           /* clip content that sits outside viewport */
	isolation: isolate;
	/* Stack above the bg. */
	z-index: 1;
}

/* The content track — JS translates this upward during the pinned
   scroll. Its natural height is the sum of the three sections. */
.pinned-scroll > .pinned-content {
	position: relative;
	z-index: 1;
	width: 100%;
	will-change: transform;
}

/* Hide the per-section backgrounds — we have a single shared animation now. */
.pinned-outer .section-bg-wrap { display: none !important; }

/* Let the inner sections render transparently on top of the shared animation. */
.pinned-outer .section.stats,
.pinned-outer .section.numbers,
.pinned-outer .section.comp,
.pinned-outer .section.testi,
.pinned-outer .section.impl {
	background: transparent;
	overflow: visible;
}

/* ── Fallback: no-JS or reduced-motion ──
   Drop the scrubber pin and let all sections render in normal page
   flow. The bg is already sticky with margin-bottom:-100vh so it
   behaves correctly out of the box — we just need to release the
   content scrubber so the sections stack naturally. */
.pinned-outer.no-pin {
	height: auto !important;
}
.pinned-outer.no-pin .pinned-scroll {
	position: relative;
	height: auto;
	overflow: visible;
}
.pinned-outer.no-pin .pinned-content {
	transform: none !important;
}