/*
Theme Name: BSC Pureflow
Theme URI: https://bscpureflowservices.com/
Author: BSC Pureflow Services
Author URI: https://bscpureflowservices.com/
Description: A clean, conversion-focused WordPress theme for BSC Pureflow Services — pressure washing and NADCA-certified air duct cleaning. Features a sticky CTA bar, hero section with quote card, service grid, process steps, commercial tiles, reviews, service area, and final CTA banner.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bsc-pureflow
Tags: business, one-column, custom-menu, custom-logo, featured-images, full-width-template, theme-options, threaded-comments, translation-ready
*/

:root {
	/* Brand palette sampled from the BSC Pureflow logo. */
	--navy:        #142a55;  /* deep navy from "BSC" + dark wave */
	--navy-deep:   #0a1a3a;  /* darker shade for hero/footer backgrounds */
	--blue:        #3a6fa0;  /* mid blue from PUREFLOW outline */
	--blue-bright: #6bd5e8;  /* bright cyan from "FLOW" word */
	/* Existing yellow vars repurposed to the logo's bright cyan so all existing CSS keeps working. */
	--yellow:      #6bd5e8;  /* primary accent / CTA */
	--yellow-dark: #3cb7d8;  /* hover state */
	--teal:        #3fc8a0;  /* optional teal accent (small wave hint) */
	--ink:         #0a1a3a;  /* deepest navy for text emphasis */
	--text:        #2a3848;
	--muted:       #6b7785;
	--bg:          #f5f7fa;
	--bg-warm:     #eaf4fa;  /* slight cyan tint to harmonize with brand */
	--border:      #d4dde6;
	--white:       #ffffff;
	--success:     #1e9e5a;

	--shadow-sm:   0 2px 8px rgba(10, 46, 77, 0.06);
	--shadow-md:   0 6px 24px rgba(10, 46, 77, 0.10);
	--shadow-lg:   0 16px 48px rgba(10, 46, 77, 0.18);

	--max:         1240px;
	--gutter:      24px;

	--display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--sans:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--white);
	color: var(--text);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 800;
	color: var(--ink);
	margin: 0 0 .5em;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: -0.005em;
}
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ===== Utility top bar ===== */
.utility {
	background: var(--navy-deep);
	color: rgba(255,255,255,0.85);
	font-size: 13px;
}
.utility__inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 8px var(--gutter);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.utility__left, .utility__right {
	display: flex;
	gap: 20px;
	align-items: center;
}
.utility__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
}
.utility__pill::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--success);
	box-shadow: 0 0 0 3px rgba(30,158,90,0.25);
}
.utility a { color: rgba(255,255,255,0.85); }
.utility a:hover { color: var(--yellow); }

/* ===== Centered CTA bar (sticky — required) ===== */
.ctabar {
	background: var(--yellow);
	border-bottom: 3px solid var(--ink);
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 2px 0 rgba(0,0,0,0.05);
}
.ctabar__inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 12px var(--gutter);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px 28px;
	flex-wrap: wrap;
}
.ctabar__tag {
	font-family: var(--display);
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	display: flex;
	align-items: center;
	gap: 10px;
}
.ctabar__tag::before {
	content: "★";
	color: var(--ink);
	font-size: 18px;
}
.ctabar__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 22px;
	background: var(--ink);
	color: var(--white);
	font-family: var(--display);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 4px;
	border: 2px solid var(--ink);
	transition: transform .15s, background .15s;
}
.ctabar__btn:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-1px); }
.ctabar__phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 22px;
	background: transparent;
	color: var(--ink);
	font-family: var(--display);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: 0.04em;
	border-radius: 4px;
	border: 2px solid var(--ink);
}
.ctabar__phone:hover { background: var(--ink); color: var(--yellow); }
.ctabar__icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	align-items: center;
	justify-content: center;
}

