/* ══════════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #374151;
  line-height: 1.65;
  font-size: 16px;
  background: #fff;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button, input, select, textarea { font: inherit; }
a, button, label, input, select, textarea { -webkit-tap-highlight-color: rgba(27,79,155,.16); }
p, li, h1, h2, h3, h4, a, span { overflow-wrap: break-word; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.container { max-width: 1140px; margin: 0 auto; padding: 0 28px; }

/* ══════════════════════════════════════════════
   CSS VARIABLES (default theme)
══════════════════════════════════════════════ */
:root {
  --blue:         #1b4f9b;
  --blue-dk:      #133a72;
  --accent:       #e8a020;
  --light:        #f8f9fc;
  --border:       #e5e7eb;
  --text:         #111827;
  --muted:        #6b7280;
  --font-heading: 'Inter', system-ui, sans-serif;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 16px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:    0 12px 40px rgba(0,0,0,.09), 0 4px 12px rgba(0,0,0,.05);
  --radius-card:  16px;
  --ease-out:     cubic-bezier(.2,.8,.2,1);
}

h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--text); }

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s ease, border-color .2s ease;
  border: none;
  letter-spacing: .1px;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.7);
}
.btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-secondary {
  background: transparent;
  color: var(--blue);
  border: 2px solid var(--blue);
}
.btn-secondary:hover { background: var(--blue); color: #fff; }
.btn-submit {
  background: var(--blue);
  color: #fff;
  width: 100%;
  padding: 15px;
  font-size: 16px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.btn-submit:hover { box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.form-success-msg {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 20px 24px;
  color: #166534;
  font-weight: 500;
}

/* ══════════════════════════════════════════════
   NAV — TWO TIER
══════════════════════════════════════════════ */
.nav-topbar {
  background: #f3f4f6;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.nav-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-topbar-hours {
  color: var(--muted);
  font-size: 13px;
}
.nav-topbar-phone {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1px;
}
.nav-topbar-phone:hover { color: var(--blue); }
.nav-logo { gap: 10px; }
.nav-logo-mark { width: 46px; height: 46px; border-radius: 8px; object-fit: contain; flex: 0 0 auto; background: #fff; }
@media (max-width: 640px) {
  .nav-topbar-hours { display: none; }
  .nav-topbar-inner { justify-content: center; }
  .nav-logo-mark { width: 38px; height: 38px; }
}

.site-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 3px solid var(--blue);
  box-shadow: 0 6px 22px rgba(15,23,42,.08);
}
.site-nav .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.nav-logo {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-right: 16px;
}
.nav-logo-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  color: var(--text);
  letter-spacing: -.2px;
  overflow-wrap: anywhere;
}
.nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
}
.nav-links a {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all .15s;
}
.nav-links a:hover { color: var(--blue); background: var(--light); }
.nav-phone {
  background: var(--accent) !important;
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  margin-left: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.nav-phone:hover { background: var(--accent) !important; opacity: .9; }
.nav-toggle-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.nav-toggle-btn { display: none; }
.nav-services { position: relative; }
.nav-services-trigger span { display:inline-block; margin-left:3px; transition:transform .2s ease; }
.nav-services-menu { position:absolute; left:0; top:calc(100% + 8px); width:260px; max-height:min(70vh,460px); overflow:auto; padding:8px; border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:0 18px 50px rgba(15,23,42,.18); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s var(--ease-out), visibility .18s; }
.nav-services-menu a { display:block; padding:10px 12px; line-height:1.35; }
.nav-services:hover .nav-services-menu,
.nav-services:focus-within .nav-services-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nav-services:hover .nav-services-trigger span,
.nav-services:focus-within .nav-services-trigger span { transform:rotate(180deg); }

/* ══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  background: var(--blue-dk) center/cover no-repeat;
  color: #fff;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(5,18,28,.92) 0%, rgba(5,18,28,.7) 48%, rgba(5,18,28,.28) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  min-width: 0;
}
.hero-grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(340px,.75fr);
  gap:56px;
  align-items:center;
  padding-top:52px;
  padding-bottom:52px;
}
.hero-form-card { min-width:0; scroll-margin-top:96px; background:#fff; border-radius:var(--radius-card); box-shadow:0 26px 70px rgba(0,0,0,.3); }
.hero-form-card .contact-form { padding:24px; box-shadow:none; }
.hero-form-card .form-row { margin-bottom:11px; }
.hero-form-card .form-row textarea { min-height:68px; }
.hero-form-heading { background:#fff; padding:24px 24px 0; border-radius:var(--radius-card) var(--radius-card) 0 0; }
.hero-form-heading + .contact-form { border-top:0; border-radius:0 0 var(--radius-card) var(--radius-card); }
.hero-form-heading span { display:block; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin-bottom:5px; }
.hero-form-heading h2 { color:var(--text); font-size:24px; line-height:1.15; margin-bottom:6px; }
.hero .hero-form-heading p { color:var(--muted); opacity:1; font-size:14px; line-height:1.45; margin:0; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.9);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero h1 {
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: 18px;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,.22);
}
.hero p {
  font-size: 18px;
  line-height: 1.6;
  opacity: .88;
  margin-bottom: 32px;
  max-width: 520px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.75);
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 24px;
}
.hero-stars { color: #fbbf24; font-size: 15px; letter-spacing: 1px; }
.hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,.14); }
.hero-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-chip::before { content: '✓'; color: var(--accent); font-weight: 800; }

/* Local strip under the hero: the towns this business serves */
.local-strip { background: var(--light); border-bottom: 1px solid var(--border); padding: 14px 0; }
.local-strip-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.local-strip-label { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.local-strip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; flex: 1 1 auto; }
.local-strip-list li { font-size: 14px; font-weight: 600; color: var(--text); }
.local-strip-list a { color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--muted); }
.local-strip-list a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.local-strip-more { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
@media (max-width: 640px) { .local-strip-more { display: none; } }

/* Starting price chip on homepage service cards */
.service-price { display: inline-block; margin: 2px 0 10px; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; }
.service-price strong { font-weight: 800; }
.service-price small { font-size: 12px; font-weight: 500; opacity: .9; }
.service-price-note { margin: 22px auto 0; max-width: 760px; text-align: center; font-size: 13px; color: var(--muted); }

/* Included checklist on homepage service cards */
.service-included { margin: 16px 0 6px; padding: 14px 16px; background: var(--light); border: 1px solid var(--border); border-radius: 10px; }
.service-included-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.service-included ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.service-included li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.45; color: var(--text); }
.service-included li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; }

