/*!
 * AutoGateRepairs theme styles - mobile-first, no builder CSS.
 * Brand: teal #76CACD (accent) -> deep teal #1F7A7E (text/links/buttons),
 *        CTA orange #E27646 (large/UI decoration), ink #17141D actions,
 *        Archivo (heads) + Inter (body).
 * Token reference: docs/ai-development/autogaterepairs/BRAND-SYSTEM.md
 */

/* ------------------------------------------------------------------ */
/* Tokens                                                               */
/* ------------------------------------------------------------------ */
:root {
	/* Brand ---------------------------------------------------------- */
	/* Palette from autogaterepairs.com (ufency theme customizer, 2026-09-27):
	   --colorMain #76cacd (teal) + CTA orange #e27646. Contrast-verified via
	   tools/agr-contrast.php (WCAG AA). The bright teal #76cacd is 1.89:1 on white,
	   so it is DECORATION only (icons/borders/kickers); text/links/button fills use
	   the deep-teal --agr-accent-dark (5.07:1 on white) per the P9 white-first rule. */
	--agr-accent: #76cacd;
	--agr-accent-dark: #1f7a7e;
	--agr-accent-hover: #165e61;
	--agr-accent-on-dark: #b5e6e8;
	--agr-accent-soft: rgba(31, 122, 126, 0.07);
	--agr-orange: #e27646;
	--agr-gold: #f5b301;

	/* Neutrals ------------------------------------------------------- */
	--agr-ink: #17141d;
	/* --agr-plum-2 is the footer / closing-block background. --agr-plum is
	   kept for a future dark surface (both are contract tokens). Re-toned from
	   the GeoDoorGate plum to a deep teal-charcoal for the teal brand. */
	--agr-plum: #123033;
	--agr-plum-2: #0e2426;
	--agr-steel: #f7f7f8;
	--agr-line: #e1e5e6;
	--agr-text: #33303a;
	--agr-muted: #5d6770;
	--agr-white: #ffffff;
	--agr-green: #1f9d55;
	--agr-green-dark: #146c3c;

	/* Contrast notes (WCAG AA, verified in tools/agr-contrast.php):
	   P9 "white-first": the page base is white and --agr-ink is the primary ACTION
	   colour, so buttons are ink-on-white (18.19:1) and the teal is an accent.
	   - --agr-accent (#76cacd) on white is 1.89:1 -> DECORATION only (icons, borders,
	     kickers, focus rings); never small text or button fills.
	   - --agr-accent-dark (#1f7a7e) on white is 5.07:1 -> body links; white on it is
	     5.07:1 -> the hero's brand-filled "Call Now" (hover --agr-accent-hover #165e61
	     7.48:1 with white).
	   - --agr-muted (#5d6770) on white is 5.77:1 and --agr-text (#33303a) is 12.93:1.
	   - --agr-accent-on-dark (#b5e6e8) on --agr-plum-2 (#0e2426) is 11.89:1 -> accents
	     inside the dark footer / closing CTA band.
	   - --agr-orange (#e27646) is the client's CTA accent -> LARGE/UI decoration only
	     (3.04:1 on white passes 3:1); never body text or small button fills.
	   - --agr-gold (#f5b301) is for STAR RATINGS only - never a button or a focus ring. */

	/* Shape ---------------------------------------------------------- */
	--agr-radius: 12px;
	--agr-radius-sm: 8px;
	--agr-shadow: 0 6px 20px rgba(23, 20, 29, 0.07);
	--agr-shadow-lg: 0 16px 40px rgba(23, 20, 29, 0.12);
	--agr-container: 1240px;
	--agr-font-head: 'Archivo', 'Segoe UI', sans-serif;
	--agr-font-body: 'Inter', 'Segoe UI', sans-serif;
	--agr-header-h: 76px;

	/* P13 fluid header: three knobs keep the eight-item primary menu on ONE line
	   from 1025px up (logo | nav | phone). Font/padding scale with the viewport;
	   the phone becomes an icon chip below 1200px (the callbar and the mobile
	   bottom bar keep the number visible at every width). */
	--agr-nav-font: clamp(13px, 1.25vw, 15px);
	--agr-nav-padx: clamp(6px, 0.8vw, 14px);
	--agr-nav-gap: 2px;
	--agr-logo-h: clamp(38px, 4.5vw, 46px);
}

/* ------------------------------------------------------------------ */
/* Base                                                                 */
/* ------------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* The mainbar is sticky, so in-page anchors (#estimate, #gallery, …) need
	   a top offset or the section heading lands underneath it. */
	scroll-padding-top: calc(var(--agr-header-h) + 12px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--agr-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--agr-text);
	background: var(--agr-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--agr-font-head);
	color: var(--agr-ink);
	line-height: 1.15;
	margin: 0 0 0.6em;
	letter-spacing: -0.01em;
}

p {
	margin: 0 0 1em;
}

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

a {
	color: var(--agr-accent-dark);
	text-decoration: none;
}

a:hover {
	color: var(--agr-accent-hover);
}

ul,
ol {
	padding-left: 1.2em;
}

:focus-visible {
	outline: 3px solid var(--agr-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--agr-ink);
	color: var(--agr-white);
	padding: 10px 18px;
	z-index: 100000;
}

.skip-link:focus {
	left: 0;
	color: var(--agr-white);
}

.container {
	max-width: var(--agr-container);
	margin-inline: auto;
	padding-inline: 20px;
}

.section {
	padding-block: 104px;
}

/* Whisper-grey alternation - neutral, not brand-tinted (P9). */
.section--tinted {
	background: var(--agr-steel);
}

/* Kept so content still carrying the class renders correctly: since P9 there
   are no dark bands left, so it is an ordinary white band. */
.section--dark {
	background: var(--agr-white);
	color: var(--agr-text);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                              */
/* ------------------------------------------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--agr-font-head);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	padding: 14px 22px;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--lg {
	padding: 17px 30px;
	font-size: 16px;
}

.btn--block {
	width: 100%;
	justify-content: center;
}

/* P9: the primary action is ink on white (16.9:1); the brand teal arrives on
   interaction. The only brand-FILLED button on the site is the hero's
   "Call Now" (.hero--bg .btn--primary, further down). */
.btn--primary {
	background: var(--agr-ink);
	color: var(--agr-white);
}

.btn--primary:hover {
	background: var(--agr-accent-dark);
	color: var(--agr-white);
}

/* P9: the ghost button keeps a slightly stronger border than a passive hairline -
   the boundary is what identifies the control (WCAG 1.4.11), so it stays at the
   pre-2.1.0 ink-25% value instead of --agr-line. */
.btn--ghost {
	background: transparent;
	color: var(--agr-ink);
	border-color: rgba(23, 20, 29, 0.25);
}

.btn--ghost:hover {
	border-color: var(--agr-ink);
	background: var(--agr-accent-soft);
	color: var(--agr-ink);
}

.btn--light {
	background: var(--agr-white);
	color: var(--agr-ink);
}

.btn--light:hover {
	background: var(--agr-accent-dark);
	color: var(--agr-white);
}

.btn--sm {
	padding: 11px 18px;
	font-size: 14px;
}

/* 2.1.0 retired .btn--gold: gold is for star ratings only (see :root). Those
   call buttons are .btn--primary on light bands and .btn--light on dark ones. */

.btn--outline-light {
	background: transparent;
	color: var(--agr-white);
	border-color: rgba(255, 255, 255, 0.45);
}

.btn--outline-light:hover {
	background: var(--agr-white);
	color: var(--agr-ink);
	border-color: var(--agr-white);
}

/* Surface context. The hero keeps the site's single brand-filled button; in the
   dark closing CTA band the same class reads as a plain white button. */
.hero--bg .btn--primary {
	background: var(--agr-accent-dark);
}

.hero--bg .btn--primary:hover {
	background: var(--agr-accent-hover);
}

.cta .btn--primary {
	background: var(--agr-white);
	color: var(--agr-ink);
}

.cta .btn--primary:hover {
	background: var(--agr-accent-dark);
	color: var(--agr-white);
}

.btn svg {
	flex: none;
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--agr-accent);
	outline-offset: 2px;
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-top: 26px;
}

