/* ===========================================================
   Home Comfort Air Services - Main Stylesheet
   Local HVAC contractor, Silver Spring MD
   Palette: drawn from the logo. Deep navy and leaf green from the mark,
   logo blue as the cool secondary, ember orange kept as the single warm
   action color so calls to action still carry.
   Typography: Bitter (display) + Public Sans (body) + IBM Plex Mono (data)
   =========================================================== */

:root {
	/* Core palette */
	--ink: #112a45;
	--ink-deep: #0b1e33;
	--ink-soft: #1d3a5c;
	--frost: #fafaf7;
	--paper: #f4f1ea;
	--cream: #ebe6da;

	/* Accents, taken from the logo.

	   --action carries every call to action. It is the logo green darkened
	   until white type on it clears WCAG AA (4.58:1); the orange it replaced
	   only ever managed 3.49:1, so this is a contrast gain, not a trade.
	   --action-glow is the light green used for accent TEXT on the navy
	   ground, where a dark green would disappear.
	   --alert is the only warm color left on the site and it belongs to the
	   24-hour emergency indicator alone, so "urgent" still reads as urgent
	   instead of blending into the brand green. */
	/* Checked against --frost (#fafaf7), the actual button text color, not
	   pure white: #3b844a gave 4.38 and failed AA by a hair. This is 4.56. */
	--action: #398148;
	--action-deep: #2f6b39;
	--action-glow: #7ec059;
	--alert: #e6a83c;
	--danger: #b4342a;

	/* The theme was built around an ember accent and around 80 rules still
	   name it. These aliases point all of them at the brand green at once. */
	--ember: var(--action);
	--ember-deep: var(--action-deep);
	--ember-glow: var(--action-glow);

	/* Straight off the logo */
	--brand-navy: #1e3a8a;
	--brand-blue: #3261a6;
	--brand-sky: #53b2d8;
	--leaf: #4ca45e;
	/* Only ever used as text on the light grounds, where #359a5f measured
	   3.13:1. This is 5.9:1 on --paper and still reads as the brand green. */
	--leaf-deep: #2f7344;
	--leaf-light: #7ec059;

	--cool: #3261a6;
	--cool-deep: #1e3a8a;
	--gold: #d8a33f;

	/* Semantic */
	--text: var(--ink);
	/* 0.62 resolved to 4.14:1 on --paper, under the 4.5 AA threshold. */
	--text-muted: rgba(17, 42, 69, 0.70);
	--text-faint: rgba(17, 42, 69, 0.4);
	--border: rgba(17, 42, 69, 0.12);
	--border-strong: rgba(17, 42, 69, 0.25);

	/* Type */
	--font-display: 'Bitter', 'Bitter Fallback', Georgia, 'Times New Roman', serif;
	--font-body: 'Public Sans', 'Public Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--font-mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback', Menlo, Consolas, monospace;

	/* Scale */
	--container: 1320px;
	--container-narrow: 1080px;
	--container-text: 760px;

	/* Motion */
	/* Seconds per revolution of the hero fan. Lower is faster; below about
	   0.7s the three blades start to strobe rather than read as turning. */
	--hca-fan-spin: 1.15s;
	--ease: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in: cubic-bezier(0.7, 0, 0.84, 0);

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(17, 42, 69, 0.04), 0 2px 4px rgba(17, 42, 69, 0.04);
	--shadow-md: 0 4px 8px rgba(17, 42, 69, 0.06), 0 12px 24px rgba(17, 42, 69, 0.08);
	--shadow-lg: 0 12px 24px rgba(17, 42, 69, 0.08), 0 32px 64px rgba(17, 42, 69, 0.12);
	--shadow-ember: 0 12px 32px rgba(57, 129, 72, 0.30);
}

/* ===========================================================
   1. RESET & BASE
   =========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 100px;
}

body {
	margin: 0;
	background: var(--frost);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	font-feature-settings: 'cv11', 'ss01', 'ss03';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s var(--ease);
}

::selection { background: var(--ember); color: var(--frost); }

/* ===========================================================
   2. TYPOGRAPHY
   =========================================================== */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
	font-variation-settings: "opsz" 144;
}

h1 { font-size: clamp(2.5rem, 5.5vw, 5.5rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 4vw, 3.75rem); font-weight: 400; }
h3 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 500; }
h4 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; }

.serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.mono { font-family: var(--font-mono); font-size: 0.78em; letter-spacing: 0.04em; }
.eyebrow {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--leaf-deep);
	font-weight: 500;
	display: inline-flex;
	/*
	   Was align-items: center. On a single line that is correct and on a
	   wrapped one it is not: the dash is a flex item, so centering aligned it
	   against the whole wrapped block and it ended up beside the middle line
	   with the first line hanging above it. Pin it to the first line instead.
	*/
	align-items: flex-start;
	gap: 0.6em;
}
.eyebrow::before {
	content: '';
	/* flex-basis rather than width: as a flex item it was free to shrink. */
	flex: 0 0 24px;
	height: 1px;
	/* drops the rule to the optical middle of the first line of caps */
	margin-top: 0.62em;
	background: var(--ember);
	display: inline-block;
}

p { margin: 0 0 1.25em; max-width: 65ch; }
.lede {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1.8vw, 1.625rem);
	line-height: 1.4;
	font-weight: 300;
	font-style: italic;
	color: var(--ink-soft);
	max-width: 36ch;
}

/* ===========================================================
   3. LAYOUT
   =========================================================== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.container--narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.container--text { max-width: var(--container-text); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

section { padding: clamp(3rem, 6.5vw, 5.5rem) 0; position: relative; }
.section--tight { padding: clamp(2rem, 3.8vw, 3rem) 0; }

/* ===========================================================
   4. HEADER / NAV  (rebuilt: contrast-aware + dropdowns)
   =========================================================== */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	transition: background 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
	border-bottom: 1px solid transparent;
}

/* Two base modes: over-hero (transparent over dark hero) and solid (light bg on interior pages) */
.site-header--over-hero { background: transparent; }
.site-header--over-hero .site-logo,
.site-header--over-hero .nav-list > .nav-item > a,
.site-header--over-hero .header-phone { color: var(--frost); }
.site-header--over-hero .site-logo__co { color: rgba(250, 250, 247, 0.55); }
.site-header--over-hero .nav-toggle span { background: var(--frost); }

.site-header--solid {
	background: rgba(250, 250, 247, 0.96);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	border-bottom-color: var(--border);
}
.site-header--solid .site-logo,
.site-header--solid .nav-list > .nav-item > a,
.site-header--solid .header-phone { color: var(--ink); }

/* Scrolled state - always solid */
.site-header.is-scrolled {
	background: rgba(250, 250, 247, 0.96);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	border-bottom-color: var(--border);
	box-shadow: 0 4px 24px -8px rgba(17, 42, 69, 0.08);
}
.site-header.is-scrolled .site-logo,
.site-header.is-scrolled .nav-list > .nav-item > a,
.site-header.is-scrolled .header-phone { color: var(--ink); }
.site-header.is-scrolled .site-logo__co { color: var(--text-muted); }
.site-header.is-scrolled .nav-toggle span { background: var(--ink); }

.header-inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 1.1rem clamp(1rem, 3vw, 2.5rem);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
}

/* Logo */
.site-logo {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.025em;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	text-decoration: none;
	transition: color 0.3s var(--ease);
}
.site-logo__mark {
	display: inline-block;
	width: 28px;
	height: 28px;
	position: relative;
	flex-shrink: 0;
}
.site-logo__mark::before, .site-logo__mark::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
}
.site-logo__mark::before {
	background: var(--ember);
	clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.site-logo__mark::after {
	background: var(--cool-deep);
	clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
.site-logo__co { font-size: 0.65em; font-style: italic; font-weight: 400; transition: color 0.3s var(--ease); }

/* Primary nav */
.primary-nav { display: flex; justify-content: center; }
.nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: clamp(0.25rem, 1.5vw, 1.5rem);
	align-items: center;
}
.nav-item { position: relative; }
.nav-list > .nav-item > a {
	font-size: 0.92rem;
	font-weight: 500;
	font-family: var(--font-body);
	padding: 0.6rem 0.25rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	text-decoration: none;
	position: relative;
	transition: color 0.3s var(--ease);
	white-space: nowrap;
}
.nav-list > .nav-item > a::after {
	content: '';
	position: absolute;
	left: 0.25rem;
	right: 0.25rem;
	bottom: 0.25rem;
	height: 1.5px;
	background: var(--ember);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--ease);
}
.nav-list > .nav-item > a:hover::after,
.nav-list > .nav-item.is-active > a::after { transform: scaleX(1); }
.nav-caret {
	display: inline-block;
	flex-shrink: 0;
	opacity: 0.6;
	transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
	margin-left: 0.1em;
}
.nav-item.has-dropdown:hover .nav-caret,
.nav-item.has-dropdown.is-open .nav-caret { opacity: 1; transform: rotate(180deg); }

/* Dropdown panel */
.nav-dropdown {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 50%;
	transform: translateX(-50%) translateY(-8px);
	min-width: 640px;
	max-width: 760px;
	background: var(--frost);
	border: 1px solid var(--border);
	border-radius: 4px;
	box-shadow: 0 24px 56px -16px rgba(17, 42, 69, 0.18), 0 8px 16px -8px rgba(17, 42, 69, 0.1);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
	z-index: 110;
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown.is-open .nav-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
/* Invisible bridge so cursor can travel from trigger to panel without closing */
.nav-item.has-dropdown::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	height: 0.75rem;
}

.nav-dropdown__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 0;
}
.nav-dropdown__col {
	padding: 1.75rem 1.5rem;
}
.nav-dropdown__label {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ember);
	margin-bottom: 1rem;
	padding-left: 1rem;
}
.nav-dropdown__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.15rem;
}
.nav-dropdown__col ul a {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 0.7rem 1rem;
	color: var(--ink);
	text-decoration: none;
	border-radius: 2px;
	transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-dropdown__col ul a:hover { background: var(--ink); color: var(--frost); }
.nav-dropdown__col ul a:hover .nav-dropdown__icon { color: var(--ember-glow); }
.nav-dropdown__col ul a:hover .nav-dropdown__tagline { color: rgba(250, 250, 247, 0.65); }

.nav-dropdown__icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: var(--ember);
	transition: color 0.2s var(--ease);
	margin-top: 0.1rem;
}
.nav-dropdown__icon svg { width: 100%; height: 100%; }
.nav-dropdown__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.nav-dropdown__title {
	font-family: var(--font-display);
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.2;
}
.nav-dropdown__tagline {
	font-family: var(--font-body);
	font-size: 0.78rem;
	color: var(--text-muted);
	line-height: 1.4;
	transition: color 0.2s var(--ease);
}

/* --- Services dropdown ---------------------------------------------------
   Six services fit in one column. Eight do not: the panel grew past the
   bottom of a laptop window and the last cards were unreachable. Two columns
   halve the height, and pinning the panel to the middle of the window rather
   than to the "Services" trigger keeps a wider panel from running off the
   left edge. Same technique the service areas mega menu already uses. */
.nav-dropdown--services {
	--services-width: 900px;
}
.nav-dropdown--services .nav-dropdown__inner {
	grid-template-columns: 2fr 1fr;
}
.nav-dropdown--services .nav-dropdown__col ul {
	grid-template-columns: 1fr 1fr;
	gap: 0.15rem 0.35rem;
	align-items: start;
}
.nav-dropdown--services .nav-dropdown__col ul a {
	padding: 0.6rem 0.8rem;
	height: 100%;
	box-sizing: border-box;
}
.nav-dropdown--services .nav-dropdown__title { font-size: 0.94rem; }
.nav-dropdown--services .nav-dropdown__tagline { font-size: 0.75rem; }

/* Locations dropdown - slightly different layout */
.nav-dropdown__locations { grid-template-columns: 1fr 1fr; gap: 0.15rem 0.5rem !important; }
.nav-dropdown__locations a { padding: 0.6rem 0.85rem; }
.nav-dropdown__locations .nav-dropdown__title { font-size: 0.95rem; }

/* Feature panel inside dropdown */
.nav-dropdown__feature {
	background: var(--ink);
	color: var(--frost);
	padding: 1.75rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.nav-dropdown__feature::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at top right, rgba(126, 192, 89, 0.15), transparent 60%);
}
.nav-dropdown__feature > * { position: relative; z-index: 1; }
.nav-dropdown__feature-eyebrow {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ember-glow);
}
.nav-dropdown__feature-title {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1.15;
	margin: 0;
	color: var(--frost);
}
.nav-dropdown__feature-body {
	font-size: 0.86rem;
	color: rgba(250, 250, 247, 0.72);
	margin: 0;
	line-height: 1.5;
}
.nav-dropdown__feature-cta {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ember-glow);
	text-decoration: none;
	margin-top: 0.5rem;
	transition: color 0.2s var(--ease);
}
.nav-dropdown__feature-cta:hover { color: var(--frost); }

/* Header right side */
.header-cta { display: flex; align-items: center; gap: 1.25rem; justify-self: end; }
.header-phone {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	text-decoration: none;
	transition: color 0.3s var(--ease);
}
.header-phone__pulse {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--action-glow);
	box-shadow: 0 0 0 0 rgba(126, 192, 89, 0.7);
	animation: pulse 2s infinite;
}
@keyframes pulse {
	0%   { box-shadow: 0 0 0 0 rgba(126, 192, 89, 0.7); }
	70%  { box-shadow: 0 0 0 10px rgba(126, 192, 89, 0); }
	100% { box-shadow: 0 0 0 0 rgba(126, 192, 89, 0); }
}
.btn--header { font-size: 0.85rem; padding: 0.7rem 1.25rem; }

/* Mobile hamburger */
.nav-toggle {
	display: none;
	background: none;
	border: none;
	padding: 0.5rem;
	width: 44px;
	height: 44px;
	flex-direction: column;
	justify-content: center;
	cursor: pointer;
	justify-self: end;
}
.nav-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	margin: 3px auto;
	transition: all 0.3s var(--ease);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---- Tablet: hide phone text, keep button ---- */
@media (max-width: 1180px) {
	.header-phone { font-size: 0; gap: 0; }
	.header-phone__pulse { width: 10px; height: 10px; }
	.header-phone::after {
		content: 'Call';
		font-size: 0.78rem;
		font-family: var(--font-mono);
		letter-spacing: 0.08em;
	}
}

