/* Split-screen Scroll: step dots (added by the script inside the sticky, pinned column). */
.kinetic-split__nav {
	position: absolute;
	top: 50%;
	right: -18px;
	z-index: 5;
	transform: translateY(-50%);
}

.kinetic-split--pin-last .kinetic-split__nav {
	right: auto;
	left: -18px;
}

.kinetic-split__nav ol {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kinetic-split__nav li {
	margin: 0;
	padding: 0;
}

.kinetic-split__dot {
	display: block;
	width: 12px;
	height: 12px;
	margin: 0;
	padding: 0;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	opacity: 0.6;
	cursor: pointer;
	transition: transform 0.2s, opacity 0.2s, background-color 0.2s;
}

.kinetic-split__dot[aria-current] {
	background: currentColor;
	opacity: 1;
	transform: scale(1.25);
}

.kinetic-split__dot:hover {
	opacity: 1;
}

.kinetic-split__dot:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.kinetic-split__dot {
		transition: none;
	}
}