/* --------------------------------------------------
	Custom Fonts (kept as-is, commented out for now)
-------------------------------------------------- */
/*
@font-face {
	font-family: 'Rounded Mplus 1c';
	src: url('../assets/fonts/RoundedMplus1c-ExtraBold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Rounded Mplus 1c';
	src: url('../assets/fonts/RoundedMplus1c-Bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Rounded Mplus 1c';
	src: url('../assets/fonts/RoundedMplus1c-Black.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Rounded Mplus 1c';
	src: url('../assets/fonts/RoundedMplus1c-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Rounded Mplus 1c';
	src: url('../assets/fonts/RoundedMplus1c-Thin.woff2') format('woff2');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Rounded Mplus 1c';
	src: url('../assets/fonts/RoundedMplus1c-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Rounded Mplus 1c';
	src: url('../assets/fonts/RoundedMplus1c-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
*/

/* --------------------------------------------------
	Design Tokens (CSS Variables)
	- Only remapped values; visuals remain identical
-------------------------------------------------- */
:root {
	--nav-h: 64px;
	/* sticky navbar height used for anchor offsets */
	/* Colors */
	--color-primary: #0066cc;
	--color-primary-300: #3399ff;
	--color-primary-700: #004999;
	--color-primary-650: #004c99;
	--color-accent: #ffcc00;
	--color-text: #003344;
	--color-bg: #ffffff;
	--color-panel-bg: #f9f9f9;
	--color-tooltip: rgba(0, 0, 0, 0.85);
	--color-badge-bg: #007acc;

	/* Gradients & Shadows */
	--gradient-primary: linear-gradient(to right, var(--color-primary-300), var(--color-primary));
	--shadow-1: 0 4px 6px rgba(0, 0, 0, 0.1);
	--shadow-2: 0 6px 10px rgba(0, 0, 0, 0.15);
	--shadow-inset-1: inset 0 2px 5px rgba(0, 0, 0, 0.08), inset 0 -2px 5px rgba(0, 0, 0, 0.04);
	--shadow-navbar: 0px 7px 12px black;

	/* Radius & Sizing */
	--radius: 0.5rem;
	/* ≈ 8px */
	--radius-lg: 0.75rem;
	/* 12px -> 0.75rem */
	--container-max: 900px;
	--container-w: 90%;

	/* Motion & Timings */
	--ease: ease;
	--t-fast: 0.3s;
	--t-base: 0.5s;

	/* Tooltip offsets */
	--tooltip-offset: -2.65rem;
	--tooltip-arrow-offset: -1rem;

	/* New: consistent width for Play/Pause control */
	--ctrl-minw: 5.5rem;

	/* New: circular back-to-top sizing */
	--backtotop-size: 3rem;

	/* New: h1 divider color */
	--h1-divider: rgba(0, 0, 0, 0.12);

	/* New: h3 divider color */
	--h3-divider: rgba(0, 0, 0, 0.12);

	/* New: footer top separator */
	--footer-border-top: black;
}

/* --------------------------------------------------
	Global
-------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

body {
	text-align: center;
	margin: 0;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	color: var(--color-text);
	background-color: var(--color-bg);
	scroll-behavior: smooth;
}

h1 {
	font-size: 1.75rem;
	line-height: 1.2;
	/* keeps it compact but readable */
	margin-block-start: 0;
	/* no extra gap above */
	margin-block-end: 0.5em;
	/* consistent gap below */
	font-weight: 700;
	/* bold for emphasis */
	text-align: center;
	/* matches most hero/intro styles */
}

/* UPDATED: Screen H1 styling class (apply to your new H1) */
.page-title {
	text-align: center;
	color: var(--color-primary-650);
	margin: 4.5rem auto 1rem;
	/* more breathing room above/below */
	padding: 0.5rem 0 0.75rem;
	/* gentle vertical padding */
	position: relative;
	line-height: 1;
}