/* ---- Mobile breakpoint ---- */
@media (max-width: 1100px) {
	.site-header,
	.site-header--over-hero {
		background: rgba(250, 250, 247, 0.97);
		backdrop-filter: blur(18px) saturate(1.3);
		-webkit-backdrop-filter: blur(18px) saturate(1.3);
		border-bottom-color: var(--border);
	}
	.site-header--over-hero .site-logo,
	.site-header--over-hero .nav-list > .nav-item > a,
	.site-header--over-hero .header-phone { color: var(--ink); }
	.site-header--over-hero .site-logo__co { color: var(--text-muted); }
	.site-header--over-hero .nav-toggle span { background: var(--ink); }

	.header-inner {
		grid-template-columns: auto auto;
		padding: 0.85rem clamp(1rem, 4vw, 1.5rem);
	}
	.site-logo { font-size: 1.2rem; }
	.site-logo__co { display: none; }
	.header-cta { display: none; }
	.nav-toggle { display: flex; }

	/* Slide-down mobile panel */
	.primary-nav {
		position: fixed;
		top: 60px;
		left: 0;
		right: 0;
		width: 100%;
		max-width: 100vw;
		max-height: calc(100vh - 60px);
		overflow-y: auto;
		overflow-x: hidden;
		background: var(--frost);
		border-bottom: 1px solid var(--border);
		box-shadow: 0 16px 32px -16px rgba(17, 42, 69, 0.2);
		transform: translateY(-120%);
		transition: transform 0.35s var(--ease);
		grid-column: 1 / -1;
		display: block;
		box-sizing: border-box;
	}
	.primary-nav.is-open { transform: translateY(0); }
	.nav-list {
		flex-direction: column;
		gap: 0;
		padding: 1rem clamp(1rem, 4vw, 1.5rem) 1.5rem;
		align-items: stretch;
		width: 100%;
		box-sizing: border-box;
		max-width: 100%;
	}
	.nav-item { width: 100%; border-bottom: 1px solid var(--border); box-sizing: border-box; }
	.nav-item:last-child { border-bottom: none; }
	.nav-list > .nav-item > a {
		font-size: 1.15rem;
		padding: 1rem 0;
		font-family: var(--font-display);
		font-weight: 500;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
	}
	.nav-list > .nav-item > a::after { display: none; }

	/* Mobile dropdown: tap to expand inline (no hover, no positioning) */
	.nav-dropdown {
		position: static;
		transform: none !important;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		background: transparent;
		border: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.35s var(--ease);
		border-radius: 0;
		box-sizing: border-box;
	}
	.nav-item.has-dropdown:hover .nav-dropdown,
	.nav-item.has-dropdown.is-open .nav-dropdown {
		transform: none !important;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	.nav-item.has-dropdown.is-open .nav-dropdown { max-height: 1500px; }
	.nav-item.has-dropdown::after { display: none; }
	.nav-dropdown__inner {
		display: block;
		width: 100%;
		grid-template-columns: none;
	}
	.nav-dropdown__col {
		padding: 0.5rem 0 1rem;
		width: 100%;
		box-sizing: border-box;
	}
	.nav-dropdown__label {
		padding-left: 0;
		margin-bottom: 0.5rem;
	}
	.nav-dropdown__col ul {
		display: block !important;
		grid-template-columns: none !important;
		gap: 0 !important;
		padding: 0;
		margin: 0;
		list-style: none;
		width: 100%;
	}
	.nav-dropdown__col ul li {
		width: 100%;
		display: block;
	}
	.nav-dropdown__col ul a {
		padding: 0.75rem 0;
		border-radius: 0;
		border-bottom: 1px dotted var(--border);
		display: flex;
		align-items: flex-start;
		gap: 0.75rem;
		width: 100%;
		box-sizing: border-box;
	}
	.nav-dropdown__col ul li:last-child a { border-bottom: none; }
	.nav-dropdown__icon { flex-shrink: 0; }
	.nav-dropdown__text { flex: 1; min-width: 0; }
	.nav-dropdown__title {
		display: block;
		font-size: 0.98rem;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
	.nav-dropdown__tagline {
		display: block;
		font-size: 0.78rem;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
	.nav-dropdown__feature {
		margin: 0.75rem 0 0.5rem;
		padding: 1.25rem;
		border-radius: 4px;
		width: 100%;
		box-sizing: border-box;
	}
	/* The dark promo panels are decoration next to a list you have to scroll.
	   They were already hidden on phones; the drawer runs to 1100px, so hide
	   them across the whole drawer range. Their CTA links also sat at a 20px
	   tap height, under the 24px minimum, and only ever appeared in this band. */
	.nav-dropdown .nav-dropdown__feature,
	.nav-dropdown--mega .nav-dropdown__feature { display: none; }

	.nav-dropdown__locations {
		grid-template-columns: none !important;
		gap: 0 !important;
	}
	.nav-dropdown__locations a {
		padding: 0.75rem 0;
		display: flex;
		flex-direction: column;
	}

	body.nav-open { overflow: hidden; }
}

/* ===========================================================
   5. BUTTONS
   =========================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 1rem 1.75rem;
	font-family: var(--font-body);
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.3s var(--ease);
	white-space: nowrap;
	line-height: 1;
}
.btn--primary {
	background: var(--ember);
	color: var(--frost);
	box-shadow: var(--shadow-ember);
}
.btn--primary:hover {
	background: var(--ember-deep);
	transform: translateY(-2px);
	box-shadow: 0 20px 40px rgba(57, 129, 72, 0.34);
}
.btn--ghost {
	background: transparent;
	border-color: var(--ink);
	color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--frost); }
.btn--ghost-light {
	background: transparent;
	border-color: rgba(250, 250, 247, 0.4);
	color: var(--frost);
}
.btn--ghost-light:hover { background: var(--frost); color: var(--ink); border-color: var(--frost); }
.btn--link {
	background: none;
	padding: 0;
	color: var(--ink);
	border-radius: 0;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 4px;
}
.btn--link:hover { color: var(--ember); border-bottom-color: var(--ember); }

.btn__arrow { transition: transform 0.3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ===========================================================
   6. HERO
   =========================================================== */
.hero {
	min-height: 100vh;
	padding-top: 9rem;
	padding-bottom: 4rem;
	background: var(--ink);
	color: var(--frost);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.hero__bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 80% 20%, rgba(126, 192, 89, 0.12) 0%, transparent 50%),
		radial-gradient(ellipse at 10% 80%, rgba(74, 123, 168, 0.3) 0%, transparent 55%),
		linear-gradient(135deg, var(--ink-deep) 0%, var(--ink) 100%);
	z-index: 0;
}

.hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(250,250,247,0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(250,250,247,0.03) 1px, transparent 1px);
	background-size: 80px 80px;
	z-index: 1;
	mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
	width: 100%;
}

.hero__copy .eyebrow { color: var(--ember-glow); }
.hero__copy .eyebrow::before { background: var(--ember-glow); }

.hero__title {
	color: var(--frost);
	font-weight: 300;
	margin-bottom: 1.5rem;
}
.hero__title em {
	font-style: italic;
	font-weight: 400;
	background: linear-gradient(135deg, var(--action-glow) 0%, var(--brand-sky) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero__lede {
	font-size: 1.2rem;
	color: rgba(250, 250, 247, 0.78);
	max-width: 46ch;
	margin-bottom: 1.15rem;
	font-family: var(--font-body);
	font-style: normal;
}

/* The three-sentence promise. It used to be the tail of the lede, where it
   read as more equipment detail. On its own line at full opacity it is the
   thing a homeowner is actually deciding on. */
.hero__promise {
	font-size: 1.08rem;
	line-height: 1.55;
	font-weight: 600;
	color: var(--frost);
	max-width: 44ch;
	margin-bottom: 1.5rem;
	font-family: var(--font-body);
}

/* The owner's three headline points, verbatim. Kept as a list rather than a
   run of middots so a screen reader announces three items instead of one
   sentence, and so it wraps to one per line on a phone. */
.hero__points {
	list-style: none;
	margin: 0 0 2.25rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.1rem;
	font-family: var(--font-body);
	font-size: 0.94rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: rgba(250, 250, 247, 0.9);
}
.hero__points li {
	position: relative;
	padding-left: 1.35rem;
}
.hero__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 0.72rem;
	height: 0.4rem;
	border-left: 1.5px solid var(--ember);
	border-bottom: 1.5px solid var(--ember);
	transform: rotate(-45deg);
}
.hero__points a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(250, 250, 247, 0.45);
}
.hero__points a:hover,
.hero__points a:focus-visible {
	text-decoration-color: currentColor;
}

.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.hero__meta {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(250, 250, 247, 0.12);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.hero__meta-item .num {
	font-family: var(--font-display);
	font-size: 2.25rem;
	font-weight: 400;
	display: block;
	line-height: 1;
	color: var(--frost);
}
.hero__meta-item .label {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(250, 250, 247, 0.5);
	margin-top: 0.5rem;
	display: block;
}

@media (max-width: 880px) {
	.hero { min-height: auto; padding-top: 7rem; padding-bottom: 6rem; }
	.hero__inner { grid-template-columns: 1fr; gap: 3rem; }
	.comfort--hero { max-width: 480px; margin: 0 auto; }
	.hero__meta { grid-template-columns: 1fr 1fr; }
}

/* ===========================================================
   7. MARQUEE / TRUST BAR
   =========================================================== */
.marquee {
	background: var(--ink);
	color: rgba(250, 250, 247, 0.6);
	padding: 1.25rem 0;
	overflow: hidden;
	border-top: 1px solid rgba(250, 250, 247, 0.08);
	border-bottom: 1px solid rgba(250, 250, 247, 0.08);
}
.marquee__track {
	display: flex;
	gap: 4rem;
	animation: marquee 40s linear infinite;
	white-space: nowrap;
}
.marquee__item {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 300;
	font-size: 1.5rem;
	display: inline-flex;
	align-items: center;
	gap: 4rem;
}
.marquee__item::after {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	background: var(--leaf);
	transform: rotate(45deg);
	border-radius: 1px;
	flex: 0 0 auto;
}
@keyframes marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ===========================================================
   8. EDITORIAL SECTION HEADERS
   =========================================================== */
.section-head {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: clamp(2rem, 5vw, 4rem);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	align-items: end;
}
.section-head__title { margin-bottom: 0; }
.section-head__title em { font-style: italic; color: var(--ember); }
.section-head__lede { margin: 0; max-width: 50ch; }
@media (max-width: 720px) {
	.section-head { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ===========================================================
   9. SERVICES GRID - Editorial cards
   =========================================================== */
.services { background: var(--paper); }
.services-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1.5rem;
}
.service-card {
	background: var(--frost);
	border: 1px solid var(--border);
	padding: 2.5rem 2rem;
	transition: all 0.5s var(--ease);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 320px;
	text-decoration: none;
	color: inherit;
}
.service-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
	transform: translateY(100%);
	transition: transform 0.5s var(--ease-out);
	z-index: 0;
}
.service-card:hover::before { transform: translateY(0); }
.service-card:hover { color: var(--frost); border-color: var(--ink); }
.service-card:hover .service-card__icon { color: var(--ember-glow); }
.service-card:hover .service-card__num { color: rgba(250, 250, 247, 0.3); }

.service-card > * { position: relative; z-index: 1; }

.service-card__num {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	color: var(--text-faint);
	margin-bottom: 1.5rem;
	transition: color 0.3s var(--ease);
}
.service-card__icon {
	width: 48px; height: 48px;
	margin-bottom: 1.5rem;
	color: var(--ember);
	transition: color 0.3s var(--ease);
}
.service-card__title {
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
	font-weight: 500;
	font-family: var(--font-display);
	line-height: 1.1;
}
.service-card__tagline {
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--text-muted);
	margin-bottom: auto;
	max-width: 100%;
}
.service-card:hover .service-card__tagline { color: rgba(250, 250, 247, 0.7); }

.service-card__cta {
	margin-top: 2rem;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--ember);
	transition: color 0.3s var(--ease);
}
.service-card:hover .service-card__cta { color: var(--ember-glow); }
.service-card:hover .service-card__cta svg { transform: translateX(4px); }
.service-card__cta svg { transition: transform 0.3s var(--ease); }

.service-card.is-wide  { grid-column: span 6; min-height: 360px; }
.service-card.is-full  { grid-column: span 12; min-height: 260px; }
.service-card.is-third { grid-column: span 4; }
.service-card.is-half  { grid-column: span 6; }

@media (max-width: 980px) { .service-card { grid-column: span 6 !important; } }
@media (max-width: 600px) { .service-card { grid-column: span 12 !important; } .services-grid { gap: 1rem; } }

/* ===========================================================
   10. EDITORIAL FEATURE BLOCK (Why us)
   =========================================================== */
.feature-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
.feature-block__media {
	position: sticky;
	top: 120px;
	aspect-ratio: 4/5;
	background: var(--ink);
	overflow: hidden;
	position: relative;
}
.feature-block__media::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 70% 30%, rgba(126, 192, 89, 0.26) 0%, transparent 60%),
		radial-gradient(ellipse at 30% 70%, rgba(74, 123, 168, 0.5) 0%, transparent 60%),
		linear-gradient(135deg, var(--ink-deep), var(--ink-soft));
}
.feature-block__media-content {
	position: relative;
	z-index: 1;
	padding: 2.5rem;
	height: 100%;
	color: var(--frost);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.feature-block__quote {
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(1.5rem, 2.5vw, 2.25rem);
	line-height: 1.2;
	font-weight: 300;
	max-width: 16ch;
}
.feature-block__quote::before {
	content: '"';
	display: block;
	font-size: 5rem;
	line-height: 0.5;
	color: var(--ember-glow);
	margin-bottom: 1.5rem;
	font-family: var(--font-display);
}
.feature-block__attribution {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	color: rgba(250, 250, 247, 0.6);
	text-transform: uppercase;
}

.principles { display: flex; flex-direction: column; gap: 0; }
.principle {
	padding: 2rem 0;
	border-bottom: 1px solid var(--border);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2rem;
	transition: padding 0.3s var(--ease);
}
.principle:hover { padding-left: 1rem; }
.principle:first-child { padding-top: 0; }
.principle__num {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--ember);
	letter-spacing: 0.15em;
	padding-top: 0.4rem;
}
.principle__title {
	font-size: 1.5rem;
	font-family: var(--font-display);
	font-weight: 500;
	margin-bottom: 0.5rem;
}
.principle__body { color: var(--text-muted); margin: 0; }

@media (max-width: 880px) {
	.feature-block { grid-template-columns: 1fr; }
	.feature-block__media { position: relative; top: 0; aspect-ratio: 4/3; }
}

/* ===========================================================
   11. STATS BAR
   =========================================================== */
.stats {
	background: var(--ink);
	color: var(--frost);
	padding: clamp(3rem, 6vw, 5rem) 0;
}
.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(250, 250, 247, 0.1);
	border-top: 1px solid rgba(250, 250, 247, 0.1);
	border-bottom: 1px solid rgba(250, 250, 247, 0.1);
}
.stat {
	background: var(--ink);
	padding: 2.5rem 1.5rem;
	text-align: left;
}
.stat__num {
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.04em;
	display: block;
	margin-bottom: 0.5rem;
}
.stat__num em { color: var(--ember-glow); font-style: italic; }
.stat__label {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(250, 250, 247, 0.55);
}
@media (max-width: 720px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===========================================================
   12. SERVICE AREAS / MAP-STYLE GRID
   =========================================================== */
.areas { background: var(--frost); }
.areas-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1px solid var(--border);
}
.area {
	border-bottom: 1px solid var(--border);
	border-right: 1px solid var(--border);
	padding: 2rem 1.75rem;
	transition: all 0.3s var(--ease);
	position: relative;
	overflow: hidden;
	display: block;
	text-decoration: none;
	color: inherit;
	min-height: 200px;
}
.area:nth-child(4n) { border-right: none; }
.area::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--ember);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.4s var(--ease-out);
	z-index: 0;
}
.area:hover::before { transform: scaleY(1); }
.area:hover { color: var(--frost); }
.area:hover .area__county, .area:hover .area__pop { color: rgba(250, 250, 247, 0.75); }

.area > * { position: relative; z-index: 1; }
.area__city {
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 400;
	line-height: 1;
	margin-bottom: 0.5rem;
}
.area__county {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
	transition: color 0.3s var(--ease);
}
.area__pop {
	margin-top: 1.5rem;
	font-size: 0.85rem;
	color: var(--text-muted);
	transition: color 0.3s var(--ease);
}
.area__arrow {
	position: absolute;
	top: 1.5rem; right: 1.5rem;
	font-size: 1.25rem;
	transition: transform 0.3s var(--ease);
}
.area:hover .area__arrow { transform: translate(4px, -4px); }

@media (max-width: 980px) {
	.areas-list { grid-template-columns: repeat(2, 1fr); }
	.area:nth-child(4n) { border-right: 1px solid var(--border); }
	.area:nth-child(2n) { border-right: none; }
}
@media (max-width: 540px) {
	.areas-list { grid-template-columns: 1fr; }
	.area { border-right: none !important; }
}

/* ===========================================================
   13. PROCESS / TIMELINE
   =========================================================== */
