/* Full-page Matrix field, with content and controls layered above the canvas. */
.page-water-backdrop {
	position: relative;
	background: #071827;
}

.page-water-canvas {
	position: sticky;
	top: 0;
	display: block;
	width: 100%;
	height: 100vh;
	margin-bottom: -100vh;
	z-index: 0;
	opacity: 0;
	pointer-events: none;
}

.page-water-backdrop.water-ready .page-water-canvas {
	opacity: 1;
}

.page-water-content {
	position: relative;
	z-index: 1;
}

/* Let the moving field show between sections while cards keep their own fills. */
.page-water-content > section,
.page-water-content > footer {
	background-color: transparent !important;
}

#services > .parallax-bg,
#services > .gradient-scrim {
	display: none;
}

.theme-toggle {
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: #d1d5db;
	border: 1px solid rgba(103, 232, 249, 0.3);
	border-radius: 9999px;
	background: rgba(15, 23, 42, 0.35);
	transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.theme-toggle svg {
	width: 1.125rem;
	height: 1.125rem;
}

.theme-toggle .theme-moon,
html:not(.dark) .theme-toggle .theme-sun {
	display: none;
}

html:not(.dark) .theme-toggle .theme-moon {
	display: block;
}

.theme-toggle:hover {
	color: #67e8f9;
	border-color: #38bdf8;
}

.theme-toggle:focus-visible {
	outline: 3px solid #67e8f9;
	outline-offset: 3px;
}

html:not(.dark) {
	color-scheme: light;
}

html.dark {
	color-scheme: dark;
}

html:not(.dark) body,
html:not(.dark) .page-water-backdrop {
	background-color: #f7fbfe;
	color: #172b3a;
}

html:not(.dark) [class*="bg-slate-800"] {
	background-color: #e5eef3;
}

html:not(.dark) [class*="bg-slate-700"] {
	background-color: #d7e4eb;
}

html:not(.dark) body > :not(.hero-section) [class*="text-gray-"] {
	color: #354b5b;
}

html:not(.dark) [class*="text-teal-"] {
	color: #087e83;
}

html:not(.dark) .section-bg {
	background-color: #dfeaf0;
}

html:not(.dark) .sticky-nav {
	background-color: #f2f7fa;
	border-color: rgba(8, 126, 131, 0.2);
}

html:not(.dark) .sticky-nav.scrolled {
	background-color: #f2f7fa;
}

html:not(.dark) .sticky-nav .text-white {
	color: #172b3a;
}

html:not(.dark) .theme-toggle {
	color: #173c52;
	background: rgba(255, 255, 255, 0.7);
}

html:not(.dark) .glass-panel-about {
	background: #f7fafb;
	border-color: rgba(23, 60, 82, 0.14);
	box-shadow: 0 8px 28px rgba(23, 60, 82, 0.1);
}

@media (prefers-reduced-motion: reduce) {
	.page-water-canvas {
		display: none;
	}
}