/* ══════════════════════════════════════════════
   VALUE STRIP
══════════════════════════════════════════════ */
.value-strip {
  background: var(--light);
  padding: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.value-strip-inner {
  display: flex;
  align-items: stretch;
}
.value-strip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 14px 0;
  flex: 1;
  justify-content: center;
  border-right: 1px solid var(--border);
}
.value-strip-item:last-child { border-right: none; }
.value-strip-icon { font-size: 15px; }

/* ══════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════ */
.section { padding: 80px 0; }
.section-alt { background: var(--light); }
.section-header { text-align: center; margin-bottom: 52px; }
.section-header h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.2;
}
.section-header p {
  color: var(--muted);
  font-size: 17px;
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ══════════════════════════════════════════════
   INTRO SPLIT
══════════════════════════════════════════════ */
.intro-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  scroll-margin-top: 92px;
}
.intro-copy-panel { max-width:900px; margin:0 auto; text-align:center; }
.intro-copy-panel .intro-text p { max-width:820px; margin-left:auto; margin-right:auto; }
.intro-copy-panel .intro-text > div { justify-content:center; }
.intro-text h2 {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.2;
}
.intro-text p { color: var(--muted); font-size: 16px; line-height: 1.8; }

/* ══════════════════════════════════════════════
   SERVICES GRID
══════════════════════════════════════════════ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.service-card {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  transition: box-shadow .28s var(--ease-out), transform .28s var(--ease-out), border-color .2s ease;
  display: flex;
  flex-direction: column;
}
.service-card:hover {
  box-shadow: 0 20px 46px rgba(15,23,42,.14), 0 5px 14px rgba(15,23,42,.07);
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--blue) 38%, var(--border));
}
/* Hide emoji icon — title leads */
.service-icon { display: none; }
.service-card h3,
.service-card h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
  line-height: 1.3;
}
.service-card p { color: var(--muted); font-size: 15px; line-height: 1.7; flex: 1; }

/* Service card with a supporting photo (optional per-service, per-site) */
.service-card-photo { padding: 0; overflow: hidden; }
.service-card-img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.service-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s var(--ease-out); }
.service-card:hover .service-card-img img { transform: scale(1.045); }
.service-card-photo .service-card-body { padding: 24px 28px 28px; display: flex; flex-direction: column; flex: 1; }

/* Cost section with an optional supporting photo */
.cost-photo-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: center; }
.cost-photo { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-md); background: var(--light); }
.cost-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .55s var(--ease-out); }
.cost-photo:hover img { transform: scale(1.03); }
.cost-photo figcaption { padding: 10px 14px; font-size: 13px; color: var(--muted); background: var(--light); }
.about-photo-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:36px; align-items:center; }
.about-photo { border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-md); background:var(--light); }
.about-photo img { width:100%; aspect-ratio:4 / 3; object-fit:cover; display:block; transition:transform .55s var(--ease-out); }
.about-photo:hover img { transform:scale(1.03); }
.about-photo-copy { max-width:none; margin:0; }
@media (max-width: 800px) {
  .cost-photo-grid, .about-photo-grid { grid-template-columns: 1fr; }
}
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  transition: gap .2s var(--ease-out), color .2s ease;
}
.service-card:hover .service-link { gap: 9px; color: var(--accent); }
.service-link::after { content: '→'; }