.process {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin-top: 2rem;
	border-top: 1px solid var(--border);
}
.process-step {
	padding: 2.5rem 2rem 2.5rem 0;
	border-right: 1px solid var(--border);
	position: relative;
}
.process-step:last-child { border-right: none; padding-right: 0; }
.process-step__num {
	font-family: var(--font-display);
	font-size: 4rem;
	line-height: 1;
	font-weight: 300;
	color: var(--ember);
	letter-spacing: -0.04em;
	margin-bottom: 1.5rem;
	display: block;
}
.process-step__title { font-size: 1.25rem; margin-bottom: 0.75rem; font-family: var(--font-display); font-weight: 500; }
.process-step__detail { font-size: 0.95rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
@media (max-width: 880px) {
	.process { grid-template-columns: 1fr 1fr; }
	.process-step:nth-child(2n) { border-right: none; }
}
@media (max-width: 540px) {
	.process { grid-template-columns: 1fr; }
	.process-step { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; }
	.process-step:last-child { border-bottom: none; }
}

/* ===========================================================
   14. TESTIMONIAL / EDITORIAL QUOTE
   =========================================================== */
.testimonials { background: var(--paper); overflow: hidden; }
.testimonial-stack {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.testimonial {
	background: var(--frost);
	padding: 2.5rem;
	border: 1px solid var(--border);
	position: relative;
	transition: transform 0.4s var(--ease);
}
.testimonial:hover { transform: translateY(-4px); }
.testimonial__stars {
	color: var(--ember);
	font-size: 1rem;
	letter-spacing: 0.15em;
	margin-bottom: 1.5rem;
}
.testimonial__quote {
	font-family: var(--font-display);
	font-size: 1.15rem;
	line-height: 1.5;
	color: var(--ink);
	font-weight: 400;
	margin-bottom: 2rem;
	max-width: 100%;
}
.testimonial__author {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}
.testimonial__avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--action), var(--brand-blue));
	color: var(--frost);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 1.1rem;
}
.testimonial__name { font-weight: 500; font-size: 0.95rem; }
.testimonial__meta { font-size: 0.78rem; color: var(--text-muted); }

@media (max-width: 880px) { .testimonial-stack { grid-template-columns: 1fr; } }

/* ===========================================================
   15. CTA / EMERGENCY BAND
   =========================================================== */
.cta-band {
	background: var(--ember);
	color: var(--frost);
	padding: clamp(3rem, 6vw, 5rem) 0;
	position: relative;
	overflow: hidden;
}
.cta-band::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 80% 50%, rgba(255, 122, 61, 0.5) 0%, transparent 50%),
		radial-gradient(ellipse at 20% 50%, rgba(195, 65, 26, 0.4) 0%, transparent 50%);
}
.cta-band__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2rem;
	align-items: center;
}
.cta-band__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 400;
	color: var(--frost);
	margin: 0;
	max-width: 18ch;
}
.cta-band__title em { font-style: italic; }
.cta-band .btn--ghost-light { font-size: 1.05rem; padding: 1.25rem 2.25rem; }
@media (max-width: 720px) { .cta-band__inner { grid-template-columns: 1fr; } }

/* ===========================================================
   16. PAGE HEADER (interior pages)
   =========================================================== */
.page-hero {
	background: var(--ink);
	color: var(--frost);
	padding: 11rem 0 5rem;
	position: relative;
	overflow: hidden;
}
.page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 70% 30%, rgba(126, 192, 89, 0.11) 0%, transparent 50%),
		radial-gradient(ellipse at 20% 70%, rgba(74, 123, 168, 0.22) 0%, transparent 55%);
}
.page-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.page-hero__crumbs {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	color: rgba(250, 250, 247, 0.5);
	margin-bottom: 2rem;
	text-transform: uppercase;
}
.page-hero__crumbs a {
	color: rgba(250, 250, 247, 0.92);
	/* A link inside a run of text needs 3:1 against that text, or a non-color
	   cue. The crumbs are one color apart from their separators, so underline. */
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	text-decoration-color: rgba(250, 250, 247, 0.45);
}
.page-hero__crumbs a:hover { color: var(--ember-glow); }
.page-hero__title {
	font-size: clamp(2.75rem, 6vw, 5.5rem);
	font-weight: 300;
	color: var(--frost);
	max-width: 18ch;
	margin: 0 0 1.5rem;
}
.page-hero__title em { font-style: italic; background: linear-gradient(135deg, var(--action-glow), var(--brand-sky)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-hero__lede {
	color: rgba(250, 250, 247, 0.8);
	font-size: 1.2rem;
	max-width: 56ch;
	font-family: var(--font-display);
	font-weight: 300;
	font-style: italic;
}

/* ===========================================================
   17. ARTICLE CONTENT (long-form pages)
   =========================================================== */
.article-content { font-size: 1.075rem; line-height: 1.7; }
.article-content > * + * { margin-top: 1.25em; }
.article-content h2 { margin-top: 2.5em; font-size: 2rem; }
.article-content h3 { margin-top: 2em; font-size: 1.5rem; }
.article-content p { color: var(--ink-soft); }
.article-content ul, .article-content ol { padding-left: 1.5em; }
.article-content li { margin-bottom: 0.5em; }
.article-content blockquote {
	border-left: 3px solid var(--ember);
	padding-left: 1.5rem;
	margin: 2em 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.35rem;
	color: var(--ink);
}

/* Two-column editorial layout */
/* The section label used to sit in a left-hand column at 1fr against the
   body's 1.5fr. On a 1440px screen that gave one word 237px and left the
   reading column 355px wide, narrower than a phone, which is why a 190-word
   field rendered nearly two screens tall. The label is now a rule across the
   top of the section and the body gets the full measure, about 72 characters. */
.editorial-grid {
	display: block;
	margin: 3rem 0 3.25rem;
}
.editorial-grid__side {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
	padding-top: 0.55rem;
	margin-bottom: 1.6rem;
	border-top: 2px solid var(--ink);
}
@media (max-width: 720px) {
	.editorial-grid { margin: 2.75rem 0 3rem; }
	.editorial-grid__side { margin-bottom: 1.1rem; }
}

/* Issue list */
.issue-list {
	list-style: none;
	padding: 0;
	margin: 2rem 0;
	border-top: 1px solid var(--border);
}
.issue-list li {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: baseline;
	gap: 1.5rem;
	font-size: 1.05rem;
}
.issue-list li::before {
	content: counter(li, decimal-leading-zero);
	counter-increment: li;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--ember);
	letter-spacing: 0.1em;
	flex-shrink: 0;
}
.issue-list { counter-reset: li; }

/* Neighborhood pills */
.pills { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 0; }
.pill {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--ink);
	background: transparent;
	transition: all 0.2s var(--ease);
}
.pill:hover { background: var(--ink); color: var(--frost); border-color: var(--ink); }

/* Spec table */
.spec-table {
	margin: 2rem 0;
	border-top: 2px solid var(--ink);
}
.spec-row {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 2rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--border);
	font-size: 0.95rem;
}
.spec-row dt {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.spec-row dd { margin: 0; font-weight: 500; }

/* ===========================================================
   18. FORMS
   =========================================================== */
.contact-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
.contact-form {
	display: grid;
	gap: 1.25rem;
	background: var(--paper);
	padding: clamp(1.75rem, 4vw, 3rem);
	border: 1px solid var(--border);
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--half { grid-column: span 1; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.field input, .field textarea, .field select {
	font-family: var(--font-body);
	font-size: 1rem;
	padding: 0.85rem 1rem;
	background: var(--frost);
	border: 1px solid var(--border);
	color: var(--ink);
	border-radius: 0;
	transition: border-color 0.2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
	outline: none;
	border-color: var(--ember);
}
.field textarea { min-height: 140px; resize: vertical; }

.contact-info { padding-top: 1rem; }
.contact-info h3 { margin-bottom: 1rem; }
.contact-info__block { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.contact-info__label {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ember);
	margin-bottom: 0.5rem;
}
.contact-info__value {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

/*
	Grid and flex children refuse to shrink below their content by default.
	The service dropdown in the quote form has a long option label, so on a
	phone it was forcing the whole column about 20px wider than the page,
	pushing the sidebar text under the right edge of the screen. Letting the
	tracks and the fields shrink fixes it without changing anything on desktop.
*/
.contact-grid > *,
.field-row > * {
	min-width: 0;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
	min-width: 0;
	max-width: 100%;
}

/* ===========================================================
   19. FOOTER
   =========================================================== */
.site-footer {
	background: var(--ink-deep);
	color: rgba(250, 250, 247, 0.7);
	padding: clamp(4rem, 8vw, 7rem) 0 2rem;
	position: relative;
}
.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 3rem;
	padding-bottom: 4rem;
	border-bottom: 1px solid rgba(250, 250, 247, 0.1);
}
.footer-brand { max-width: 32ch; }
.footer-brand h3 {
	font-family: var(--font-display);
	font-size: 2rem;
	color: var(--frost);
	margin-bottom: 1rem;
	font-weight: 400;
}
.footer-brand p { color: rgba(250, 250, 247, 0.6); font-size: 0.95rem; }
.footer-col__title {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ember-glow);
	margin-bottom: 1.5rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.75rem; }
.footer-col a { color: rgba(250, 250, 247, 0.7); font-size: 0.95rem; }
.footer-col a:hover { color: var(--frost); }

.footer-bottom {
	padding-top: 2rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.85rem;
	color: rgba(250, 250, 247, 0.58);
	flex-wrap: wrap;
}
.footer-bottom a { color: rgba(250, 250, 247, 0.5); margin-left: 1.5rem; }
.footer-bottom a:hover { color: var(--frost); }

@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } .footer-bottom a { margin-left: 0; margin-right: 1.5rem; } }

/* ===========================================================
   20. SCROLL REVEAL ANIMATIONS
   =========================================================== */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
	.reveal { opacity: 1; transform: none; }
}

/* ===========================================================
   21. PAGE-SPECIFIC: Financing
   =========================================================== */
.tier-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 3rem;
}
.tier {
	border: 1px solid var(--border);
	padding: 2.5rem 2rem;
	background: var(--frost);
	display: flex;
	flex-direction: column;
}
.tier.is-featured { background: var(--ink); color: var(--frost); border-color: var(--ink); transform: scale(1.02); }
.tier.is-featured .tier__name,
.tier.is-featured .tier__price-num { color: var(--frost); }
.tier.is-featured .tier__period,
.tier.is-featured .tier__features li { color: rgba(250, 250, 247, 0.7); }
.tier.is-featured .tier__features li::before { color: var(--ember-glow); }
.tier__badge {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ember-glow);
	margin-bottom: 1rem;
	min-height: 1rem;
}
.tier__name {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 400;
	margin-bottom: 1rem;
}
.tier__price-num {
	font-family: var(--font-display);
	font-size: 3.5rem;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.04em;
}
.tier__period {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 2rem;
	display: block;
	margin-top: 0.5rem;
}
.tier__features { list-style: none; padding: 0; margin: 0 0 2.5rem; flex: 1; }
.tier__features li {
	padding: 0.6rem 0;
	font-size: 0.95rem;
	color: var(--text-muted);
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	border-bottom: 1px solid var(--border);
}
.tier.is-featured .tier__features li { border-color: rgba(250, 250, 247, 0.1); }
.tier__features li::before {
	content: '✓';
	color: var(--ember);
	font-weight: 600;
	flex-shrink: 0;
}
@media (max-width: 880px) {
	.tier-grid { grid-template-columns: 1fr; }
	.tier.is-featured { transform: none; }
}

/* ===========================================================
   22. UTILITIES
   =========================================================== */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.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; }

/* ===========================================================
   23. SUPPLEMENTARY - single-service, single-location, contact, etc.
   =========================================================== */

/* Page hero variants for single CPTs */
.page-hero--service .page-hero__inner,
.page-hero--location .page-hero__inner { padding-top: clamp(4rem, 8vw, 7rem); }

.page-hero__service-head {
	display: flex;
	gap: 1.75rem;
	align-items: flex-start;
	margin-top: 1.5rem;
	margin-bottom: 1.25rem;
}
.page-hero__icon {
	width: 72px; height: 72px;
	flex-shrink: 0;
	background: var(--ember);
	color: var(--frost);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
}
.page-hero__icon svg { width: 36px; height: 36px; }
.page-hero__tagline {
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(1.1rem, 1.8vw, 1.4rem);
	color: var(--text-muted);
	max-width: 60ch;
	margin: 0.4rem 0 0;
	line-height: 1.35;
}
@media (max-width: 640px) {
	.page-hero__service-head { flex-direction: column; gap: 1rem; }
	.page-hero__icon { width: 56px; height: 56px; }
	.page-hero__icon svg { width: 28px; height: 28px; }
}

/* Location stats strip */
.location-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.5rem;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--border);
}
.location-stat { display: flex; flex-direction: column; gap: 0.4rem; }
.location-stat__label {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.location-stat__value {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--ink);
	line-height: 1.2;
}

/* Eyebrow variant - accent (ember underline) */
.eyebrow--accent { color: var(--ember); }
.eyebrow--accent::before { background: var(--ember); }
.eyebrow--light { color: var(--ember-glow); }
.eyebrow--light::before { background: var(--ember-glow); }

/* Service-card compact variant - used in single-service related & single-location services list */
.services-grid--compact { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .services-grid--compact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .services-grid--compact { grid-template-columns: 1fr; } }
.service-card--compact {
	min-height: auto;
	padding: 1.75rem 1.5rem;
	grid-column: auto !important;
}
.service-card--compact .service-card__icon { width: 36px; height: 36px; margin-bottom: 1rem; }
.service-card--compact .service-card__title { font-size: 1.2rem; margin-bottom: 0.5rem; }
.service-card--compact .service-card__excerpt {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--text-muted);
	margin-bottom: 1.25rem;
	flex: 1;
}
.service-card--compact:hover .service-card__excerpt { color: rgba(250, 250, 247, 0.7); }
.service-card__link {
	font-family: var(--font-mono);
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ember);
	margin-top: auto;
	transition: color 0.3s var(--ease);
}
.service-card--compact:hover .service-card__link { color: var(--ember-glow); }

/* Areas-grid compact variant */
.areas-grid--compact {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-top: 3rem;
}
@media (max-width: 900px) { .areas-grid--compact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .areas-grid--compact { grid-template-columns: 1fr; } }
.area-card--compact {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1.25rem 1.5rem;
	background: var(--frost);
	border: 1px solid var(--border);
	color: var(--ink);
	text-decoration: none;
	transition: all 0.3s var(--ease);
}
.area-card--compact:hover {
	background: var(--ink);
	color: var(--frost);
	border-color: var(--ink);
	transform: translateY(-2px);
}
.area-card__city {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 500;
}
.area-card__county {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	transition: color 0.3s var(--ease);
}
.area-card--compact:hover .area-card__county { color: rgba(250, 250, 247, 0.6); }

/* Pill static (non-link) variant */
.pill--static {
	cursor: default;
	pointer-events: none;
}

/* Contact form additions */
.contact-form-wrap__title {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin: 0.5rem 0 1rem;
	line-height: 1.1;
}
.contact-form-wrap__intro {
	color: var(--text-muted);
	margin-bottom: 2rem;
	max-width: 52ch;
}
.field--consent label.checkbox {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	font-family: var(--font-body);
	font-size: 0.88rem;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-muted);
	cursor: pointer;
}
.field--consent input[type="checkbox"] {
	margin-top: 0.25rem;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--ember);
}
.btn--full { width: 100%; justify-content: center; }
.form-fineprint {
	font-size: 0.82rem;
	color: var(--text-muted);
	margin: 0.75rem 0 0;
	line-height: 1.5;
}

/* Contact info - big phone display + creds list */
.contact-info__big {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 3.5vw, 2.4rem);
	font-weight: 400;
	color: var(--ink);
	text-decoration: none;
	margin: 0.5rem 0 0.75rem;
	line-height: 1.1;
	transition: color 0.3s var(--ease);
}
.contact-info__big:hover { color: var(--ember); }
.contact-info__link {
	display: block;
	font-family: var(--font-display);
	font-size: 1.25rem;
	color: var(--ink);
	text-decoration: none;
	margin: 0.4rem 0 0.6rem;
	border-bottom: 1px solid var(--border);
	padding-bottom: 0.5rem;
	transition: color 0.3s var(--ease);
}
.contact-info__link:hover { color: var(--ember); }
.contact-info__address {
	font-style: normal;
	font-size: 1rem;
	line-height: 1.5;
	margin: 0.5rem 0 0.75rem;
}
.contact-info__block p {
	font-size: 0.92rem;
	color: var(--text-muted);
	line-height: 1.55;
	margin: 0;
}
.contact-info__creds {
	list-style: none;
	padding: 0;
	margin: 0.75rem 0 0;
	display: grid;
	gap: 0.4rem;
}
.contact-info__creds li {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	padding-left: 1rem;
	position: relative;
}
.contact-info__creds li::before {
	content: '';
	position: absolute;
	left: 0; top: 0.55em;
	width: 6px; height: 6px;
	background: var(--ember);
}
.contact-info__block--license { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

/* Hours definition list */
.hours { margin: 0.5rem 0 0; display: grid; gap: 0.4rem; }
.hours > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px dotted var(--border); }
.hours dt { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.hours dd { margin: 0; font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); }