.btn-row--center {
	justify-content: center;
}

.text-link {
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ------------------------------------------------------------------ */
/* Header: call bar + main bar + nav                                    */
/* ------------------------------------------------------------------ */
/* P9: the top strip is part of the white page now - hairline, not plum. */
.callbar {
	background: var(--agr-white);
	border-bottom: 1px solid var(--agr-line);
	color: var(--agr-muted);
	font-size: 13.5px;
}

.callbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 38px;
}

.callbar-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--agr-ink);
}

.callbar-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--agr-green);
	flex: none;
}

.callbar-meta {
	display: inline-flex;
	align-items: center;
	gap: 18px;
}

.callbar-hours,
.callbar-phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--agr-muted);
}

.callbar-phone {
	font-weight: 700;
	color: var(--agr-ink);
}

.callbar-phone:hover {
	color: var(--agr-accent-dark);
}

.mainbar {
	position: sticky;
	top: 0;
	z-index: 900;
	background: var(--agr-white);
	border-bottom: 1px solid var(--agr-line);
	transition: box-shadow 0.2s ease;
}

.mainbar.is-scrolled {
	box-shadow: 0 4px 16px rgba(23, 20, 29, 0.06);
}

.mainbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: var(--agr-header-h);
}

.site-title a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--agr-font-head);
	font-weight: 800;
	font-size: 20px;
	color: var(--agr-ink);
	letter-spacing: -0.02em;
}

.site-title-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--agr-radius-sm);
	background: var(--agr-accent-dark);
	color: var(--agr-white);
	flex: none;
}

.site-logo img {
	max-height: var(--agr-logo-h);
	width: auto;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* The callbar scrolls away; keeping a tel: link in the sticky mainbar means the
   phone number stays visible in the header on every scroll position (audit
   Priority 1 — Conversion). Mobile uses the fixed bottom call bar instead. */
.header-phone {
	display: none;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 15px;
	color: var(--agr-accent-dark);
	text-decoration: none;
	white-space: nowrap;
}

.header-phone:hover,
.header-phone:focus-visible {
	color: var(--agr-ink);
	text-decoration: underline;
}

/* Desktop nav */
.primary-menu {
	display: flex;
	align-items: center;
	gap: var(--agr-nav-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu li {
	position: relative;
}

.primary-menu a {
	display: block;
	padding: 10px var(--agr-nav-padx);
	font-weight: 600;
	font-size: var(--agr-nav-font);
	color: var(--agr-ink);
	border-radius: 8px;
}

.primary-menu a:hover {
	color: var(--agr-accent-dark);
	background: var(--agr-steel);
}

.primary-menu .menu-item-has-children>a::after {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-3px);
	vertical-align: middle;
}

.primary-menu .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 250px;
	overflow: visible;
	background: var(--agr-white);
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius);
	box-shadow: var(--agr-shadow-lg);
	list-style: none;
	margin: 0;
	padding: 6px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 50;
}

.primary-menu li:hover>.sub-menu,
.primary-menu li:focus-within>.sub-menu,
.primary-menu li.is-open>.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Dropdown items: compact links with a soft accent hover (the traditional
   multi-level dropdown look — no scrollbars, panels only as tall as needed). */
.primary-menu .sub-menu a {
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 500;
	color: var(--agr-text);
	white-space: nowrap;
	border-radius: var(--agr-radius-sm);
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus-visible {
	background: var(--agr-accent-soft);
	color: var(--agr-accent-dark);
}

/* Multi-level: the second and third levels fly out to the right of their parent
   (`li` is the positioning context). The -9px top pulls the panel up onto the
   parent row's own padding, and the caret turns from "down" to "right" so the
   hierarchy is legible. z-index stacks each level above its parent. */
.primary-menu .sub-menu .sub-menu {
	top: -9px;
	left: 100%;
	margin-left: 7px;
	min-width: 230px;
	z-index: 51;
}

.primary-menu .sub-menu .sub-menu .sub-menu {
	z-index: 52;
}

.primary-menu .sub-menu .menu-item-has-children>a::after {
	transform: rotate(-45deg) translateX(-3px);
}

/* The last three top-level items sit near the right edge, so their flyouts open
   WEST instead of east and can never overflow the viewport. */
.primary-menu > li:nth-last-child(-n+3) .sub-menu {
	left: auto;
	right: 100%;
	margin-left: 0;
	margin-right: 7px;
}

/* Locations: the city list renders in two columns so 17 items stay a compact
   panel instead of a tall scrollable one. */
.primary-menu .menu-item.agr-cols > .sub-menu {
	columns: 2;
	column-gap: 6px;
	min-width: 340px;
}

.primary-menu .menu-item.agr-cols > .sub-menu > .menu-item {
	break-inside: avoid;
}

/* Mega panels (AutoGateRepairs_Mega_Walker) ------------------------------- */
.mainbar-inner {
	position: relative;
}

.primary-menu .menu-item--mega {
	position: static;
}

.primary-menu .menu-item--mega>a::after {
	content: none;
}

.mega-toggle,
.submenu-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: currentColor;
}

.mega-toggle-bar {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
}

.mega-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--agr-white);
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius);
	box-shadow: var(--agr-shadow-lg);
	padding: 26px 28px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
	z-index: 60;
}

.primary-menu .menu-item--mega:hover>.mega-panel,
.primary-menu .menu-item--mega:focus-within>.mega-panel,
.primary-menu .menu-item--mega.is-open>.mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mega-panel-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 26px 34px;
	align-items: start;
}

.mega-col-title {
	font-family: var(--agr-font-head);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--agr-accent-dark);
	margin: 0 0 12px;
}

.mega-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

.mega-list--cols {
	display: block;
	columns: 2;
	column-gap: 26px;
}

.mega-list--cols li {
	break-inside: avoid;
	margin-bottom: 4px;
}

.mega-list a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: var(--agr-radius-sm);
	color: var(--agr-text);
}

.mega-list a:hover {
	background: var(--agr-accent-soft);
	color: var(--agr-accent-dark);
}

.mega-list svg {
	flex: none;
	color: var(--agr-accent);
}

.mega-item-title {
	font-weight: 600;
	font-size: 14.5px;
}

.mega-col--cta {
	background: var(--agr-steel);
	border-radius: var(--agr-radius);
	padding: 18px;
	display: grid;
	gap: 10px;
}

.mega-note {
	margin: 0;
	font-size: 13px;
	color: var(--agr-muted);
}

.mega-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--agr-accent-dark);
}

/* Mobile nav */
.nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius-sm);
	padding: 8px;
	color: var(--agr-ink);
	cursor: pointer;
	line-height: 0;
}

.nav-toggle .nav-toggle-close {
	display: none;
}

body.nav-open .nav-toggle .nav-toggle-open {
	display: none;
}

body.nav-open .nav-toggle .nav-toggle-close {
	display: inline-flex;
}

