/**
 * Scroll navigator — fixed bottom-right button.
 * One click jumps to the bottom (when near the top) or back to the top
 * (when lower down). The ring shows page scroll progress.
 */
.ph4-scrollnav {
	--sn-size: 52px;
	--sn-accent: var(--color-primary-orange);
	--sn-ink: var(--color-primary-black);

	position: fixed;
	right: clamp(16px, 2.2vw, 32px);
	bottom: clamp(16px, 2.2vw, 32px);
	z-index: 900;
	width: var(--sn-size);
	height: var(--sn-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	cursor: pointer;
	color: var(--color-white);
	background: var(--sn-ink);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--color-black) 28%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-white) 12%, transparent);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(.9);
	transition: opacity .3s ease, transform .3s ease, visibility .3s, background-color .2s ease, box-shadow .2s ease;
	-webkit-tap-highlight-color: transparent;
}

.ph4-scrollnav.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ph4-scrollnav:hover {
	background: var(--sn-accent);
	box-shadow: 0 10px 26px color-mix(in srgb, var(--color-black) 32%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-white) 20%, transparent);
}

.ph4-scrollnav:active {
	transform: scale(.94);
}

.ph4-scrollnav:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--sn-accent);
}

.ph4-scrollnav__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	pointer-events: none;
}

.ph4-scrollnav__ring circle {
	fill: none;
	stroke-width: 2.5;
}

.ph4-scrollnav__track {
	stroke: color-mix(in srgb, var(--color-white) 18%, transparent);
}

.ph4-scrollnav__bar {
	stroke: var(--sn-accent);
	stroke-linecap: round;
	stroke-dasharray: 100.53; /* 2πr, r = 16 */
	stroke-dashoffset: 100.53;
	transition: stroke .2s ease;
}

.ph4-scrollnav:hover .ph4-scrollnav__bar {
	stroke: var(--color-white);
}

.ph4-scrollnav__arrow {
	position: relative;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .35s cubic-bezier(.3, .8, .3, 1);
}

/* Arrow points down (go to bottom) until the visitor is past halfway. */
.ph4-scrollnav[data-dir="down"] .ph4-scrollnav__arrow {
	transform: rotate(180deg);
}

@media (max-width: 600px) {
	.ph4-scrollnav {
		--sn-size: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ph4-scrollnav,
	.ph4-scrollnav__arrow {
		transition: none;
	}
}

@media print {
	.ph4-scrollnav {
		display: none;
	}
}