/* Article content (single-service prose) */
.article-content p { font-size: 1.05rem; line-height: 1.65; margin: 0 0 1.25rem; }
.article-content p:last-child { margin-bottom: 0; }

/* Spec table */
.spec-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.spec-table th, .spec-table td {
	padding: 0.85rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
	font-size: 0.95rem;
}
.spec-table th { font-family: var(--font-body); font-weight: 400; color: var(--text-muted); width: 60%; }
.spec-table td { font-family: var(--font-mono); color: var(--ink); text-align: right; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }
.spec-table strong { font-weight: 600; color: var(--ink); }

/* Fineprint paragraph */
.fineprint { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; margin-top: 1.5rem; }

/* Reveal-delay support */
.reveal { transition-delay: var(--reveal-delay, 0ms); }

/* ===========================================================
   24. MOBILE FIXES & OVERFLOW GUARDS (added in revision)
   These rules override / supplement earlier mobile breakpoints.
   =========================================================== */

/* Global overflow & box-sizing guard */
html, body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; }

/* Make sure long words / titles don't blow past containers on phones */
h1, h2, h3, h4 { overflow-wrap: anywhere; word-break: normal; }

/* ---- HEADER & MOBILE NAV FIX ---- */
/* Always opaque background on mobile so the dropdown menu doesn't read as transparent text-over-text */
@media (max-width: 980px) {
	.site-logo__co { display: none; }
	/* Lock body scroll when menu is open */
	body.nav-open { overflow: hidden; }
}

/* ---- HERO (home page) MOBILE TIGHTENING ---- */
@media (max-width: 880px) {
	.hero {
		min-height: auto;
		padding: 6.5rem 0 4rem;
	}
	.hero__title { font-size: clamp(2.25rem, 9vw, 3.5rem); line-height: 1.05; }
	.hero__lede { font-size: 1.05rem; margin-bottom: 0.9rem; }
	.hero__promise { font-size: 1rem; margin-bottom: 1.1rem; }
	.hero__points { font-size: 0.88rem; gap: 0.35rem 0.9rem; margin-bottom: 1.6rem; }
	.hero__actions { flex-direction: column; align-items: stretch; gap: 0.75rem; }
	.hero__actions .btn { justify-content: center; }
	.hero__meta { grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; padding-top: 1.5rem; }
	.hero__meta-item .num { font-size: 1.75rem; }
	.comfort--hero { max-width: 100%; }
	.comfort--hero .comfort__knob { width: 54px; height: 54px; }
	.comfort--hero .comfort__season { font-size: 0.58rem; padding: 0.5rem 0.45rem; letter-spacing: 0.08em; }
}
@media (max-width: 480px) {
	.hero { padding: 5.5rem 0 3.5rem; }
	.hero__inner { gap: 2.5rem; }
	.hero__meta { grid-template-columns: 1fr; gap: 1rem; }
	.hero__meta-item { display: flex; align-items: baseline; gap: 0.75rem; justify-content: space-between; border-bottom: 1px solid rgba(250,250,247,0.1); padding-bottom: 0.75rem; }
	.hero__meta-item .num { font-size: 1.5rem; }
	.hero__meta-item .label { margin-top: 0; }
}

/* ---- PAGE-HERO (interior pages) MOBILE TIGHTENING ---- */
@media (max-width: 880px) {
	.page-hero { padding: 7rem 0 3.5rem; }
	.page-hero__title { font-size: clamp(2rem, 8vw, 3rem); max-width: none; line-height: 1.1; }
	.page-hero__lede { font-size: 1.05rem; }
	.page-hero__crumbs { margin-bottom: 1.25rem; font-size: 0.7rem; }
}
@media (max-width: 480px) {
	.page-hero { padding: 6rem 0 2.5rem; }
	.page-hero__title { font-size: clamp(1.75rem, 9vw, 2.5rem); }
	.page-hero__lede { font-size: 0.98rem; }
}

/* Service / Location hero head - stack icon above text on mobile and never let the icon push content offscreen */
@media (max-width: 640px) {
	.page-hero__service-head { flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
	.page-hero__icon { width: 52px; height: 52px; }
	.page-hero__icon svg { width: 26px; height: 26px; }
	.page-hero__tagline { font-size: 1rem; }
}

/* Location stats - stack on small screens, never overflow */
@media (max-width: 640px) {
	.location-stats { grid-template-columns: 1fr; gap: 1rem; margin-top: 1.75rem; padding-top: 1.5rem; }
	.location-stat { flex-direction: row; align-items: baseline; gap: 1rem; justify-content: space-between; border-bottom: 1px solid rgba(250,250,247,0.12); padding-bottom: 0.75rem; }
	.location-stat__value { font-size: 1.05rem; text-align: right; }
}

/* ---- TYPOGRAPHY: prevent oversized h1/h2 on phones ---- */
@media (max-width: 600px) {
	h1 { font-size: clamp(1.85rem, 8vw, 2.5rem); }
	h2 { font-size: clamp(1.5rem, 6.5vw, 2rem); }
	h3 { font-size: clamp(1.2rem, 5vw, 1.5rem); }
	.lede { font-size: 1.05rem; }
	body { font-size: 16px; }
}

/* ---- SECTIONS: consistent vertical rhythm on mobile ---- */
@media (max-width: 768px) {
	section { padding: 3rem 0; }
	.section-head { margin-bottom: 2rem; }
	.section-head__lede { font-size: 1rem; }
}

/* ---- EDITORIAL GRID on mobile: tighten gap & spacing ---- */
@media (max-width: 720px) {
	.editorial-grid { margin: 2rem 0; gap: 0.75rem; }
	.editorial-grid__side { font-size: 0.7rem; padding-top: 0.4rem; border-top-width: 2px; margin-bottom: 0.25rem; }
}

/* ---- SERVICES GRID: force single col on phones ---- */
@media (max-width: 600px) {
	.services-grid { grid-template-columns: 1fr; gap: 1rem; }
	.service-card { padding: 1.75rem 1.5rem; min-height: auto; }
	.service-card__title { font-size: 1.25rem; }
	.service-card.is-wide,
	.service-card.is-third,
	.service-card.is-half,
	.service-card.is-full { grid-column: 1 / -1 !important; min-height: auto; }
}

/* ---- AREAS GRID: ensure it stacks ---- */
@media (max-width: 880px) {
	.areas-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
	.areas-grid { grid-template-columns: 1fr; }
}

/* ---- PROCESS / TIMELINE: already has mobile rules, just trim the giant numbers on phones ---- */
@media (max-width: 540px) {
	.process { margin-top: 1rem; }
	.process-step { padding: 1.5rem 0; }
	.process-step__num { font-size: 2.75rem; margin-bottom: 0.75rem; }
	.process-step__title { font-size: 1.1rem; }
}

/* ---- TIER GRID (financing): stack & shrink ---- */
@media (max-width: 880px) {
	.tier { padding: 2rem 1.5rem; }
	.tier.is-featured { transform: none; }
	.tier__price-num { font-size: 2.5rem; }
	.tier__name { font-size: 1.4rem; }
}

/* ---- CONTACT FORM: stack ---- */
@media (max-width: 880px) {
	.contact-grid { grid-template-columns: 1fr; gap: 2rem; }
	.contact-form { padding: 1.5rem; }
}
@media (max-width: 540px) {
	.field-row { grid-template-columns: 1fr; gap: 1rem; }
	.contact-form-wrap__title { font-size: 1.4rem; }
}

/* ---- FEATURE BLOCK: existing mobile rule is fine, just shrink the quote ---- */
@media (max-width: 600px) {
	.feature-block__media-content { padding: 1.75rem; }
	.feature-block__quote { font-size: 1.35rem; max-width: none; }
	.feature-block__quote::before { font-size: 3.5rem; margin-bottom: 0.75rem; }
	.principle { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.5rem 0; }
	.principle__num { padding-top: 0; }
	.principle__title { font-size: 1.25rem; }
}

/* ---- STATS BAR: shrink huge numbers on phones ---- */
@media (max-width: 540px) {
	.stats-grid { grid-template-columns: 1fr 1fr; }
	.stat__num { font-size: 2.5rem !important; }
}

/* ---- MARQUEE: smaller on mobile so it's readable ---- */
@media (max-width: 600px) {
	.marquee__item { font-size: 0.85rem; padding: 0.875rem 1rem; }
}

/* ---- CTA BAND: tighter vertical stack on phones ---- */
@media (max-width: 720px) {
	.cta-band { padding: clamp(2.5rem, 6vw, 4rem) 0; }
	.cta-band__title { font-size: clamp(1.75rem, 7vw, 2.5rem); }
}

/* ---- FOOTER: shrink internal padding on phones ---- */
@media (max-width: 600px) {
	.site-footer { padding: 3rem 0 1.5rem; }
	.footer-brand h3 { font-size: 1.4rem; }
	.footer-col__title { font-size: 0.85rem; }
	.footer-col ul a { font-size: 0.92rem; }
}

/* ---- BUTTONS: hit-area & wrapping ---- */
@media (max-width: 600px) {
	.btn { padding: 0.95rem 1.5rem; font-size: 0.95rem; }
	.btn--primary, .btn--ghost, .btn--ghost-light { width: auto; }
}

/* ---- ARTICLE CONTENT: scale down body text on phones ---- */
@media (max-width: 600px) {
	.article-content { font-size: 1rem; line-height: 1.65; }
	.article-content h2 { font-size: 1.5rem; margin-top: 2em; }
	.article-content h3 { font-size: 1.25rem; }
	.article-content blockquote { font-size: 1.1rem; padding-left: 1rem; }
}

/* ---- ISSUE LIST: keep counters tidy on phones ---- */
@media (max-width: 540px) {
	.issue-list li { gap: 1rem; font-size: 0.95rem; padding: 1rem 0; }
}

/* ---- PILLS: smaller padding ---- */
@media (max-width: 540px) {
	.pill, .pill--static { font-size: 0.78rem; padding: 0.4rem 0.85rem; }
}

/* ---- SPEC TABLE (used on financing page): make sure it works at every width ---- */
.spec-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); margin: 2rem 0; }
.spec-table th, .spec-table td {
	padding: 0.85rem 0.5rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
	font-size: 0.95rem;
	vertical-align: baseline;
}
.spec-table th { font-family: var(--font-body); font-weight: 400; color: var(--text-muted); width: 60%; }
.spec-table td { font-family: var(--font-mono); color: var(--ink); text-align: right; white-space: nowrap; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }
.spec-table strong { font-weight: 600; color: var(--ink); }
@media (max-width: 540px) {
	.spec-table th, .spec-table td { font-size: 0.85rem; padding: 0.7rem 0.25rem; }
}

/* ---- VIEWPORT-LEVEL: prevent any element from forcing horizontal scroll ---- */
@media (max-width: 768px) {
	.container, .container--narrow, .container--text { padding-left: 1rem; padding-right: 1rem; }
}

/* ===========================================================
   30. ILLUSTRATION FRAMES & SECTION ILLUSTRATIONS
   =========================================================== */
.illustration-frame {
	position: relative;
	border: 1px solid var(--border);
	background: var(--frost);
	overflow: hidden;
	border-radius: 2px;
}
.illustration-frame svg { display: block; width: 100%; height: auto; }
.illustration-frame--dark {
	background: var(--ink);
	border-color: rgba(250, 250, 247, 0.1);
}
.illustration-frame--floating {
	box-shadow: 0 24px 56px -16px rgba(17, 42, 69, 0.18), 0 8px 16px -8px rgba(17, 42, 69, 0.08);
}
.illustration-caption {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--text-muted);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-top: 0.75rem;
	padding-left: 0.5rem;
	border-left: 2px solid var(--ember);
}

/* Service intro grid (copy + illustration side-by-side) */
.service-intro-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	max-width: var(--container-narrow, 1100px);
	margin: 0 auto;
}
.service-intro-grid__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-family: var(--font-display); font-weight: 400; line-height: 1.1; margin: 0.5rem 0 1rem; }
.service-intro-grid__copy .lede { font-size: 1.08rem; line-height: 1.65; color: var(--text); }
@media (max-width: 880px) {
	.service-intro-grid { grid-template-columns: 1fr; gap: 2rem; }
	.service-intro-grid__illust { order: -1; max-width: 460px; }
}

/* Location map grid */
.location-map-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	max-width: var(--container-narrow, 1100px);
	margin: 0 auto;
}
.location-map-grid__title { font-size: clamp(1.65rem, 3vw, 2.25rem); font-family: var(--font-display); font-weight: 400; line-height: 1.15; margin: 0.5rem 0 1rem; }
.location-map-grid__copy .lede { font-size: 1.05rem; line-height: 1.6; }
.location-map-grid__copy p { line-height: 1.65; }
@media (max-width: 880px) {
	.location-map-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* CTA strip (used on service and location pages) */
.cta-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}
.cta-strip h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-family: var(--font-display); font-weight: 400; line-height: 1.1; }
.cta-strip__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
@media (max-width: 640px) {
	.cta-strip { flex-direction: column; align-items: flex-start; }
	.cta-strip__actions { width: 100%; }
	.cta-strip__actions .btn { flex: 1; justify-content: center; min-width: 0; }
}

/* Ghost button on dark background */
.btn--ghost-light {
	background: transparent;
	color: var(--frost);
	border: 1px solid rgba(250, 250, 247, 0.3);
	padding: 0.85rem 1.5rem;
	font-family: var(--font-mono);
	font-size: 0.88rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 2px;
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.btn--ghost-light:hover { background: rgba(250, 250, 247, 0.08); border-color: var(--frost); }

/* Article content layout improvements */
.article-content { font-size: 1.04rem; line-height: 1.75; color: var(--text); max-width: 65ch; }
.article-content p { margin-bottom: 1.25rem; }
.article-content h3 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 500;
	margin-top: 2rem;
	margin-bottom: 0.6rem;
	color: var(--ink);
	letter-spacing: -0.01em;
}

/* Hero illustration overlay for home (used by template-home if it adopts hero_house) */
.home-hero-illust {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 50%;
	overflow: hidden;
	pointer-events: none;
	opacity: 0.55;
	z-index: 0;
	mask-image: linear-gradient(to left, black 50%, transparent 100%);
	-webkit-mask-image: linear-gradient(to left, black 50%, transparent 100%);
}
.home-hero-illust svg { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) {
	.home-hero-illust { display: none; }
}

/* Home page: areas map feature block */
.areas-map-feature {
	max-width: 880px;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}


/* ===========================================================
   HOME COMFORT ADDITIONS
   Offers grid, reviews CTA, and non-numeric stat tiles
   =========================================================== */

.offer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5rem;
}

.offer {
	background: var(--frost);
	border: 1px solid var(--border);
	border-left: 4px solid var(--ember);
	padding: 2.25rem 2rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.offer__amount {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.1rem, 4.5vw, 2.9rem);
	line-height: 1;
	color: var(--ember);
	letter-spacing: -0.02em;
}

.offer__title {
	font-family: var(--font-display);
	font-size: 1.18rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.3;
}