/* Sticky mobile call bar */
.mobile-call-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 950;
	display: flex;
	gap: 1px;
	background: var(--agr-ink);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.mcb-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 10px;
	font-family: var(--agr-font-head);
	font-weight: 700;
	font-size: 14px;
	color: var(--agr-white);
}

/* The mobile call bar is one ink block; a hairline is the only division.
   S18/Lighthouse found the white-on-pink "Call Now" label at 4.44:1 (GeoDoorGate
   heritage); the fill drops to the dark accent (--agr-accent-dark) so the label
   reads 5.07:1 -- the same treatment as the hero Call Now buttons (see :root
   contrast notes). */
.mcb-call {
	background: var(--agr-accent-dark);
}

.mcb-estimate {
	background: var(--agr-ink);
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}

body {
	padding-bottom: 52px;
	/* room for the mobile call bar */
}

/* ------------------------------------------------------------------ */
/* Hero                                                                 */
/* ------------------------------------------------------------------ */
/* P9: without a photo the hero is a plain white band (ink headline, teal
   kicker, hairline base). With one, .hero--bg below takes over. */
.hero {
	background: var(--agr-white);
	border-bottom: 1px solid var(--agr-line);
	color: var(--agr-text);
	padding-block: 88px 96px;
}

/* Photo hero: the shot sits under a NEUTRAL ink scrim (no brand tint, P9) so headline
   contrast never depends on the photograph (set --agr-hero-image inline by
   section-hero.php). Everything inside flips to white underneath. */
.hero--bg {
	background-image:
		linear-gradient(115deg, rgba(23, 20, 29, 0.88) 0%, rgba(23, 20, 29, 0.74) 45%, rgba(23, 20, 29, 0.58) 100%),
		var(--agr-hero-image);
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}

.hero--bg,
.hero--bg .hero-title,
.hero--bg .hero-sub {
	color: var(--agr-white);
}

.hero--bg .hero-badges {
	color: rgba(255, 255, 255, 0.86);
}

.hero--bg .hero-kicker {
	color: var(--agr-white);
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.32);
}

.hero-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
}

.hero-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--agr-ink);
	background: var(--agr-accent-soft);
	border: 1px solid rgba(118, 202, 205, 0.28);
	padding: 8px 14px;
	border-radius: 999px;
	margin-bottom: 20px;
}

.hero-kicker-stars {
	display: inline-flex;
	gap: 2px;
}

.hero-kicker-stars svg {
	fill: var(--agr-gold);
	stroke: none;
}

.hero-title {
	color: var(--agr-ink);
	font-size: clamp(32px, 4.6vw, 50px);
	font-weight: 800;
	letter-spacing: -0.025em;
	margin-bottom: 18px;
}

.hero-sub {
	font-size: 17.5px;
	max-width: 560px;
	margin-bottom: 10px;
}

.hero--bg .btn--ghost {
	color: var(--agr-white);
	border-color: rgba(255, 255, 255, 0.45);
	background: transparent;
}

.hero--bg .btn--ghost:hover {
	border-color: var(--agr-white);
	background: rgba(255, 255, 255, 0.12);
	color: var(--agr-white);
}

.hero-badges {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 26px 0 0;
	padding: 0;
	font-weight: 600;
	font-size: 14px;
	color: var(--agr-muted);
}

.hero-badges li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hero-badges svg {
	color: var(--agr-accent);
}

.hero-figure {
	margin: 0;
	border-radius: var(--agr-radius);
	overflow: hidden;
	box-shadow: var(--agr-shadow-lg);
}

.hero-figure img {
	display: block;
	width: 100%;
}

/* Lead form card (hero + inline + contact) */
.lead-form {
	background: var(--agr-white);
	color: var(--agr-text);
	border-radius: var(--agr-radius);
	box-shadow: var(--agr-shadow-lg);
	padding: 28px 26px;
}

.lead-form-title {
	font-size: 22px;
	margin-bottom: 6px;
}

.lead-form-note {
	font-size: 14px;
	color: var(--agr-muted);
	margin-bottom: 18px;
}

.lead-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 14px;
	margin: 0;
}

.lead-form-field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lead-form-field--wide {
	grid-column: 1 / -1;
}

.lead-form-field label {
	font-weight: 600;
	font-size: 13.5px;
	color: var(--agr-ink);
}

.lead-form-field input,
.lead-form-field select,
.lead-form-field textarea {
	font-family: var(--agr-font-body);
	font-size: 15px;
	color: var(--agr-ink);
	background: var(--agr-steel);
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius-sm);
	padding: 12px 14px;
	width: 100%;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.lead-form-field input:focus,
.lead-form-field select:focus,
.lead-form-field textarea:focus {
	outline: none;
	border-color: var(--agr-accent);
	background: var(--agr-white);
}

.lead-form-hp {
	position: absolute !important;
	left: -9999px;
}

.lead-form-privacy {
	font-size: 12.5px;
	color: var(--agr-muted);
	margin: 0;
}

.lead-form-status {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	border-radius: var(--agr-radius-sm);
	padding: 12px 14px;
	margin-bottom: 14px;
}

.lead-form-status--ok {
	background: rgba(31, 157, 85, 0.12);
	color: var(--agr-green);
}

.lead-form-status--err {
	background: rgba(220, 53, 69, 0.1);
	color: #b02a37;
}

/* ------------------------------------------------------------------ */
/* Booking popup (#estimate, native <dialog>)                            */
/*                                                                     */
/* Client round 1 (P8): the booking block lives only in this popup.      */
/* Progressive enhancement: the UA sheet hides a closed dialog, so as   */
/* an author override the dialog renders as a static end-of-page        */
/* section WITHOUT JS; the .agr-has-js class (set by app.js) restores   */
/* hidden-until-open behaviour and the centered popup presentation.    */
/* ------------------------------------------------------------------ */
.agr-booking {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	max-height: none;
	overflow: visible;
	border: 0;
	border-top: 1px solid var(--agr-line);
	background: var(--agr-white);
	color: var(--agr-text);
	padding: 0;
	margin: 0;
	inset: auto;
}

.agr-booking::backdrop {
	background: transparent;
}

.agr-booking-inner {
	position: relative;
	max-width: var(--agr-container);
	margin-inline: auto;
	padding: 88px 20px;
}

.agr-booking-close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: none;
	/* meaningless in the no-JS static section; JS shows it */
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 2px solid var(--agr-line);
	background: var(--agr-white);
	color: var(--agr-ink);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
	z-index: 1;
}

html.agr-has-js .agr-booking-close {
	display: inline-flex;
}

.agr-booking-close:hover {
	border-color: var(--agr-ink);
	color: var(--agr-ink);
}

.agr-booking-close svg {
	pointer-events: none;
	/* clicks land on the button even through the icon */
}

/* With JS available: hidden until opened, then a centered card over a
   dimed ::backdrop (native dialog top-layer). The dialog box itself is
   the card; clicks on the ::backdrop target the dialog element, which is
   what the backdrop-close handler in app.js listens for. Esc, the focus
   trap and focus restore are native <dialog> behaviour. */
html.agr-has-js .agr-booking {
	display: none;
}

html.agr-has-js .agr-booking[open] {
	display: block;
	position: fixed;
	inset: 0;
	margin: auto;
	/* with inset:0 + height:auto this centres both axes (UA pattern) */
	width: min(640px, calc(100% - 40px));
	height: auto;
	max-height: calc(100% - 40px);
	overflow-y: auto;
	background: var(--agr-white);
	color: var(--agr-text);
	padding: 0;
	border: 0;
	border-radius: var(--agr-radius);
	box-shadow: var(--agr-shadow-lg);
}