.page-title::after {
	content: '';
	display: block;
	width: 50%;
	/* slightly wider than h2 underline */
	margin: 0.6rem auto 0;
	border-bottom: 3px solid var(--h1-divider);
}

/* Make h2 size to its text and stay centered */
h2 {
	display: inline-block;
	/* shrink-to-fit */
	margin: 2rem auto 0;
	/* keep centered */
	text-align: center;
	color: var(--color-primary-650);
	position: relative;
	padding-bottom: 0.5rem;
}

/* Start collapsed */
h2::after {
	content: '';
	display: block;
	width: 0;
	/* will animate from 0 to 80% of the h2 text width */
	margin: 0.5rem auto 0;
	border-bottom: 3px solid var(--color-accent);
	transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
	/* easeOutCubic */
	transition-delay: 0.8s;
	/* plays after your 0.8s section reveal */
}

/* Grow underline only once, when the section first reveals */
.reveal.visible h2::after {
	width: 80%;
}

/* Subtle divider under h3s (approved) */
h3 {
	position: relative;
	padding-bottom: 0.25rem;
}

h3::after {
	content: '';
	display: block;
	width: 40px;
	margin: 0.4rem auto 0;
	border-bottom: 2px solid var(--h3-divider);
}

/* Subtle divider under h3s (with growing underline animation) */
/* Commented out for now, not sure if I like it */
/* The two CSS declarations above take care of the <h3> styling in absense of the three blocks below */
/* h3 {
	display: inline-block; // shrink to text width
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	position: relative;
	padding-bottom: 0.25rem;
}

h3::after {
	content: '';
	display: block;
	width: 0; // start hidden
	margin: 0.4rem auto 0;
	border-bottom: 2px solid var(--h3-divider);
	transition: width 1.5s 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible h3::after {
	width: 50%;
} */

section {
	scroll-margin-top: var(--nav-h);
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

:focus-visible {
	outline: none;
}

a:focus-visible, button:focus-visible {
	outline: 2px solid #000;
	/* or your brand color */
	outline-offset: 3px;
}

/* Panels / Cards */
.panel {
	margin-top: 1rem;
	border: 1px solid #ccc;
	padding: 1rem;
	background-color: var(--color-panel-bg);
	border-radius: var(--radius);
	box-shadow: var(--shadow-inset-1);
}

/* --------------------------------------------------
	Hero
-------------------------------------------------- */
#hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background: linear-gradient(to bottom right, #e0f7fa, #ffffff);
	position: relative;
	text-align: center;
	/* scroll-snap-align: start; */
	/* scroll-snap-stop: always; */
}

/* 1) Visually hidden utility */
.sr-only {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* 2) Skip link: hidden by default, visible when focused */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	padding: .5rem .75rem;
	background: #fff;
	border: 2px solid #000;
	border-radius: .5rem;
	z-index: 1000;
}

/* 3) Make the down-arrow clearly focusable */
.scroll-down {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	/* generous tap target */
	border-radius: 9999px;
	outline: none;
	text-decoration: none;
	font-size: 2rem;
	color: black;
	margin-top: 1rem;
	animation: bounce 1s infinite alternate;
}

.scroll-down:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .5);
}

.hero-logo {
	max-width: 80%;
	max-height: 60vh;
	animation: fadeInZoom 1.5s var(--ease) forwards;
}

/* .scroll-down {
	font-size: 2rem;
	margin-top: 1rem;
	animation: bounce 1s infinite alternate;
} */

/* --------------------------------------------------
	Navbar
-------------------------------------------------- */
#navbar {
	padding: 1rem 0;
	position: sticky;
	top: 0;
	z-index: 1000;
	background: linear-gradient(to right, var(--color-primary-300), var(--color-primary-650));
	box-shadow: var(--shadow-navbar);
}

.nav-toggle {
	display: none;
	flex-direction: column;
	cursor: pointer;
}

.nav-toggle span {
	height: 4px;
	width: 25px;
	background: white;
	margin: 4px 0;
	border-radius: 2px;
}

