/* ============================================================================
   Miracle Maker Cleaning — shared stylesheet
   ----------------------------------------------------------------------------
   Single source of truth for the site's design system and components.
   Load it in <head> BEFORE any page-specific <style> block:

     <link rel="stylesheet" href="/assets/css/site.css" />

   Used by: _templates/seo-page.html.tpl, /services/, /service-areas/, and every
   page generated from the template. The 20 legacy city pages and 6 service pages
   still carry their own inline copies — migrate them to this file when touched.

   Sections
     1. Design tokens          7. Split section (Benefits / Why)
     2. Base + layout          8. FAQ
     3. Buttons                9. Lead form
     4. Navigation            10. Map
     5. Hero                  11. Nearby pills
     6. Card hub              12. Service grid / chips (hub pages)
                              13. County + city lists (areas hub)
                              14. Footer
============================================================================ */

/* ===== 1. DESIGN TOKENS ================================================== */
:root {
  --bg: #ffffff;
  --bg-alt: #f0f7ff;
  --bg-dark: #06122c;
  --primary: #0b2f6e;
  --accent: #1a7fdb;
  --accent-h: #1567b5;
  --accent-lt: #dbeeff;
  --cta: #ff5722;
  --cta-h: #e64a19;
  --text: #111827;
  --muted: #6b7280;
  --gold: #f59e0b;
  --border: #e5e7eb;
  --r: 12px;
  --sh-sm: 0 2px 12px rgba(2, 62, 74, 0.07);
  --sh-md: 0 4px 24px rgba(2, 62, 74, 0.1);
  --sh-lg: 0 12px 48px rgba(2, 62, 74, 0.15);
}

/* ===== 2. BASE + LAYOUT ================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
  height: auto;
}
a {
  text-decoration: none;
  color: inherit;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}
.section {
  padding: 88px 0;
}
.section-alt {
  background: var(--bg-alt);
}

.eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
h1 {
  font-family: "DM Serif Display", serif;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1.13;
}
h2 {
  font-family: "DM Serif Display", serif;
  font-size: clamp(1.65rem, 3.8vw, 2.6rem);
  line-height: 1.2;
}
h3 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}
.intro {
  color: var(--muted);
  max-width: 600px;
  margin-top: 14px;
  font-size: 1.05rem;
  line-height: 1.7;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 4px;
  z-index: 9999;
  background: var(--primary);
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
}
.skip-link:focus {
  left: 4px;
}

/* ===== 3. BUTTONS ======================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: all 0.22s;
  white-space: nowrap;
  text-decoration: none;
}
.btn-cta {
  background: var(--cta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 87, 34, 0.28);
}
.btn-cta:hover {
  background: var(--cta-h);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(255, 87, 34, 0.38);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.45);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.7);
}
.btn-outline {
  background: #fff;
  color: var(--primary);
  border: 2px solid var(--border);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-white {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}

/* ===== 4. NAVIGATION ===================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 300;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 13px 0;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nav-logo {
  font-family: "DM Serif Display", serif;
  font-size: 1.2rem;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.nav-logo img {
  height: 36px;
  width: auto;
}
.nav-logo-text span {
  color: var(--accent);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.nav-links a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  transition: color 0.18s;
}
.nav-links a:hover {
  color: var(--accent);
}
.nav-links a[aria-current="page"] {
  color: var(--accent);
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-phone {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-phone:hover {
  color: var(--accent);
}
@media (max-width: 860px) {
  .nav-links {
    display: none;
  }
}
@media (max-width: 560px) {
  .nav-phone {
    display: none;
  }
  .nav-logo-text {
    font-size: 1rem;
  }
}

/* Mobile sticky CTA bar */
.mobile-cta-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 400;
  background: var(--primary);
  padding: 12px 20px;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 640px) {
  .mobile-cta-bar {
    display: flex;
  }
  .mobile-cta-bar .btn {
    flex: 1;
    justify-content: center;
    padding: 12px 16px;
    font-size: 0.88rem;
  }
}