/* Process and service-example gallery */
.process-section { background:linear-gradient(180deg,#fff 0%,var(--light) 100%); }
.process-grid { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.process-card { position:relative; padding:30px 24px 26px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-sm); }
.process-card:not(:last-child)::after { content:'→'; position:absolute; right:-17px; top:34px; z-index:2; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; color:var(--blue); background:#fff; border:1px solid var(--border); font-weight:800; }
.process-card > span { display:grid; place-items:center; width:38px; height:38px; margin-bottom:18px; border-radius:50%; background:var(--blue); color:#fff; font-weight:800; box-shadow:0 6px 16px rgba(27,79,155,.2); }
.process-card h3 { font-size:18px; line-height:1.3; margin-bottom:10px; }
.process-card p { color:var(--muted); font-size:14px; line-height:1.7; }
.service-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.gallery-card { position:relative; min-height:230px; overflow:hidden; border-radius:var(--radius-card); box-shadow:var(--shadow-md); background:var(--blue-dk); }
.gallery-card img { width:100%; height:100%; aspect-ratio:4 / 3; object-fit:cover; transition:transform .55s var(--ease-out); }
.gallery-card::after { content:''; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(5,18,28,.88)); pointer-events:none; }
.gallery-card span { position:absolute; left:20px; right:20px; bottom:17px; z-index:1; color:#fff; font-weight:800; font-size:17px; text-shadow:0 1px 8px rgba(0,0,0,.45); }
.gallery-card:hover img { transform:scale(1.055); }

/* Pricing presentation */
.pricing-section { position:relative; overflow:hidden; }
.pricing-section::before { content:''; position:absolute; width:360px; height:360px; right:-180px; top:-180px; border-radius:50%; background:color-mix(in srgb,var(--accent) 12%,transparent); pointer-events:none; }
.section-kicker { display:block; color:var(--blue); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:8px; }
.pricing-copy h2 { margin-top:0; }
.pricing-note { margin:22px 0; padding:16px 18px; border-left:4px solid var(--accent); border-radius:0 8px 8px 0; background:var(--light); color:var(--muted); font-size:14px; }
.pricing-note strong { color:var(--text); }
.pricing-copy-centered { text-align:center; }
.pricing-copy-centered .pricing-note { text-align:left; }

/* ══════════════════════════════════════════════
   KEYWORD GRID
══════════════════════════════════════════════ */
.keyword-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  max-width: 840px;
  margin: 0 auto;
}
.keyword-tag {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s ease, background-color .2s ease;
}
.keyword-tag::before { content: '✓'; color: var(--accent); font-weight: 800; }
a.keyword-tag:hover { border-color: var(--blue); background: var(--bg-alt, #f7f9fc); transform:translateY(-2px); box-shadow:var(--shadow-sm); }

/* ══════════════════════════════════════════════
   TRUST / WHY US
══════════════════════════════════════════════ */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}
.trust-item { text-align: center; }
.trust-icon { font-size: 32px; margin-bottom: 14px; }
.trust-item h3 { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.trust-item p { color: var(--muted); font-size: 15px; line-height: 1.7; }
.trust-item-full {
  text-align: left;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s ease;
}
.trust-item-full:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--blue) 35%, var(--border)); }
.trust-item-full .trust-icon { margin-bottom: 12px; }
.trust-item-full p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.75; }

/* ══════════════════════════════════════════════
   PERKS
══════════════════════════════════════════════ */
.perks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
.perk-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--blue);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.perk-item:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.perk-item h3 { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.perk-item p { color: var(--muted); font-size: 15px; line-height: 1.75; }

/* ══════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.testimonial-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.testimonial-stars { color: #fbbf24; font-size: 16px; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial-text {
  color: #4b5563;
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 18px;
  flex: 1;
  font-style: italic;
}
.testimonial-author {
  font-weight: 700;
  color: var(--text);
  font-size: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════════
   VISION & MISSION
══════════════════════════════════════════════ */
.vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.vm-card {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  color: var(--text);
  border-radius: var(--radius-card);
  padding: 36px 28px;
  box-shadow: var(--shadow-sm);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.vm-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.vm-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 14px; color: var(--text); }
.vm-card p { font-size: 15px; line-height: 1.8; color: var(--muted); }

/* ══════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════ */
.faq-list { max-width: 820px; margin: 0 auto; display:grid; gap:12px; }
.faq-item { background:#fff; border:1px solid var(--border); border-radius:12px; padding:0 22px; box-shadow:var(--shadow-sm); transition:border-color .2s ease, box-shadow .2s ease; }
.faq-item[open] { border-color:color-mix(in srgb, var(--blue) 45%, var(--border)); box-shadow:var(--shadow-md); }
.faq-q { list-style:none; cursor:pointer; font-weight:700; color:var(--text); font-size:17px; padding:20px 42px 20px 0; position:relative; }
.faq-q::-webkit-details-marker { display:none; }
.faq-q::after { content:'+'; position:absolute; right:2px; top:50%; transform:translateY(-50%); font-size:27px; line-height:1; color:var(--blue); transition:transform .22s var(--ease-out); }
.faq-item[open] .faq-q::after { transform:translateY(-50%) rotate(45deg); }
.faq-a { color:var(--muted); font-size:15px; line-height:1.75; padding:0 42px 20px 0; }
.cross-niche-note { margin-top: 32px; }
.cross-niche-note p { color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 8px; }

/* ══════════════════════════════════════════════
   CONTACT SPLIT
══════════════════════════════════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.contact-info h2 { font-size: 28px; font-weight: 800; color: var(--text); margin-bottom: 14px; }
.contact-info p { color: var(--muted); margin-bottom: 28px; font-size: 16px; }
.contact-detail { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.contact-detail-icon {
  width: 42px;
  height: 42px;
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.contact-detail span { font-weight: 600; color: var(--text); font-size: 15px; }
.contact-detail span,
.footer-col { min-width: 0; overflow-wrap: anywhere; }

/* ══════════════════════════════════════════════
   FORM
══════════════════════════════════════════════ */
.contact-form {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 36px;
  box-shadow: 0 22px 60px rgba(15,23,42,.13), 0 5px 16px rgba(15,23,42,.06);
  border: 1px solid var(--border);
}
.form-row { margin-bottom: 16px; }
.form-row .phone-error {
  margin: 6px 0 0;
  color: #b42318;
  font-size: 13px;
  line-height: 1.4;
}
.form-row input[aria-invalid="true"] {
  border-color: #b42318;
  outline-color: #b42318;
}
.form-row label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 6px;
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  /* iOS Safari zooms the page when a focused control is below 16px. */
  font-size: 16px;
  color: var(--text);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.form-row select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(27,79,155,.08);
}
.form-row textarea { resize: vertical; min-height: 100px; }

/* ══════════════════════════════════════════════
   AREAS
══════════════════════════════════════════════ */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.area-tag {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.area-tag::before { content: '📍'; font-size: 12px; }

/* ══════════════════════════════════════════════
   MAP
══════════════════════════════════════════════ */
.map-embed { border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-md); }
.map-embed iframe { display: block; width: 100%; height: 400px; border: none; }
.service-area-map { margin: 42px 0; }
.service-area-map > p { color: var(--muted); }
.footer-map-col iframe { display: block; background: rgba(255,255,255,.08); }
.footer-map-link { display: block; margin-top: 8px; font-size: .78rem; line-height: 1.4; color: rgba(255,255,255,.7); }
.map-open-link { margin-top: 12px; text-align: center; }
.process-list { display: grid; gap: 14px; margin: 20px 0 0; padding-left: 22px; color: var(--muted); }
.process-list li { padding-left: 6px; line-height: 1.7; }
.service-estimate-section .contact-grid { align-items: start; }

/* ══════════════════════════════════════════════
   PROSE SECTIONS
══════════════════════════════════════════════ */
.prose-section { max-width: 780px; margin: 0 auto; }
.prose-section p { color: var(--muted); font-size: 16px; line-height: 1.85; margin-bottom: 16px; }
.prose-section h2 { font-size: 26px; font-weight: 800; color: var(--text); margin: 32px 0 12px; }
.prose-section h3 { font-size: 20px; font-weight: 700; color: var(--text); margin: 24px 0 8px; }
.prose-section ul { padding-left: 20px; list-style: disc; color: var(--muted); margin-bottom: 16px; }
.prose-section ul li { margin-bottom: 6px; font-size: 15px; line-height: 1.7; }

/* ══════════════════════════════════════════════
   CTA STRIPS
══════════════════════════════════════════════ */
.inline-cta {
  background: var(--blue-dk);
  padding: 28px 0;
}
.inline-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.inline-cta p { color: #fff; font-size: 17px; font-weight: 600; margin: 0; }

.cta-banner {
  background: linear-gradient(135deg, var(--blue-dk) 0%, var(--blue) 100%);
  color: #fff;
  text-align: center;
  padding: 80px 24px;
}
.cta-banner h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 800; margin-bottom: 14px; color: #fff; }
.cta-banner p { font-size: 18px; opacity: .85; margin-bottom: 32px; max-width: 520px; margin-left: auto; margin-right: auto; }
.cta-banner .btn-primary { font-size: 17px; padding: 16px 36px; }

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.site-footer {
  background: #0f172a;
  color: rgba(255,255,255,.65);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.4fr;
  gap: 48px;
  padding: 60px 0 48px;
}
.footer-heading {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-col p { font-size: 14px; line-height: 1.75; margin-bottom: 8px; }
.footer-logo { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 6px !important; }
.footer-phone { color: var(--accent) !important; font-weight: 700; font-size: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 14px;
  color: rgba(255,255,255,.6);
  transition: color .15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer-links a::before { content: '→'; font-size: 11px; color: var(--accent); }
.footer-links a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 0;
  font-size: 13px;
  color: rgba(255,255,255,.4);
}

/* ══════════════════════════════════════════════
   SERVICE DETAIL PAGES
══════════════════════════════════════════════ */
.service-hero {
  background: var(--light);
  color: var(--text);
  padding: 72px 0;
  border-bottom: 1px solid var(--border);
}
.service-hero h1 { font-size: clamp(26px, 3.5vw, 42px); font-weight: 800; margin-bottom: 16px; color: var(--text); }
.service-lead { font-size: 18px; color: var(--muted); max-width: 600px; }
.service-detail-hero { padding:52px 0; }
.service-detail-hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.75fr); gap:52px; align-items:center; }
.service-hero-image { margin-top:24px; overflow:hidden; border-radius:var(--radius-card); box-shadow:var(--shadow-lg); background:#fff; }
.service-hero-image img { width:100%; aspect-ratio:4 / 3; object-fit:cover; }
.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.breadcrumb a { color: var(--blue); text-decoration: underline; }

.service-page-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 52px;
  align-items: start;
}
.service-page-image {
  margin: 0 0 32px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--light);
  box-shadow: var(--shadow-md);
}
.service-page-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.service-page-content h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin: 36px 0 12px;
}
.service-page-content h2:first-child { margin-top: 0; }
.service-page-content p { color: var(--muted); font-size: 16px; line-height: 1.8; margin-bottom: 16px; }
.service-content-panel { margin-top:38px; padding:30px; border:1px solid var(--border); border-radius:var(--radius-card); background:#fff; box-shadow:var(--shadow-sm); }
.service-content-panel h2 { margin-top:0; }
.service-content-panel .content-note { margin:22px 0 0; padding:15px 17px; border-left:4px solid var(--accent); background:var(--light); border-radius:0 8px 8px 0; font-size:14px; }
.service-content-panel .content-note strong { color:var(--text); }
.service-area-panel { background:var(--light); }
.area-page-links { margin-top:18px; }
.check-list { list-style: none; padding: 0; margin-bottom: 16px; }
.check-list li {
  padding: 10px 0 10px 28px;
  position: relative;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  border-bottom: 1px solid var(--border);
}
.check-list li:last-child { border-bottom: none; }
.check-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}