/* ===== Header / Nav ===== */
.header {
	background: var(--white);
	border-bottom: 1px solid var(--border);
}
.header__inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 18px var(--gutter);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
	width: 48px;
	height: 48px;
	background: var(--navy);
	color: var(--yellow);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--display);
	font-weight: 900;
	font-size: 22px;
	border-radius: 6px;
	letter-spacing: 0;
}
.brand__name {
	font-family: var(--display);
	font-weight: 800;
	font-size: 22px;
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.05;
}
.brand__tag {
	font-family: var(--sans);
	font-size: 11px;
	color: var(--muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 500;
}
.nav {
	display: flex;
	gap: 28px;
	font-family: var(--display);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.nav a {
	color: var(--ink);
	padding: 6px 0;
	border-bottom: 3px solid transparent;
}
.nav a:hover, .nav a.is-active, .nav .current-menu-item > a { border-bottom-color: var(--yellow); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; }
.header__cta {
	background: var(--blue);
	color: var(--white);
	font-family: var(--display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 12px 22px;
	border-radius: 4px;
	border: 2px solid var(--blue);
}
.header__cta:hover { background: var(--navy); border-color: var(--navy); }

/* ===== Hero ===== */
.hero {
	background:
		linear-gradient(135deg, rgba(10,46,77,0.94) 0%, rgba(7,34,58,0.97) 100%),
		repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 12px);
	color: var(--white);
	padding: 64px 0 56px;
	position: relative;
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute;
	top: -100px;
	right: -100px;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(252,185,0,0.15) 0%, transparent 60%);
	pointer-events: none;
}
.hero__inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 1;
}
.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(252,185,0,0.15);
	color: var(--yellow);
	font-family: var(--display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 100px;
	border: 1px solid rgba(252,185,0,0.3);
	margin-bottom: 24px;
}
.hero__eyebrow::before { content: "★"; }
.hero__title {
	font-family: var(--display);
	font-weight: 900;
	font-size: clamp(40px, 6vw, 76px);
	color: var(--white);
	line-height: 1;
	letter-spacing: -0.005em;
	margin: 0 0 20px;
	text-transform: uppercase;
}
.hero__title span { color: var(--yellow); }
.hero__lead {
	font-size: 18px;
	color: rgba(255,255,255,0.85);
	max-width: 540px;
	margin: 0 0 32px;
}
.hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 36px;
}
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 28px;
	font-family: var(--display);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 4px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .15s, background .15s, border-color .15s, color .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn--yellow {
	background: var(--yellow);
	color: var(--ink);
	border-color: var(--yellow);
	box-shadow: 0 6px 18px rgba(252,185,0,0.35);
}
.btn--yellow:hover { background: var(--yellow-dark); border-color: var(--yellow-dark); }
.btn--white-outline {
	background: transparent;
	color: var(--white);
	border-color: rgba(255,255,255,0.6);
}
.btn--white-outline:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn--blue { background: var(--blue); color: var(--white); border-color: var(--blue); }
.btn--blue:hover { background: var(--navy); border-color: var(--navy); }
.btn--lg { padding: 20px 36px; font-size: 18px; }

/* Trust badges row */
.trust {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,0.15);
}
.trust__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.9);
}
.trust__icon {
	width: 32px;
	height: 32px;
	background: rgba(252,185,0,0.18);
	color: var(--yellow);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	border: 1px solid rgba(252,185,0,0.4);
}

/* Hero side card */
.quote-card {
	background: var(--white);
	border-radius: 8px;
	padding: 32px;
	box-shadow: var(--shadow-lg);
	color: var(--text);
	border-top: 6px solid var(--yellow);
}
.quote-card__head {
	font-family: var(--display);
	font-weight: 800;
	font-size: 26px;
	color: var(--ink);
	margin: 0 0 6px;
	text-transform: uppercase;
	line-height: 1.05;
}
.quote-card__sub {
	font-size: 14px;
	color: var(--muted);
	margin: 0 0 20px;
}
.quote-card__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--border);
}
.quote-card__row:last-of-type { border-bottom: none; }
.quote-card__icon {
	width: 40px;
	height: 40px;
	background: var(--bg-warm);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--blue);
	font-size: 18px;
	font-weight: 700;
	flex-shrink: 0;
}
.quote-card__label {
	font-family: var(--display);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 600;
}
.quote-card__val { font-weight: 700; color: var(--ink); font-size: 16px; }
.quote-card__val a:hover { color: var(--blue); }
.quote-card__btn {
	display: block;
	width: 100%;
	margin-top: 20px;
	padding: 16px;
	background: var(--ink);
	color: var(--yellow);
	text-align: center;
	font-family: var(--display);
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 4px;
	border: none;
	cursor: pointer;
}
.quote-card__btn:hover { background: var(--blue); color: var(--white); }

/* ===== Why choose us bar ===== */
.why {
	background: var(--bg);
	border-bottom: 1px solid var(--border);
}
.why__inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 36px var(--gutter);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.why__item {
	display: flex;
	gap: 16px;
	align-items: center;
	padding-right: 24px;
	border-right: 1px solid var(--border);
}
.why__item:last-child { border-right: none; }
.why__icon {
	width: 56px;
	height: 56px;
	background: var(--navy);
	color: var(--yellow);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: 800;
	flex-shrink: 0;
}
.why__title {
	font-family: var(--display);
	font-weight: 800;
	font-size: 18px;
	color: var(--ink);
	text-transform: uppercase;
	margin: 0 0 2px;
}
.why__desc { font-size: 13px; color: var(--muted); margin: 0; }

/* ===== Section base ===== */
.section { padding: 88px 0; }
.section--bg { background: var(--bg); }
.section__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 48px;
}
.section__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 16px;
}
.section__kicker::before, .section__kicker::after {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--blue);
}
.section__title {
	font-size: clamp(34px, 4.6vw, 56px);
	margin: 0 0 12px;
}
.section__lead { font-size: 18px; color: var(--muted); margin: 0; }