/* ===== 5. HERO =========================================================== */
.hero {
  background: linear-gradient(140deg, #0b2f6e 0%, #071840 55%, #020b25 100%);
  padding: 96px 0 84px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 127, 219, 0.18) 0%, transparent 68%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -80px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 127, 219, 0.09) 0%, transparent 68%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(26, 127, 219, 0.13);
  border: 1px solid rgba(26, 127, 219, 0.4);
  color: #64b5f6;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 28px;
}
.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64b5f6;
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(1.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .badge-dot {
    animation: none;
  }
}
.hero h1 {
  color: #fff;
  margin-bottom: 22px;
}
.hero h1 em {
  font-style: italic;
  color: #64b5f6;
}
.hero-sub {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.12rem;
  max-width: 590px;
  margin-bottom: 38px;
  line-height: 1.72;
}
.hero-sub a {
  color: #7cc4ff;
  font-weight: 700;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
  font-weight: 500;
}
.t-check {
  width: 22px;
  height: 22px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.t-check::after {
  content: "✓";
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
}
@media (max-width: 480px) {
  .hero {
    padding: 60px 0 120px;
  }
}

/* ===== 6. CARD HUB ======================================================= */
/* county → city pages (location cards) | city → location-service pages (service cards) */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}
@media (max-width: 860px) {
  .hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .hub-grid {
    grid-template-columns: 1fr;
  }
}
.hub-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 0.25s,
    transform 0.25s,
    border-color 0.25s;
}
.hub-card:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-4px);
  border-color: rgba(26, 127, 219, 0.35);
}
.hub-thumb {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--accent-lt);
}
.hub-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hub-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.hub-body h3 {
  font-size: 1.02rem;
}
/* Service cards carry a description; location cards do not — so on location cards
   the heading takes the slack instead, keeping card heights aligned. */
.hub-body p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.65;
  flex: 1;
}
.hub-card--location .hub-body h3 {
  flex: 1;
}
.hub-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  transition: gap 0.2s;
}
.hub-card:hover .hub-cta {
  gap: 9px;
}

/* ===== 7. SPLIT SECTION — Benefits (image left) / Why (image right) ======= */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.split-media {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
}
.split-reverse .split-media {
  order: 2;
}
@media (max-width: 860px) {
  .split-reverse .split-media {
    order: 0;
  }
}
.split-content h2 {
  margin-bottom: 14px;
}
.split-sub {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.75;
  margin-bottom: 26px;
}
.split-sub a {
  color: var(--accent);
  font-weight: 700;
}
.split-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
}
.split-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.split-bullets li::before {
  content: "✓";
  background: var(--accent);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 3px;
}
.split-bullets strong {
  display: block;
  font-size: 0.97rem;
  font-weight: 700;
  margin-bottom: 3px;
}
.split-bullets span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.65;
}
.split-bullets span a {
  color: var(--accent);
  font-weight: 700;
}
.split-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ===== 8. FAQ ============================================================ */
/* The 760px column is centred in the 1160px container (it used to sit flush
   left, leaving ~400px of dead space on the right), and the section heading is
   centred over it so the two line up. Question and answer text stay
   left-aligned inside the column — centred body copy hurts readability. */
#faq .eyebrow,
#faq h2 {
  text-align: center;
}
.faq-wrap {
  max-width: 760px;
  margin: 44px auto 0;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  font-weight: 700;
  font-size: 0.97rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
/* The "+" is drawn as two bars rather than the text glyph in the markup: a
   glyph is centred by its line box, not its ink, so the inherited line-height
   made the line box overflow the 28px circle and the "+" sat high and left.
   Bars centre exactly on both axes and rotate cleanly into the "x". */
.faq-toggle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-lt);
  color: var(--accent);
  position: relative;
  flex-shrink: 0;
  font-size: 0; /* hides the literal "+" in the markup */
  line-height: 1;
  transition:
    transform 0.25s,
    background 0.25s,
    color 0.25s;
}
.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.faq-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
details[open] .faq-toggle {
  transform: rotate(45deg);
  background: var(--accent);
  color: #fff;
}
.faq-answer {
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.75;
  padding-bottom: 22px;
}
.faq-answer a {
  color: var(--accent);
  font-weight: 600;
}

/* ===== 9. LEAD FORM ====================================================== */
.form-section {
  background: var(--bg-dark);
  padding: 88px 0;
}
.form-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 860px) {
  .form-inner {
    grid-template-columns: 1fr;
  }
}
.form-left h2 {
  color: #fff;
  margin-bottom: 14px;
}
.form-left p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.04rem;
  line-height: 1.72;
  margin-bottom: 32px;
}
.form-trust-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.form-trust-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.92rem;
}
.form-trust-list li::before {
  content: "✓";
  background: var(--accent);
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 900;
  flex-shrink: 0;
}
.form-contact-row {
  display: flex;
  gap: 20px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.form-contact-item {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.88rem;
}
.form-contact-item a {
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s;
}
.form-contact-item a:hover {
  color: var(--accent);
}
.form-right {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.form-right-header {
  background: var(--accent);
  padding: 18px 24px;
}
.form-right-header h3 {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 3px;
}
.form-right-header p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
}
.form-fallback {
  padding: 18px 24px;
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}
.form-fallback p {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 10px;
}

/* ===== 10. MAP =========================================================== */
.map-wrap {
  margin-top: 32px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
}
.map-wrap iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}
@media (max-width: 600px) {
  .map-wrap iframe {
    height: 320px;
  }
}
.map-desc {
  color: var(--muted);
  max-width: 720px;
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.75;
}
.map-desc a {
  color: var(--accent);
  font-weight: 700;
}