.nav-links li a {
	color: #ffffff;
	text-decoration: none;
	padding: 0.5rem;
	font-weight: bold;
	transition: background-color var(--t-base) var(--ease), text-decoration-color var(--t-fast) var(--ease);
	border-radius: var(--radius);
	white-space: nowrap;
}

.nav-links li a:hover,
.nav-links li a.active {
	background-color: var(--color-primary-700);
}

/* --------------------------------------------------
	Links that should look like text
-------------------------------------------------- */
.unstyled-link {
	text-decoration: none;
}

.unstyled-link:hover {
	text-decoration: underline;
}

/* --------------------------------------------------
	Sections
-------------------------------------------------- */
#services,
#gallery,
#testimonials,
#about,
#special-offers,
#service-area,
#our-process,
#guarantee,
#credentials,
#contact,
#faq {
	max-width: var(--container-max);
	width: var(--container-w);
	margin: 0 auto;
}

/* --------------------------------------------------
	Carousel
-------------------------------------------------- */
.carousel {
	display: flex;
	padding: 1rem 0;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}

.carousel-viewport {
	width: 100%;
	position: relative;
	/* track uses translateX here */
}

.carousel-images {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 0;
	transition: transform var(--t-base) var(--ease);
}

.carousel-image {
	display: block;
	width: 75%;
	height: auto;
	margin: 0 5px;
	flex-shrink: 0;
	flex: 0 0 75%;
	border-radius: var(--radius);
	box-sizing: border-box;
	transition: transform var(--t-base) var(--ease);

	aspect-ratio: 1000 / 750;
}

/* Controls + Tooltips */
.carousel-controls {
	position: relative;
	/* tooltip anchor */
	display: flex;
	gap: 0.75rem;
	align-items: center;
	justify-content: center;
	margin-top: 0.75rem;
}

.prev,
.next,
.pause {
	position: static;
	top: auto;
	transform: none;
	z-index: auto;
	padding: 0.5rem 0.9rem;
	font-size: 1.25rem;
	font-weight: bold;
	border: none;
	border-radius: var(--radius);
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	cursor: pointer;
	transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

/* Fixed width for Play/Pause so it doesn't jump */
.pause {
	min-width: var(--ctrl-minw);
}

/* Enabled-only hover (bring back blue) */
.carousel-controls button:not(:disabled):hover,
.carousel-controls button:not(.disabled):hover {
	background: var(--color-primary-700);
	transform: scale(1.05);
	box-shadow: var(--shadow-2);
}

.carousel-controls button {
	opacity: 1;
	transition: opacity var(--t-base) var(--ease);
}

/* Disabled (both actual :disabled and semantic .disabled) */
.carousel-controls button:disabled,
.carousel-controls button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
	position: relative;
	/* needed for tooltip */
}

/* Tooltip (shared rules) */
.carousel-controls button:disabled::after,
.carousel-controls button.disabled::after {
	content: "Scroll the image carousel fully into view to re-enable this button";
	position: absolute;
	bottom: var(--tooltip-offset);
	/* -2.65rem */
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-tooltip);
	color: #fff;
	padding: 6px 8px;
	border-radius: var(--radius);
	white-space: nowrap;
	font-size: 0.8rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--t-base) var(--ease);
	z-index: 9999;
}

.carousel-controls button:disabled:hover::after,
.carousel-controls button.disabled:hover::after {
	opacity: 1;
}

/* Tooltip arrow (duplicate for :disabled + .disabled) */
.carousel-controls button:disabled:hover::before,
.carousel-controls button.disabled:hover::before {
	content: "";
	position: absolute;
	bottom: var(--tooltip-arrow-offset);
	/* -1rem */
	left: 50%;
	transform: translateX(-50%);
	border-width: 0.4rem;
	border-style: solid;
	border-color: var(--color-tooltip) transparent transparent transparent;
	pointer-events: none;
}

/* Suppress dimming + tooltip during temporary (in-view) disables */
.carousel-controls.no-dim button:disabled,
.carousel-controls.no-dim button.disabled {
	opacity: 1;
	cursor: default;
	box-shadow: none;
}