html.agr-has-js .agr-booking::backdrop {
	background: rgba(23, 20, 29, 0.62);
}

html.agr-has-js .agr-booking-inner {
	max-width: none;
	width: auto;
	padding: 44px 26px 32px;
}

/* The card body keeps its own width handling (max 720 -> 100% inside the
   dialog) and the legacy inline-section layout is not reused. */
.agr-booking .lead-form {
	max-width: 560px;
	margin-inline: auto;
}

/* ------------------------------------------------------------------ */
/* Stats                                                                */
/* ------------------------------------------------------------------ */
/* P9: the numbers band is white; its only brand colour is the 2px rule on each stat. */
.stats {
	background: var(--agr-white);
	border-top: 1px solid var(--agr-line);
	border-bottom: 1px solid var(--agr-line);
	color: var(--agr-muted);
	padding-block: 64px;
}

.stats-kicker {
	color: var(--agr-accent-dark);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 12.5px;
	margin-bottom: 6px;
}

.stats-title {
	color: var(--agr-ink);
	font-size: clamp(22px, 3vw, 30px);
	margin-bottom: 26px;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}

.stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: 18px;
	border-left: 2px solid var(--agr-accent);
}

.stat-value {
	font-family: var(--agr-font-head);
	font-weight: 800;
	font-size: clamp(28px, 3.6vw, 38px);
	color: var(--agr-ink);
	line-height: 1.1;
}

.stat-label {
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Section heads                                                        */
/* ------------------------------------------------------------------ */
.section-head {
	max-width: 700px;
	margin-bottom: 52px;
}

/* Centred variant. P9: the former --light head was white-on-dark; the bands are
   light now, so both names are aliases and colour comes from the base rules. */
.section-head--light,
.section-head--center {
	text-align: center;
	margin-inline: auto;
}

.section-kicker {
	color: var(--agr-accent-dark);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12px;
	margin-bottom: 8px;
}

.section-title {
	font-size: clamp(26px, 3.2vw, 36px);
	margin-bottom: 12px;
}

.section-lead {
	font-size: 17px;
	color: var(--agr-muted);
	margin: 0;
}

.section--dark .section-lead,
.section--dark .area-group-title {
	color: var(--agr-muted);
}

/* ------------------------------------------------------------------ */
/* Services / Why / Process / Gallery                                   */
/* ------------------------------------------------------------------ */
.services-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.service-card {
	background: var(--agr-white);
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius);
	padding: 28px 26px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.service-card:hover {
	border-color: rgba(23, 20, 29, 0.22);
	box-shadow: var(--agr-shadow);
}

.service-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--agr-radius-sm);
	background: var(--agr-accent-soft);
	color: var(--agr-accent);
	margin-bottom: 16px;
}

.service-title {
	font-size: 19px;
	margin-bottom: 8px;
}

.service-title a {
	color: var(--agr-ink);
}

.service-title a:hover {
	color: var(--agr-accent-dark);
}

.service-desc {
	color: var(--agr-muted);
	font-size: 15px;
	margin-bottom: 10px;
}

.why-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 44px;
	align-items: center;
}

.why-img,
.why-media-placeholder {
	display: block;
	width: 100%;
	border-radius: var(--agr-radius);
}

.why-media-placeholder {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		repeating-linear-gradient(135deg, rgba(23, 20, 29, 0.04) 0 12px, transparent 12px 24px),
		var(--agr-steel);
	border: 1px dashed var(--agr-line);
	color: var(--agr-muted);
}

.why-license {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-weight: 600;
	font-size: 14px;
	color: var(--agr-ink);
	background: var(--agr-white);
	border: 1px solid var(--agr-line);
	border-radius: 999px;
	padding: 10px 16px;
}

.why-license svg {
	color: var(--agr-green);
}

/* ------------------------------------------------------------------ */
/* Commercial Page Specifics                                          */
/* ------------------------------------------------------------------ */
.trust-bar {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
}

.trust-bar li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 600;
	color: var(--agr-ink);
}

.trust-bar svg {
	color: var(--agr-accent);
}

.industry-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}

.industry-list li {
	position: relative;
	padding-left: 28px;
	color: var(--agr-text);
}

.industry-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 16px;
	height: 16px;
	background-color: var(--agr-accent);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
}

/* ------------------------------------------------------------------ */
/* Emergency Page Specifics                                           */
/* ------------------------------------------------------------------ */
.emergency-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.emergency-card {
	background: var(--agr-white);
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius);
	padding: 28px 26px;
}

.emergency-card--aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.emergency-card--aside .section-title {
	margin-bottom: 0;
}

.emergency-claim {
	margin: 0;
	color: var(--agr-muted);
	font-size: 15px;
}

.emergency-call {
	width: 100%;
	justify-content: center;
}

.lead-form--emergency .lead-form-grid {
	grid-template-columns: 1fr;
}

.lead-form--emergency .lead-form-field--wide {
	grid-column: auto;
}

.service-areas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px 20px;
}

.service-areas li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.service-areas svg {
	color: var(--agr-accent);
	flex: none;
}

.service-areas a {
	color: var(--agr-ink);
	font-weight: 600;
	text-decoration: none;
}

.service-areas a:hover {
	color: var(--agr-accent-dark);
	text-decoration: underline;
}

@media (min-width: 900px) {
	.emergency-grid {
		grid-template-columns: 1.2fr 0.8fr;
		align-items: start;
	}
}

/* ------------------------------------------------------------------ */
/* Commercial Form (landing + contact)                                */
/* ------------------------------------------------------------------ */
.commercial-form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.commercial-form-card {
	background: var(--agr-white);
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius);
	padding: 28px 26px;
}

.commercial-form-card--aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.commercial-form-card--aside .section-title {
	margin-bottom: 0;
}

.commercial-perks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.commercial-perks li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.commercial-perks svg {
	color: var(--agr-accent);
	flex: none;
}

@media (min-width: 900px) {
	.commercial-form-grid {
		grid-template-columns: 1.2fr 0.8fr;
		align-items: start;
	}
}

.why-points {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.why-points li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-weight: 500;
	color: var(--agr-ink);
}

.why-points svg {
	color: var(--agr-green);
	flex: none;
	margin-top: 3px;
}

.process-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	counter-reset: step;
}

.process-step {
	position: relative;
	background: var(--agr-steel);
	border-radius: var(--agr-radius);
	padding: 26px 24px 22px;
}

.process-num {
	font-family: var(--agr-font-head);
	font-weight: 800;
	font-size: 42px;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px var(--agr-accent);
	display: block;
	margin-bottom: 14px;
}

.process-step-title {
	font-size: 18px;
	margin-bottom: 6px;
}

.process-step-text {
	color: var(--agr-muted);
	font-size: 15px;
	margin: 0;
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.gallery-item {
	margin: 0;
	border-radius: var(--agr-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--agr-line);
}

.gallery-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}

.gallery-item:hover .gallery-img {
	transform: scale(1.04);
}

.gallery-note {
	margin-top: 18px;
	color: var(--agr-muted);
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Reviews / Emergency / Areas / FAQs / Blog / CTA                      */
/* ------------------------------------------------------------------ */
.reviews-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.review-card {
	margin: 0;
	background: var(--agr-white);
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius);
	padding: 26px 24px;
}

.review-stars {
	display: inline-flex;
	gap: 3px;
	color: var(--agr-gold);
	margin-bottom: 14px;
}

.review-stars svg {
	fill: var(--agr-gold);
	stroke: none;
}

.review-quote {
	margin: 0 0 18px;
	font-size: 15.5px;
	color: var(--agr-text);
}