.offer__body {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.offer__cta {
	margin-top: auto;
	padding-top: 0.75rem;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--border-strong);
	align-self: flex-start;
	transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.offer__cta:hover {
	color: var(--ember);
	border-color: var(--ember);
}

.reviews-cta {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 2.5rem;
}

/* Credential tiles reuse .stat but hold words, not counters */
.stats-grid .stat__num em {
	font-style: normal;
}

@media (max-width: 640px) {
	.offer { padding: 1.75rem 1.5rem; }
}


/* ===========================================================
   COMBO PAGES - [service] in [city] landing pages
   =========================================================== */

.hero-actions-inline {
	display: flex;
	gap: 0.9rem;
	flex-wrap: wrap;
	margin-top: 2rem;
}

.inline-link {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	color: var(--brand-blue);
	text-decoration: none;
	border-bottom: 1px solid rgba(50, 97, 166, 0.35);
	transition: border-color 0.25s var(--ease);
}

.inline-link:hover { border-color: var(--brand-blue); }

.faq-list {
	margin-top: 1.5rem;
	border-top: 1px solid var(--border);
}

.faq {
	border-bottom: 1px solid var(--border);
}

.faq__q {
	list-style: none;
	cursor: pointer;
	padding: 1.15rem 2.2rem 1.15rem 0;
	position: relative;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.04rem;
	line-height: 1.45;
	color: var(--ink);
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-mono);
	font-size: 1.25rem;
	color: var(--ember);
	transition: transform 0.25s var(--ease);
}

.faq[open] .faq__q::after {
	content: '\2212';
}

.faq__a {
	padding: 0 2.2rem 1.4rem 0;
}

.faq__a p {
	margin: 0;
	color: var(--text-muted);
	line-height: 1.7;
}

@media (max-width: 640px) {
	.hero-actions-inline .btn { width: 100%; justify-content: center; }
}

/* ===========================================================
   WAVE 1 - top bar, mega menu, mobile accordions, editorial
   indexes, sitemap, forms, sticky call bar
   =========================================================== */

/* --- Top utility bar ---------------------------------------------------- */
.top-bar {
	background: var(--ink-deep);
	color: rgba(250, 250, 247, 0.72);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	position: relative;
	z-index: 2;
}

.top-bar__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0.5rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* --- Leave a review -------------------------------------------------------
   Built phone first. This page is nearly always opened from a text message,
   one handed, standing in a driveway, so every target is a full width bar at
   least 56px tall and the list is the only thing on the screen.

   Brand colors come through as --brand per link. Each one was measured
   against white at 4.5:1 or better, because several of the official brand
   colors are not readable with white text and an unreadable button is worse
   than an off-brand one. */
.review-links {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

.review-links__rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin: 0 0 2rem;
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--text-muted);
}
.review-links__rating strong { color: var(--ink); }

.review-links__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.review-link {
	--brand: var(--ink);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 60px;
	padding: 1rem 1.25rem;
	background: var(--brand);
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	font-family: var(--font-body);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
	box-shadow: 0 1px 2px rgba(17, 42, 69, 0.12);
	transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.15s var(--ease);
}
.review-link:hover,
.review-link:focus-visible {
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -6px rgba(17, 42, 69, 0.35);
	color: #fff;
}
.review-link:active { transform: translateY(0); }

.review-link__label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}
.review-link__note {
	display: inline-block;
	/* Darkens the brand color rather than lightening it. A white overlay
	   washed Google's blue out to 3.16:1 behind white text, which axe caught
	   and which is a genuine failure at this size. Darkening moves every
	   brand in the list to 7.4:1 or better. */
	background: rgba(0, 0, 0, 0.28);
	border-radius: 100px;
	padding: 0.2rem 0.6rem;
	font-family: var(--font-mono);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
}
/* opacity 0.9 dropped this to 3.95:1 on the Google blue. It is decorative
   and aria-hidden, but there is no reason for it to fail, so make it solid. */
.review-link__arrow { font-size: 1.15rem; flex-shrink: 0; opacity: 1; }

.review-links__foot {
	margin-top: 3.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--border);
}
.review-links__foot h2 {
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 500;
	margin: 0 0 0.75rem;
}
.review-links__foot p {
	font-family: var(--font-body);
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--text-muted);
	margin: 0 0 1rem;
}
.review-links__note {
	font-size: 0.88rem !important;
	padding: 1rem 1.15rem;
	background: var(--paper);
	border-left: 2px solid var(--ember);
	border-radius: 0 4px 4px 0;
}

.page-hero--compact { padding-bottom: 2.5rem; }

@media (max-width: 560px) {
	.review-links { padding: 0 1rem; }
	.review-link {
		font-size: 1rem;
		padding: 0.95rem 1.1rem;
		min-height: 56px;
	}
	/* On a narrow phone the badge on its own line beats it squeezing the
	   platform name into two lines. */
	.review-link__label { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
	.review-links__rating { margin-bottom: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.review-link { transition: none; }
	.review-link:hover, .review-link:focus-visible { transform: none; }
}

/* --- Google rating in the top bar ---------------------------------------
   Google's real average and real total, so it agrees with the profile a
   visitor lands on. Sits between the hours and the emergency line, and gives
   up its sentence before the emergency number does when space runs out. */
.top-bar__rating {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	font-family: var(--font-body);
	font-size: 0.72rem;
	opacity: 0.92;
	transition: opacity 0.2s var(--ease);
	padding-block: 0.3rem;
}
.top-bar__rating:hover,
.top-bar__rating:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.top-bar__rating-text strong { font-weight: 700; }

/* Star row, drawn in CSS rather than as an icon font or an image, so it costs
   nothing to load and inherits color. Decorative: the value is in the text
   beside it, and in a visually hidden line on each card. */
.stars { display: inline-flex; gap: 1px; line-height: 1; flex-shrink: 0; }
.stars .star {
	--star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 17.35l-6.18 3.25L7 13.73l-5-4.87 6.91-1z'/%3E%3C/svg%3E");
	width: 0.9em;
	height: 0.9em;
	background: currentColor;
	display: block;
	-webkit-mask: var(--star-shape) center / contain no-repeat;
	mask: var(--star-shape) center / contain no-repeat;
}
.stars .star.is-full { opacity: 1; }
.stars .star.is-half { opacity: 1; background: linear-gradient(90deg, currentColor 50%, rgba(127,127,127,0.3) 50%); }
.stars .star.is-empty { opacity: 0.3; }

.stars--bar { color: #f0b429; font-size: 0.8rem; }
.stars--card { color: #e09b0c; font-size: 1rem; margin-bottom: 0.9rem; }

/* --- Live review cards --------------------------------------------------- */
.reviews-section__cta { text-align: center; margin-top: 2.5rem; }

.review-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 3rem;
}
.review-card {
	background: var(--frost);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 1.75rem 1.6rem;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.review-card__text {
	font-family: var(--font-body);
	font-size: 0.95rem;
	line-height: 1.62;
	color: var(--ink);
	margin: 0 0 1.25rem;
	border: 0;
	padding: 0;
	flex: 1;
}
.review-card__text::before,
.review-card__text::after { content: none; }
.review-card__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	border-top: 1px solid var(--border);
	padding-top: 0.9rem;
}
.review-card__author {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--ink);
}
.review-card__date {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
}

@media (max-width: 1100px) {
	.review-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
	/* The rating keeps its stars on a phone and drops the sentence, which is
	   the part the emergency line needs the room for. The link keeps a full
	   accessible name through its aria-label, and enough padding to stay a
	   legitimate tap target once the text is gone. */
	.top-bar__rating-text { display: none; }
	.top-bar__rating { padding: 0.42rem 0.3rem; min-height: 24px; }
	.review-grid { grid-template-columns: 1fr; gap: 1.1rem; }
	.review-card { padding: 1.4rem 1.25rem; }
}

.top-bar__emergency {
	color: var(--alert);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	text-transform: uppercase;
	transition: color 0.25s var(--ease);
}

.top-bar__emergency:hover { color: #fff; }

.top-bar__pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--alert);
	box-shadow: 0 0 0 0 rgba(230, 168, 60, 0.7);
	animation: hcaPulse 2.4s infinite;
}

@keyframes hcaPulse {
	0%   { box-shadow: 0 0 0 0 rgba(230, 168, 60, 0.6); }
	70%  { box-shadow: 0 0 0 9px rgba(230, 168, 60, 0); }
	100% { box-shadow: 0 0 0 0 rgba(230, 168, 60, 0); }
}

/* The header sits below the bar rather than over it on the homepage. */
body.is-home .site-header--over-hero { top: 0; }

/* --- Service areas mega menu -------------------------------------------- */
/* The mega panel sizes to its own content.

   It used to inherit max-width:760px from .nav-dropdown while its grid carried
   min-width:940px, so the panel's background, border and shadow stopped 180px
   short of the content. The dark feature column rendered outside the panel
   entirely, with a hard cut where the cream ran out, and the counties lost
   their left padding because there was nothing left to pad with. */
.nav-dropdown--mega {
	--mega-width: 980px;
	width: min(var(--mega-width), calc(100vw - 3rem));
	min-width: 0;
	max-width: none;
	overflow: hidden;      /* clips the bleeding feature column to the radius */
}

.nav-dropdown__inner--mega {
	display: grid;
	grid-template-columns: 1fr 1.3fr 0.92fr;
	gap: 0;                /* the columns carry their own padding, as the
	                          services dropdown already does */
	align-items: stretch;
	min-width: 0;
}

.nav-mega__county { padding: 1.75rem 1.5rem; }

/* Montgomery has six cities and Prince George's has nine, so the shorter
   column always leaves a gap under it. A rule between them turns that gap
   into the bottom of a column rather than an empty patch of paper. */
.nav-mega__county + .nav-mega__county { border-left: 1px solid var(--border); }

.nav-mega__county-name {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--ink);
	text-decoration: none;
	padding-bottom: 0.7rem;
	margin-bottom: 0.85rem;
	border-bottom: 1px solid var(--border);
	transition: color 0.2s var(--ease);
}

.nav-mega__county-name:hover { color: var(--ember); }

.nav-mega__county-note {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.67rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-top: 0.25rem;
}

.nav-mega__cities {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 1.5rem;
}

.nav-mega__cities a {
	display: block;
	padding: 0.32rem 0;
	font-size: 0.9rem;
	color: var(--text-muted);
	text-decoration: none;
	transition: color 0.2s var(--ease);
}

.nav-mega__cities a:hover { color: var(--ember); }

.nav-dropdown__col--plain .nav-dropdown__icon { display: none; }

/* --- Mobile accordion chevron ------------------------------------------- */
.nav-accordion-toggle {
	display: none;
	background: none;
	border: 1px solid var(--border);
	width: 42px;
	height: 42px;
	border-radius: 3px;
	position: absolute;
	right: 0;
	top: 4px;
	align-items: center;
	justify-content: center;
}

.nav-accordion-toggle span {
	display: block;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.25s var(--ease);
}

.nav-item.is-open > .nav-accordion-toggle span {
	transform: rotate(-135deg) translate(-3px, -3px);
}

/* --- Editorial numbered index (used for Education, Tips, Blog) ---------- */
.index-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
	border-top: 1px solid var(--border);
}

.index-list__item {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: 1.5rem;
	align-items: baseline;
	padding: 1.9rem 0;
	border-bottom: 1px solid var(--border);
}

.index-list__num {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	color: var(--ember);
	padding-top: 0.35rem;
}

.index-list__link {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.18rem, 2.4vw, 1.62rem);
	line-height: 1.28;
	letter-spacing: -0.012em;
	color: var(--ink);
	text-decoration: none;
	display: inline-block;
	background-image: linear-gradient(var(--ember), var(--ember));
	background-repeat: no-repeat;
	background-size: 0% 1px;
	background-position: 0 100%;
	transition: background-size 0.4s var(--ease-out), color 0.25s var(--ease);
}

.index-list__link:hover {
	color: var(--ember);
	background-size: 100% 1px;
}

.index-list__lede {
	margin: 0.7rem 0 0;
	color: var(--text-muted);
	font-size: 0.97rem;
	line-height: 1.65;
	max-width: 64ch;
}

.index-list__meta {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--text-faint);
}

/* --- Sitemap ------------------------------------------------------------ */
.sitemap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 3rem 2.5rem;
}

.sitemap-col--wide { grid-column: 1 / -1; }

.sitemap-col__title {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ember);
	margin: 0 0 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--border);
}

.sitemap-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sitemap-list li { margin-bottom: 0.5rem; }

.sitemap-list a {
	color: var(--text-muted);
	text-decoration: none;
	font-size: 0.93rem;
	transition: color 0.2s var(--ease);
}

.sitemap-list a:hover { color: var(--ember); }

.sitemap-combo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 2rem;
	margin-top: 1rem;
}

.sitemap-combo__city {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.6rem;
}

/* --- Forms -------------------------------------------------------------- */
.hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-notice {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1.1rem 1.3rem;
	margin-bottom: 1.75rem;
	border-left: 4px solid var(--cool);
	background: rgba(50, 97, 166, 0.09);
	font-size: 0.95rem;
	line-height: 1.6;
}

.form-notice--ok { border-left-color: var(--action); background: rgba(26, 127, 55, 0.09); }
.form-notice--bad { border-left-color: var(--danger); background: rgba(180, 52, 42, 0.09); }
.form-notice strong { font-family: var(--font-display); font-size: 1.04rem; }
.form-notice span { color: var(--text-muted); }

/* --- Sticky call bar (phones only) -------------------------------------- */
.call-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1200;
	display: none;
	transform: translateY(105%);
	transition: transform 0.35s var(--ease-out);
	box-shadow: 0 -6px 24px rgba(17, 42, 69, 0.18);
}

.call-bar.is-visible { transform: translateY(0); }

.call-bar a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.95rem 0.5rem;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	min-height: 52px;
}

.call-bar__call { background: var(--ember); color: #fff; }
.call-bar__book { background: var(--ink); color: var(--frost); }

/* --- Breakpoint between mobile and desktop so the logo never squishes ---- */
@media (min-width: 1101px) and (max-width: 1260px) {
	.header-inner { gap: 1rem; }
	.nav-list { gap: 1.1rem; }
	.nav-item > a { font-size: 0.88rem; }
	.header-phone { display: none; }
	.site-logo__name { font-size: 1.02rem; }
	.nav-dropdown--mega { --mega-width: 780px; }
	.nav-dropdown__inner--mega { min-width: 780px; grid-template-columns: 1fr 1.3fr; }
	.nav-dropdown--mega .nav-dropdown__feature { display: none; }
	.nav-dropdown--services { --services-width: 800px; }
}

@media (min-width: 861px) and (max-width: 1100px) {
	.site-logo__name { font-size: 0.98rem; }
	.header-phone { display: none; }
}

/* --- Phones. Sized against iPhone 17 at 402 x 874 CSS points ------------- */
@media (max-width: 860px) {
	.top-bar__inner { padding: 0.45rem 1.1rem; justify-content: center; }
	.top-bar__hours { display: none; }
	.top-bar__emergency { font-size: 0.7rem; }

	.call-bar { display: flex; }
	body { padding-bottom: 52px; }

	.nav-item.has-dropdown { position: relative; padding-right: 52px; }
	.nav-accordion-toggle { display: flex; }

	/* Undo the desktop panel sizing only. Do NOT touch overflow here: the
	   mobile menu is an accordion that collapses with max-height: 0, and it is
	   overflow: hidden that does the clipping. Setting it visible let a closed
	   Service Areas panel paint its fifteen cities straight over the Resources
	   menu underneath it. */
	.nav-dropdown__inner,
	.nav-dropdown--mega {
		width: auto;
		min-width: 0;
		max-width: none;
	}
	.nav-dropdown--mega { overflow: hidden; }
	/* The services panel is position: fixed and centered on the window at
	   desktop widths. In the accordion it has to go back to being an ordinary
	   block in the flow, or it floats over the menu it belongs to. */
	.nav-dropdown--services {
		position: static;
		top: auto;
		left: auto;
		width: 100%;
		max-width: 100%;
	}
	.nav-dropdown--services .nav-dropdown__inner { grid-template-columns: none; }
	.nav-dropdown__inner--mega {
		display: block;
		min-width: 0;
		padding: 0.25rem 0 0.75rem;
	}
	.nav-mega__county { padding: 0; }
	.nav-mega__county + .nav-mega__county { border-left: 0; }

	.nav-mega__cities { columns: 2; column-gap: 1rem; }
	.nav-mega__county { margin-bottom: 1.25rem; }
	.nav-dropdown--mega .nav-dropdown__feature,
	.nav-dropdown .nav-dropdown__feature { display: none; }

	.nav-item--mobile-cta { display: block; padding: 1.25rem 0 0; }

	.index-list__item { grid-template-columns: 2.6rem 1fr; gap: 0.9rem; padding: 1.4rem 0; }
	.index-list__link { font-size: 1.12rem; }

	.sitemap-grid { gap: 2.25rem; }
	.offer-grid { grid-template-columns: 1fr; }

	.hero-actions-inline { flex-direction: column; }
	.hero-actions-inline .btn { width: 100%; }

	.faq__q { font-size: 0.99rem; padding-right: 2rem; }

	/* Nothing may push the page sideways on a 402px viewport. */
	.container,
	.container--text,
	.container-narrow { padding-left: 1.1rem; padding-right: 1.1rem; }
}

@media (min-width: 861px) {
	.nav-item--mobile-cta { display: none; }
}

/* --- Emergency band on the home page ------------------------------------ */
.emergency-band {
	background: var(--ink);
	color: var(--frost);
	padding: 4.5rem 0;
}

.emergency-band__inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 3rem;
	align-items: center;
}