/* ===== Service grid ===== */
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.service-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 32px;
	box-shadow: var(--shadow-sm);
	transition: transform .2s, box-shadow .2s, border-color .2s;
	display: flex;
	flex-direction: column;
	position: relative;
}
.service-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: var(--blue);
	border-radius: 8px 8px 0 0;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s;
}
.service-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--blue);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card__icon {
	width: 64px;
	height: 64px;
	background: var(--bg-warm);
	color: var(--blue);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	margin-bottom: 20px;
	transition: background .2s, color .2s;
}
.service-card:hover .service-card__icon {
	background: var(--blue);
	color: var(--white);
}
.service-card__title {
	font-size: 22px;
	margin: 0 0 10px;
}
.service-card__desc {
	color: var(--muted);
	font-size: 15px;
	margin: 0 0 20px;
	flex: 1;
}
.service-card__list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	font-size: 14px;
	color: var(--text);
}
.service-card__list li {
	padding: 4px 0 4px 24px;
	position: relative;
}
.service-card__list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--success);
	font-weight: 700;
}
.service-card__more {
	color: var(--blue);
	font-family: var(--display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.service-card__more::after {
	content: "→";
	transition: transform .2s;
}
.service-card__more:hover::after { transform: translateX(4px); }
.service-card--featured {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}
.service-card--featured .service-card__title,
.service-card--featured .service-card__desc { color: rgba(255,255,255,0.92); }
.service-card--featured .service-card__icon { background: var(--yellow); color: var(--ink); }
.service-card--featured .service-card__more { color: var(--yellow); }
.service-card--featured .service-card__list { color: rgba(255,255,255,0.85); }
.featured-badge {
	display: inline-block;
	background: var(--yellow);
	color: var(--ink);
	font-family: var(--display);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 3px;
	margin-bottom: 16px;
}

/* ===== Full services bullet list ===== */
.services-summary {
	margin-top: 48px;
	background: var(--white);
	border: 1px solid var(--border);
	border-top: 4px solid var(--blue);
	border-radius: 8px;
	padding: 36px;
	box-shadow: var(--shadow-sm);
	text-align: center;
}
.services-summary__title {
	font-family: var(--display);
	font-weight: 800;
	font-size: 24px;
	color: var(--ink);
	text-transform: uppercase;
	margin: 0 0 20px;
}
.services-summary__list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px 18px;
	text-align: left;
}
.services-summary__list li {
	font-size: 15px;
	color: var(--text);
	padding-left: 22px;
	position: relative;
	font-weight: 500;
}
.services-summary__list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--success);
	font-weight: 800;
}
.services-summary__tagline {
	display: inline-block;
	margin: 0;
	padding: 10px 22px;
	background: var(--yellow);
	color: var(--ink);
	font-family: var(--display);
	font-weight: 900;
	font-size: 18px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 4px;
	border: 2px solid var(--ink);
}
@media (max-width: 720px) {
	.services-summary__list { grid-template-columns: 1fr; }
	.services-summary { padding: 24px; }
}

/* ===== Commercial "And More" accent ===== */
.commercial-tile--more {
	background: var(--navy);
	border-color: var(--navy);
}
.commercial-tile--more .commercial-tile__icon {
	background: var(--yellow);
	color: var(--ink);
}
.commercial-tile--more .commercial-tile__name {
	color: var(--yellow);
}

/* ===== Process / how it works ===== */
.process {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	position: relative;
}
.process::before {
	content: "";
	position: absolute;
	top: 36px;
	left: 8%;
	right: 8%;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 12px);
	z-index: 0;
}
.process__step {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 32px 24px;
	text-align: center;
	position: relative;
	z-index: 1;
}
.process__num {
	width: 64px;
	height: 64px;
	background: var(--yellow);
	color: var(--ink);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--display);
	font-weight: 900;
	font-size: 28px;
	margin: 0 auto 20px;
	border: 4px solid var(--white);
	box-shadow: 0 0 0 2px var(--yellow);
}
.process__title { font-size: 18px; margin: 0 0 8px; }
.process__desc { font-size: 14px; color: var(--muted); margin: 0; }

/* ===== Commercial ===== */
.commercial-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.commercial-tile {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 24px 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	transition: border-color .2s, transform .2s;
}
.commercial-tile:hover {
	border-color: var(--blue);
	transform: translateY(-2px);
}
.commercial-tile__icon {
	width: 44px;
	height: 44px;
	background: var(--bg-warm);
	color: var(--navy);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}
.commercial-tile__name {
	font-family: var(--display);
	font-weight: 700;
	font-size: 15px;
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ===== Reviews ===== */
.reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.review {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 28px;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
}
.review__stars {
	color: var(--yellow);
	font-size: 18px;
	margin-bottom: 14px;
	letter-spacing: 2px;
}
.review__text {
	font-size: 16px;
	color: var(--text);
	margin: 0 0 20px;
	flex: 1;
	line-height: 1.6;
}
.review__author {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--border);
}
.review__avatar {
	width: 44px;
	height: 44px;
	background: var(--navy);
	color: var(--yellow);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--display);
	font-weight: 800;
	font-size: 18px;
}
.review__name {
	font-family: var(--display);
	font-weight: 700;
	font-size: 15px;
	color: var(--ink);
	text-transform: uppercase;
}
.review__role { font-size: 12px; color: var(--muted); }

/* ===== Service area ===== */
.service-area {
	background: var(--navy);
	color: var(--white);
	padding: 64px 0;
}
.service-area__inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 48px;
	align-items: center;
}
.service-area h2 { color: var(--white); font-size: clamp(32px, 4vw, 44px); }
.service-area__lead {
	color: rgba(255,255,255,0.85);
	font-size: 17px;
	margin: 0 0 24px;
}
.service-area__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px 16px;
}
.service-area__list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.04em;
	color: rgba(255,255,255,0.9);
	text-transform: uppercase;
}
.service-area__list li::before {
	content: "▸";
	color: var(--yellow);
}