.carousel-controls.no-dim button:disabled::after,
.carousel-controls.no-dim button.disabled::after,
.carousel-controls.no-dim button:disabled::before,
.carousel-controls.no-dim button.disabled::before {
	display: none;
	content: none;
}

/* --------------------------------------------------
	Service Area Map
-------------------------------------------------- */
#service-area-map-img {
	width: 100%;
	height: auto;
	max-width: var(--container-max);
	border-radius: var(--radius-lg);
	/* 12px -> 0.75rem */
}

/* --------------------------------------------------
	Process text spacing
-------------------------------------------------- */
.process-h4 {
	margin-top: 1rem;
	margin-block-start: 0.75rem;
	margin-block-end: 0.75rem;
}

.process-paragraph {
	margin-top: -0.5rem;
}

/* --------------------------------------------------
	Contact info
-------------------------------------------------- */

.contact-info-image {
	width: 40%;
}

/* --------------------------------------------------
	Footer
-------------------------------------------------- */
footer {
	background-color: var(--color-primary-650);
	color: white;
	text-align: center;
	margin-top: 6rem;
	padding: 0.25rem 1rem 0.25rem 1rem;
	font-size: 0.95rem;

	/* New: subtle separator from page content */
	border-top: 1px solid var(--footer-border-top);
}

/* Badges */
#badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

#badges .badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 110px;
	text-align: center;
	font-size: 0.85rem;
	color: var(--color-text);
	margin-bottom: 0.5rem;
}

#badges .badge img {
	width: 48px;
	height: 48px;
	margin-bottom: 0.5rem;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
	transition: transform var(--t-fast) var(--ease);
}

#badges .badge img:hover {
	transform: scale(1.1);
}

#badges span {
	background-color: var(--color-badge-bg);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: var(--radius-lg);
	/* 12px -> 0.75rem */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* --------------------------------------------------
	Buttons (global)
-------------------------------------------------- */
button {
	background: var(--gradient-primary);
	color: white;
	border: none;
	border-radius: 6px;
	/* keeping your global 6px button style */
	padding: 0.8rem 1.5rem;
	font-weight: bold;
	cursor: pointer;
	box-shadow: var(--shadow-1);
	transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-base) var(--ease);
}

button:hover {
	transform: scale(1.05);
	box-shadow: var(--shadow-2);
}

/* Keyboard focus (accessible) */
button:focus-visible,
a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* --------------------------------------------------
	FAQ (remove white flash on hover)
-------------------------------------------------- */
.faq-item {
	margin-bottom: 1rem;
	border: 1px solid #ccc;
	border-radius: 12px;
	overflow: hidden;
}

/* UPDATED: make the FAQ “question” buttons full-width rows */
.faq-question {
	display: block;
	/* fill the parent width */
	width: 100%;
	box-sizing: border-box;
	/* include padding in width */
	text-align: center;
	/* feels more natural for Q&A */
	background: var(--color-primary);
	/* solid to avoid gradient->solid flash */
	color: white;
	padding: 1rem;
	cursor: pointer;
	font-size: 1.05rem;
	font-weight: bold;
	transition: background-color var(--t-base) var(--ease);
	border: 0;
	/* ensure no default button border */
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
}

.faq-question:hover {
	background-color: var(--color-primary-700);
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s var(--ease), padding 0.4s var(--ease);
	background: var(--color-panel-bg);
	padding: 0 1rem;
}

.faq-answer.open {
	padding: 1rem;
}

/* --------------------------------------------------
	Navbar (shrink on scroll)
-------------------------------------------------- */
#navbar.shrink {
	padding: 0.5rem 0;
	transition: padding var(--t-fast) var(--ease);
}

/* --------------------------------------------------
	Dividers
-------------------------------------------------- */
hr.section-divider {
	width: 60%;
	margin: 2rem auto;
	border: 0;
	height: 1px;
	background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}