.emergency-band__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	line-height: 1.14;
	letter-spacing: -0.018em;
	margin: 0.6rem 0 1rem;
	color: var(--frost);
}

.emergency-band__body {
	margin: 0;
	color: rgba(250, 250, 247, 0.72);
	max-width: 56ch;
	line-height: 1.7;
}

.emergency-band__actions {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

@media (max-width: 860px) {
	.emergency-band { padding: 3rem 0; }
	.emergency-band__inner { grid-template-columns: 1fr; gap: 2rem; }
	.emergency-band__actions .btn { width: 100%; justify-content: center; }
}

/* --- Two column Resources dropdown -------------------------------------- */
.nav-dropdown__inner--two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	min-width: 640px;
}

@media (max-width: 860px) {
	.nav-dropdown__inner--two-col {
		display: block;
		min-width: 0;
	}
	.nav-dropdown__inner--two-col .nav-dropdown__col + .nav-dropdown__col {
		margin-top: 1.1rem;
		padding-top: 1.1rem;
		border-top: 1px solid var(--border);
	}
}


/* ===========================================================
   LOGO ACCENTS
   Green comes off the mark and takes the quiet supporting roles:
   eyebrows, rules, the marquee, the footer. Ember stays the one
   action color so a button never competes with a label.
   =========================================================== */

.eyebrow::before { background: var(--leaf); }
.eyebrow--accent { color: var(--leaf-deep); }
.eyebrow--accent::before { background: var(--leaf); }
.eyebrow--light { color: var(--leaf-light); }
.eyebrow--light::before { background: var(--leaf-light); }

.hero__copy .eyebrow { color: var(--leaf-light); }
.hero__copy .eyebrow::before { background: var(--leaf-light); }

/* The flanking rules under AIR SERVICES, borrowed for section headings. */
.section-head__title::after {
	content: '';
	display: block;
	width: 54px;
	height: 2px;
	margin-top: 1.15rem;
	background: linear-gradient(90deg, var(--leaf-deep), var(--leaf-light));
	border-radius: 2px;
}

.section-head--centered .section-head__title::after { margin-left: auto; margin-right: auto; }

.marquee__item::after { background: var(--leaf); }

.footer-brand h3 em { color: var(--leaf-light); }

.footer-brand__hours { color: var(--leaf-light) !important; }

.index-list__num { color: var(--leaf-deep); }

.faq__q::after { color: var(--leaf-deep); }

.sitemap-col__title { color: var(--action-deep); border-bottom-color: rgba(57, 129, 72, 0.3); }

.nav-mega__county-name:hover { color: var(--leaf-deep); }
.nav-mega__cities a:hover { color: var(--leaf-deep); }

.offer { border-left-color: var(--leaf); }
.offer__amount { color: var(--brand-navy); }
.offer__cta:hover { color: var(--leaf-deep); border-color: var(--leaf); }

.top-bar__hours { color: rgba(250, 250, 247, 0.66); }

/* Header logo. Full mark on solid headers, light mark over the dark hero. */
.site-logo img,
.site-logo .site-logo__img {
	display: block;
	width: auto;
	height: 64px;
	max-width: none;
}

.site-logo__img--light { display: none; }

.site-header--over-hero .site-logo__img--light { display: block; }
.site-header--over-hero .site-logo__img--dark { display: none; }

/* Once the transparent header turns solid on scroll, swap back. */
.site-header--over-hero.is-scrolled .site-logo__img--light { display: none; }
.site-header--over-hero.is-scrolled .site-logo__img--dark { display: block; }

.footer-logo {
	display: block;
	height: 62px;
	width: auto;
	margin-bottom: 1.4rem;
}

@media (min-width: 1101px) and (max-width: 1260px) {
	.site-logo img, .site-logo .site-logo__img { height: 48px; }
}

@media (min-width: 861px) and (max-width: 1100px) {
	.site-logo img, .site-logo .site-logo__img { height: 46px; }
}

@media (max-width: 860px) {
	.site-logo img, .site-logo .site-logo__img { height: 42px; }
	.footer-logo { height: 52px; }
	.section-head__title::after { width: 44px; margin-top: 0.9rem; }
}

/* ---------------------------------------------------------------------------
   Stacked lockup.

   The breakpoints above shrink the logo because the horizontal lockup runs out
   of header width. The stacked mark is 2.1:1, so width is never the constraint
   and shrinking it only makes the words harder to read. Hold the height instead,
   and give it a little more than the horizontal gets, since not quite half of
   that height is the roof.
--------------------------------------------------------------------------- */
.site-logo--stacked img,
.site-logo--stacked .site-logo__img { height: 66px; }

@media (min-width: 861px) and (max-width: 1260px) {
	.site-logo--stacked img, .site-logo--stacked .site-logo__img { height: 60px; }
}

@media (max-width: 860px) {
	.site-logo--stacked img, .site-logo--stacked .site-logo__img { height: 50px; }
}

@media (max-width: 400px) {
	.site-logo--stacked img, .site-logo--stacked .site-logo__img { height: 46px; }
}

.footer-logo { height: 76px; }

@media (max-width: 860px) {
	.footer-logo { height: 64px; }
}


/* --- Top bar now lives inside the fixed header --- */
.site-header .top-bar {
	border-bottom: 1px solid rgba(250, 250, 247, 0.09);
}

/* Once you scroll, the utility bar steps aside and the header stays compact. */
.site-header.is-scrolled .top-bar { display: none; }

/* Below 1100px the header is a light bar, so it needs the dark mark. */
@media (max-width: 1100px) {
	.site-header--over-hero .site-logo__img--light { display: none; }
	.site-header--over-hero .site-logo__img--dark { display: block; }
}

/* Hero stat rows read as label-under-value on a phone, not value-then-gap-then-label. */
@media (max-width: 860px) {
	.hero__meta { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
	.hero__meta-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.15rem;
		width: auto;
	}
	.hero__meta-item .label { text-align: left; }
	.footer-col__title { color: var(--leaf-light); }
}

.footer-col__title { color: var(--leaf-light); }


/* The header carries the utility bar now, so the hero needs more clearance
   than it did when the bar sat above it. */
.hero { padding-top: 11rem; }

@media (max-width: 1100px) {
	.hero { padding-top: 9.5rem; }
}

@media (max-width: 860px) {
	.hero { padding-top: 8.5rem; padding-bottom: 4rem; }
	.page-hero { padding-top: 8rem; }
}


/* ===========================================================
   TOP BAR SAFETY
   The bar belongs inside the fixed header. A cached page from an
   earlier build can still deliver it as a child of body, where it
   would overlap the logo and nav. Hide it there; the script moves
   it into the header and this rule stops applying.
   =========================================================== */

body > .top-bar { display: none !important; }
.site-header > .top-bar { display: block; }

/* ===========================================================
   LOGO SIZING
   =========================================================== */

.site-logo img,
.site-logo .site-logo__img { height: 80px; }

.footer-logo { height: 78px; }

@media (min-width: 1101px) and (max-width: 1260px) {
	.site-logo img, .site-logo .site-logo__img { height: 66px; }
}

@media (min-width: 861px) and (max-width: 1100px) {
	.site-logo img, .site-logo .site-logo__img { height: 62px; }
}

@media (max-width: 860px) {
	.site-logo img, .site-logo .site-logo__img { height: 54px; }
	.footer-logo { height: 62px; }
	.header-inner { padding-top: 0.6rem; padding-bottom: 0.6rem; }
}

/* A taller logo means a taller header, so the hero needs to start lower. */
.hero { padding-top: 12.5rem; }
.page-hero { padding-top: 11rem; }

@media (max-width: 1100px) {
	.hero { padding-top: 10.5rem; }
	.page-hero { padding-top: 9.5rem; }
}

@media (max-width: 860px) {
	.hero { padding-top: 9.5rem; padding-bottom: 4rem; }
	.page-hero { padding-top: 8.5rem; }
}

/* ===========================================================
   HEADER FIXES
   =========================================================== */

/* Both logo files were rendering side by side. The sizing rule
   (.site-logo .site-logo__img) outranked the plain .site-logo__img--light
   hide rule, so display:block won. Match the specificity. */
.site-logo .site-logo__img--light { display: none; }
.site-logo .site-logo__img--dark  { display: block; }

.site-header--over-hero .site-logo .site-logo__img--light { display: block; }
.site-header--over-hero .site-logo .site-logo__img--dark  { display: none; }

.site-header--over-hero.is-scrolled .site-logo .site-logo__img--light { display: none; }
.site-header--over-hero.is-scrolled .site-logo .site-logo__img--dark  { display: block; }

@media (max-width: 1100px) {
	/* The header bar is light at this width, so it always wants the dark mark. */
	.site-header .site-logo .site-logo__img--light { display: none; }
	.site-header .site-logo .site-logo__img--dark  { display: block; }
}

/* The hamburger had no color of its own. It was only ever painted by the
   over-hero and scrolled rules, so on an interior page it was invisible. */
.nav-toggle span { background: var(--ink); }
.site-header--solid .nav-toggle span { background: var(--ink); }

/* Mobile menu: the dropdown chevron and the accordion button were both
   showing, which read as two arrows. The button is the control, so the
   decorative caret goes. */
@media (max-width: 1100px) {
	.nav-item.has-dropdown .nav-caret { display: none; }
}

/* Mobile menu call to action. A mobile rule sets space-between on nav links,
   which pushed the single label to the left edge of the pill. */
.nav-item--mobile-cta .btn,
.nav-item--mobile-cta .btn.btn--full {
	display: flex !important;
	width: 100%;
	justify-content: center !important;
	text-align: center;
	padding-left: 1rem;
	padding-right: 1rem;
}

.nav-cta-call {
	display: block;
	text-align: center;
	margin-top: 0.9rem;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	color: var(--text-muted);
	text-decoration: none;
}

.nav-cta-call:hover { color: var(--ember); }

/* ===========================================================
   MOBILE MENU PANEL
   The panel was pinned at a fixed 60px, which was set before the
   utility bar and the larger logo. It clipped the logo. Measure the
   header instead so the panel always opens below it.
   =========================================================== */
@media (max-width: 1100px) {
	.primary-nav {
		top: var(--hca-header-h, 104px);
		max-height: calc(100vh - var(--hca-header-h, 104px));
	}
}

.nav-cta-call {
	display: block !important;
	width: 100%;
	text-align: center !important;
	justify-content: center;
}

/* ===========================================================
   LOGO SIZE, take three
   The stacked lockup gives 58 percent of its height to the roof
   mark, so the words were always going to read small in a header
   bar. The horizontal lockup is the default now and can carry a
   much larger wordmark at a sensible header height.
   =========================================================== */

.site-logo--horizontal img,
.site-logo--horizontal .site-logo__img { height: 74px; }

.site-logo--stacked img,
.site-logo--stacked .site-logo__img { height: 104px; }

.footer-logo { height: 92px; }

@media (min-width: 1101px) and (max-width: 1260px) {
	.site-logo--horizontal img, .site-logo--horizontal .site-logo__img { height: 60px; }
	.site-logo--stacked img,    .site-logo--stacked .site-logo__img    { height: 84px; }
}

@media (min-width: 861px) and (max-width: 1100px) {
	.site-logo--horizontal img, .site-logo--horizontal .site-logo__img { height: 56px; }
	.site-logo--stacked img,    .site-logo--stacked .site-logo__img    { height: 78px; }
}

@media (max-width: 860px) {
	.site-logo--horizontal img, .site-logo--horizontal .site-logo__img { height: 46px; }
	.site-logo--stacked img,    .site-logo--stacked .site-logo__img    { height: 62px; }
	.footer-logo { height: 68px; }
}

@media (max-width: 430px) {
	.site-logo--horizontal img, .site-logo--horizontal .site-logo__img { height: 40px; }
	.site-logo--stacked img,    .site-logo--stacked .site-logo__img    { height: 56px; }
}

/* The header grows with the logo, so the first section clears it. */
.hero { padding-top: 13rem; }
.page-hero { padding-top: 11.5rem; }

@media (max-width: 1100px) {
	.hero { padding-top: 10.5rem; }
	.page-hero { padding-top: 9.5rem; }
}

@media (max-width: 860px) {
	.hero { padding-top: 9rem; padding-bottom: 4rem; }
	.page-hero { padding-top: 8.25rem; }
}

/* ===========================================================
   SWIPE TO COMFORT
   =========================================================== */

.comfort:not(.comfort--hero) { padding: 5.5rem 0; background: var(--paper); }

/* The section variant used to run the full container width, which made the
   stage about 700px tall on a desktop. Cap it so the whole thing is on
   screen without zooming out. */
.comfort .container > .comfort__stage,
.comfort .container > .comfort__seasons,
.comfort .container > .comfort__caption { max-width: 760px; }

.comfort__stage {
	position: relative;
	margin-top: 3rem;
	border-radius: 6px;
	overflow: hidden;
	background: var(--ink-deep);
	box-shadow: 0 26px 60px -32px rgba(17, 42, 69, .6);
	cursor: ew-resize;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	/* Let the browser own vertical panning; we only claim horizontal. */
	touch-action: pan-y;
	aspect-ratio: 900 / 520;
}

.comfort__stage:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; }

.comfort__base,
.comfort__over { position: absolute; inset: 0; }
.comfort__base svg,
.comfort__over svg { width: 100%; height: 100%; display: block; }

.comfort__divider {
	position: absolute; top: 0; bottom: 0; width: 3px; z-index: 5;
	background: #fff; pointer-events: none;
	box-shadow: 0 0 0 1px rgba(17, 42, 69, .25), 0 0 22px rgba(0, 0, 0, .35);
}