/* ===== Final CTA banner ===== */
.final-cta {
	background:
		linear-gradient(135deg, var(--yellow) 0%, var(--yellow-dark) 100%);
	padding: 64px 0;
	border-top: 6px solid var(--ink);
	border-bottom: 6px solid var(--ink);
}
.final-cta__inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 48px;
	align-items: center;
}
.final-cta__title {
	font-size: clamp(36px, 5vw, 56px);
	color: var(--ink);
	margin: 0 0 12px;
	line-height: 1;
}
.final-cta__lead {
	color: var(--ink);
	font-size: 18px;
	margin: 0;
	font-weight: 500;
}
.final-cta__buttons {
	display: flex;
	gap: 14px;
	flex-direction: column;
	align-items: stretch;
}

/* ===== Footer ===== */
.footer {
	background: var(--navy-deep);
	color: rgba(255,255,255,0.85);
}
.footer__top {
	max-width: var(--max);
	margin: 0 auto;
	padding: 64px var(--gutter) 40px;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 40px;
}
.footer__brand .brand__name { color: var(--white); }
.footer__brand .brand__tag { color: rgba(255,255,255,0.6); }
.footer__about {
	font-size: 14px;
	color: rgba(255,255,255,0.7);
	line-height: 1.6;
	margin: 16px 0;
}
.footer__certs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.cert {
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.15);
	color: rgba(255,255,255,0.85);
	font-family: var(--display);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 3px;
}
.footer__col h4 {
	font-size: 14px;
	color: var(--yellow);
	letter-spacing: 0.18em;
	margin: 0 0 16px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { padding: 4px 0; }
.footer__col a {
	color: rgba(255,255,255,0.85);
	font-size: 14px;
}
.footer__col a:hover { color: var(--yellow); }
.footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding: 20px var(--gutter);
	max-width: var(--max);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 13px;
	color: rgba(255,255,255,0.6);
}

/* ===== Page / Post content ===== */
.entry-content { max-width: var(--max); margin: 0 auto; padding: 64px var(--gutter); }
.entry-content p { margin: 0 0 1em; }

/* ===== Generic page hero (Services / inner pages) ===== */
.page-hero {
	background:
		linear-gradient(135deg, rgba(10,46,77,0.94) 0%, rgba(7,34,58,0.97) 100%),
		repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 12px);
	color: var(--white);
	padding: 72px 0 64px;
	position: relative;
	overflow: hidden;
	text-align: center;
}
.page-hero::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -120px;
	width: 480px;
	height: 480px;
	background: radial-gradient(circle, rgba(252,185,0,0.15) 0%, transparent 60%);
	pointer-events: none;
}
.page-hero__inner {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 var(--gutter);
	position: relative;
	z-index: 1;
}
.page-hero__inner .hero__eyebrow { margin-bottom: 20px; }
.page-hero__title {
	font-family: var(--display);
	font-weight: 900;
	font-size: clamp(40px, 6vw, 72px);
	color: var(--white);
	line-height: 1;
	margin: 0 0 18px;
	text-transform: uppercase;
}
.page-hero__lead {
	font-size: 18px;
	color: rgba(255,255,255,0.85);
	max-width: 720px;
	margin: 0 auto 28px;
}
.page-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

/* Wide / featured service card spans full row on detail page */
.services-grid--detailed { grid-auto-rows: 1fr; }
.service-card--wide { grid-column: span 3; }
@media (max-width: 1024px) {
	.service-card--wide { grid-column: span 2; }
}
@media (max-width: 720px) {
	.service-card--wide { grid-column: span 1; }
}