/* --------------------------------------------------
	Reveal-on-scroll sections
-------------------------------------------------- */
.reveal {
	opacity: 0;
	transform: translateY(20px);
}

.reveal.visible {
	animation: staggerFade 0.8s var(--ease) forwards;
}

/* --------------------------------------------------
	Contact Info Reveal
-------------------------------------------------- */
#contact-info {
	/* moved default hidden from inline HTML */
	display: none;
	margin-top: 1rem;
	margin-bottom: 1rem;
	border: 1px solid #ccc;
	padding: 1rem;
	background-color: var(--color-panel-bg);
	border-radius: var(--radius);
}

#contact-info-button {
	margin-bottom: 0.5rem;
}

#contact .reveal-container {
	overflow: hidden;
}

#contact .reveal-contact {
	opacity: 0;
	transform: translateY(-10px);
	max-height: 0;
	overflow: hidden;
	transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), max-height var(--t-base) var(--ease);
}

#contact .reveal-contact.visible {
	opacity: 1;
	transform: translateY(0);
	max-height: 500px;
}

#contact button.fade-out {
	opacity: 0;
	transform: scale(0.9);
	transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

/* --------------------------------------------------
	Back to Top (replaced inline; now perfectly circular)
-------------------------------------------------- */
#backToTop {
	position: fixed;
	bottom: 30px;
	right: 30px;

	/* Circle sizing – use equal width/height, then center the arrow */
	width: var(--backtotop-size);
	height: var(--backtotop-size);
	padding: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	border: none;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	cursor: pointer;
	display: none;
	/* default hidden */
	z-index: 999;
	box-shadow: var(--shadow-1);
	transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-base) var(--ease);
}

#backToTop:hover {
	transform: scale(1.05);
	box-shadow: var(--shadow-2);
}

#backToTop-link {
	display: none;
}

#backToTop-span {
	display: block;
}

/* --------------------------------------------------
	Responsive Navigation
-------------------------------------------------- */
.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin-top: 0.5rem;
	gap: 1rem;
	list-style: none;
}

.nav-toggle {
	display: flex;
}

@media (max-width: 900px) {
	.nav-container {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		flex-direction: column;
		align-items: center;
	}

	.nav-toggle {
		display: flex;
	}

	.nav-links {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100vw;
		z-index: 999;
		text-align: center;
		padding: 2rem 0;
		overflow: hidden;
		background: linear-gradient(to right, var(--color-primary-300), var(--color-primary-650));
		box-shadow: 0px 7px 6px black;
		/* exact value kept */
		opacity: 0;
		transition: opacity var(--t-fast) var(--ease);

		pointer-events: none;
	}

	/* UPDATED: support the new JS class `.open` (and keep `.active` for backwards-compat) */
	.nav-links.open,
	.nav-links.active {
		opacity: 1;

		pointer-events: auto;
	}

	.nav-links li {
		margin: 0.5rem 0;
	}
}


/* Tablet mid-range: keep desktop-style navbar but tighten spacing so it fits one line */
@media (min-width: 901px) and (max-width: 1100px) {

	:root { --nav-h: 72px; }  /* adjust to your real height */

	#navbar {
	    padding-bottom: 0.5rem;           /* adds bottom breathing room */
	  }

	/* Show desktop-style nav, hide hamburger */
	.nav-toggle {
		display: none;
	}

	.nav-container {
		padding-bottom: 0.5rem;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	/* Inline nav links, prevent wrapping, reduce gaps */
	.nav-links {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		gap: 0.5rem;
		/* was 1rem */
		position: static;
		background: transparent;
		padding: 0;
		margin-bottom: 0;
	}

	.nav-links li {
		margin: 0;
		/* tighter vertical margins */
	}

	/* Slightly smaller link text to avoid wrapping */
	.nav-links a {
		padding-inline: 0.25rem;
		padding-block: 0.35rem;
		font-size: 0.9rem;
		line-height: 1.1;
		white-space: nowrap;
	}
}