.comfort__knob {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 54px; height: 54px; border-radius: 50%; background: #fff;
	display: flex; align-items: center; justify-content: center; gap: 3px;
	box-shadow: 0 6px 18px rgba(11, 30, 51, .4);
}
.comfort__knob i {
	display: block; width: 0; height: 0;
	border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.comfort__knob i:first-child { border-right: 8px solid var(--alert); }
.comfort__knob i:last-child { border-left: 8px solid var(--cool); }

.comfort__tag {
	position: absolute; top: 1.1rem; z-index: 6; pointer-events: none;
	font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
	text-transform: uppercase; padding: .45rem .85rem; border-radius: 3px; color: #fff;
	opacity: 0; transform: translateY(-6px);
	transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.comfort__tag.is-on { opacity: 1; transform: translateY(0); }
.comfort__tag--before { left: 1.1rem; background: rgba(17, 42, 69, .88); }
.comfort__tag--after { right: 1.1rem; background: rgba(53, 154, 95, .95); }

.comfort__temp {
	position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
	z-index: 6; pointer-events: none; display: flex; align-items: baseline; gap: .12em;
	font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; color: #fff;
	font-size: clamp(1.7rem, 5vw, 2.8rem);
	/* Winter and spring put this over snow and pale grass, so it carries its
	   own scrim rather than relying on the artwork behind it. */
	background: rgba(11, 30, 51, .5);
	padding: .1em .5em .18em;
	border-radius: 5px;
	text-shadow: 0 3px 14px rgba(11, 30, 51, .6);
}
.comfort__temp sup { font-size: .42em; font-weight: 600; }
.comfort__temp small {
	font-family: var(--font-mono); font-size: .22em; letter-spacing: .16em;
	text-transform: uppercase; opacity: .85; margin-left: .7em; align-self: center;
}

.comfort__hint {
	position: absolute; left: 50%; top: calc(50% + 44px); transform: translateX(-50%);
	z-index: 6; pointer-events: none; font-family: var(--font-mono); font-size: .68rem;
	letter-spacing: .14em; text-transform: uppercase; color: #fff;
	background: rgba(11, 30, 51, .55); padding: .4rem .8rem; border-radius: 3px;
	transition: opacity .4s var(--ease);
}
.comfort__stage.is-touched .comfort__hint { opacity: 0; }

.comfort__caption {
	margin-top: 1rem; font-family: var(--font-mono); font-size: .72rem;
	letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint);
}

.comfort__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

/* ---- season picker ---------------------------------------------------- */

.comfort__seasons {
	display: flex;
	gap: 0.4rem;
	margin-top: 1rem;
}
.comfort__season {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid rgba(17, 42, 69, 0.16);
	border-radius: 3px;
	background: none;
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.comfort__season .when { opacity: 0.5; letter-spacing: 0.06em; font-size: 0.9em; }
.comfort__season:hover { border-color: rgba(17, 42, 69, 0.4); }
.comfort__season.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.comfort__season.is-on .when { opacity: 0.85; }

/* ---- hero variant -----------------------------------------------------
   Sits in the right hero column in place of the old thermostat dial, on the
   dark ink background, so everything gets a size down and a light palette. */

.comfort--hero {
	width: 100%;
	max-width: 520px;
	margin-left: auto;
}
.comfort--hero .comfort__stage {
	margin-top: 0;
	aspect-ratio: 4 / 3;
	border: 1px solid rgba(250, 250, 247, 0.14);
	box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.8);
}
.comfort--hero .comfort__knob { width: 46px; height: 46px; }
.comfort--hero .comfort__tag { top: 0.75rem; font-size: 0.6rem; padding: 0.32rem 0.6rem; letter-spacing: 0.1em; }
.comfort--hero .comfort__tag--before { left: 0.75rem; }
.comfort--hero .comfort__tag--after { right: 0.75rem; }
.comfort--hero .comfort__temp { bottom: 0.85rem; font-size: 2rem; }
.comfort--hero .comfort__temp small { font-size: 0.26em; letter-spacing: 0.12em; margin-left: 0.6em; }
.comfort--hero .comfort__hint { top: calc(50% + 34px); font-size: 0.6rem; padding: 0.3rem 0.6rem; }

.comfort--hero .comfort__season {
	border-color: rgba(250, 250, 247, 0.22);
	color: rgba(250, 250, 247, 0.72);
}
.comfort--hero .comfort__season:hover { border-color: rgba(250, 250, 247, 0.5); color: var(--frost); }
.comfort--hero .comfort__season.is-on {
	/* --leaf gave 3.14:1 with white on it. --action is the green that was
	   already validated for white type. */
	background: var(--action);
	border-color: var(--action);
	color: #fff;
}
.comfort--hero .comfort__season.is-on .when { opacity: 1; }
.comfort--hero .comfort__caption {
	margin-top: 0.9rem;
	font-size: 0.64rem;
	letter-spacing: 0.07em;
	color: rgba(250, 250, 247, 0.5);
}

@media (max-width: 860px) {
	.comfort:not(.comfort--hero) { padding: 3.5rem 0; }
	.comfort__stage {
		margin-top: 2rem;
		/* Taller crop on a phone so the house is not a thin strip. The SVG
		   slices rather than squashing, so it stays in proportion. */
		aspect-ratio: 4 / 3;
	}
	.comfort__knob { width: 62px; height: 62px; }   /* bigger finger target */
	.comfort__tag { top: .8rem; font-size: .62rem; padding: .35rem .6rem; }
	.comfort__tag--before { left: .8rem; }
	.comfort__tag--after { right: .8rem; }
	.comfort__hint { top: calc(50% + 48px); }
	.comfort__cta .btn { width: 100%; justify-content: center; }
}

@media (max-width: 430px) {
	/* Stay at 4:3. The scene reframes to the house and the outdoor unit at
	   this width, and a square crop would start cutting the house itself. */
	.comfort__stage { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
	.comfort__tag { transition: none; }
}

/* ===========================================================
   CREDENTIAL LINKS
   Any claim we make about the BBB rating points at the public
   profile that backs it. These sit inside body copy, the footer
   credential line and the hero badges, so they take their color
   from whatever they are sitting in rather than fighting it.
   =========================================================== */

.cred-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: currentColor;
	opacity: inherit;
	transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
.cred-link:hover,
.cred-link:focus-visible { color: var(--leaf-deep); text-decoration-color: var(--leaf-deep); }

/* On the dark hero and footer the green reads muddy; go light instead. */
.hero .cred-link:hover,
.hero .cred-link:focus-visible,
.site-footer .cred-link:hover,
.site-footer .cred-link:focus-visible { color: var(--frost); text-decoration-color: var(--frost); }

/* The hero badge and the stat label are set in mono caps; keep the rule from
   crowding the letterforms. */
.hero__meta-item .cred-link,
.stat__label .cred-link { text-underline-offset: 0.24em; }

/* ===========================================================
   HEADER FIT
   Laid out at full size the desktop header needs about 1470px:
   483 logo + 478 nav + 361 phone-and-CTA + gaps + padding. The
   container caps at 1320px, so between the 1100px hamburger
   breakpoint and roughly 1500px the CTA was running off the
   right edge. It now sheds weight in order of importance
   instead. Ordered widest-first so the narrower rules win.
   =========================================================== */

@media (min-width: 1101px) and (max-width: 1500px) {
	/* The phone number is the first thing to go: the utility bar above
	   still carries a tel: link, and the CTA button is right beside it. */
	.header-cta .header-phone { display: none; }
}

@media (min-width: 1101px) and (max-width: 1400px) {
	.header-inner { gap: 1.25rem; }
	.nav-list { gap: 0.55rem; }
	.nav-list > .nav-item > a { font-size: 0.87rem; }
}

@media (min-width: 1101px) and (max-width: 1260px) {
	/* Last resort before the hamburger takes over. The logo comes down a
	   notch, which at this viewport is the same optical size 74px is at
	   1440, and the CTA tightens up. */
	.site-logo--horizontal img { height: 62px; }
	.site-logo--stacked img { height: 84px; }
	.nav-list { gap: 0.3rem; }
	.nav-list > .nav-item > a { font-size: 0.83rem; padding: 0.6rem 0.15rem; }
	.btn--header { font-size: 0.78rem; padding: 0.62rem 1rem; }
	.header-inner { gap: 0.9rem; padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (min-width: 1501px) {
	/* With the phone number back in, the row needs about 1470px of content
	   box. The header is its own bar, so it gets a wider inner track than the
	   1320px body container rather than spilling past it. Below 1501 the
	   phone is hidden and the header goes back to matching page content. */
	.header-inner { max-width: 1500px; }
}

/* ===========================================================
   HERO FAN
   The brand mark, running. It sits behind the content bleeding
   off the bottom-right corner, so it reads as equipment turning
   over rather than as a logo someone stuck on the page.

   The source SVG is centered on the fan's own hub, so rotating
   about the element center spins it true instead of wobbling.
   transform + opacity only, so it composites on the GPU and
   never triggers layout or paint.
   =========================================================== */

.hero__fan {
	position: absolute;
	z-index: 1;                       /* above the wash, under .hero__inner */
	pointer-events: none;
	width: clamp(280px, 32vw, 470px);
	aspect-ratio: 1;
	right: -4%;
	bottom: -9%;
	background: url('../images/fan.svg') center / contain no-repeat;
	opacity: 0.30;
	will-change: transform;
	animation: hcaFanSpin var(--hca-fan-spin, 1.15s) linear infinite;
}

@keyframes hcaFanSpin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Nothing is gained by turning an invisible fan; the observer in main.js
   parks it whenever the hero is off screen. */
.hero__fan.is-parked { animation-play-state: paused; }

@media (max-width: 880px) {
	/* Stacked layout moves the slider to the bottom of the hero, which pushed
	   the fan below the fold entirely. It moves up alongside the stat rows
	   instead: those are left aligned on a narrow screen, so the right half of
	   that band is empty and the fan can sit there at full strength without
	   landing on any text. */
	.hero__fan {
		width: clamp(220px, 52vw, 300px);
		right: -10%;
		top: 42%;
		bottom: auto;
		opacity: 0.30;
	}
}

@media (max-width: 430px) {
	.hero__fan { width: 240px; right: -14%; top: 43%; bottom: auto; opacity: 0.28; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__fan { animation: none; }
}


/* ===========================================================
   TARGET SIZE  (WCAG 2.2 AA, 2.5.8)
   Links in a run of prose are exempt; these are not. The footer
   columns, the nearby-city lists and the standalone read-more
   links were all landing under 24px tall on a phone.
   =========================================================== */

@media (max-width: 900px) {
	.footer-col li { margin-bottom: 0.25rem; }
	.footer-col a,
	.nav-mega__cities a,
	.index-list__link,
	.sitemap-list a,
	.city-links a,
	.combo-links a {
		display: inline-block;
		min-height: 24px;
		padding-block: 5px;
	}
	.inline-link {
		display: inline-block;
		min-height: 24px;
		padding-block: 4px;
	}
	.footer-bottom__links a,
	.top-bar__emergency,
	.page-hero__crumbs a {
		display: inline-block;
		min-height: 24px;
		padding-block: 4px;
	}
}

/* ===========================================================
   FOOTER LISTINGS
   Public profiles and the outbound references the copy already
   names. Kept visually quiet: these are citations, not
   navigation, and should not compete with the link columns.
   =========================================================== */

.footer-listings {
	margin-top: 3.5rem;
	padding-top: 2.25rem;
	border-top: 1px solid rgba(250, 250, 247, 0.1);
}
.footer-listings__second { margin-top: 2rem; }
.footer-listings__row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
}
.footer-listings__row a {
	color: rgba(250, 250, 247, 0.72);
	font-size: 0.92rem;
	text-decoration: none;
	border-bottom: 1px solid rgba(250, 250, 247, 0.22);
	padding-bottom: 1px;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.footer-listings__row a:hover,
.footer-listings__row a:focus-visible {
	color: var(--frost);
	border-bottom-color: var(--action-glow);
}
.footer-listings__row--quiet a {
	font-family: var(--font-mono);
	font-size: 0.76rem;
	letter-spacing: 0.03em;
	color: rgba(250, 250, 247, 0.5);
	border-bottom-color: rgba(250, 250, 247, 0.14);
}
.footer-listings__row--quiet a:hover,
.footer-listings__row--quiet a:focus-visible { color: rgba(250, 250, 247, 0.85); }

@media (max-width: 900px) {
	.footer-listings__row { gap: 0.35rem 1.25rem; }
	.footer-listings__row a { display: inline-block; min-height: 24px; padding-block: 4px; }
}

/* ===========================================================
   NEXT STEPS
   The bridge from a ranking page to a converting one. Ruled
   rows rather than cards: these are routes onward, not
   separate objects competing with the service content above.
   =========================================================== */

.next-steps { padding: 4.5rem 0; background: var(--paper); }
.next-steps__title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
	font-weight: 300;
	letter-spacing: -0.02em;
	margin: 0 0 2rem;
}
.next-steps__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0;
	border-top: 1px solid var(--border);
}
.next-step { border-bottom: 1px solid var(--border); }
.next-step__link {
	display: block;
	padding: 1.1rem 1.25rem 1.1rem 0;
	text-decoration: none;
	color: var(--ink);
	transition: background 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.next-step__link:hover,
.next-step__link:focus-visible {
	background: var(--cream);
	padding-left: 0.75rem;
}
.next-step__label {
	display: block;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	margin-bottom: 0.2rem;
}
.next-step__link:hover .next-step__label { color: var(--action-deep); }
.next-step__note {
	display: block;
	font-size: 0.9rem;
	color: var(--text-muted);
	line-height: 1.5;
}

@media (min-width: 720px) {
	.next-steps__grid { column-gap: 2.5rem; }
}
@media (max-width: 640px) {
	.next-steps { padding: 3rem 0; }
	.next-step__link { padding-right: 0; }
}

/* ===========================================================
   SPLIT PAGE HERO
   The interior hero used the left ~55% and left the rest
   blank, which read as an unfinished layout rather than as
   whitespace. This variant puts real information in the gap.
   =========================================================== */

.page-hero--split .page-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: end;
}
.page-hero--split .page-hero__main { min-width: 0; }

.page-hero__aside {
	border-left: 1px solid rgba(250, 250, 247, 0.16);
	padding-left: clamp(1.25rem, 2.5vw, 2rem);
}
.hero-facts { margin: 0; display: grid; gap: 1.15rem; }
.hero-fact dt {
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--action-glow);
	margin-bottom: 0.2rem;
}
.hero-fact dd {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	color: rgba(250, 250, 247, 0.9);
	line-height: 1.35;
}
.hero-facts__cta { margin-top: 1.75rem; }

@media (max-width: 900px) {
	.page-hero--split .page-hero__inner { grid-template-columns: 1fr; gap: 2.25rem; }
	.page-hero__aside {
		border-left: 0;
		border-top: 1px solid rgba(250, 250, 247, 0.16);
		padding-left: 0;
		padding-top: 1.75rem;
	}
	.hero-facts { grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; }
	.hero-facts__cta { width: 100%; justify-content: center; }
}
@media (max-width: 460px) {
	.hero-facts { grid-template-columns: 1fr; }
}

/* A skip link that never becomes visible helps nobody: a sighted keyboard
   user has to take it on faith. This brings it back on focus. */
.visually-hidden:focus,
.visually-hidden:focus-visible {
	position: fixed;
	top: 12px;
	left: 12px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	clip: auto;
	clip-path: none;
	overflow: visible;
	z-index: 9999;
	background: var(--ink);
	color: var(--frost);
	border-radius: 4px;
	font-family: var(--font-body);
	font-weight: 600;
	box-shadow: var(--shadow-md);
}

/* The footer address phone sits below the 24px target minimum. */
@media (max-width: 900px) {
	.footer-brand__address a { display: inline-block; min-height: 24px; padding-block: 4px; }
}

/* ===========================================================
   PHOTOGRAPHY

   The client's own job photographs. Everything here assumes a
   <picture> from hca_photo(), which already carries intrinsic
   width and height, so nothing needs an aspect-ratio hack to
   stop the page jumping while it loads.
   =========================================================== */
.photo { display: block; }
.photo img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--cream);
}

.photo-figure { margin: 0; }
.photo-figure figcaption,
.worksite__item figcaption {
	margin-top: 0.85rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--text-muted);
	max-width: 52ch;
}

/* --- The founder panel, now with a photograph behind the quote ---------- */
.feature-block__media--photo { background: var(--ink-deep); }

.feature-block__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.feature-block__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 32%;
}

/* The default panel gradient is decorative and far too light to read type
   against a photograph. Over a photo it becomes a legibility scrim instead:
   a flat wash to hold the mid tones down, and a heavier foot so the
   attribution line clears AA against the brightest part of the frame. */
.feature-block__media--photo::before {
	background:
		linear-gradient(180deg, rgba(11, 30, 51, 0.82) 0%, rgba(11, 30, 51, 0.58) 42%, rgba(11, 30, 51, 0.92) 100%),
		linear-gradient(180deg, rgba(11, 30, 51, 0.30), rgba(11, 30, 51, 0.30));
	z-index: 1;
}
.feature-block__media--photo .feature-block__media-content { z-index: 2; }

/* --- Recent work ------------------------------------------------------- */
.worksite { background: var(--paper); }