.service-page-sidebar { position: sticky; top: 88px; }
.sidebar-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px;
  box-shadow: var(--shadow-md);
  margin-bottom: 20px;
}
.sidebar-card h3 { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.sidebar-card p { color: var(--muted); font-size: 14px; line-height: 1.65; margin-bottom: 16px; }
.sidebar-hours { margin-top: 10px !important; font-size: 13px !important; }
.sidebar-services { list-style: none; padding: 0; margin: 0; }
.sidebar-services li { border-bottom: 1px solid var(--border); }
.sidebar-services li:last-child { border-bottom: none; }
.sidebar-services a { display: block; padding: 9px 0; font-size: 14px; font-weight: 600; color: var(--blue); transition: color .15s; }
.sidebar-services a:hover { color: var(--blue-dk); }
.detail-conversion-card { margin-top:38px; padding:30px; border-radius:var(--radius-card); background:var(--light); border:1px solid var(--border); border-left:4px solid var(--accent); }
.service-page-content .detail-conversion-card h2 { margin-top:0; }
.detail-conversion-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }

.related-services { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.related-services a {
  background: #fff;
  color: var(--blue);
  padding: 7px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  transition: background .15s, border-color .15s;
}
.related-services a:hover { background: var(--light); border-color: var(--blue); }

/* ══════════════════════════════════════════════
   MOBILE CTA BAR
══════════════════════════════════════════════ */
.mobile-cta-bar { display: none; }
@media (max-width: 768px) {
  /* Chrome on Android (135+) with viewport-fit=cover changes
     safe-area-inset-bottom on every scroll as its bottom "chin" slides away.
     Sizing the bar from that dynamic value made the bar and the whole page
     re-layout on each scroll direction change. Size everything from the
     static max inset instead and only move `bottom` (Chrome's recommended
     pattern). iOS has no max-inset variable, so it falls back to its static
     safe-area-inset-bottom. */
  :root {
    --cta-bar-h: 56px;
    --cta-safe-max: env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px));
  }
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) - var(--cta-safe-max));
    z-index: 999;
    box-shadow: 0 -2px 16px rgba(0,0,0,.15);
  }
  .mobile-cta-call {
    flex: 1;
    background: var(--blue);
    color: #fff;
    text-align: center;
    padding: 16px 8px;
    font-size: 14px;
    font-weight: 700;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-cta-quote {
    flex: 1;
    background: var(--accent);
    color: #fff;
    text-align: center;
    padding: 16px 8px;
    font-size: 14px;
    font-weight: 700;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-cta-bar[hidden] { display: none; }
  /* Each button paints its own color into the gesture-bar area, so a
     quote-only bar (no phone) is solid instead of half blue underneath. */
  .mobile-cta-bar > a {
    height: calc(var(--cta-bar-h) + var(--cta-safe-max));
    min-height: 0;
    padding: 8px 8px calc(8px + var(--cta-safe-max));
  }
  body { padding-bottom: calc(var(--cta-bar-h) + var(--cta-safe-max)); }
  /* Let form headings scroll normally instead of passing behind a sticky nav. */
  .site-nav { position: relative; top: auto; }
  #hero-estimate, #contact { scroll-margin-top: 16px; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns:1fr; gap:32px; }
  .hero-content { max-width:720px; }
  .service-page-grid { grid-template-columns: 1fr; }
  .service-page-sidebar { position: static; }
  .process-grid { grid-template-columns:repeat(2,1fr); }
  .process-card:nth-child(2)::after { display:none; }
  .service-detail-hero-grid { grid-template-columns:1fr; gap:32px; }
}
@media (max-width: 768px) {
  .nav-topbar { padding: 6px 0; }
  .nav-toggle-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px 6px;
    flex: 0 0 44px;
    cursor: pointer;
  }
  .nav-toggle-btn span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--text);
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
  }
  .nav-toggle-checkbox:focus-visible + .nav-toggle-btn {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
  }
  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 16px rgba(0,0,0,.08);
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
  }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 15px 20px;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
  }
  .nav-phone { margin: 12px 20px !important; text-align: center; }
  .nav-services-trigger span { display:none; }
  .nav-services-menu { position:static; width:100%; max-height:none; overflow:visible; padding:0 0 4px 14px; border:0; border-radius:0; box-shadow:none; opacity:1; visibility:visible; transform:none; background:transparent; }
  .nav-services-menu li { border-left:2px solid var(--border); }
  .nav-services-menu a { font-size:13px; padding:7px 12px; color:var(--muted); }
  .nav-toggle-checkbox:checked ~ .nav-links {
    max-height: calc(100vh - 68px);
    max-height: calc(100dvh - 68px - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav-toggle-checkbox:checked ~ .nav-toggle-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle-checkbox:checked ~ .nav-toggle-btn span:nth-child(2) { opacity: 0; }
  .nav-toggle-checkbox:checked ~ .nav-toggle-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav .inner { position: relative; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .intro-form-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid > *,
  .intro-form-grid > *,
  .service-page-grid > * { min-width: 0; }
  .hero {
    min-height: 460px;
    min-height: min(620px, calc(100svh - 68px));
    padding: 56px 0;
    background-position: 62% center;
  }
  .hero-grid { padding-top:24px; padding-bottom:24px; }
  .hero-form-card { max-width:620px; width:100%; }
  .hero-social-proof { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 32px; }
  .vm-grid { grid-template-columns: 1fr; }
  .inline-cta-inner { flex-direction: column; text-align: center; }
  .value-strip-inner { flex-wrap: wrap; gap: 0; }
  .value-strip-item { flex: 0 0 50%; border-bottom: 1px solid rgba(255,255,255,.08); }

  .container { padding-left: 20px; padding-right: 20px; }
  .section { padding: 56px 0; }
  .section-header { margin-bottom: 36px; }
  .contact-form { padding: 26px 20px; }
  .service-card,
  .perk-item,
  .trust-item-full { padding: 24px 20px; }
  .inline-cta .btn { width: 100%; text-align: center; }
  .service-gallery { grid-template-columns:repeat(2,1fr); gap:14px; }
  .gallery-card { min-height:180px; }
}

@media (max-width: 480px) {
  .site-nav .inner { height: 64px; }
  .nav-logo-text { font-size: 16px; line-height: 1.2; }
  .nav-links { top: 64px; }

  .hero { min-height: auto; padding: 24px 0; }
  .hero-grid { gap:24px; padding-top:16px; padding-bottom:16px; }
  .hero-form-heading { padding:20px 18px 0; }
  .hero-form-card .contact-form { padding:18px; }
  .hero h1 { font-size: clamp(30px, 10vw, 42px); }
  .hero p { font-size: 16px; line-height: 1.55; }
  .hero-ctas { display: grid; grid-template-columns: 1fr; }
  .hero-ctas .btn { width: 100%; text-align: center; white-space: normal; }

  .value-strip-item {
    flex-basis: 100%;
    justify-content: flex-start;
    border-right: 0;
  }
  .keyword-grid,
  .areas-grid,
  .services-grid,
  .perks-grid,
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
  .mobile-cta-call,
  .mobile-cta-quote { font-size: 13px; }
  .cta-banner { padding: 56px 20px; }
  .cta-banner .btn-primary { width: 100%; padding: 15px 18px; white-space: normal; }
  .service-hero { padding: 52px 0; }
  .map-embed iframe { height: 320px; }
  .process-grid, .service-gallery { grid-template-columns:1fr; }
  .process-card::after { display:none !important; }
  .gallery-card { min-height:220px; }
  .detail-conversion-card { padding:24px 20px; }
  .detail-conversion-actions .btn { width:100%; text-align:center; }
}

@media (max-width: 360px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .nav-logo-text { font-size: 15px; }
  .hero h1 { font-size: 30px; }
  .mobile-cta-call { flex: 1.2; font-size: 12px; }
  .mobile-cta-quote { flex: .8; font-size: 12px; }
}

@media (hover: none) {
  .btn:hover,
  .service-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ══════════════════════════════════════════════
   THEME SYSTEM
   Apply via <body class="theme-[name]">
══════════════════════════════════════════════ */

/* ─── slate-pro ──────────────────────────────
   Deep navy + burnt orange. Playfair Display.
   Foundation / structural. Diagonal hero cut. */
.theme-slate-pro {
  --blue:         #0f2862;
  --blue-dk:      #081642;
  --accent:       #ff5a09;
  --light:        #f4f6fb;
  --border:       #ccd4e8;
  --text:         #0d1e40;
  --muted:        #506080;
  --font-heading: 'Playfair Display', Georgia, serif;
}
.theme-slate-pro .hero {
  clip-path: polygon(0 0, 100% 0, 100% 93%, 0 100%);
  padding-bottom: 80px;
}

/* ─── field-green ────────────────────────────
   Dark teal-green + harvest gold. DM Serif Display.
   Radon / air quality / environmental health. */
.theme-field-green {
  --blue:         #164a41;
  --blue-dk:      #0a2921;
  --accent:       #f1b24a;
  --light:        #f2f7f5;
  --border:       #9dc4b8;
  --text:         #0d2a22;
  --muted:        #3d7060;
  --font-heading: 'DM Serif Display', Georgia, serif;
}
.theme-field-green .service-card {
  box-shadow: none;
  border: 1px solid var(--border);
  border-top: none;
  border-left: 4px solid var(--accent);
  border-radius: 4px;
}
.theme-field-green .service-card:hover {
  box-shadow: 0 4px 16px rgba(45,80,22,.12);
  transform: translateY(-2px);
}

/* ─── rust-trade ─────────────────────────────
   Near-black navy + vivid orange. Barlow Condensed.
   Auto glass / precision trades. Bold, modern. */
.theme-rust-trade {
  --blue:         #12232e;
  --blue-dk:      #080f14;
  --accent:       #ff8928;
  --light:        #f5f7f8;
  --border:       #b0bcc8;
  --text:         #101c24;
  --muted:        #506070;
  --font-heading: 'Barlow Condensed', sans-serif;
}
.theme-rust-trade h1, .theme-rust-trade h2, .theme-rust-trade h3 { letter-spacing: .3px; }
.theme-rust-trade .btn-primary,
.theme-rust-trade .btn-submit,
.theme-rust-trade .nav-phone { border-radius: 2px; text-transform: uppercase; letter-spacing: .6px; }
.theme-rust-trade .service-card { border-radius: 4px; }

/* ─── clean-air ──────────────────────────────
   Royal blue + coral orange. HVAC / heating & cooling.
   Reliable, technical. Balanced, accessible. */
.theme-clean-air {
  --blue:         #1561ad;
  --blue-dk:      #0d3a7a;
  --accent:       #fc5226;
  --light:        #f4f7fc;
  --border:       #b8ccdf;
  --text:         #0d253d;
  --muted:        #456080;
  --font-heading: 'Inter', system-ui, sans-serif;
}
.theme-clean-air .faq-q { display: flex; align-items: flex-start; gap: 10px; }
.theme-clean-air .faq-q::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 6px;
  border-radius: 1px;
}

/* ─── warm-stone ─────────────────────────────
   Dark espresso + copper amber. Lora serif.
   Hot tub / pool / spa. Premium, warm, inviting. */
.theme-warm-stone {
  --blue:         #4a3728;
  --blue-dk:      #2e2118;
  --accent:       #c8873a;
  --light:        #faf7f2;
  --border:       #d4bfa8;
  --text:         #261a0e;
  --muted:        #7a6248;
  --font-heading: 'Lora', Georgia, serif;
}
.theme-warm-stone .section-alt { background: #F5EDE0; }
.theme-warm-stone .testimonials-grid { grid-template-columns: 1fr; max-width: 680px; margin: 0 auto; }
.theme-warm-stone .testimonial-card {
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0 0 32px 0;
}
.theme-warm-stone .testimonial-card:last-child { border-bottom: none; }
.theme-warm-stone .testimonial-text::before {
  content: '\201C';
  font-size: 72px;
  color: var(--accent);
  line-height: .8;
  display: block;
  font-family: Georgia, serif;
  margin-bottom: -8px;
}

/* ─── night-shift ────────────────────────────
   Dark navy + electric blue + amber.
   24/7 emergency trades. Pulsing CTA. */
.theme-night-shift {
  --blue:         #4F8EF7;
  --blue-dk:      #2D5FCC;
  --accent:       #F7C344;
  --light:        #0F1923;
  --border:       #1E2D3D;
  --text:         #E8EDF2;
  --muted:        #8A9EBA;
  --font-heading: 'Barlow', sans-serif;
  background: #0F1923;
  color: #E8EDF2;
}
.theme-night-shift .site-nav {
  background: #0F1923;
  border-bottom-color: var(--border);
  box-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.theme-night-shift .nav-links a:hover { background: #162333; color: var(--blue); }
.theme-night-shift .section { background: #0F1923; }
.theme-night-shift .section-alt { background: #111E2B; }
.theme-night-shift .section-header h2,
.theme-night-shift .intro-text h2,
.theme-night-shift .contact-info h2,
.theme-night-shift .service-card h3,
.theme-night-shift .perk-item h3,
.theme-night-shift .trust-item h3,
.theme-night-shift .faq-q,
.theme-night-shift .testimonial-author,
.theme-night-shift .vm-card h3,
.theme-night-shift .prose-section h2,
.theme-night-shift .prose-section h3 { color: #E8EDF2; }
.theme-night-shift .service-card,
.theme-night-shift .perk-item,
.theme-night-shift .trust-item-full,
.theme-night-shift .contact-form,
.theme-night-shift .sidebar-card,
.theme-night-shift .testimonial-card {
  background: #162333;
  border-color: var(--border);
  box-shadow: none;
}
.theme-night-shift .area-tag,
.theme-night-shift .keyword-tag { background: #162333; border-color: var(--border); color: #CBD5E0; }
.theme-night-shift .vm-card { background: #162333; border: 1px solid var(--border); }
.theme-night-shift .faq-item { border-color: var(--border); }
.theme-night-shift .check-list li { border-color: var(--border); }
.theme-night-shift .site-footer { background: #070d14; }
@keyframes cta-pulse {
  0%,100% { box-shadow: 0 2px 8px rgba(247,195,68,.3); }
  50%      { box-shadow: 0 4px 28px rgba(247,195,68,.6), 0 0 0 8px rgba(247,195,68,.1); }
}
.theme-night-shift .btn-primary { animation: cta-pulse 3s ease-in-out infinite; }

/* ─── prairie-work ───────────────────────────
   Deep forest + bright gold. Merriweather.
   Lawn / exterior / pest / fence. Natural, grounded. */
.theme-prairie-work {
  --blue:         #1b4332;
  --blue-dk:      #0a2218;
  --accent:       #d4a017;
  --light:        #f2f6f3;
  --border:       #9dc4b0;
  --text:         #0d2418;
  --muted:        #3d6a50;
  --font-heading: 'Merriweather', Georgia, serif;
}
.theme-prairie-work .hero::after {
  background: linear-gradient(to right, rgba(44,66,40,.9) 0%, rgba(44,66,40,.55) 55%, rgba(44,66,40,.15) 100%);
}


/* ─── civic-blue ─────────────────────────────
   Deep navy + bright amber. Roboto Slab.
   Foundation / inspection. Authoritative, trustworthy. */
.theme-civic-blue {
  --blue:         #1a3a6b;
  --blue-dk:      #0d2144;
  --accent:       #ffb300;
  --light:        #f4f7fc;
  --border:       #b8ccdf;
  --text:         #0d1e3c;
  --muted:        #456080;
  --font-heading: 'Roboto Slab', Georgia, serif;
}
.theme-civic-blue .footer-bottom { border-top: 3px solid var(--accent); }

/* ─── silver-ridge ───────────────────────────
   Blue-grey charcoal + vivid orange. Raleway.
   Windows / siding / exterior. Modern, premium. */
.theme-silver-ridge {
  --blue:         #2e3a4e;
  --blue-dk:      #1a2232;
  --accent:       #e85d04;
  --light:        #f5f6f8;
  --border:       #b0bccf;
  --text:         #18222e;
  --muted:        #506070;
  --font-heading: 'Raleway', sans-serif;
}
.theme-silver-ridge .service-card {
  border-top-width: 3px;
  transition: border-top-width .15s, box-shadow .2s, transform .2s;
}
.theme-silver-ridge .service-card:hover { border-top-width: 6px; }

/* ─── hearth-red ─────────────────────────────
   Crimson + safety orange. Oswald.
   Emergency trades. Urgent action-oriented. */
.theme-hearth-red {
  --blue:         #1d1145;
  --blue-dk:      #100930;
  --accent:       #fc4a1a;
  --light:        #f5f4f9;
  --border:       #b8b0d4;
  --text:         #120c2e;
  --muted:        #5a5080;
  --font-heading: 'Oswald', sans-serif;
}
.theme-hearth-red h1, .theme-hearth-red h2 { letter-spacing: .4px; }
.theme-hearth-red .btn-outline { background: var(--accent); border-color: var(--accent); color: #fff; }
.theme-hearth-red .service-card { border-radius: 4px; }
.emergency-bar { display: none; }
.theme-hearth-red .emergency-bar {
  display: block;
  background: var(--accent);
  color: #fff;
  text-align: center;
  padding: 9px 24px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;
}
.theme-hearth-red .emergency-bar a { color: #fff; text-decoration: underline; }

/* ══════════════════════════════════════════════
   CROSS-CARD ALIGNMENT (CSS subgrid)
   Every card in a grid row shares the same row tracks, so titles, price
   chips, descriptions, "Included" boxes, and links line up across the row
   no matter how long each card's text is. Cards missing a part (no photo,
   no price) leave that track empty instead of shifting everything up.
   Browsers without subgrid keep the previous stacked layout.
══════════════════════════════════════════════ */
@supports (grid-template-rows: subgrid) {
  /* Service cards: media | kicker | title | price | text | included | link */
  .services-grid > .service-card {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
  }
  .services-grid > .service-card > .service-card-img { grid-row: 1; }
  .services-grid > .service-card > .section-kicker { grid-row: 2; }
  .services-grid > .service-card > :is(h2, h3) { grid-row: 3; }
  .services-grid > .service-card > .service-price { grid-row: 4; }
  .services-grid > .service-card > p { grid-row: 5; }
  .services-grid > .service-card > .service-included { grid-row: 6; }
  .services-grid > .service-card > .service-link { grid-row: 7; }

  /* Photo cards wrap their text in .service-card-body: make it a nested
     subgrid over tracks 2-7 so its children align with sibling cards. */
  .services-grid > .service-card > .service-card-body {
    grid-row: 2 / span 6;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .service-card-body > .section-kicker { grid-row: 1; }
  .service-card-body > :is(h2, h3) { grid-row: 2; }
  .service-card-body > .service-price { grid-row: 3; }
  .service-card-body > p { grid-row: 4; }
  .service-card-body > .service-included { grid-row: 5; }
  .service-card-body > .service-link { grid-row: 6; }

  /* Keep chips and links their natural width; text sits at the top of its
     track; the Included box fills its track so all boxes are equal height. */
  .services-grid .service-price,
  .services-grid .service-link,
  .services-grid .section-kicker { justify-self: start; }
  .services-grid .service-price { align-self: start; }
  .services-grid .service-card p { align-self: start; }
  .services-grid .service-included { align-self: stretch; }
  .services-grid .service-link { align-self: end; }

  /* Trust, perk, mission, and process cards: icon/number | title | body */
  :is(.trust-grid > .trust-item, .perks-grid > .perk-item, .vm-grid > .vm-card, .process-grid > .process-card) {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
  }
  :is(.trust-item > .trust-icon, .process-card > span) { grid-row: 1; }
  :is(.trust-item, .perk-item, .vm-card, .process-card) > h3 { grid-row: 2; align-self: start; }
  :is(.trust-item, .perk-item, .vm-card, .process-card) > p { grid-row: 3; align-self: start; }
}

/* ══════════════════════════════════════════════
   BALANCED CARD ROWS
   Pick the column count from the number of cards so rows come out even
   (6 → 3+3, 4 → 4, 5 → 3+2 centered, 7 → 4+3 centered) instead of leaving
   a single orphan card on its own row. Scoped to full-width grids; grids
   inside a sidebar layout keep auto-fit.
══════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .container > :is(.services-grid, .trust-grid, .perks-grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .container > :is(.services-grid, .trust-grid, .perks-grid):has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .container > :is(.services-grid, .trust-grid, .perks-grid):is(:has(> :nth-child(3):last-child), :has(> :nth-child(6):last-child), :has(> :nth-child(9):last-child)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .container > :is(.services-grid, .trust-grid, .perks-grid):has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .container > :is(.services-grid, .trust-grid, .perks-grid):has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .container > :is(.services-grid, .trust-grid, .perks-grid):has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: 2 / span 2; }
  .container > :is(.services-grid, .trust-grid, .perks-grid):has(> :nth-child(7):last-child) { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .container > :is(.services-grid, .trust-grid, .perks-grid):has(> :nth-child(7):last-child) > * { grid-column: span 2; }
  .container > :is(.services-grid, .trust-grid, .perks-grid):has(> :nth-child(7):last-child) > :nth-child(5) { grid-column: 2 / span 2; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .container > :is(.services-grid, .trust-grid, .perks-grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .container > :is(.services-grid, .trust-grid, .perks-grid) > * { grid-column: span 2; }
  .container > :is(.services-grid, .trust-grid, .perks-grid) > :last-child:nth-child(odd) { grid-column: 2 / span 2; }
}

/* ══════════════════════════════════════════════
   POLISH LAYER (all themes)
   Brings every theme up to the finish of the slate-pro sites while keeping
   each theme's own colors and fonts:
   1. Readable text on accent fills. Light accents (amber, gold, harvest)
      get dark text instead of washed-out white.
   2. Angled hero bottom edge on desktop.
   3. Tighter tracking on large headings.
   4. Consistent hero CTA sizing and a stronger secondary button.
══════════════════════════════════════════════ */
:root { --on-accent: #fff; }
.theme-civic-blue   { --on-accent: #1a1405; }
.theme-field-green  { --on-accent: #1d1608; }
.theme-prairie-work { --on-accent: #1a1405; }
.theme-night-shift  { --on-accent: #1a1405; }
body:not([class*="theme-"]) { --on-accent: #1a1405; }
/* Copper reads muddy behind white; deepen it so white text passes contrast. */
.theme-warm-stone   { --accent: #a8641f; }

.btn-primary,
.service-price,
.mobile-cta-quote { color: var(--on-accent); }
.nav-phone { color: var(--on-accent) !important; }
.theme-hearth-red .btn-outline { color: var(--on-accent); }

/* Angled hero edge (slate-pro keeps its own steeper cut) */
@media (min-width: 769px) {
  .hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%); padding-bottom: 44px; }
}

/* Heading tracking: display sizes look tighter and more deliberate.
   Condensed themes keep their positive tracking. */
body:not(.theme-rust-trade):not(.theme-hearth-red) :is(.hero h1, .section-header h2, .service-hero h1) { letter-spacing: -0.015em; }
.section-header h2 { text-wrap: balance; }

/* Hero CTAs: equal height, secondary button with a subtle glass fill */
.hero-ctas .btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 26px; }
.hero .btn-outline { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.hero .btn-outline:hover { background: rgba(255,255,255,.16); border-color: #fff; }

/* Responsive hero photo (set as CSS vars by partials/hero.html) */
.hero { background-image: var(--hero-lg, none); }
@media (max-width: 768px) { .hero { background-image: var(--hero-sm, var(--hero-lg, none)); } }

/* Mobile call bar: action label first, number underneath */
.mobile-cta-call { flex-direction: column; gap: 1px; line-height: 1.15; }
.mobile-cta-main { font-size: 16px; font-weight: 800; letter-spacing: .2px; }
.mobile-cta-sub { font-size: 12px; font-weight: 600; opacity: .85; }

/* After a form submit: turn the thank-you into a call prompt */
.form-success-call-text { margin: 10px 0 14px; color: inherit; }
.form-success-call { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; text-decoration: none; }

/* ══════════════════════════════════════════════
   GOOGLE REVIEWS (real reviews only; see CLAUDE.md "Google reviews")
══════════════════════════════════════════════ */
.hero-rating { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 7px 16px 7px 12px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 14px; text-decoration: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-rating:hover { background: rgba(255,255,255,.2); }
.hero-rating-stars { color: #fbbf24; letter-spacing: 1px; font-size: 15px; }
.hero-rating strong { font-weight: 800; }
.reviews-section { background: var(--light); }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.review-card { margin: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 26px 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; }
.review-stars { color: #fbbf24; letter-spacing: 2px; font-size: 16px; }
.review-card blockquote { margin: 0; color: var(--text); font-size: 15px; line-height: 1.7; flex: 1; }
.review-card figcaption { color: var(--muted); font-size: 14px; font-weight: 700; }
.reviews-more { text-align: center; margin-top: 22px; font-size: 14px; font-weight: 700; }
.reviews-more a { color: var(--blue); }
.reviews-cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* ══════════════════════════════════════════════
   SIMPLE HERO (default; a site can opt out with hero_style: full)
   Same H1 and subtitle text; fewer competing elements and more breathing
   room, which is what reads as "sleek" in a first-impression scan.
══════════════════════════════════════════════ */
.hero-simple .hero-grid { padding-top: 76px; padding-bottom: 76px; }
.hero-simple h1 { margin-bottom: 20px; }
.hero-simple .hero-content > p { font-size: 18px; max-width: 30em; opacity: .9; }
.hero-simple .hero-ctas { margin-bottom: 26px; }
.hero-simple .hero-chips { border-top: 0; padding-top: 0; gap: 6px 22px; }
.hero-simple .hero-chip { padding: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 14px; font-weight: 600; opacity: .92; }
.hero-simple .turnstile-disclaimer { font-size: 11px !important; opacity: .7; line-height: 1.4; }
@media (max-width: 768px) {
  .hero-simple .hero-grid { padding-top: 40px; padding-bottom: 40px; }
}

/* Mobile navigation uses explicit toggles rather than hover/focus state. */
.nav-services-trigger {
  border: 0; background: transparent; color: inherit; font: inherit;
  font-size: 14px; font-weight: 600; padding: 10px 12px; cursor: pointer;
}
.nav-services-trigger[aria-expanded="true"] ~ .nav-services-menu {
  opacity: 1; visibility: visible; transform: none;
}
.nav-toggle-btn [data-menu-icon="close"] { display: none; }
@media (max-width: 768px) {
  .nav-toggle-btn { border: 0; background: transparent; color: var(--text); align-items: center; padding: 8px; }
  .nav-toggle-btn[aria-expanded="true"] [data-menu-icon="open"] { display: none; }
  .nav-toggle-btn[aria-expanded="true"] [data-menu-icon="close"] { display: block; }
  .nav-links { top: 100%; }
  .nav-toggle-checkbox:checked ~ .nav-links { max-height: var(--mobile-menu-space, calc(100dvh - 100px)); padding-bottom: env(safe-area-inset-bottom); }
  .nav-services-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--border); }
  .nav-services-trigger span { display: inline-block; transform: none !important; }
  .nav-services-trigger[aria-expanded="true"] span { transform: rotate(180deg) !important; }
  .nav-services-menu { display: none; }
  .nav-services-trigger[aria-expanded="true"] ~ .nav-services-menu { display: block; }
  body[data-nav-open] { overflow: hidden; }
  body[data-nav-open] .mobile-cta-bar { display: none; }
}

/* Owner introduction (about section, about page) */
.owner-intro { font-weight: 600; color: var(--text); }
.service-hero .owner-intro { margin-bottom: 10px; }

/* Westminster's contact-focused hero. Data attribute survives class obfuscation. */
[data-hero-layout="focused"] { clip-path: none; min-height: 600px; }
[data-hero-layout="focused"]::after { background: linear-gradient(90deg,rgba(8,20,31,.94),rgba(8,20,31,.78) 55%,rgba(8,20,31,.38)); }
[data-hero-layout="focused"] .hero-grid { gap: 48px; padding-top: 48px; padding-bottom: 48px; }
[data-hero-layout="focused"] h1 { font-size: clamp(36px,4.4vw,60px); line-height: 1.06; max-width: 12ch; margin-bottom: 22px; }
[data-hero-layout="focused"] .hero-content > p { opacity: 1; max-width: 34em; font-size: 19px; line-height: 1.6; margin-bottom: 26px; }
[data-hero-layout="focused"] .hero-rating { background: transparent; border: 0; padding: 0; border-radius: 0; margin-bottom: 22px; backdrop-filter: none; }
[data-hero-layout="focused"] .hero-ctas { gap: 12px; margin-bottom: 22px; }
[data-hero-layout="focused"] .hero-ctas .btn-primary { flex-direction: column; gap: 3px; padding: 12px 24px; }
[data-hero-layout="focused"] .hero-ctas small { font-size: 13px; font-weight: 500; }
[data-hero-layout="focused"] .hero-chips { gap: 8px; }
[data-hero-layout="focused"] .hero-chip { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.25); border-radius: 6px; padding: 8px 11px; opacity: 1; }
[data-hero-layout="focused"] .hero-form-card { border-radius: 16px; border: 1px solid rgba(255,255,255,.25); overflow: hidden; }
[data-hero-layout="focused"] .hero-form-heading h2 { font-size: 26px; }
@media (max-width: 768px) {
  [data-hero-layout="focused"] { min-height: 0; padding: 0; }
  [data-hero-layout="focused"] .hero-grid { padding-top: 28px; padding-bottom: 32px; gap: 28px; }
  [data-hero-layout="focused"] h1 { font-size: clamp(34px,8.5vw,46px); max-width: 15ch; margin-bottom: 16px; }
  [data-hero-layout="focused"] .hero-rating { margin-bottom: 16px; }
  [data-hero-layout="focused"] .hero-content > p { font-size: 17px; line-height: 1.5; margin-bottom: 20px; }
  [data-hero-layout="focused"] .hero-ctas { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
  [data-hero-layout="focused"] .hero-ctas .btn { min-height: 48px; }
  [data-hero-layout="focused"] .hero-chip { font-size: 12px; padding: 6px 8px; }
}