.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: var(--gutter);
	top: -48px;
	z-index: 100;
	padding: 8px 12px;
	background: var(--inverse-bg);
	color: var(--inverse);
}

.skip-link:focus {
	top: 12px;
}

:focus-visible {
	outline: 2px solid var(--fg);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--inverse);
}

.skills-carousel .reel-control:focus-visible,
.project-portfolio-shell .portfolio-thumb:focus-visible,
.client-gate-fields input:focus-visible,
.faq-section .faq-heading .faq-search input:focus-visible {
	outline: 2px solid var(--fg);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--inverse);
}

.skills-carousel .reel-banner .reel-control:focus-visible {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.primary-navigation,
	.services-navigation__indicator,
	.services-navigation__panel,
	.header-location::after,
	.message-toast,
	.hero-spotlight,
	.project-portfolio-shell .portfolio-slide,
	.project-portfolio-shell .portfolio-bg img,
	.project-portfolio-shell .portfolio-thumb,
	.project-portfolio-shell .portfolio-thumb img,
	.project-portfolio-shell .portfolio-nav-item::after,
	.project-portfolio-shell .portfolio-nav-thumb img,
	.surface-reveal::before,
	.client-screen,
	.client-screen *,
	.proof-image-modal,
	.client-campaign-arrow,
	.project-estimate-link::before {
		transition: none;
	}
}