.review-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-top: 1px solid var(--agr-line);
	padding-top: 14px;
}

.review-name {
	font-family: var(--agr-font-head);
	font-weight: 700;
	color: var(--agr-ink);
}

.review-detail {
	font-size: 13px;
	color: var(--agr-muted);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.review-verified {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--agr-green-dark);
	font-weight: 600;
}

.reviews-more {
	margin-top: 30px;
	text-align: center;
}

/* P9: the urgency strip is a white band now - the bolt chip carries the brand. */
.emergency {
	background: var(--agr-white);
	border-block: 1px solid var(--agr-line);
	color: var(--agr-text);
	padding-block: 56px;
}

.emergency-inner {
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: flex-start;
}

.emergency-title {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--agr-ink);
	font-size: clamp(24px, 3.2vw, 32px);
	margin: 0 0 8px;
}

.emergency-bolt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--agr-radius-sm);
	background: var(--agr-accent-soft);
	color: var(--agr-accent);
	flex: none;
}

.emergency-text {
	margin: 0;
	max-width: 640px;
	color: var(--agr-muted);
}

.areas-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
}

.area-group-title {
	color: var(--agr-ink);
	font-size: 19px;
	margin-bottom: 14px;
}

.area-cities {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 18px;
}

.area-cities li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--agr-text);
	font-size: 15px;
}

.area-cities svg {
	color: var(--agr-accent);
	flex: none;
}

.areas-note {
	margin-top: 30px;
	color: var(--agr-muted);
	font-size: 14.5px;
}

.faqs-inner {
	max-width: 860px;
}

.faq-list {
	display: grid;
	gap: 12px;
}

.faq-item {
	background: var(--agr-white);
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius-sm);
	overflow: hidden;
}

.faq-question {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--agr-font-head);
	font-weight: 700;
	font-size: 16.5px;
	color: var(--agr-ink);
	padding: 18px 20px;
}

.faq-question::-webkit-details-marker {
	display: none;
}

.faq-chevron {
	flex: none;
	width: 9px;
	height: 9px;
	border-right: 2.5px solid var(--agr-accent);
	border-bottom: 2.5px solid var(--agr-accent);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	margin-top: -4px;
}

.faq-item[open] .faq-chevron {
	transform: rotate(225deg);
	margin-top: 4px;
}

.faq-answer {
	padding: 0 20px 18px;
	color: var(--agr-text);
	font-size: 15px;
}

.blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.post-card {
	background: var(--agr-white);
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius);
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.post-card:hover {
	border-color: rgba(23, 20, 29, 0.22);
	box-shadow: var(--agr-shadow);
}

.post-card-thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--agr-steel);
}

.post-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.post-card-body {
	padding: 22px;
}

.post-card-meta {
	font-size: 12.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--agr-muted);
	margin-bottom: 6px;
}

.post-card-title {
	font-size: 18.5px;
	margin-bottom: 8px;
}

.post-card-title a {
	color: var(--agr-ink);
}

.post-card-title a:hover {
	color: var(--agr-accent-dark);
}

.post-card-excerpt {
	color: var(--agr-muted);
	font-size: 14.5px;
}

/* P9: the closing band is flat ink (no gradients) and fuses with the footer
   below it into the site's one dark block. */
.cta {
	background: var(--agr-ink);
	text-align: center;
	color: rgba(255, 255, 255, 0.74);
}

.cta-offer {
	margin: 0 auto 20px;
}

.cta-offer span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: var(--agr-accent-on-dark);
	font-weight: 600;
	font-size: 13.5px;
	padding: 8px 16px;
	border-radius: 999px;
}

.cta-title {
	color: var(--agr-white);
	font-size: clamp(26px, 3.8vw, 40px);
	max-width: 720px;
	margin-inline: auto;
}

.cta-text {
	max-width: 620px;
	margin-inline: auto;
}

.cta-locations {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
	font-weight: 600;
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
	text-underline-offset: 4px;
}

.cta-locations:hover {
	color: var(--agr-white);
	text-decoration-color: var(--agr-accent-on-dark);
}

/* ------------------------------------------------------------------ */
/* Footer / page hero / entry content / misc                            */
/* ------------------------------------------------------------------ */
/* P9: together with the CTA band above it, the footer is the site's single
   dark closing block. */
.site-footer {
	background: var(--agr-plum-2);
	color: rgba(255, 255, 255, 0.66);
	padding-top: 72px;
}

/* Footer conversion strip — on every page, including inner pages that have no
   final CTA band. */
.footer-cta {
	background: transparent;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: 26px;
}

.footer-cta-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
}

.footer-cta-kicker {
	margin: 0;
	font-family: var(--agr-font-head);
	font-weight: 700;
	font-size: 15.5px;
	color: var(--agr-white);
}

.footer-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-left: auto;
}

.footer-cta-hours {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	width: 100%;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.66);
}

.footer-cta-hours svg {
	flex: none;
	color: var(--agr-accent-on-dark);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	padding-bottom: 48px;
}

.footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--agr-font-head);
	font-weight: 800;
	font-size: 19px;
	color: var(--agr-white);
}

.footer-brand svg {
	color: var(--agr-accent-on-dark);
}

.footer-logo img {
	max-height: 46px;
	width: auto;
}

/* Bundled logo fallback (until a Custom Logo is set in Site Identity) ---- */
.site-logo--bundled a {
	display: inline-flex;
	align-items: center;
}

.site-logo--bundled img,
.agr-logo {
	display: block;
	width: auto;
	height: auto;
	max-height: 54px;
}

.footer-logo--bundled {
	display: inline-block;
	background: var(--agr-white);
	padding: 10px 14px;
	border-radius: var(--agr-radius-sm);
}

.footer-logo--bundled img {
	max-height: 42px;
}

.footer-about {
	font-size: 14.5px;
	margin: 14px 0 18px;
	max-width: 320px;
}

.footer-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.72);
	margin-right: 8px;
	transition: background 0.15s ease, color 0.15s ease;
}

.footer-social:hover {
	background: var(--agr-white);
	color: var(--agr-plum-2);
}

.footer-heading {
	color: var(--agr-white);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 16px;
}

.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.footer-links a {
	color: rgba(255, 255, 255, 0.66);
	font-size: 14.5px;
}

.footer-links a:hover {
	color: var(--agr-white);
}

.footer-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
}

.footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
}

.footer-contact svg {
	color: var(--agr-accent-on-dark);
	flex: none;
	margin-top: 3px;
}

.footer-contact a {
	color: rgba(255, 255, 255, 0.72);
}

.footer-contact a:hover {
	color: var(--agr-white);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-block: 20px;
	font-size: 13.5px;
}

.footer-bottom-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	justify-content: space-between;
}

/* Page hero (inner pages) */
/* Page hero (inner pages) - whisper-grey band with a hairline base (P9). */
.page-hero {
	background: var(--agr-steel);
	border-bottom: 1px solid var(--agr-line);
	color: var(--agr-text);
	padding-block: 64px;
}

.page-hero-title {
	color: var(--agr-ink);
	font-size: clamp(30px, 4.2vw, 44px);
	font-weight: 800;
	margin-bottom: 8px;
}

.page-hero-kicker {
	color: var(--agr-accent-dark);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12px;
	margin-bottom: 10px;
}

.page-hero-sub {
	max-width: 640px;
	margin: 0;
}

.page-hero .btn-row {
	margin-top: 22px;
}

.page-shell {
	padding-block: 88px;
}