.worksite-grid {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	grid-template-rows: auto auto;
	gap: 1.5rem 2rem;
	align-items: stretch;
	margin-top: 3.5rem;
}

/* The wide frame holds the left column across both rows, so the two portrait
   shots stack beside it. A three-across row of equal cards is the layout this
   deliberately is not.

   It is a flex column with the photo set to grow, so the tall frame ends level
   with the two short ones instead of stopping short and leaving a dead
   quarter-column of paper underneath its caption. */
.worksite__item--wide {
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
}
.worksite__item--wide .photo { flex: 1 1 auto; min-height: 0; }
.worksite__item--wide .photo img { height: 100%; object-fit: cover; }

.worksite__item { margin: 0; }
.worksite__item .photo img { border: 1px solid var(--border); }
.worksite__item:not(.worksite__item--wide) .photo img { aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 860px) {
	.worksite-grid {
		grid-template-columns: 1fr;
		gap: 2.25rem;
		margin-top: 2.5rem;
	}
	.worksite__item--wide { grid-row: auto; }
}

/* --- A photograph on a service page ------------------------------------ */

/* The grid centers its second column, which suits a drawing that floats on the
   page but leaves a photograph stranded in the middle of a tall column of type.
   Pin it to the top instead, and let it ride down with the reader. */
.service-intro-grid__illust--photo { align-self: start; position: sticky; top: 120px; }

@media (max-width: 880px) {
	.service-intro-grid__illust--photo { position: static; }
}

.service-photo { margin: 0; }
.service-photo .photo img {
	border: 1px solid var(--border);
	aspect-ratio: 3 / 2;
	object-fit: cover;
}



/* ===========================================================
   DROPDOWN POSITION

   The panels open from the bottom of their own <li>, which is only as tall as
   its text. The header row is as tall as the logo, and the 2026 stacked logo
   is 66px, so a panel opening 8px under the nav text opened roughly 30px above
   the bottom of the header and covered the logo.

   The nav item sits centered in that row, so the distance from its bottom edge
   to the bottom of the header is half the leftover row height plus the header's
   own bottom padding: about 29px at full width and 27px just below it. 1.75rem
   clears both without a measurement in JavaScript.
   =========================================================== */
/* The nav collapses to the hamburger drawer at 1100px, not 860px, so this
   block has to start at 1101px. At 861px it was reaching into the drawer's
   range and overriding the accordion's own max-height and positioning. */
@media (min-width: 1101px) {
	/* --hca-nav-gap is the measured distance from the bottom of a nav item to
	   the bottom of the header, published by main.js on load and resize. The
	   fallback is the value at full width, so the panel still clears the logo
	   with JavaScript off. */
	.nav-dropdown {
		top: calc(100% + var(--hca-nav-gap, 50px) + 0.5rem);
		/* The feature column bleeds to the panel edge, so overflow-x has to
		   clip or its square corner sits over the panel's rounded one.
		   overflow-y is the safety net: a panel now caps at the space left
		   under the header and scrolls inside itself rather than running off
		   the bottom of the window with no way to reach the rest. That is
		   what happened when the services list went from six items to eight
		   on a laptop screen. */
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		max-height: calc(100vh - var(--hca-header-h, 176px) - 1.25rem);
	}

	/* The bridge has to cover the whole gap now, or the panel closes as the
	   pointer crosses it. It is a child of the <li>, so it holds :hover. */
	.nav-item.has-dropdown::after { height: calc(var(--hca-nav-gap, 50px) + 0.6rem); }

	/* The mega panel is 980px wide and its trigger sits left of center, so
	   centering it on the trigger pushed its left edge to within 7px of the
	   viewport at 1280. Pin it to the viewport instead. The header is fixed and
	   publishes its own height, which also keeps the panel flush under the bar
	   as the utility strip hides on scroll. */
	.nav-dropdown--mega {
		position: fixed;
		top: calc(var(--hca-header-h, 176px) + 0.5rem);
		left: 50%;
		transform: translateX(-50%) translateY(-8px);
	}
	.nav-item.has-mega:hover .nav-dropdown--mega,
	.nav-item.has-mega.is-open .nav-dropdown--mega {
		transform: translateX(-50%) translateY(0);
	}

	/* The services panel gets the same treatment for the same reason. It is
	   900px wide once the list runs in two columns, and its trigger sits well
	   left of center, so centering it on the trigger would push its left edge
	   off the viewport on a narrow laptop. */
	.nav-dropdown--services {
		position: fixed;
		top: calc(var(--hca-header-h, 176px) + 0.5rem);
		left: 50%;
		width: min(var(--services-width), calc(100vw - 3rem));
		min-width: 0;
		max-width: none;
		transform: translateX(-50%) translateY(-8px);
	}
	.nav-item.has-dropdown:hover .nav-dropdown--services,
	.nav-item.has-dropdown.is-open .nav-dropdown--services {
		transform: translateX(-50%) translateY(0);
	}
}

/* --- Two photographs side by side ---------------------------------------
   Used on About for the owner and the van. The portrait shot is narrower, so
   the columns are weighted rather than equal, and both frames end level. */
/* The columns are weighted to the two aspect ratios, 822x1200 against
   1200x900, so both frames come out about the same height with nothing
   cropped. Forcing equal heights with object-fit cropped the company name
   straight off the side of the van. */
.photo-pair {
	display: grid;
	grid-template-columns: 1fr 1.92fr;
	gap: 1.5rem;
	align-items: start;
	margin: 3rem auto 3.25rem;
	max-width: 900px;
}
.photo-pair__item { margin: 0; }
.photo-pair__item .photo img {
	width: 100%;
	height: auto;
	border: 1px solid var(--border);
}
.photo-pair__item figcaption {
	margin-top: 0.8rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--text-muted);
	line-height: 1.5;
}

@media (max-width: 720px) {
	.photo-pair { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ===========================================================
   RELATED SERVICES UNDER A BLOG POST

   The articles had no outbound links at all. This is the visible half of the
   fix: the two or three jobs the article is actually about, named the way the
   service pages name them.
   =========================================================== */
.post-services {
	margin: 3.25rem 0 0;
	padding-top: 1.6rem;
	border-top: 2px solid var(--ink);
}
.post-services__title {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 400;
	margin: 0 0 1.4rem;
}
.post-services__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}
.post-services__list li + li { border-top: 1px solid var(--border); }
.post-services__list a {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	padding: 0.95rem 0;
	text-decoration: none;
	color: var(--text);
	transition: color 0.2s var(--ease);
}
.post-services__list a:hover { color: var(--leaf-deep); }
.post-services__name {
	font-family: var(--font-display);
	font-size: 1.08rem;
	font-weight: 500;
}
.post-services__name::after {
	content: ' \2192';
	color: var(--leaf-deep);
}
.post-services__tagline {
	grid-column: 1 / -1;
	font-size: 0.92rem;
	color: var(--text-muted);
	line-height: 1.5;
}
.post-services__foot {
	margin: 1.5rem 0 0;
	font-size: 0.95rem;
	color: var(--text-muted);
	line-height: 1.65;
}

/* An auto-placed link inside article prose. Underlined, because a link that
   only differs by color is not obviously a link. */
.article-content a.inline-link,
.post-services__foot a {
	color: var(--leaf-deep);
	text-decoration: underline;
	text-underline-offset: 0.16em;
	text-decoration-thickness: 1px;
}
.article-content a.inline-link:hover,
.post-services__foot a:hover { color: var(--ink); }

/* ===========================================================
   ON THIS PAGE

   The jump list for the long pages. Built from the section labels that were
   already in the margin rule, so it costs no new copy and cannot drift out of
   sync with the headings it points at.
   =========================================================== */
.page-index {
	margin: 0 0 3.25rem;
	padding: 1.4rem 1.6rem 1.5rem;
	background: var(--paper);
	border-left: 3px solid var(--ink);
}
.page-index__title {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 400;
	margin: 0 0 0.9rem;
}
.page-index__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.15rem 2rem;
	counter-reset: none;
}
.page-index__list a {
	display: grid;
	grid-template-columns: 2.1rem 1fr;
	align-items: baseline;
	padding: 0.42rem 0;
	font-size: 0.98rem;
	color: var(--text);
	text-decoration: none;
	transition: color 0.2s var(--ease);
}
.page-index__list a:hover { color: var(--leaf-deep); }
.page-index__num {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--leaf-deep);
}

@media (max-width: 640px) {
	.page-index { padding: 1.15rem 1.2rem 1.25rem; margin-bottom: 2.25rem; }
	.page-index__list { grid-template-columns: 1fr; gap: 0; }
}

/* The header is fixed, so an anchor jump has to stop clear of it. */
.editorial-grid[id] { scroll-margin-top: calc(var(--hca-header-h, 176px) + 1.5rem); }

/* ===========================================================
   GALLERY

   Deliberately not a grid of identical cards. One wide frame opens it, the
   portrait shots run three across beneath, and a second wide frame closes it,
   which is how a real set of job photographs falls rather than how a template
   wants them to.
   =========================================================== */
.gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem 1.75rem;
	align-items: start;
}
.gallery__item { margin: 0; }
.gallery__item--wide { grid-column: span 2; }

.gallery__item .photo img {
	width: 100%;
	height: auto;
	border: 1px solid var(--border);
	background: var(--cream);
}
.gallery__item figcaption {
	margin-top: 0.85rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--text-muted);
}

@media (max-width: 980px) {
	.gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gallery__item--wide { grid-column: span 2; }
}

@media (max-width: 640px) {
	.gallery { grid-template-columns: 1fr; gap: 2.25rem; }
	.gallery__item--wide { grid-column: span 1; }
}

/* ===========================================================
   AUDIT FIXES, v1.9.0
   =========================================================== */

/* The post date on the blog index measured 2.31:1 against the paper, at
   11.5px. AA wants 4.5:1. --text-muted is the tested token and clears it. */
.index-list__meta { color: var(--text-muted); }

/* An inline credential link (the BBB one, which appears on nearly every page)
   was under the 24px minimum target size in both directions. Padding the line
   box gives it a real target without moving the text off its baseline. */
.cred-link {
	display: inline-block;
	padding-block: 0.28rem;
	min-height: 24px;
}

/* ---------------------------------------------------------------------------
   NO-JAVASCRIPT FALLBACK

   .reveal is opacity:0 in CSS and only made visible by the IntersectionObserver
   in main.js. Measured on the mobile home page, 47 of 53 content blocks start
   invisible. That is fine while the script runs and catastrophic if it does
   not: a script error, a blocked file or a stalled parse leaves the page
   apparently blank.

   The inline script in the head swaps this class immediately, so the animation
   still works for everyone who has JS and the content is simply present for
   everyone who does not.
--------------------------------------------------------------------------- */
.no-js .reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* One line under the service cards to the gallery, since the home page no
   longer carries job photographs of its own. */
.services-grid__more {
	margin: 2.5rem 0 0;
	font-size: 1.02rem;
	color: var(--text-muted);
}
.services-grid__more a {
	color: var(--leaf-deep);
	text-decoration: underline;
	text-underline-offset: 0.16em;
	white-space: nowrap;
}
.services-grid__more a:hover { color: var(--ink); }

/* ===========================================================
   30. CONTRAST PASS
   ===========================================================
   Every fix below comes from measuring painted pixels rather
   than reading CSS, because the failures all involve text on a
   gradient. An automated checker reports those as "needs review"
   instead of "fail", which is how they survived the earlier
   audits: the tooling was quietly declining to answer.

   One root cause runs through most of it. Components authored
   for the light sections are reused inside the dark gradient
   heroes, so they arrive carrying --ink and --text-muted, which
   are navy on navy. The fixes are scoped to the dark context so
   the same components stay correct on the light sections.
   =========================================================== */

/* --- Dark hero: text that arrived styled for a light ground ---
   Measured 1.10 to 1.17:1, which is invisible, not merely low. */
.page-hero__tagline {
	/* was --text-muted, i.e. navy at 70% on a navy hero */
	color: rgba(250, 250, 247, 0.82);
}
.page-hero .location-stat__label {
	color: rgba(250, 250, 247, 0.68);
}
.page-hero .location-stat__value {
	color: var(--frost);
}
.page-hero .location-stats {
	/* --border is a dark hairline and did not show on the hero */
	border-top-color: rgba(250, 250, 247, 0.20);
}

/* The accent eyebrow uses --leaf-deep, chosen to clear AA on the
   light grounds, which puts it at 2.09:1 on the hero. The glow
   green is the light-ground counterpart and measures 5.9:1 here. */
.page-hero .eyebrow--accent,
.page-hero .eyebrow--accent a {
	color: var(--action-glow);
}
.page-hero .eyebrow--accent::before {
	background: var(--action-glow);
}

/* A ghost button inherits --ink for border and label, so on the
   hero it was a dark outline with dark text on a dark ground:
   1.10:1, effectively an invisible button. It appears in the
   hero of the education, tips, combo and 404 templates. */
.page-hero .btn--ghost {
	border-color: rgba(250, 250, 247, 0.6);
	color: var(--frost);
}
.page-hero .btn--ghost:hover,
.page-hero .btn--ghost:focus-visible {
	background: var(--frost);
	border-color: var(--frost);
	color: var(--ink);
}

/* --- Muted text on every dark ground ---------------------------
   rgba(frost, 0.5) measures 4.08 to 4.47:1 on the hero and footer
   grounds: under AA, but only just, which is why it reads as fine
   and fails anyway. 0.62 lands near 6:1 and still sits clearly
   below the 0.92 links in the hierarchy. */
.hero__meta-item .label,
.page-hero__crumbs,
.footer-bottom a,
.footer-listings__row--quiet a,
.comfort--hero .comfort__caption {
	color: rgba(250, 250, 247, 0.62);
}

/* --- Faint numerals on the light grounds -----------------------
   --text-faint is navy at 40%, which is 2.34:1 on --frost. These
   are small mono numerals, so they need the full 4.5. */
.service-card__num,
.comfort__caption {
	color: rgba(17, 42, 69, 0.68);
}
.review-card__date {
	/* --text-muted is 3.97:1 at this size */
	color: rgba(17, 42, 69, 0.82);
}

/* --- The comfort slider season buttons -------------------------
   The date sat behind two stacked opacities and landed at 2.14:1.
   Opacity is the wrong tool here because it compounds with the
   parent; set the color directly and leave opacity alone. */
.comfort__season .when { opacity: 1; color: rgba(17, 42, 69, 0.78); }
.comfort__season.is-on .when { opacity: 1; color: #fff; }
.comfort--hero .comfort__season .when { opacity: 1; color: rgba(250, 250, 247, 0.8); }
.comfort--hero .comfort__season.is-on .when {
	/* The selected pill's ground is --action green. At 8.9px this label needs
	   the full 4.5, and white at 95% lands on 4.46. Solid white is 4.82. */
	opacity: 1;
	color: #fff;
}

/* --- The CTA band above the footer -----------------------------
   This one is a leftover, not a judgment call. The band's base
   moved to the brand green when the palette changed, but the
   overlay kept two ORANGE radial gradients from the old ember
   palette: rgba(255,122,61,.5) and rgba(195,65,26,.4). Orange
   over green paints olive, which is both off-brand and drops the
   white heading and buttons to 3.77:1. It is on all 149 pages.

   Fixed by taking the base one step deeper and making the
   overlay darken rather than lighten, so the lightest pixel
   under white type is now --action-deep at 6.1:1. */
.cta-band {
	background: var(--action-deep);
}
.cta-band::before {
	background:
		radial-gradient(ellipse at 80% 50%, rgba(17, 42, 69, 0.20) 0%, transparent 55%),
		radial-gradient(ellipse at 20% 50%, rgba(11, 30, 51, 0.34) 0%, transparent 55%);
}
/* A button's boundary is a UI component and needs 3:1 of its own.
   At 0.3 the border measured 1.37:1 against the band. */
.cta-band .btn--ghost-light {
	border-color: rgba(250, 250, 247, 0.6);
}

/* --- Contact page: the Book online button ----------------------
   .contact-info__block p zeroes its margins, so the button was
   sitting right against the paragraph above it. */
.contact-info__book {
	margin-top: 1.25rem;
}