/* ===== 12. SERVICE GRID / CHIPS — /services/ hub ========================= */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}
@media (max-width: 860px) {
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }
}
.svc-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 0.25s,
    transform 0.25s,
    border-color 0.25s;
}
.svc-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.svc-card:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-4px);
  border-color: rgba(26, 127, 219, 0.35);
}
.svc-card:hover::after {
  transform: scaleX(1);
}
.svc-icon {
  font-size: 2.2rem;
  margin-bottom: 14px;
}
.svc-card h3 {
  margin-bottom: 10px;
}
.svc-card p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.65;
  flex: 1;
}
.svc-list {
  list-style: none;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.svc-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.83rem;
  color: var(--muted);
}
.svc-list li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 900;
  font-size: 0.75rem;
  flex-shrink: 0;
  margin-top: 3px;
}
.svc-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 18px;
  transition: gap 0.2s;
}
.svc-card:hover .svc-link {
  gap: 9px;
}
.svc-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.svc-chip {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 10px 18px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--primary);
  transition: all 0.2s;
}
.svc-chip:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ===== 13. COUNTY + CITY LISTS — /service-areas/ hub ===================== */
.county-block {
  margin-top: 44px;
}
.county-block:first-of-type {
  margin-top: 40px;
}
.county-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.county-name {
  font-family: "DM Serif Display", serif;
  font-size: 1.35rem;
  color: var(--primary);
}
.county-count {
  background: var(--accent-lt);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 100px;
}
.city-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .city-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 660px) {
  .city-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .city-grid {
    grid-template-columns: 1fr;
  }
}
.city-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: all 0.2s;
}
.city-card:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.city-card span {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--primary);
  transition: color 0.2s;
}
.city-card:hover span {
  color: #fff;
}
.city-card em {
  font-style: normal;
  color: var(--accent);
  font-weight: 800;
  font-size: 0.95rem;
  transition: color 0.2s;
}
.city-card:hover em {
  color: #fff;
}
.areas-note {
  margin-top: 36px;
  font-size: 0.92rem;
  color: var(--muted);
}
.areas-note a {
  color: var(--accent);
  font-weight: 700;
}

/* ===== 14. FOOTER ======================================================== */
.footer {
  background: #020e15;
  color: rgba(255, 255, 255, 0.65);
  padding: 60px 0 28px;
}
.footer-grid {
  display: grid;
  /* brand + 4 link columns */
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 40px;
}
@media (max-width: 1080px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
.footer-brand-name {
  font-family: "DM Serif Display", serif;
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 12px;
}
.footer-brand p {
  font-size: 0.87rem;
  line-height: 1.72;
  margin-bottom: 22px;
}
.social-row {
  display: flex;
  gap: 10px;
}
.social-icon {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 700;
  transition:
    background 0.2s,
    color 0.2s;
}
.social-icon:hover {
  background: var(--accent);
  color: #fff;
}
.footer-col h4 {
  color: #fff;
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-col ul {
  list-style: none;
}
.footer-col li {
  margin-bottom: 10px;
}
.footer-col li a {
  font-size: 0.86rem;
  transition: color 0.18s;
}
.footer-col li a:hover {
  color: var(--accent);
}
.f-contact li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.86rem;
  margin-bottom: 10px;
}
.f-contact li a {
  color: rgba(255, 255, 255, 0.65);
}
.f-contact li a:hover {
  color: var(--accent);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  font-size: 0.79rem;
}
.footer-bottom a {
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.18s;
}
.footer-bottom a:hover {
  color: var(--accent);
}
.f-legal {
  display: flex;
  gap: 16px;
}

/* ===== 15. RESPONSIVE REFINEMENTS =======================================
   Measured with a headless browser at 320/360/390/480/560/640/768/860/1024/
   1280/1440px. Each rule below fixes a defect found at those widths.
========================================================================= */

/* The fixed mobile CTA bar overlays the end of the page — reserve room for it
   so the footer's last rows are never hidden underneath. */
@media (max-width: 640px) {
  body {
    padding-bottom: 76px;
  }
}

/* Long CTA labels ("Get a Free Cobb County Quote") overflowed the viewport at
   320-390px because .btn is nowrap. Let them wrap and go full width instead. */
@media (max-width: 480px) {
  .btn {
    white-space: normal;
    text-align: center;
    justify-content: center;
    padding: 14px 22px;
  }
  .hero-actions,
  .split-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn,
  .split-actions .btn {
    width: 100%;
  }
  .hero {
    padding: 60px 0 64px;
  }
}

/* The nav's "Get a Free Quote" button pushed .nav-inner past the viewport
   below ~420px. Below 640px the fixed bottom bar already offers Call + Quote,
   so the nav button is redundant there. */
@media (max-width: 640px) {
  .nav-right .btn {
    display: none;
  }
}

/* Tap targets: footer/contact links measured 17-26px tall. Give them a 32px
   minimum on touch widths. Inline prose links (FAQ answers, .split-sub) are
   left alone — they're part of a sentence, not standalone controls. */
@media (max-width: 860px) {
  .nav-logo,
  .nav-phone {
    min-height: 40px;
    align-items: center;
  }
  .footer-col li a,
  .f-contact li a,
  .footer-bottom a,
  .form-contact-item a,
  .hub-cta,
  .svc-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }
  .footer-col li,
  .f-contact li {
    margin-bottom: 4px;
  }
}

