/* Reviews V8 — arched panel with twin vertical review scrollers */
.rvw.v8 {
	--rvw-str-s: 1.33rem;

	/* Panel fill shown behind the photo / at the panel edges */
	--rvw-v8-panel-bg: #2d4690;

	/* ── Panel (full-bleed: photo + arches span the full width) ────────── */
	.rvw-v8-panel {
		position: relative;
		overflow: hidden;
		background: var(--rvw-v8-panel-bg);
		isolation: isolate;
	}

	/* Background photo fills the panel, behind the tint */
	picture.bg {
		position: absolute;
		inset: 0;
		z-index: 0;
	}
	picture.bg,
	picture.bg img {
		width: 100%;
		height: 100%;
	}
	picture.bg img {
		object-fit: cover;
		opacity: 1;
	}

	/* Blue tint over the photo: heavier on the left (behind the copy) for
	   legibility, fading right so the photo reads through behind the cards. */
	.rvw-v8-panel::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background:
			linear-gradient(to right, hsl(226 54% 20% / 0.92) 0%, hsl(226 54% 20% / 0.78) 38%, hsl(226 54% 20% / 0.42) 70%, hsl(226 54% 20% / 0.28) 100%),
			linear-gradient(to bottom, hsl(226 54% 20% / 0.38), hsl(226 54% 20% / 0.18));
	}

	/* ── Content row (mn_wd handles the horizontal inset) ──────────────── */
	.rvw-v8-content {
		position: relative;
		z-index: 2;
		align-items: center;
		gap: 3.125rem;
		padding-block: clamp(2rem, 4vw, 4rem);
	}

	/* ── Left copy ─────────────────────────────────────────────────────── */
	.rvw-v8-lft {
		gap: 2rem;
	}

	/* Maple-leaf flair + subhead read white on the blue panel */
	.rvw-v8-lft .flr_hd { color: #fff; }
	.rvw-v8-lft h3 { --title-color: #e7ecff; }

	header em {
		--title-color: var(--lt-h1) !important; /* bold numbers → brand red */
		color: var(--title-color);
	}

	/* ── Right scroller ────────────────────────────────────────────────── */
	.rvw-v8-cols {
		--flx-gap: 1.5rem;
		position: relative;
		z-index: 2;
		height: 38rem;
	}

	.rvw-v8-col {
		height: 100%;
	}

	.rvw-v8-track {
		gap: 1.5rem;

		[aria-hidden] {
			visibility: visible;
		}

		&.ready[data-dir="up"] {
			animation: rvw-scroll-up var(--rvw-scroll-duration, 90s) linear infinite;
		}

		&.ready[data-dir="down"] {
			animation: rvw-scroll-down var(--rvw-scroll-duration, 110s) linear infinite;
		}
	}

	/* ── Arches — laid on top of the photo AND the scroller ────────────── */
	.rvw-v8-arch {
		position: absolute;
		left: 0;
		width: 100%;
		z-index: 4;
		height: clamp(7rem, 16vw, 13rem);
		line-height: 0;
		pointer-events: none;
		visibility: visible !important;
	}
	.rvw-v8-arch svg {
		display: block;
		width: 100%;
		height: 100%;
	}
	.rvw-v8-arch.is-top { top: 0; }
	.rvw-v8-arch.is-bot { bottom: 0; }

	/* ── Responsive ────────────────────────────────────────────────────── */
	@media screen and (max-width: 1279px) {
		.rvw-v8-cols { height: 32rem; }
	}

	@media screen and (max-width: 699px) {
		.rvw-v8-content { gap: 2rem; }
		.rvw-v8-cols { height: 26rem; width: 100%; }
		.rvw-v8-arch { height: clamp(5rem, 18vw, 9rem); }
	}

	@media (prefers-reduced-motion: reduce) {
		.rvw-v8-track.ready {
			animation: none !important;
		}
	}
}

@keyframes rvw-scroll-up {
	from { transform: translateY(0); }
	to   { transform: translateY(calc(-1 * var(--rvw-cycle-height))); }
}

@keyframes rvw-scroll-down {
	from { transform: translateY(calc(-1 * var(--rvw-cycle-height))); }
	to   { transform: translateY(0); }
}