/* Entry content */
.entry-content {
	max-width: 760px;
	font-size: 16.5px;
}

.entry-content h2 {
	font-size: 27px;
	margin-top: 1.6em;
}

.entry-content h3 {
	font-size: 21px;
	margin-top: 1.5em;
}

.entry-content a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-content img {
	border-radius: var(--agr-radius-sm);
}

.entry-content blockquote {
	margin: 1.5em 0;
	padding: 16px 22px;
	border-left: 4px solid var(--agr-accent);
	background: var(--agr-steel);
	border-radius: 0 var(--agr-radius-sm) var(--agr-radius-sm) 0;
	font-style: italic;
}

.lead-form--inline .lead-form {
	max-width: 760px;
}

/* Post thumb (single) */
.post-thumb {
	margin: 0 0 28px;
	border-radius: var(--agr-radius);
	overflow: hidden;
}

/* Contact details list (the booking card moved to the site-wide popup) */
.contact-list {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-weight: 500;
	color: var(--agr-ink);
}

.contact-list svg {
	color: var(--agr-accent);
	flex: none;
	margin-top: 3px;
}

/* Comments + pagination */
.comments-area {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--agr-line);
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment-list .comment-body {
	padding: 18px 0;
	border-bottom: 1px solid var(--agr-line);
}

.comment-form p {
	margin-bottom: 14px;
}

.comment-form input:not([type='submit']),
.comment-form textarea {
	width: 100%;
	font-family: var(--agr-font-body);
	font-size: 15px;
	padding: 12px 14px;
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius-sm);
	background: var(--agr-steel);
}

.comment-form input[type='submit'] {
	background: var(--agr-ink);
	color: var(--agr-white);
	border: 0;
	font-family: var(--agr-font-head);
	font-weight: 600;
	padding: 13px 26px;
	border-radius: 999px;
	cursor: pointer;
}

.pagination-nav {
	margin-top: 40px;
}

.pagination-nav .nav-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.pagination-nav .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius-sm);
	font-weight: 600;
	color: var(--agr-ink);
}

.pagination-nav .page-numbers.current {
	background: var(--agr-ink);
	border-color: var(--agr-ink);
	color: var(--agr-white);
}

/* ------------------------------------------------------------------ */
/* Responsive                                                           */
/* ------------------------------------------------------------------ */
@media (min-width: 640px) {
	.stats-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.reviews-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hero-inner {
		grid-template-columns: 1.05fr 0.95fr;
	}

	/* Since P8 the hero aside holds only the optional photo — without one
	   (hero-inner--full, set by section-hero.php) the copy column spans the
	   full width. */
	.hero-inner--full {
		grid-template-columns: 1fr;
	}

	.lead-form-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 900px) {
	.services-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.process-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.gallery-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.areas-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	.area-cities {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.why-inner {
		grid-template-columns: 0.9fr 1.1fr;
	}

	.emergency-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.footer-grid {
		grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
	}
}

@media (min-width: 1025px) {
	.mobile-call-bar {
		display: none;
	}

	.header-phone {
		display: inline-flex;
	}

	body {
		padding-bottom: 0;
	}
}

/* Desktop header ONE-LINE layout (P13): logo | centred fluid nav | actions.
   The nav flexes so the eight §2 items pack from 1025px up; nowrap keeps the
   row on a single line (the fluid --agr-nav-* tokens do the packing). */
@media (min-width: 1025px) {
	.site-branding,
	.header-actions {
		flex: none;
	}

	.main-navigation {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		justify-content: center;
	}

	.primary-menu {
		flex-wrap: nowrap;
		justify-content: center;
	}
}

/* Phone as an icon chip on narrow desktops (1025-1199): the number stays in
   the accessibility tree (sr-only span + aria-label) and is always visible in
   the callbar strip above and the mobile bottom bar below. */
@media (min-width: 1025px) and (max-width: 1199px) {
	.mainbar-inner {
		gap: 10px;
	}

	.header-phone {
		position: relative;
		width: 44px;
		height: 44px;
		justify-content: center;
		border-radius: 50%;
		background: var(--agr-accent-dark);
		color: var(--agr-white);
	}

	.header-phone:hover,
	.header-phone:focus-visible {
		background: var(--agr-accent-hover);
		color: var(--agr-white);
		text-decoration: none;
	}

	.header-phone .header-phone-num {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}

/* Full phone link returns at 1200px and up. */
@media (min-width: 1200px) {
	.header-phone {
		width: auto;
		height: auto;
		border-radius: 0;
		background: none;
		color: var(--agr-accent-dark);
	}

	.header-phone:hover,
	.header-phone:focus-visible {
		background: none;
		color: var(--agr-ink);
		text-decoration: underline;
	}

	.header-phone .header-phone-num {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
		border: 0;
	}
}

@media (max-width: 1024px) {
	.nav-toggle {
		display: inline-flex;
	}

	.main-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--agr-white);
		border-bottom: 1px solid var(--agr-line);
		box-shadow: var(--agr-shadow-lg);
		display: none;
		padding: 12px 20px 20px;
		max-height: calc(100vh - var(--agr-header-h));
		overflow-y: auto;
	}

	body.nav-open .main-navigation {
		display: block;
	}

	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.primary-menu a {
		padding: 13px 12px;
		font-size: 16px;
	}

	/* Mobile sub-menus: Bootstrap-style multi-level accordion.
	   Collapsed via max-height + overflow hidden (animated).
	   Without JS every submenu stays fully visible (progressive enhancement). */
	.primary-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* The two-column Locations list collapses to the single-column accordion. */
	.primary-menu .menu-item.agr-cols > .sub-menu {
		columns: 1;
		min-width: 0;
	}

	/* With JS: sub-menus start collapsed and animate open/close.
	   max-height 0 hides content; a generous max-height allows it.
	   800px covers ~15 items at 50px each — more than enough for
	   any branch without causing visible timing mismatch. */
	html.agr-has-js .primary-menu .sub-menu {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}

	html.agr-has-js .primary-menu .menu-item-has-children.is-open > .sub-menu {
		max-height: 800px;
	}

	/* Visual depth hierarchy: each nesting level gets a distinct left border
	   and slightly smaller text so the tree is scannable at a glance.
	   Indentation uses padding-left only to conserve horizontal space. */
	.primary-menu > .menu-item-has-children > .sub-menu {
		border-left: 3px solid var(--agr-accent-dark);
		padding-left: 12px;
	}

	.primary-menu > .menu-item-has-children > .sub-menu > .menu-item > a {
		font-size: 15px;
	}

	.primary-menu .sub-menu .sub-menu {
		border-left: 2px solid var(--agr-line);
		padding-left: 12px;
	}

	.primary-menu .sub-menu .sub-menu > .menu-item > a {
		font-size: 14.5px;
		color: var(--agr-text);
	}

	.primary-menu .sub-menu .sub-menu .sub-menu {
		border-left: 2px dotted var(--agr-line);
		padding-left: 10px;
	}

	.primary-menu .sub-menu .sub-menu .sub-menu > .menu-item > a {
		font-size: 14px;
		color: var(--agr-muted);
	}

	/* Parent items: link fills available space, toggle button pinned right.
	   flex-wrap keeps the sub-menu UL on its own line below the link+button row.
	   The sub-menu itself must span full width so it doesn't shrink-wrap. */
	.primary-menu .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.primary-menu .menu-item-has-children > a {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The sub-menu UL is a flex child that wraps to its own line.
	   Without width:100% it collapses to content-width inside the flex container. */
	.primary-menu .menu-item-has-children > .sub-menu {
		width: 100%;
		flex: 0 0 100%;
	}

	/* Toggle buttons: 46x46 touch target (WCAG 2.2 minimum), caret rotates
	   from down-chevron to up-chevron when the branch is open. */
	.mega-toggle,
	.submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		flex: none;
		margin-left: auto;
		color: var(--agr-ink);
		border-radius: var(--agr-radius-sm);
		transition: background 0.15s ease;
	}

	.mega-toggle:hover,
	.submenu-toggle:hover {
		background: var(--agr-steel);
	}

	.mega-toggle-bar {
		display: inline-block;
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
		transition: transform 0.25s ease;
	}

	/* Caret rotation: when the parent li has .is-open, flip the chevron upward */
	.primary-menu .menu-item-has-children.is-open > .mega-toggle .mega-toggle-bar,
	.primary-menu .menu-item-has-children.is-open > .submenu-toggle .mega-toggle-bar {
		transform: rotate(-135deg) translateY(-2px);
	}

	/* Mega panels become in-drawer accordions too */
	.mega-panel {
		position: static;
		flex: 1 1 100%;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 3px solid var(--agr-accent-dark);
		border-radius: 0;
		padding: 6px 0 6px 12px;
	}

	html.agr-has-js .primary-menu .menu-item--mega > .mega-panel {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
		padding-top: 0;
		padding-bottom: 0;
	}

	html.agr-has-js .primary-menu .menu-item--mega.is-open > .mega-panel {
		max-height: 2000px;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.mega-panel-inner {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.mega-list--cols {
		columns: 1;
	}

	.mega-col--cta {
		padding: 14px;
	}
}

@media (max-width: 520px) {
	.section {
		padding-block: 72px;
	}

	.footer-cta-actions {
		margin-left: 0;
		width: 100%;
	}

	.footer-cta-actions .btn {
		flex: 1 1 100%;
		justify-content: center;
	}

	.hero {
		padding-block: 64px;
	}

	.btn-row .btn {
		flex: 1 1 100%;
		justify-content: center;
	}

	.area-cities {
		grid-template-columns: 1fr;
	}

	.callbar-meta .callbar-hours {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Motion preferences                                                   */
/* ------------------------------------------------------------------ */
/* P9: hover motion is limited to colour/border changes, so nothing here
   needs a reduced-motion override beyond the global switch below. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------------------ */
/* P4: content-model templates (category / service / city pages)        */
/* ------------------------------------------------------------------ */

/* Breadcrumbs (inside the light page hero, P9) */
.breadcrumbs {
	margin-bottom: 14px;
	font-size: 13px;
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--agr-muted);
}

.breadcrumbs li+li::before {
	content: '/';
	color: var(--agr-line);
}

.breadcrumbs a {
	color: var(--agr-muted);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--agr-accent-dark);
	text-decoration: underline;
}

/* Hero meta line + action row */
.page-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.page-hero-meta li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--agr-text);
	font-size: 14.5px;
	font-weight: 600;
}