@media (min-width: 1101px) {
	.nav-toggle {
		display: none;
	}

	.nav-links {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		position: static;
		background-color: transparent;
		padding: 0;
	}

	.nav-links li {
		margin-top: 0.75rem;
		margin-bottom: 0.75rem;
	}
}

/* --------------------------------------------------
	Animations
-------------------------------------------------- */
@keyframes fadeInUp {
	from {
		transform: translateY(20px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes fadeInZoom {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes bounce {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(10px);
	}
}

@keyframes staggerFade {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --------------------------------------------------
	PRINT: One-page essentials (safe + reveal fixes) [Not actually one page! Haha.]
-------------------------------------------------- */

@media print {
	@page {
		size: Letter;
		margin: 0.5in;
	}

	/* Remove color/animation fluff */
	*, *::before, *::after {
		box-shadow: none;
		text-shadow: none;
		background: transparent;
		animation: none;
		transition: none;
		filter: none;
	}

	html, body {
		background: #fff;
		color: #000;
	}

	/* Print-only heading at top of first page */
	body::before {
		content: "The Fresh & Clean Company";
		display: block;
		text-align: center;
		font-size: 2rem;
		font-weight: bold;
		margin-bottom: 1rem;
	}

	/* Force revealable content to print */
	.reveal,
	.reveal.visible {
		opacity: 1;
		transform: none;
	}

	/* Expand hidden sections */
	.faq-answer {
		max-height: none;
		padding: 1rem;
		overflow: visible;
	}

	#contact-info {
		display: block;
	}

	/* Hide decorative/interactive sections */
	#navbar,
	#hero,
	#gallery,
	.carousel,
	hr.section-divider,
	#backToTop,
	.nav-toggle,
	.scroll-down,
	#badges,
	footer {
		display: none;
	}

	/* Compact layout for fewer pages */
	section,
	.panel {
		margin: 0 0 10px 0;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 0;
		background: #fff;
		break-inside: avoid;
	}

	h1, h2, h3, h4, p, ul, li {
		margin: 0 0 8px 0;
		padding: 0;
	}

	/* Remove decorative h2 underline */
	h2::after {
		display: none;
	}

	img {
		max-width: 100%;
		height: auto;
	}
}


/* Final overrides to replace removed  (auto-generated) */
}

/* -------------------------------------------------- Reduced Motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms;
		animation-iteration-count: 1;
		transition-duration: 0.001ms;
		scroll-behavior: auto;
	}

	/* Remove color/animation fluff */
	*, *::before, *::after {
		box-shadow: none;
		text-shadow: none;
		background: transparent;
		animation: none;
		transition: none;
		filter: none;
	}

	html, body {
		background: #fff;
		color: #000;
	}

	/* Force revealable content to print */
	.reveal, .reveal.visible {
		opacity: 1;
		transform: none;
	}

	/* Expand hidden sections */
	.faq-answer {
		max-height: none;
		padding: 1rem;
		overflow: visible;
	}

	#contact-info {
		display: block;
	}

	/* Hide decorative/interactive sections */
	#navbar, #hero, #gallery, .carousel, hr.section-divider, #backToTop, .nav-toggle, .scroll-down, #badges, footer {
		display: none;
	}

	/* Compact layout for fewer pages */
	section, .panel {
		margin: 0 0 10px 0;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 0;
		background: #fff;
	}

	h1, h2, h3, h4, p, ul, li {
		margin: 0 0 8px 0;
		padding: 0;
	}

	/* Remove decorative h2 underline */
	h2::after {
		display: none;
	}

	img {
		max-width: 100%;
		height: auto;
	}


	/* Ensure deep links to the page title land below the sticky navbar */
	main>h1 {
		scroll-margin-top: var(--nav-h);
	}


/* Disable scroll anchoring while JS performs smooth snaps */
html.no-anchor,
body.no-anchor { overflow-anchor: none; }

/* Prevent carousel hydration from nudging anchoring */
.carousel { overflow-anchor: none; }