/* The support@ email address is a single unbreakable token — allow it to break
   rather than force a horizontal scrollbar on narrow screens. */
.form-contact-item,
.f-contact li,
.map-desc,
.faq-answer {
  overflow-wrap: anywhere;
}

/* Respect reduced-motion for the decorative hover lifts, not just the badge. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hub-card:hover,
  .svc-card:hover,
  .city-card:hover,
  .btn-cta:hover {
    transform: none;
  }
}

/* ===== 16. PENDING-IMAGE PLACEHOLDER ====================================
   Used where copy is wired but Karan's photo hasn't arrived yet. Keeps the
   split section's two-column proportions so the page reviews correctly, with
   no broken-image icon. Replace the div with the real <img> when it lands.
========================================================================= */
.split-media--pending {
  aspect-ratio: 4/3;
  border-radius: 16px;
  background: var(--accent-lt);
  border: 1px dashed rgba(26, 127, 219, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ===== 17. NAV DROPDOWN MENUS ============================================
   CSS-only (hover + :focus-within, so keyboard works too) — this site ships
   no JavaScript. Used by the Services and Service Areas nav items.
========================================================================= */
.nav-links li.has-menu {
  position: relative;
}
.nav-caret {
  font-size: 0.62rem;
  margin-left: 4px;
  transition: transform 0.2s;
  display: inline-block;
}
.nav-links li.has-menu:hover .nav-caret,
.nav-links li.has-menu:focus-within .nav-caret {
  transform: rotate(180deg);
}
.nav-menu {
  position: absolute;
  top: 100%;
  left: -12px;
  min-width: 244px;
  margin-top: 13px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--sh-lg);
  padding: 8px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 320;
}
/* invisible bridge so the menu survives the cursor crossing the nav padding */
.nav-menu::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 0;
  right: 0;
  height: 13px;
}
.nav-links li.has-menu:hover .nav-menu,
.nav-links li.has-menu:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-menu li {
  margin: 0;
}
.nav-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.nav-menu a:hover,
.nav-menu a:focus-visible {
  background: var(--accent-lt);
  color: var(--accent);
}
.nav-menu .nav-menu-all {
  color: var(--accent);
}
.nav-menu .nav-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}
@media (prefers-reduced-motion: reduce) {
  .nav-menu { transition: none; }
  .nav-caret { transition: none; }
}

/* ===== 18. FOOTER MAP (Google Business Profile embed) ====================
   Sits between the footer link columns and the bottom bar. Keyless embed via
   the GBP CID, so there is no API key to leak or expire.
========================================================================= */
.footer-map {
  padding-top: 28px;
}
.footer-map iframe {
  width: 100%;
  height: 260px;
  border: 0;
  display: block;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}
@media (max-width: 600px) {
  .footer-map iframe { height: 210px; }
}

/* ===== 19. NAV FIT, 861-1023px =========================================
   The Services / Service Areas dropdown labels are wider than the old nav
   items, so the bar wrapped to two lines just above the 860px collapse
   point. Tighten spacing through that band rather than hiding the links —
   below 861px they are already hidden, and the fixed CTA bar only appears
   at 640px, so hiding earlier would leave a gap with no navigation at all.
========================================================================= */
@media (min-width: 861px) and (max-width: 1023px) {
  .nav-links { gap: 15px; }
  .nav-links a { font-size: 0.8rem; }
  .nav-right { gap: 8px; }
  .nav-phone { font-size: 0.82rem; }
  .nav-right .btn { padding: 12px 16px; font-size: 0.83rem; }
  .nav-logo-text { font-size: 1.05rem; }
}