.page-hero-meta svg {
	color: var(--agr-accent);
}

.page-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 22px 0 0;
}

/* Photo page hero. The inner-page copy classes are separate from the homepage ones, so
   this group does two jobs. (1) The colours: title/kicker/sub/meta/breadcrumbs flip to
   white over the ink scrim, exactly like the homepage photo hero (rule 7: contrast never
   depends on the photograph). (2) The photograph itself: `.page-hero { background:
   var(--agr-steel) }` is a SHORTHAND declared later in this sheet than `.hero--bg`, so it
   cancels the image, size, position and repeat that `.hero--bg` sets -- the longhands are
   repeated here (specificity 0,2,0 beats both single-class rules regardless of order).
   `.hero--bg .btn--primary` / `.btn--ghost` already pick the right button treatment.
   The class is only printed by autogaterepairs_page_hero() when a cover photo resolves. */
.page-hero.hero--bg {
	background-image:
		linear-gradient(115deg, rgba(23, 20, 29, 0.88) 0%, rgba(23, 20, 29, 0.74) 45%, rgba(23, 20, 29, 0.58) 100%),
		var(--agr-hero-image);
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	background-color: var(--agr-ink);
	border-bottom-color: transparent;
	color: rgba(255, 255, 255, 0.92);
	padding-block: 88px 96px;
}

.page-hero.hero--bg .page-hero-title {
	color: var(--agr-white);
}

.page-hero.hero--bg .page-hero-kicker {
	color: var(--agr-white);
}

.page-hero.hero--bg .page-hero-sub {
	color: rgba(255, 255, 255, 0.9);
}

.page-hero.hero--bg .page-hero-meta li {
	color: rgba(255, 255, 255, 0.86);
}

.page-hero.hero--bg .page-hero-meta svg {
	color: var(--agr-white);
}

.page-hero.hero--bg .breadcrumbs li {
	color: rgba(255, 255, 255, 0.72);
}

.page-hero.hero--bg .breadcrumbs li+li::before {
	color: rgba(255, 255, 255, 0.35);
}

.page-hero.hero--bg .breadcrumbs a {
	color: rgba(255, 255, 255, 0.72);
}

.page-hero.hero--bg .breadcrumbs a:hover {
	color: var(--agr-white);
}

/* Trust band */
.trust-band {
	background: var(--agr-white);
	border-bottom: 1px solid var(--agr-line);
}

.trust-band-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 28px;
	padding-block: 16px;
}

.trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.trust-badges li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--agr-ink);
}

.trust-badges svg {
	color: var(--agr-accent);
}

.trust-license {
	margin: 0;
	font-size: 13px;
	color: var(--agr-muted);
}

/* Content shells (category + service + city bodies) */
.cpt-shell>*+* {
	margin-top: 26px;
}

.cpt-intro {
	max-width: 800px;
}

.cpt-intro p {
	color: var(--agr-text);
	line-height: 1.75;
}

.cpt-subhead {
	margin: 0;
	font-size: clamp(22px, 2.6vw, 30px);
}

/* Service page: bullets + photo */
.cpt-columns {
	display: grid;
	gap: 28px;
	align-items: start;
}

.service-bullets {
	display: grid;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.service-bullets li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	color: var(--agr-text);
	line-height: 1.6;
}

.service-bullets svg {
	flex: none;
	margin-top: 4px;
	color: var(--agr-green);
}

.service-photo {
	margin: 0;
}

.service-photo img {
	width: 100%;
	height: auto;
	border-radius: var(--agr-radius);
}

/* City links (chips) */
.city-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.city-links a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 14px;
	background: var(--agr-white);
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius-sm);
	color: var(--agr-ink);
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.city-links a:hover {
	border-color: var(--agr-ink);
	background: var(--agr-accent-soft);
}

.city-links svg {
	flex: none;
	color: var(--agr-accent);
}

.city-links .loc-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 14px;
	background: var(--agr-white);
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius-sm);
	color: var(--agr-ink);
	font-weight: 600;
	font-size: 14.5px;
}

.city-links .loc-chip svg {
	flex: none;
	color: var(--agr-accent);
}

.cpt-cat-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.cpt-panel {
	padding: 24px;
	background: var(--agr-white);
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius);
}

.loc-card {
	background: var(--agr-steel);
}

.loc-card-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 18px 0 0;
	font-size: 14.5px;
}

.city-band {
	background: var(--agr-steel);
}

/* Related blocks */
.related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.related-posts {
	background: var(--agr-white);
}

.related-posts .cpt-subhead {
	margin-bottom: 20px;
}

.estimate-inline {
	background: var(--agr-white);
}