/* ===== Service index (quick links) ===== */
.service-index {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	max-width: 1000px;
	margin: 0 auto;
}
.service-index__link {
	display: inline-block;
	padding: 10px 18px;
	background: var(--white);
	border: 2px solid var(--border);
	border-radius: 100px;
	font-family: var(--display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
	transition: border-color .2s, color .2s, background .2s;
}
.service-index__link:hover {
	border-color: var(--blue);
	color: var(--blue);
}
.service-index__link--featured {
	background: var(--navy);
	color: var(--yellow);
	border-color: var(--navy);
}
.service-index__link--featured:hover {
	background: var(--blue);
	color: var(--white);
	border-color: var(--blue);
}

/* ===== Detailed service block ===== */
.service-detail {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 40px;
	margin-bottom: 28px;
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 40px;
	box-shadow: var(--shadow-sm);
	scroll-margin-top: 100px;
}
.service-detail:last-child { margin-bottom: 0; }
.service-detail__sidebar {
	border-right: 1px solid var(--border);
	padding-right: 32px;
}
.service-detail__icon {
	width: 72px;
	height: 72px;
	background: var(--bg-warm);
	color: var(--blue);
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	margin-bottom: 18px;
}
.service-detail__eyebrow {
	display: inline-block;
	font-family: var(--display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 10px;
}
.service-detail__title {
	font-family: var(--display);
	font-weight: 800;
	font-size: 28px;
	color: var(--ink);
	margin: 0;
	text-transform: uppercase;
	line-height: 1.05;
}
.service-detail__body p {
	font-size: 16px;
	color: var(--text);
	margin: 0 0 16px;
	line-height: 1.7;
}
.service-detail__body p:last-of-type { margin-bottom: 24px; }
.service-detail__lists {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 8px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
}
.service-detail__lists h4 {
	font-family: var(--display);
	font-weight: 800;
	font-size: 14px;
	color: var(--ink);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 12px;
}
.service-detail--featured {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}
.service-detail--featured .service-detail__sidebar {
	border-right-color: rgba(255,255,255,0.15);
}
.service-detail--featured .service-detail__icon {
	background: var(--yellow);
	color: var(--ink);
}
.service-detail--featured .service-detail__eyebrow { color: var(--yellow); }
.service-detail--featured .service-detail__title { color: var(--white); }
.service-detail--featured .service-detail__body p { color: rgba(255,255,255,0.92); }
.service-detail--featured .service-detail__lists {
	border-top-color: rgba(255,255,255,0.15);
}
.service-detail--featured .service-detail__lists h4 { color: var(--yellow); }
.service-detail--featured .service-card__list { color: rgba(255,255,255,0.9); }
.service-detail--featured .service-card__list li::before { color: var(--yellow); }

@media (max-width: 900px) {
	.service-detail {
		grid-template-columns: 1fr;
		padding: 28px;
		gap: 24px;
	}
	.service-detail__sidebar {
		border-right: none;
		border-bottom: 1px solid var(--border);
		padding-right: 0;
		padding-bottom: 20px;
	}
	.service-detail--featured .service-detail__sidebar {
		border-bottom-color: rgba(255,255,255,0.15);
	}
	.service-detail__lists { grid-template-columns: 1fr; gap: 20px; }
}

/* ===== Experience banner ===== */
.experience-banner {
	background: var(--yellow);
	border-top: 6px solid var(--ink);
	border-bottom: 6px solid var(--ink);
	padding: 56px 0;
}
.experience-banner__inner {
	display: flex;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
	justify-content: center;
	text-align: left;
}
.experience-banner__years {
	font-family: var(--display);
	font-weight: 900;
	font-size: clamp(96px, 14vw, 160px);
	line-height: 0.9;
	color: var(--ink);
	letter-spacing: -0.03em;
}
.experience-banner__years span {
	color: var(--blue);
	font-size: 0.55em;
	vertical-align: super;
}
.experience-banner__title {
	font-size: clamp(28px, 4vw, 42px);
	color: var(--ink);
	margin: 0 0 8px;
}
.experience-banner__lead {
	font-size: 17px;
	color: var(--ink);
	margin: 0;
	max-width: 620px;
	font-weight: 500;
}
@media (max-width: 720px) {
	.experience-banner__inner { text-align: center; gap: 12px; }
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
	.hero__inner { grid-template-columns: 1fr; }
	.why__inner { grid-template-columns: repeat(2, 1fr); }
	.why__item:nth-child(even) { border-right: none; }
	.services-grid { grid-template-columns: repeat(2, 1fr); }
	.process { grid-template-columns: repeat(2, 1fr); }
	.process::before { display: none; }
	.commercial-grid { grid-template-columns: repeat(3, 1fr); }
	.reviews-grid { grid-template-columns: 1fr; }
	.service-area__inner { grid-template-columns: 1fr; gap: 24px; }
	.service-area__list { grid-template-columns: repeat(2, 1fr); }
	.final-cta__inner { grid-template-columns: 1fr; text-align: center; }
	.final-cta__buttons { align-items: center; }
	.footer__top { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	.utility { display: none; }
	.nav { display: none; }
	.services-grid { grid-template-columns: 1fr; }
	.process { grid-template-columns: 1fr; }
	.commercial-grid { grid-template-columns: repeat(2, 1fr); }
	.service-area__list { grid-template-columns: 1fr 1fr; }
	.footer__top { grid-template-columns: 1fr; }
	.section { padding: 56px 0; }
	.ctabar__inner { gap: 8px 12px; }
	.ctabar__btn, .ctabar__phone { padding: 8px 14px; font-size: 14px; }
}

/* ===== Logo handling ===== */
.brand { gap: 0; }
.brand__logo {
	height: 60px;
	width: auto;
	max-width: 320px;
	display: block;
}
.brand__logo--footer {
	height: 56px;
	max-width: 280px;
	/* Light the navy logo up against the dark footer background */
	filter: brightness(0) invert(1);
	opacity: 0.95;
}
/* Custom Logo uploaded via WP Customizer takes priority over embedded logo */
.brand .custom-logo {
	height: 60px;
	width: auto;
	max-width: 320px;
	display: block;
}
.brand:has(.custom-logo-link) > div { display: none; }
.brand:has(.custom-logo-link) .brand__mark,
.brand:has(.custom-logo-link) .brand__logo { display: none; }
.footer__brand .custom-logo {
	height: 56px;
	width: auto;
	max-width: 280px;
}
.footer__brand:has(.custom-logo-link) .brand__name,
.footer__brand:has(.custom-logo-link) .brand__tag,
.footer__brand:has(.custom-logo-link) .brand__logo { display: none; }
@media (max-width: 720px) {
	.brand__logo { height: 48px; max-width: 240px; }
}

/* ===== Cyan-accent contrast tweaks (since --yellow now points to bright cyan) ===== */
.ctabar__btn:hover { background: var(--blue); border-color: var(--blue); }
.btn--yellow { box-shadow: 0 6px 18px rgba(107,213,232,0.4); }
.final-cta {
	background: linear-gradient(135deg, var(--blue-bright) 0%, var(--yellow-dark) 100%);
}
.final-cta__title, .final-cta__lead { color: var(--ink); }
.hero__title span { color: var(--blue-bright); }
.hero__eyebrow { background: rgba(107,213,232,0.15); color: var(--blue-bright); border-color: rgba(107,213,232,0.35); }
.featured-badge { color: var(--ink); }
.process__num { color: var(--navy); }
.experience-banner__years span { color: var(--navy); }
  /* ===== Mobile hamburger menu ===== */
  .nav-toggle-input {
        position: absolute;
        width: 0;
        height: 0;
        opacity: 0;
        pointer-events: none;
  }
  .nav-toggle {
        display: none;
        width: 44px;
        height: 44px;
        cursor: pointer;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        position: relative;
        z-index: 51;
        border: 0;
        background: transparent;
  }
  .nav-toggle span {
        display: block;
        width: 26px;
        height: 3px;
        background: var(--ink);
        border-radius: 2px;
        transition: transform 0.25s ease, opacity 0.2s ease;
  }
  /* Animate three bars into an X when checked */
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
  }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(2) {
        opacity: 0;
  }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
  }

  @media (max-width: 720px) {
        /* Anchor the dropdown to the header bar */
        .header { position: relative; }

        /* Show the hamburger button */
        .nav-toggle { display: flex; }

        /* Hide the redundant "Schedule Service" CTA — yellow/cyan sticky bar above already covers this */
        .header__cta { display: none; }

        /* Drop-down panel when the menu is open */
        .nav-toggle-input:checked ~ .nav {
                display: flex;
                flex-direction: column;
                gap: 0;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                padding: 8px 24px 16px;
                background: var(--white);
                border-top: 1px solid var(--border);
                border-bottom: 3px solid var(--yellow);
                box-shadow: 0 24px 48px rgba(10, 26, 58, 0.16);
                z-index: 49;
        }
        /* Stack and pad menu items so they're easy to tap */
        .nav-toggle-input:checked ~ .nav > a,
        .nav-toggle-input:checked ~ .nav > li {
                width: 100%;
                padding: 14px 4px;
                font-size: 17px;
                border-bottom: 1px solid var(--border);
        }
        .nav-toggle-input:checked ~ .nav > a:last-child,
        .nav-toggle-input:checked ~ .nav > li:last-child {
                border-bottom: none;
        }
        .nav-toggle-input:checked ~ .nav > li > a {
                display: block;
                padding: 0;
                font-size: 17px;
                border: none;
                width: 100%;
        }
  }

  /* ====================================================== */
  /* ===== Mobile (≤720px) — center & comfort tweaks ====== */
  /* ====================================================== */
  @media (max-width: 720px) {
        /* Tighter side padding for narrow viewports */
        .container { padding: 0 18px; }

        /* Account for sticky CTA bar when jumping to anchors */
        [id] { scroll-margin-top: 80px; }

        /* ===== HERO — stack & center ===== */
        .hero { padding: 44px 0 36px; }
        .hero__inner {
                text-align: center;
                gap: 28px;
                padding: 0 18px;
        }
        .hero__eyebrow { margin-left: auto; margin-right: auto; }
        .hero__title { font-size: clamp(32px, 8vw, 46px); }
        .hero__lead {
                margin-left: auto;
                margin-right: auto;
                font-size: 16px;
        }
        .hero__cta {
                justify-content: center;
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
        }
        .hero__cta .btn { width: 100%; }
        .trust {
                justify-content: center;
                gap: 10px 16px;
                padding-top: 18px;
        }

        /* ===== Quote card / form ===== */
        .quote-card { padding: 22px; margin: 0 auto; }
        .quote-card__head { font-size: 22px; }
        .quote-form__row { grid-template-columns: 1fr; }

        /* ===== Sticky CTA bar — compact ===== */
        .ctabar__tag { display: none; }
        .ctabar__inner {
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: center;
                gap: 8px;
                padding: 8px 14px;
        }
        .ctabar__btn,
        .ctabar__phone {
                padding: 8px 12px;
                font-size: 13px;
                letter-spacing: 0.04em;
        }

        /* ===== Section spacing & headings ===== */
        .section { padding: 48px 0; }
        .section__head { margin-bottom: 32px; }
        .section__title { font-size: 28px; }
        .section__lead { font-size: 15px; }

        /* ===== Page hero (Services template) ===== */
        .page-hero { padding: 48px 0 40px; }
        .page-hero__inner { padding: 0 18px; }
        .page-hero__title { font-size: 36px; }
        .page-hero__lead { font-size: 16px; }
        .page-hero__cta {
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
        }
        .page-hero__cta .btn { width: 100%; }

        /* ===== Why-bar — vertical stack ===== */
        .why__inner {
                grid-template-columns: 1fr;
                padding: 24px 18px;
                gap: 16px;
        }
        .why__item {
                border-right: none;
                padding-right: 0;
                padding-bottom: 16px;
                border-bottom: 1px solid var(--border);
        }
        .why__item:last-child {
                padding-bottom: 0;
                border-bottom: none;
        }

        /* ===== Service quick-index pills ===== */
        .service-index { gap: 6px; justify-content: center; }
        .service-index__link {
                padding: 8px 12px;
                font-size: 11px;
        }

        /* ===== Service detail blocks ===== */
        .service-detail {
                padding: 24px 20px;
                margin-bottom: 16px;
        }
        .service-detail__icon {
                width: 56px;
                height: 56px;
                font-size: 26px;
        }
        .service-detail__title { font-size: 22px; }
        .service-detail__body p { font-size: 15px; }
        .service-detail__lists h4 { font-size: 13px; }

        /* ===== Process steps ===== */
        .process__step { padding: 24px 18px; }
        .process__num {
                width: 56px;
                height: 56px;
                font-size: 22px;
        }

        /* ===== Commercial tiles ===== */
        .commercial-tile {
                padding: 16px 14px;
                gap: 10px;
        }
        .commercial-tile__name { font-size: 13px; }
        .commercial-tile__icon {
                width: 36px;
                height: 36px;
                font-size: 16px;
        }

        /* ===== Reviews ===== */
        .review { padding: 22px; }

        /* ===== Service area block ===== */
        .service-area { padding: 48px 0; }
        .service-area__inner {
                padding: 0 18px;
                gap: 24px;
                text-align: center;
        }
        .service-area h2 { font-size: 28px; }
        .service-area__list li { font-size: 14px; }
        .service-area .btn { display: inline-flex; }

        /* ===== Experience banner ===== */
        .experience-banner { padding: 40px 0; }
        .experience-banner__inner {
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 8px;
        }
        .experience-banner__years { font-size: 96px; }
        .experience-banner__title { font-size: 26px; }
        .experience-banner__lead { font-size: 15px; }

        /* ===== Final CTA ===== */
        .final-cta { padding: 44px 0; }
        .final-cta__inner {
                padding: 0 18px;
                gap: 20px;
        }
        .final-cta__title { font-size: 30px; }
        .final-cta__lead { font-size: 15px; }
        .final-cta__buttons {
                gap: 10px;
                align-items: stretch;
        }
        .final-cta__buttons .btn { width: 100%; }

        /* ===== Buttons tighten on phone ===== */
        .btn--lg {
                padding: 14px 22px;
                font-size: 15px;
        }

        /* ===== Footer — center on phone ===== */
        .footer__top {
                text-align: center;
                padding: 48px 18px 32px;
                gap: 28px;
        }
        .footer__brand .brand { justify-content: center; }
        .footer__certs { justify-content: center; }
        .footer__bottom {
                flex-direction: column;
                text-align: center;
                gap: 8px;
        }

        /* ===== Gutenberg responsive — force any inline 2-column grid to stack ===== */
        [style*="grid-template-columns:1fr 1fr"],
        [style*="grid-template-columns: 1fr 1fr"] {
                grid-template-columns: 1fr !important;
        }

        /* Iframes never overflow */
        iframe { max-width: 100%; }

        /* WordPress columns block — make sure they stack and have breathing room */
        .wp-block-columns { gap: 16px !important; }
        .wp-block-column { flex-basis: 100% !important; }

        /* Page editor content — center main headings on mobile */
        .entry-content h2,
        .entry-content h3,
        .entry-content .wp-block-heading {
                text-align: center;
        }

        /* Buttons block — center and stack */
        .wp-block-buttons { justify-content: center !important; }
        .wp-block-button { width: 100%; max-width: 360px; }
        .wp-block-button__link { width: 100%; text-align: center; }
  }

  /* ====================================================== */
  /* ===== Extra-small phones ≤480px — even tighter ======= */
  /* ====================================================== */
  @media (max-width: 480px) {
        .container { padding: 0 16px; }
        .section { padding: 40px 0; }
        .hero__title { font-size: 30px; }
        .page-hero__title { font-size: 28px; }
        .section__title { font-size: 24px; }
        .quote-card { padding: 18px; }
        .ctabar__btn,
        .ctabar__phone {
                font-size: 12px;
                padding: 7px 10px;
        }
        .experience-banner__years { font-size: 80px; }
        .footer__certs .cert {
                font-size: 10px;
                padding: 3px 8px;
        }
  }

  /* ============================================== */
  /* ===== Polished homepage hero quote form ====== */
  /* ============================================== */

  /* Card refresh — softer shadow, gradient top accent, no flat border */
  .hero .quote-card {
        border-top: 0;
        border-radius: 14px;
        padding: 34px 30px 24px;
        position: relative;
        overflow: hidden;
        box-shadow:
                0 24px 48px -12px rgba(10, 26, 58, 0.28),
                0 0 0 1px rgba(10, 26, 58, 0.04);
  }
  .hero .quote-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 6px;
        background: linear-gradient(90deg, var(--navy) 0%, var(--blue-bright) 50%, var(--teal) 100%);
  }

  /* Decorative "★ Free Quote" eyebrow above the heading — pure CSS, no HTML edit */
  .quote-form::before {
        content: "★ FREE QUOTE · NO OBLIGATION";
        display: inline-block;
        font-family: var(--display);
        font-weight: 800;
        font-size: 10px;
        letter-spacing: 0.22em;
        color: var(--blue);
        margin: 0 0 8px;
        padding: 4px 10px;
        background: rgba(107, 213, 232, 0.12);
        border: 1px solid rgba(107, 213, 232, 0.35);
        border-radius: 100px;
        width: max-content;
  }

  /* Heading — decorative underline accent */
  .quote-form .quote-card__head {
        font-size: 28px;
        margin: 0 0 6px;
        line-height: 1.05;
        position: relative;
        padding-bottom: 14px;
  }
  .quote-form .quote-card__head::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 40px;
        height: 3px;
        background: linear-gradient(90deg, var(--blue-bright), var(--teal));
        border-radius: 2px;
  }
  .quote-form .quote-card__sub {
        font-size: 14px;
        color: var(--muted);
        margin: 0 0 18px;
        line-height: 1.5;
  }

  /* Form grid spacing — slightly tighter and more rhythmic */
  .quote-form { gap: 12px; }
  .quote-form__row { gap: 12px; }

  /* Labels — tighter, navy-toned */
  .quote-form__field > span {
        font-size: 10px;
        letter-spacing: 0.15em;
        color: var(--navy);
        font-weight: 800;
  }

  /* Inputs — subtle off-white fill, smooth hover/focus transitions */
  .quote-form__field input,
  .quote-form__field select,
  .quote-form__field textarea {
        padding: 13px 14px;
        border: 1.5px solid var(--border);
        border-radius: 8px;
        background: #fbfcfd;
        font-size: 15px;
        font-family: var(--sans);
        color: var(--ink);
        transition:
                border-color 0.2s ease,
                background-color 0.2s ease,
                box-shadow 0.2s ease,
                transform 0.15s ease;
  }
  .quote-form__field input:hover,
  .quote-form__field select:hover,
  .quote-form__field textarea:hover {
        background: var(--white);
        border-color: #b9c4d0;
  }
  .quote-form__field input:focus,
  .quote-form__field select:focus,
  .quote-form__field textarea:focus {
        outline: none;
        background: var(--white);
        border-color: var(--blue-bright);
        box-shadow: 0 0 0 4px rgba(107, 213, 232, 0.2);
  }

  /* Custom dropdown arrow on <select> — inline SVG, no images needed */
  .quote-form__field select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%230a1a3a' d='M6 8 0 0h12z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 14px center;
        padding-right: 36px;
        cursor: pointer;
  }

  /* Textarea — proper resize affordance */
  .quote-form__field textarea {
        resize: vertical;
        min-height: 88px;
        line-height: 1.5;
  }

  /* Submit button — gradient, shimmer hover, lifted shadow */
  .quote-form__btn {
        margin-top: 6px;
        padding: 17px 22px;
        background: linear-gradient(135deg, var(--blue-bright) 0%, var(--yellow-dark) 100%);
        color: var(--navy);
        border: none;
        border-radius: 8px;
        font-family: var(--display);
        font-weight: 900;
        font-size: 15px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        box-shadow:
                0 10px 24px -6px rgba(107, 213, 232, 0.55),
                0 0 0 1px rgba(10, 26, 58, 0.05);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .quote-form__btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
        transition: left 0.6s ease;
  }
  .quote-form__btn:hover {
        transform: translateY(-2px);
        box-shadow:
                0 14px 32px -6px rgba(107, 213, 232, 0.65),
                0 0 0 1px rgba(10, 26, 58, 0.06);
  }
  .quote-form__btn:hover::before { left: 100%; }
  .quote-form__btn:active { transform: translateY(0); }

  /* Legal / phone fallback — separated with a thin line */
  .quote-form__legal {
        margin: 8px 0 0;
        padding-top: 14px;
        border-top: 1px solid var(--border);
        font-size: 12px;
        color: var(--muted);
        text-align: center;
  }
  .quote-form__legal a {
        color: var(--blue);
        font-weight: 700;
        transition: color 0.15s;
  }
  .quote-form__legal a:hover { color: var(--navy); }

  /* Mobile — tighten everything */
  @media (max-width: 720px) {
        .hero .quote-card { padding: 28px 22px 20px; }
        .quote-form .quote-card__head { font-size: 24px; }
        .quote-form::before { font-size: 9px; padding: 3px 9px; }
        .quote-form__btn { padding: 16px; font-size: 14px; }
  }
  /* Commercial tiles are now <a> elements — keep them looking like tiles */
  a.commercial-tile {
        text-decoration: none;
        color: inherit;
        cursor: pointer;
  }
  a.commercial-tile:hover .commercial-tile__name {
        color: var(--blue);
  }

  /* Service "View Service" link — small affordance */
  .service-card__more {
        cursor: pointer;
  }