/* Under Construction booking panel (booking_open = no) */
.estimate-inline--soon {
	background:
		repeating-linear-gradient(135deg, rgba(23, 20, 29, 0.03) 0 12px, transparent 12px 24px),
		var(--agr-white);
}

.soon-card {
	max-width: 720px;
	margin-inline: auto;
	padding: 30px;
	background: var(--agr-white);
	border: 1px solid var(--agr-line);
	border-inline-start: 2px solid var(--agr-accent);
	border-radius: var(--agr-radius);
	text-align: center;
}

.soon-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding: 6px 12px;
	background: var(--agr-accent-soft);
	border-radius: 999px;
	color: var(--agr-accent-dark);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.soon-badge svg {
	color: var(--agr-accent);
}

.soon-title {
	margin: 0 0 10px;
	font-size: clamp(22px, 2.8vw, 30px);
}

.soon-text {
	max-width: 560px;
	margin: 0 auto;
	color: var(--agr-text);
	line-height: 1.7;
}

.soon-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 26px;
	margin: 20px 0;
	padding: 16px 0;
	list-style: none;
	border-top: 1px solid var(--agr-line);
	border-bottom: 1px solid var(--agr-line);
}

.soon-list li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--agr-ink);
}

.soon-list svg {
	color: var(--agr-accent);
}

.soon-list a {
	color: var(--agr-ink);
	text-decoration: none;
}

.soon-list a:hover {
	color: var(--agr-accent-dark);
}

.soon-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
}

.soon-note {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--agr-muted);
}

/* The same panel inside the booking popup (modal-booking.php) */
.agr-booking .soon-card {
	max-width: 560px;
	margin-inline: auto;
	padding: 24px;
	border-inline-start-width: 1px;
	border-top: 2px solid var(--agr-accent);
	box-shadow: none;
}

.agr-booking .soon-list {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.agr-booking .soon-actions {
	flex-direction: column;
	gap: 10px;
}

.agr-booking .soon-actions .btn {
	flex: 1 1 100%;
	justify-content: center;
}

@media (min-width: 900px) {
	.cpt-columns {
		grid-template-columns: 1.25fr 1fr;
	}

	.service-bullets {
		grid-template-columns: 1fr 1fr;
		gap: 12px 24px;
	}

	.trust-band-inner {
		padding-block: 18px;
	}
}

/* Homepage services band: one block per category */
.service-cats {
	display: grid;
	gap: 24px;
}

.service-cat {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 26px;
	background: var(--agr-white);
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius);
}

.service-cat-title {
	margin: 0 0 6px;
	font-size: 22px;
}

.service-cat-title a {
	color: var(--agr-ink);
	text-decoration: none;
}

.service-cat-title a:hover {
	color: var(--agr-accent-dark);
}

.service-cat-desc {
	margin: 0;
	color: var(--agr-muted);
	font-size: 14.5px;
	line-height: 1.65;
}

.service-cat-list {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 14px 0 0;
	list-style: none;
	border-top: 1px solid var(--agr-line);
}

.service-cat-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	color: var(--agr-ink);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}

.service-cat-list a:hover {
	color: var(--agr-accent-dark);
}

.service-cat-list svg {
	flex: none;
	color: var(--agr-accent);
}

.service-cat .text-link {
	margin-top: auto;
}

@media (min-width: 860px) {
	.service-cats {
		grid-template-columns: 1fr 1fr;
	}
}

/* Locations hub: search + list + map */
.loc-search {
	margin: 0 0 26px;
	padding: 20px;
	background: var(--agr-white);
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius);
}

.loc-search-fields {
	display: grid;
	gap: 14px;
}

.loc-search-field {
	display: grid;
	gap: 6px;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--agr-ink);
}

.loc-search-field input {
	font-family: var(--agr-font-body);
	font-size: 15px;
	padding: 12px 14px;
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius-sm);
	background: var(--agr-white);
	color: var(--agr-text);
}

.loc-search-field input:focus {
	outline: none;
	border-color: var(--agr-accent);
	box-shadow: 0 0 0 3px rgba(31, 122, 126, 0.18);
}

.loc-search .btn {
	align-self: end;
	justify-content: center;
}

.loc-search-status {
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--agr-muted);
}

.loc-search-status a {
	margin-left: 8px;
	color: var(--agr-accent-dark);
	font-weight: 600;
}

.loc-layout {
	display: grid;
	gap: 24px;
	align-items: start;
}

.loc-count {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--agr-muted);
}

.loc-list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.loc-row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px;
	align-items: start;
	padding: 18px;
	background: var(--agr-white);
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.loc-row:hover {
	border-color: rgba(23, 20, 29, 0.25);
}

.loc-row-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--agr-radius-sm);
	background: var(--agr-accent-soft);
	color: var(--agr-accent-dark);
}

.loc-row-title {
	margin: 0 0 6px;
	font-size: 18px;
}

.loc-row-title a {
	color: var(--agr-ink);
	text-decoration: none;
}

.loc-row-title a:hover {
	color: var(--agr-accent-dark);
}

.loc-row-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0;
	font-size: 13.5px;
	color: var(--agr-muted);
}

.loc-row-meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.loc-row-phone {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 600;
}

.loc-row-phone svg {
	color: var(--agr-accent);
}

.loc-row-phone a {
	color: var(--agr-ink);
	text-decoration: none;
}

.loc-row .btn {
	grid-column: 1 / -1;
	justify-content: center;
}

.loc-empty {
	margin: 16px 0 0;
	padding: 16px 18px;
	background: var(--agr-white);
	border: 1px dashed var(--agr-line);
	border-radius: var(--agr-radius-sm);
	color: var(--agr-muted);
}

.loc-empty a {
	color: var(--agr-accent-dark);
	font-weight: 600;
}

.loc-map {
	width: 100%;
	min-height: 420px;
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius);
	background: var(--agr-steel);
}

.loc-map-note {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--agr-muted);
}

@media (min-width: 700px) {
	.loc-search-fields {
		grid-template-columns: 1fr 1fr auto;
	}
}

@media (min-width: 960px) {
	.loc-layout--split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.loc-map {
		position: sticky;
		top: 96px;
		min-height: 560px;
	}

	.loc-row {
		grid-template-columns: auto 1fr auto;
		align-items: center;
	}

	.loc-row .btn {
		grid-column: auto;
	}
}

/* ------------------------------------------------------------------ */
/* Design Center + Commercial Emergency (P12)                          */
/* ------------------------------------------------------------------ */
.design-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.design-card {
	background: var(--agr-white);
	border: 1px solid var(--agr-line);
	border-radius: var(--agr-radius);
	padding: 28px 26px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.design-card:hover {
	border-color: rgba(23, 20, 29, 0.22);
	box-shadow: var(--agr-shadow);
}

.commercial-emergency-row {
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: flex-start;
}

.commercial-emergency-row .section-title {
	margin-bottom: 10px;
}

/* Dark plum cross-link band shared by the emergency / design funnels.
   Uses the same white-on-plum contrast pattern as .page-hero.hero--bg
   (white 16.9:1, title white, lead rgba 0.9), so no token is strained. */
.section--crosslink {
	background: linear-gradient(135deg, var(--agr-plum), var(--agr-plum-2));
}

.section--crosslink .section-kicker {
	color: var(--agr-white);
}

.section--crosslink .section-title {
	color: var(--agr-white);
}

.section--crosslink .section-lead {
	color: rgba(255, 255, 255, 0.9);
}

.crosslink-grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}

@media (min-width: 720px) {
	.design-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.design-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.commercial-emergency-row,
	.crosslink-grid {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}