/* Stylesheet matching doctorZgaragedoor.com layout & branding */

/* 1. Fonts -- self-hosted, not imported from Google.
   This was an `@import url(https://fonts.googleapis.com/...)`, which is only
   discoverable after this file has downloaded and parsed. On throttled mobile
   that put the font CSS request at 2245 ms, the files after it, and the two
   resulting reflows at 3709 and 3788 ms -- 0.050 of the homepage's 0.055 CLS
   (BACKLOG B0b). It also made Google a render-blocking third party for all 572
   pages. The rules below are generated: `python3 make_fonts.py --go`. */
/* BEGIN generated by make_fonts.py -- do not edit by hand */
/* Poppins and Barlow, self-hosted. SIL OFL 1.1 -- see assets/fonts/OFL.txt.
   Generated by `python3 make_fonts.py --go`. Editing these rules by hand
   means the next run reverts you; change FAMILIES in that script instead. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/barlow-v13-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/barlow-v13-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/barlow-v13-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/barlow-v13-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/barlow-v13-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/barlow-v13-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/barlow-v13-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/barlow-v13-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/barlow-v13-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/barlow-v13-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins-v24-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins-v24-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins-v24-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins-v24-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-v24-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-v24-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins-v24-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins-v24-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/poppins-v24-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/poppins-v24-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/poppins-v24-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/poppins-v24-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* END generated by make_fonts.py */

/* 2. Core variables matching Hello Elementor site palette */
:root {
  --primary: #233343;       /* Brand dark blue-gray */
  --primary-light: #2d3e50; /* Light cards backdrop */
  --accent: #9A433E;        /* Brand crimson red */
  --accent-hover: #80332f;  /* Brand crimson hover color */
  --bg-light: #f3f4f6;      /* Off-white sections */
  --text-main: #f8fafc;     /* Clean text on dark sections */
  --text-dark: #233343;     /* Dark headings */
  --text-muted: #cbd5e1;    /* Light gray text */
  --text-body-dark: #4b5563;/* Slate body copy on white */
  --card-border: rgba(255, 255, 255, 0.08);
  --glass-bg: rgba(35, 51, 67, 0.9);
  --font-title: 'Poppins', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, 0.25);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. Base Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  background-color: var(--primary);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Text for screen readers only — off-screen but still announced. The address
   autocomplete's status region uses it to say how many suggestions arrived
   (app.js §3). NOT `display: none` and NOT `visibility: hidden`: both of those
   remove the element from the accessibility tree, which is the opposite of what
   this class is for. The 1px clip-path box is the standard technique that keeps
   it announced while occupying no visual space. */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

/* Premium Inline Links styling for SEO, accessibility and visibility */
p a, 
.hero-split-description a, 
.hero-split-local-links a, 
.section-subtitle a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(154, 67, 62, 0.4);
  text-underline-offset: 4px;
  font-weight: 600;
  transition: var(--transition);
}

p a:hover, 
.hero-split-description a:hover, 
.hero-split-local-links a:hover, 
.section-subtitle a:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent-hover);
}

/* Accessible high-contrast inline links for dark backgrounds */
.hero-split-description a,
.banner-highlight p a,
.section-reviews .section-subtitle a,
.section-diagnostics p a {
  color: #e5736e; /* Bright warm coral for high readability on slate backgrounds */
  text-decoration: underline;
  text-decoration-color: rgba(229, 115, 110, 0.4);
}

.hero-split-description a:hover,
.banner-highlight p a:hover,
.section-reviews .section-subtitle a:hover,
.section-diagnostics p a:hover {
  color: #ffffff;
  text-decoration-color: #ffffff;
}


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

.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Common Section Badge style matching their dividers */
.section-badge {
  display: inline-block;
  background: rgba(154, 67, 62, 0.1);
  color: var(--accent);
  padding: 0.35rem 0.9rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.25rem;
}

.bg-white {
  background-color: #ffffff;
  color: var(--text-dark);
}

/* 4. Header & Navigation styles */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--glass-bg);
  border-bottom: 1px solid var(--card-border);
  transition: var(--transition);
  padding: 0.85rem 0; /* Shrunk from 1.25rem to tighten the layout */
}

header.scrolled {
  padding: 0.45rem 0; /* Shrunk from 0.65rem */
  background: rgba(35, 51, 67, 0.98);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

header.scrolled .brand-logo {
  height: 56px;
  min-width: 56px;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-logo {
  height: 70px;
  width: auto;
  min-width: 70px;
  display: inline-block;
  object-fit: contain;
  background-color: #ffffff;
  padding: 1px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: var(--transition);
}

.brand-logo:hover {
  transform: scale(1.05);
}

.desktop-nav {
  margin-right: auto;
  margin-left: 2.5rem; /* Shrunk from 5rem to tighten */
}

.desktop-nav ul {
  display: flex;
  list-style: none;
  gap: 0.85rem; /* Shrunk from 1.25rem */
  align-items: center;
}

.desktop-nav ul a {
  font-size: 0.86rem; /* Shrunk from 0.95rem */
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.desktop-nav ul a:hover {
  color: #fff;
}

/* Navigation Dropdowns matching Hello Elementor post styles */
.desktop-nav li {
  position: relative;
}

.dropdown-trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--primary-light);
  min-width: 180px; /* Shrunk from 200px */
  box-shadow: var(--shadow-lg);
  border-radius: 8px;
  padding: 0.5rem 0; /* Shrunk padding */
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
  border: 1px solid var(--card-border);
  z-index: 9999;
}

/* The dropdown is itself a <ul> inside .desktop-nav, so `.desktop-nav ul` (:182)
   matches it and hands it `align-items: center` — a rule written for the
   horizontal top-level bar. That centred every link *and* shrink-wrapped it, so
   each row started at a different x and only the width of the label was
   clickable: 119px of a 180px row did nothing on "C.H.I.". Stretch gives every
   link the full menu width and one shared 17px text inset.

   The selector must carry `.desktop-nav`. A bare `.dropdown-menu` is 0-1-0
   against `.desktop-nav ul`'s 0-1-1 and loses the cascade silently — the
   declaration sits in the stylesheet looking correct while the computed value
   stays `center`. Measured, not assumed. */
.desktop-nav .dropdown-menu {
  align-items: stretch;
}

/* `visibility: hidden` takes the links out of the tab order, so on desktop all
   47 submenu links were unreachable by keyboard — the tab walk went straight
   from one trigger to the next. `:focus-within` opens the menu for a keyboard
   user exactly as hover does for a mouse. */
.desktop-nav li:hover .dropdown-menu,
.desktop-nav li:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu li a {
  padding: 0.35rem 1rem; /* Shrunk from 0.5rem 1.25rem */
  display: block;
  font-size: 0.78rem !important; /* Shrunk from 0.85rem */
  font-weight: 500 !important;
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus-visible {
  background: var(--accent);
  color: white !important;
}

/* Authored rather than left to the browser default: an `outline: none` added
   anywhere later would otherwise remove the only focus indicator silently. */
.dropdown-menu li a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 1rem; /* Shrunk from 1.5rem */
  margin-left: 1.5rem; /* Shrunk from 2rem */
}

.phone-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 0.96rem; /* Shrunk from 1.1rem */
  color: #ffffff;
}

.phone-number-text {
  white-space: nowrap;
}

.phone-icon-svg {
  width: 16px; /* Shrunk from 20px */
  height: 16px;
}

.btn-emergency {
  background-color: var(--accent);
  color: white;
  padding: 0.45rem 1rem; /* Shrunk from 0.6rem 1.25rem */
  border-radius: 50px;
  font-family: var(--font-title);
  font-size: 0.82rem; /* Shrunk from standard */
  font-weight: 800;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(154, 67, 62, 0.35);
  transition: var(--transition);
}

.btn-emergency:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
}

/* 5. Split Hero Section */
.hero-split {
  padding: 7.5rem 2rem 2.5rem 2rem;
  background-color: #1b2533; /* Dark premium brand slate base */
  background: linear-gradient(90deg, rgba(35, 51, 67, 0.88) 0%, rgba(35, 51, 67, 0.55) 50%, rgba(35, 51, 67, 0.20) 100%),
              url('assets/companies/garage-door-doctors/photos/premium_garage_door.webp') no-repeat center center / cover;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.home-hero {
  background: linear-gradient(90deg, rgba(35, 51, 67, 0.72) 0%, rgba(35, 51, 67, 0.40) 50%, rgba(35, 51, 67, 0.08) 100%),
              url('assets/companies/garage-door-doctors/photos/premium_garage_door.webp') no-repeat center center / cover !important;
  padding-top: 8.5rem; /* Shift the text down a tiny bit */
  padding-bottom: 3.5rem; /* Extra padding to accommodate the overlapping reviews ribbon below */
  min-height: calc(100vh - 7.5rem) !important; /* Force hero + reviews ribbon to take exactly 100% viewport height */
}

.hero-split-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: center;
  width: 100%;
}

.hero-split-subtitle {
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.hero-split-title {
  font-size: clamp(2rem, 3.5vw, 2.85rem);
  line-height: 1.15;
  margin-bottom: 0.85rem;
  font-weight: 900;
  color: #fff;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.hero-split-description {
  font-size: clamp(0.95rem, 1.25vw, 1.05rem);
  color: var(--text-muted);
  margin-bottom: 0.85rem;
  max-width: 650px;
}

.hero-split-local-links {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  max-width: 650px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-family: var(--font-title);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.03);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  width: fit-content;
}

.hero-split-local-links a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--accent);
  font-weight: 700;
}

.hero-split-local-links a:hover {
  color: var(--accent);
  text-decoration-color: #fff;
}

.hero-split-buttons {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.btn-hero-primary {
  background-color: var(--accent);
  color: white;
  padding: 0.85rem 2rem;
  border-radius: 8px;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 4px 15px rgba(154, 67, 62, 0.4);
  transition: var(--transition);
}

.btn-hero-primary:hover {
  background-color: var(--accent-hover);
  transform: translateY(-2px);
}

.btn-hero-phone {
  background-color: transparent;
  color: white;
  padding: 0.85rem 2rem;
  border-radius: 8px;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1rem;
  border: 2px solid rgba(255,255,255,0.25);
  transition: var(--transition);
}

.btn-hero-phone:hover {
  border-color: var(--accent);
  background: rgba(154, 67, 62, 0.1);
  transform: translateY(-2px);
}

.hero-service-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  max-width: 580px;
}

.shortcut-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  padding: 0.85rem 1.25rem;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  backdrop-filter: blur(4px);
  transition: var(--transition);
}

.shortcut-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.hero-split-right {
  display: flex;
  justify-content: flex-end;
  align-self: center; /* Center the video/photo card vertically next to the text */
  margin-top: -6rem; /* Keep the video box shifted downwards on desktop */
  width: 100%;
  margin-left: auto;
}

/* Retain the original -18.5rem for Cable & Drum repair page on desktop, but reset on mobile/tablet to prevent overlap */
@media (min-width: 1024px) {
  .hero-split-right:has(.cable-panel-box) {
    margin-top: -18.5rem;
  }
}
@media (max-width: 1023px) {
  .hero-split-right:has(.cable-panel-box) {
    margin-top: 0 !important;
  }
}

.hero-image-card {
  position: relative;
  border-radius: 20px;
  overflow: visible; /* Allows mascot to pop out slightly for 3D depth */
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  padding: 1.5rem;
  box-shadow: var(--shadow-lg), 0 20px 40px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: var(--transition);
}

.hero-image-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg), 0 25px 50px rgba(154, 67, 62, 0.2);
}

.hero-main-img {
  width: 100%;
  height: 245px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.5s ease;
}

img[src*="opener_repair_5.webp"] {
  height: 360px !important;
  object-position: center 25% !important;
}

.hero-image-card:hover .hero-main-img {
  transform: scale(1.02);
}

.hero-mascot-overlay {
  position: absolute;
  bottom: -20px;
  right: -25px;
  width: 150px;
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45));
  z-index: 10;
  animation: bounceMascot 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bounceMascot {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}

.hero-trust-badge {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  background: rgba(23, 36, 49, 0.95);
  backdrop-filter: blur(8px);
  padding: 0.65rem 0.95rem;
  border-radius: 8px;
  font-weight: 800;
  color: #fff;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-left: 4px solid var(--accent);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
  z-index: 5;
}

.trust-check {
  color: #22c55e;
  font-weight: 900;
  font-size: 1.1rem;
}

/* 6. Brands Scrolling Marquee style */
.brands-section {
  padding: 2.5rem 0;
  background-color: var(--bg-light);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  text-align: center;
}

.brands-subtitle {
  font-size: 0.75rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 900;
  display: block;
  margin-bottom: 0.5rem;
}

.brands-title {
  font-size: 1.85rem;
  font-weight: 900;
  margin-bottom: 2rem;
  color: var(--text-dark);
}

.marquee-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  padding: 1rem 0;
}

.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: scrollInfinite 45s linear infinite;
  will-change: transform;
}

/* Spacing lives on the items, not as a flex `gap`, so the track's width is
   exactly two identical logo sets. That makes translateX(-50%) land precisely
   on the seam. A `gap` would leave the loop half a gap short and visibly jump. */
.marquee-track a {
  display: inline-block;
  flex-shrink: 0;
  padding-right: 4.5rem;
}

.marquee-container:hover .marquee-track {
  animation-play-state: paused;
}

/* The strip draws real manufacturer logos, and real logos are not one shape.
   Chamberlain's wordmark is 13:1 — at a fixed 38px height it wanted to render
   494px wide and dominate the whole row — while Raynor's arrives as a small
   mark centred in a square canvas. The height sets the common baseline, the
   max-width stops a long wordmark taking over, and `object-fit: contain` means
   a capped logo shrinks rather than squashes. The built-in whitespace is dealt
   with at build time instead of here: `make_marquee_logos.py` trims each logo
   to its own ink (Raynor was 76% padding) and writes logos/marquee/<slug>.png.
   Do not point this strip back at logos/brand-logo-N.* — the .svg files in that
   set are hand-drawn approximations and several show the wrong brand entirely. */
.marquee-track img {
  height: 38px;
  width: auto;
  max-width: 150px;
  opacity: 0.95;
  transition: opacity 0.3s ease, transform 0.3s ease;
  object-fit: contain;
}

.marquee-track img:hover {
  opacity: 1;
  transform: scale(1.05);
}

@keyframes scrollInfinite {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Respect a visitor's system setting for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    transform: none;
  }
  .marquee-container {
    overflow-x: auto;
  }
  /* The second set of logos exists only so translateX(-50%) lands on a seam. With
     the animation off it is every brand listed twice in a row the reader scrolls
     by hand. This block had the first two declarations since the reduced-motion
     work and not this one, which is why a reader who asks their OS to stop motion
     got a strip of 24 logos for 12 brands. Same pairing as the
     `pointer: coarse` block at the end of this file — see the long note there. */
  /* Selector deliberately `.marquee-track > a.marquee-dupe`, not `.marquee-dupe`.
     The class alone is specificity (0,1,0) and loses to `.marquee-track a`
     (0,1,1) higher up in this file and to `.marquee-track > a` in this same
     block — so the plain class applied nothing and the strip still held 24
     anchors for 12 brands. It measured as fixed because the check that matters
     (does the target move?) was green; the dupes needed their own count. */
  .marquee-track > a.marquee-dupe {
    display: none;
  }
}

/* 7. Service Split details */
.highlight-split {
  padding: 2.5rem 2rem;
}

.highlight-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center;
}

.highlight-content h2 {
  font-size: 2.25rem;
  margin-bottom: 1.25rem;
  line-height: 1.2;
}

.highlight-content p {
  color: var(--text-body-dark);
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}

.highlight-image {
  display: flex;
  justify-content: center;
}

.highlight-portrait {
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.btn-highlight-call {
  background-color: var(--accent);
  color: white;
  padding: 0.75rem 1.75rem;
  border-radius: 8px;
  font-family: var(--font-title);
  font-weight: 800;
  display: inline-block;
  box-shadow: 0 4px 15px rgba(154, 67, 62, 0.25);
  transition: var(--transition);
}

.btn-highlight-call:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
}

.highlight-cta-group {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.btn-highlight-quote {
  background-color: var(--primary);
  color: white;
  padding: 0.75rem 1.75rem;
  border-radius: 8px;
  font-family: var(--font-title);
  font-weight: 800;
  display: inline-block;
  border: 1px solid var(--primary);
  transition: var(--transition);
}

.btn-highlight-quote:hover {
  background-color: transparent;
  color: var(--primary);
  transform: translateY(-1px);
}

.reverse .highlight-container {
  direction: rtl;
}

.reverse .highlight-content,
.reverse .highlight-image {
  direction: ltr;
}

.bullet-list-crimson {
  list-style: none;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: left;
}

.bullet-list-crimson li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.bullet-list-crimson li svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

.bullet-list-crimson li span {
  font-size: 1.025rem;
  font-weight: 700;
  color: var(--text-dark);
}

/* 8. Peace of mind highlight banner */
.banner-highlight {
  background: radial-gradient(circle, var(--primary-light) 0%, var(--primary) 100%);
  padding: 2.5rem 2rem;
  text-align: center;
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}

.banner-container {
  max-width: 800px;
  margin: 0 auto;
}

.banner-container h4 {
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.banner-container h2 {
  font-size: 2.5rem;
  margin-bottom: 1.25rem;
}

.banner-container p {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 2rem;
  line-height: 1.7;
}

.btn-banner-quote {
  background-color: var(--accent);
  color: white;
  padding: 0.85rem 2.25rem;
  border-radius: 8px;
  font-family: var(--font-title);
  font-weight: 800;
  display: inline-block;
  box-shadow: 0 4px 15px rgba(154, 67, 62, 0.4);
}

.btn-banner-quote:hover {
  background-color: var(--accent-hover);
  transform: translateY(-2px);
}

/* 9. Specialized 10 Services grid styles */
.section-services {
  padding: 2.5rem 2rem;
  background-color: #ffffff !important; /* Premium White Background */
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.section-services .section-title {
  color: var(--text-dark) !important;
}

.section-services .section-subtitle {
  color: var(--text-body-dark) !important;
}

.section-services .service-detail-card {
  background: #f8fafc !important; /* Soft Light Grey Card */
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.section-services .service-detail-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06) !important;
}

.section-services .service-detail-card h3 {
  color: var(--text-dark) !important;
}

.section-services .service-detail-card h3 a {
  color: var(--text-dark) !important;
  transition: var(--transition);
}

.section-services .service-detail-card h3 a:hover {
  color: var(--accent) !important;
}

.section-services .service-detail-card p {
  color: var(--text-body-dark) !important;
}

.section-services .service-detail-card p a {
  color: var(--accent) !important;
  font-weight: 600;
}

.section-services .service-detail-card p a:hover {
  color: var(--accent-hover) !important;
}

.section-services .service-detail-card .know-more {
  color: var(--accent) !important;
}

.section-services .service-detail-card .know-more:hover {
  color: var(--accent-hover) !important;
}


.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem auto;
}

.section-title {
  font-size: clamp(1.6rem, 5vw, 2.5rem);
  font-weight: 900;
  margin-bottom: 1rem;
}

.section-subtitle {
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* B7 — `text-center` was written on nine section containers across the five
   templates and never defined as a utility. The only rule that matched it was
   `.section-dispatch .section-container.text-center …`, so the markup got the
   centring it asked for in exactly one section and was silently ignored
   everywhere else. Three section headers were rendering left-aligned as a
   result, on every page type that carries them: the diagnostics header, the
   dispatch-crew header and the homeowner-reviews header. (The containers
   written as `section-header text-center` or `accordion-intro text-center`
   were already centred by their own class, so they do not move.)

   Centring is applied to the container rather than to the headings, because a
   section header is not only headings — the badge, the CTA link and the mascot
   image are inline elements, and `text-align` on an inline element does
   nothing; it has to come from the parent.

   The block children are then reset, because these containers hold the section
   *body* as well as its header — the card grids, the FAQ `<details>` list, the
   map. `initial` is what they inherit today, so card content is provably
   unchanged and only the header block moves. */
.section-container.text-center,
.section-header.text-center,
.accordion-intro.text-center {
  text-align: center;
}

.text-center > div,
.text-center > details,
.text-center > ul,
.text-center > ol,
.text-center > table,
.text-center > form,
.text-center > section,
.text-center > article,
.text-center > aside {
  text-align: initial;
}

.services-grid-detailed {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 1024px) {
  .services-grid-detailed {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .services-grid-detailed {
    grid-template-columns: 1fr;
  }
}

.service-detail-card.service-hidden {
  display: none !important;
}

.services-grid-detailed.expanded .service-detail-card.service-hidden {
  display: flex !important;
  animation: fadeInUp 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.services-toggle-wrapper {
  text-align: center;
  margin-top: 3.5rem;
}

.btn-toggle-services {
  background-color: var(--accent);
  color: white;
  padding: 0.9rem 2.5rem;
  border-radius: 50px;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.05rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(154, 67, 62, 0.35);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-toggle-services:hover {
  background-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(154, 67, 62, 0.5);
}

.service-detail-card {
  background: var(--primary);
  border: 1px solid var(--card-border);
  padding: 1.5rem;
  border-radius: 12px;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 230px;
}

.service-detail-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.service-icon-bullet {
  font-size: 1.75rem;
  display: block;
  margin-bottom: 0.5rem;
}

.service-detail-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.35rem;
}

.service-detail-card p {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.45;
  margin-bottom: 1rem;
}

.service-detail-card .know-more {
  color: var(--accent);
  font-weight: 800;
  font-family: var(--font-title);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

.service-detail-card .know-more:hover {
  color: #fff;
}

/* 10. County Accordion Showcase style */
.accordion-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3rem auto;
}

.accordion-intro h2 {
  font-size: 2.5rem;
  color: var(--text-dark);
  margin-bottom: 1rem;
}

.accordion-intro p {
  color: var(--text-body-dark);
  font-size: 1.05rem;
}

.nested-accordion-tree {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.county-accordion {
  background: var(--bg-light);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  overflow: hidden;
  transition: var(--transition);
}

.accordion-header {
  padding: 1.25rem 2rem;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  user-select: none;
}

.accordion-header::-webkit-details-marker {
  display: none;
}

.accordion-header .chevron {
  font-size: 0.85rem;
  color: var(--accent);
  transition: transform 0.3s ease;
}

.county-accordion[open] .accordion-header {
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: white;
}

.county-accordion[open] .accordion-header .chevron {
  transform: rotate(180deg);
}

.accordion-content {
  padding: 1.75rem 2rem;
  background: white;
}

.accordion-links-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.accordion-links-grid a {
  font-weight: 700;
  color: var(--text-body-dark);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.accordion-links-grid a:hover {
  color: var(--accent);
  transform: translateX(3px);
}

/* 11. Dispatch Hub & OpenStreetMap Autocompletion Search style */
.section-dispatch {
  padding: 2.5rem 2rem;
  background-color: var(--primary);
}

/* Two columns and a full-width row, not three columns. Measured at 1440px on
   `service-areas/lodi/` before the change: the three tracks ended at 430px,
   855px and 1012px — the mascot card was mostly empty space, the map column ran
   200px past both its neighbours, and the form in the middle had **356px** to
   work with, which wrapped its own heading ("Request service in / Lodi"), its
   field labels ("PREFERRED SERVICE / DATE") and left the date and time inputs
   too narrow to read their own placeholders. The form is the point of the
   section, and it was the part being squeezed. */
.dispatch-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2.5rem;
  align-items: flex-start;
}

/* The map, the shop address and the hours drop underneath and span both
   columns. `1 / -1` rather than `1 / 3` so this keeps working if a track is
   ever added.

   Inside that row they sit SIDE BY SIDE, not stacked. Stacking them full-width
   was the first attempt and it took the section from 1012px tall to 1765px —
   a 1200px-wide map, then an address bar, then seven hours rows each with
   ~800px of empty space between the day and the time. Now: the map on the left
   with the address bar laid over its bottom edge, the hours beside it, and the
   whole row is one map's height. */
.dispatch-grid > .dispatch-map-box {
  grid-column: 1 / -1;
}

/* 🔴 The third card is NOT a map on 65 of the 554 pages, and the first version
   of this change did not know that. On the 18 brand pages it is
   `.dispatch-faqs-card`, which was left out of the rule above, auto-placed into
   column 1 row 2, and rendered 466px wide and 1,587px tall with the whole right
   half of the grid empty — `#contact` went to 2,465px against a city page's
   1,271px. Same treatment, and the eight <details> go two-up rather than
   running down one narrow column. */
.dispatch-grid > .dispatch-faqs-card {
  grid-column: 1 / -1;
}

.dispatch-faqs-card .faq-accordion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  column-gap: 2.5rem;
  align-items: start;
}

/* The two-up split belongs only to the pages that have an actual map — the 489
   city pages. On the other 65 the same class holds a "Why Choose the Doctor'z"
   checklist, and an unscoped `display: grid` here was landing on them too. It
   looked harmless only because that markup carries an inline
   `display: flex`, which beats a stylesheet — so the day somebody tidies that
   inline style out of `generate-services.js`, 65 pages would silently become
   two-column grids. Scope it to the thing it is actually about. */
.dispatch-grid > .dispatch-map-box:has(> .map-wrapper) {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: stretch;
}

/* The map and the address bar are given the SAME grid cell. The address bar is
   pushed to the bottom of it and painted over the map, which is what buys the
   height back — it costs nothing vertically now. */
.dispatch-grid > .dispatch-map-box > .map-wrapper,
.dispatch-grid > .dispatch-map-box > .dispatch-address-bar {
  grid-column: 1;
  grid-row: 1;
}

/* The map has to FILL that cell, not sit at its fixed 420px inside it. With the
   base height left alone the cell stretches to whichever column is taller, the
   map stops short, and the address bar lands on white underneath it instead of
   over the map — which is what the first attempt at this looked like. The
   iframe is already `height="100%"`, so it follows. */
.dispatch-grid > .dispatch-map-box > .map-wrapper {
  height: 100%;
  min-height: 380px;
}

.dispatch-grid > .dispatch-map-box > .dispatch-address-bar {
  align-self: end;
  z-index: 2;
  /* Opaque enough to read against any part of a map — roads, water, parkland.
     Not a flat white: the blur keeps it reading as an overlay rather than a
     band that has clipped the map short. */
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(27, 37, 51, 0.08);
  border-radius: 12px;
  padding: 1.1rem 1.5rem;
  /* Inset, not flush. Sitting on the map's bottom edge covered the Google logo,
     "Terms" and "View larger map" — which the Maps Platform terms require to be
     visible, and which is also why the flush version read as a map clipped
     short rather than a card floating on one. Leaves 36px of map clear. */
  margin: 0 1rem 2.25rem;
}

/* The mascot card is 412px against a 767px form, leaving ~355px of dead left
   column, and it is deliberately left that way. Stretching it to match was
   tried and rendered: because `.mascot-img-container` is `max-width: 180px`
   with `object-fit: contain`, the drawing does not grow with the box — you get
   a 767px white card with a 180px mascot floating in the middle of it, which
   reads worse than the gap between two cards did. Filling it properly would
   mean enlarging the mascot on all 554 pages, which is a different change from
   fixing the form. If this is revisited, the fix is the image size, not
   `align-self`. */

.dispatch-grid > .dispatch-map-box > .dispatch-hours-card {
  grid-column: 2;
  grid-row: 1;
  /* It is a column of the row now, not a card stacked under one — the top
     margin and the outer border would draw a box inside a box. */
  margin-top: 0;
  border-radius: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  /* Sean, 2026-08-21: "the Dispatch & Service Hours content is aligned center,
     it should be aligned top." It was `center`, which centred the heading and
     table against the full height of the map beside them — the taller the map
     column grew, the further the hours floated from their own heading's top
     edge. The stacked rule below already said flex-start; this is the same
     answer for the two-column case, so the two agree now. */
  justify-content: flex-start;
}

/* Two columns inside the row need room for both. Measured on `service-areas/lodi/`
   at 390px with this left on: the map came out **125px wide and 723px tall** and
   the address bar 125px wide and **494px** tall, its two lines of text wrapped
   into a ribbon. 768px was survivable but tight (map 421, hours 281). So below
   900px the row goes back to stacking — which costs nothing there, because the
   whole `.dispatch-grid` is already one column under the 1024px rule.
   The overlay comes off with it: laid over a 300px-tall phone map the address
   bar covered half of it. */
@media (max-width: 900px) {
  /* `:has(> .map-wrapper)` has to be repeated here. Without it this rule is
     (0,3,1) against the two-column rule's (0,4,1) — `:has()` takes the
     specificity of its argument — so the media query silently lost and the
     phone layout stayed two-up at a 199px-wide map. A media query does not
     outrank anything; it still has to win on specificity. */
  .dispatch-grid > .dispatch-map-box:has(> .map-wrapper) {
    grid-template-columns: 1fr;
  }

  .dispatch-grid > .dispatch-map-box > .map-wrapper {
    grid-row: 1;
    height: 300px;
    min-height: 0;
  }

  .dispatch-grid > .dispatch-map-box > .dispatch-address-bar {
    grid-column: 1;
    grid-row: 2;
    align-self: auto;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 1.5rem;
    /* It is a row here, not a card floating on the map — the inset and the
       border above belong to the overlay only. */
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .dispatch-grid > .dispatch-map-box > .dispatch-hours-card {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start;
    /* Stacked, the accent rule reads as a left border again rather than as the
       divider between two columns. */
    border-top: 1px solid rgba(27, 37, 51, 0.08);
  }
}

.dispatch-grid.no-map {
  grid-template-columns: 0.9fr 1.1fr;
}

/* Chief Mascot Diagnostic Specialist Layout */
.dispatch-mascot-card {
  background: var(--primary-light);
  border: 1px solid var(--card-border);
  padding: 2.5rem 2rem;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.dispatch-mascot-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg), 0 0 25px rgba(154, 67, 62, 0.15);
}

.mascot-img-container {
  width: 100%;
  max-width: 180px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.4));
  transition: var(--transition);
}

.dispatch-mascot-card:hover .mascot-img-container {
  transform: scale(1.05) rotate(2deg);
}

.dispatch-mascot-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mascot-status-bubble {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1.15rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
  width: 100%;
}

.mascot-status-bubble strong {
  color: #fff;
}

.status-pulse-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #22c55e;
}

.status-pulse-green {
  width: 10px;
  height: 10px;
  background-color: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 8px #22c55e;
  display: inline-block;
  animation: pulseMascotStatus 2s infinite;
}

@keyframes pulseMascotStatus {
  0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { transform: scale(1.2); opacity: 0.5; box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.dispatch-form-card,
.dispatch-faqs-card {
  background: var(--primary-light);
  border: 1px solid var(--card-border);
  padding: 3rem;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}

.dispatch-form-card h3 {
  font-size: 1.85rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.dispatch-form-card p {
  color: var(--text-muted);
  margin-bottom: 2rem;
  font-size: 0.9rem;
}

.form-group {
  margin-bottom: 1.25rem;
  position: relative;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.9rem 1.25rem;
  border-radius: 8px;
  background: var(--primary);
  border: 1px solid var(--card-border);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  transition: var(--transition);
}

.form-group select {
  cursor: pointer;
  appearance: none;
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(154,67,62,0.15);
}

/* OpenStreetMap suggestions dropdown styled exactly like Google cloud Places Autocomplete */
.autocomplete-container {
  position: relative;
}

.suggestions-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background: #ffffff; /* Clean pure white background */
  border: 1px solid #d1d5db; /* Light grey border matching Google Autocomplete */
  border-radius: 8px;
  max-height: 250px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
  padding: 0.25rem 0;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6; /* Thin divider lines */
  transition: all 0.2s ease;
  text-align: left;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover,
.suggestion-item.active {
  background-color: #f3f4f6; /* Light grey hover background */
}

.suggestion-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.suggestion-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.suggestion-text .primary-text {
  font-size: 0.925rem;
  font-weight: 700;
  color: #111827; /* Dark text for high contrast */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-title);
}

.suggestion-text .secondary-text {
  font-size: 0.8rem;
  color: #6b7280; /* Muted gray text */
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.05rem;
}

/* Powered by Google branding footer styles */
.suggestions-google-attribution {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.4rem 1.25rem;
  background: #f9fafb;
  border-top: 1px solid #f3f4f6;
  font-size: 0.725rem;
  color: #9ca3af;
  font-family: 'Roboto', sans-serif;
  gap: 0.15rem;
  font-weight: 500;
  text-transform: lowercase;
  user-select: none;
}

.suggestions-google-attribution .g-text-blue { color: #4285F4; font-weight: 800; font-family: 'Poppins', sans-serif; }
.suggestions-google-attribution .g-text-red { color: #EA4335; font-weight: 800; font-family: 'Poppins', sans-serif; }
.suggestions-google-attribution .g-text-yellow { color: #FBBC05; font-weight: 800; font-family: 'Poppins', sans-serif; }
.suggestions-google-attribution .g-text-green { color: #34A853; font-weight: 800; font-family: 'Poppins', sans-serif; }

/* Date and Time Scheduling Row Grid */
.form-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 480px) {
  .form-row-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Verified Address Error Enforcement styles */
.address-error-msg {
  color: #f87171; /* High contrast red on dark background */
  font-size: 0.825rem;
  font-weight: 700;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  text-align: left;
}

.input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3) !important;
}

.btn-dispatch-submit {
  width: 100%;
  padding: 1rem;
  background-color: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(154, 67, 62, 0.35);
  transition: var(--transition);
}

.btn-dispatch-submit:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
}

.btn-dispatch-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* The dispatch form's reply, in the page instead of in an alert().
   Replaces a window.alert() that claimed a technician had been assigned to the
   customer's address — see BACKLOG G3. A status line can be read twice, styled,
   announced by a screen reader (role=status) and asserted on from a headless
   browser; a modal dialog can do none of those and blocks the page while it is
   open. Both states carry a phone number, because the failure state is the one
   where the customer most needs it. */
.dispatch-status {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 8px;
  border-left: 4px solid;
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: left;
}

/* Opaque fills and dark text, NOT a translucent tint over var(--text-main).
   The first version of this used the site's light-on-dark text colours and was
   invisible: this same form sits on a WHITE card on the 489 city pages and on a
   dark band on the 10 additions pages, so anything inheriting the page's text
   colour is unreadable on one of them. A confirmation the customer cannot read
   is the same bug as no confirmation at all. Caught by a screenshot — the unit
   and browser tests both passed while it was unreadable. */
.dispatch-status.is-ok {
  background: #ecfdf5;
  border-left-color: #16a34a;
  color: #14532d;
}

.dispatch-status.is-error {
  background: #fef2f2;
  border-left-color: #dc2626;
  color: #7f1d1d;
}

.dispatch-status strong { color: inherit; }

.dispatch-status a {
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
}

.dispatch-status-sub {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  opacity: 0.85;
}

/* Right Side: Map & Address box */
.dispatch-map-box {
  background: var(--primary-light);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.map-wrapper {
  height: 420px;
  width: 100%;
  /* A Google Maps embed is one of the most commonly blocked third-party frames,
     and when it does not load this is a 680x380 pure-white hole inside a white
     card with the address bar floating on nothing. */
  background: #e9edf0;
}

.dispatch-address-bar {
  padding: 1.75rem 2.25rem;
}

.dispatch-address-bar h4 {
  font-size: 1.2rem;
  margin-bottom: 0.35rem;
}

.dispatch-address-bar p {
  color: var(--text-muted);
  font-size: 0.925rem;
}

/* 12. Footer structures */
footer {
  background: #19242f;
  /* The padding moved onto .footer-grid so the legal bar below it can be
     full-bleed. Putting it there rather than on a new wrapper is deliberate:
     every footer already has a .footer-grid, so a page not yet re-templated
     keeps its padding instead of collapsing to zero. */
  padding: 0;
  border-top: 1px solid var(--card-border);
}

.footer-grid {
  max-width: 1264px; /* 1200 content + 2 x 32 padding, so the measure is unchanged */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr) 1.2fr;
  gap: 2rem;
  padding: 40px 32px 32px;
  /* The old `border-bottom` drew a hairline under 64px of empty space, closing
     off nothing — it was written for a `.footer-bottom` element that no page
     has ever had. The legal bar occupies that space now. */
}

.footer-logo {
  height: 72px;
  width: auto;
  object-fit: contain;
  background-color: #ffffff;
  padding: 4px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-bottom: 1.5rem;
  transition: var(--transition);
}

.footer-logo:hover {
  transform: scale(1.05);
}

.footer-col-main p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.license-footer {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 800;
  text-transform: uppercase;
  display: block;
}

/* Footer Social Trust Icons */
.footer-social-icons {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  margin-top: 1rem;
}

.social-icon-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: var(--transition);
}

.social-icon-link svg {
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-icon-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(154, 67, 62, 0.45);
  transform: translateY(-2px);
}

.social-icon-link:hover svg {
  transform: scale(1.15);
}

.footer-col h4 {
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.6rem;
  color: #ffffff;
}

.footer-col h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2.5px;
  background-color: var(--accent);
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-col ul a {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.footer-col ul a:hover {
  color: #ffffff;
  transform: translateX(2px);
}

.footer-col ul li {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.footer-phone-link {
  color: #fff !important;
  font-weight: 800;
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom p {
  font-size: 0.825rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* 12. Frequently Asked Questions (FAQ) Styles */
.section-faq {
  padding: 2.5rem 2rem;
  background-color: var(--bg-light);
  border-top: 1px solid rgba(0,0,0,0.06);
}

.faq-container {
  max-width: 850px;
  margin: 0 auto;
}

.faq-accordion-tree {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 3rem;
}

.faq-item {
  background: white;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  overflow: hidden;
  transition: var(--transition);
}

.faq-item[open] {
  box-shadow: var(--shadow-md);
  border-color: rgba(154, 67, 62, 0.15);
}

.faq-question {
  padding: 1.35rem 2rem;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  user-select: none;
}

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

.faq-question .chevron {
  font-size: 0.85rem;
  color: var(--accent);
  transition: transform 0.3s ease;
}

.faq-item[open] .faq-question {
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.faq-item[open] .faq-question .chevron {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 1.75rem 2rem;
  background: white;
}

.faq-answer p {
  color: var(--text-body-dark);
  font-size: 1rem;
  line-height: 1.65;
}

.faq-answer strong {
  color: var(--text-dark);
}

/* 13. Responsive Layout Adjustments */
@media (max-width: 992px) {
  .tech-reviews-showcase {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
}
@media (max-width: 1024px) {
  .highlight-container,
  .dispatch-grid,
  .dispatch-grid.no-map {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  /* Stacked, the hours table spans the whole column and throws "Monday" and
     "24 Hours / Emergency Services" ~490px apart at 899px. Capping the measure
     takes the time cell from 476px to 308px and back onto one line. */
  .dispatch-hours-card .hours-table {
    max-width: 420px;
  }

  .highlight-content {
    order: 1;
  }

  .highlight-image {
    order: 2;
  }

  .reverse .highlight-container {
    direction: ltr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

@media (max-width: 600px) {
  .hero-split-container {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .hero-split {
    padding-top: 6rem;
  }

  .home-hero {
    min-height: auto !important; /* Reset viewport min-height on mobile */
  }

  .hero-split-left {
    text-align: center;
  }

  .hero-split-buttons {
    justify-content: center;
  }

  .hero-split-right {
    margin-top: 0; /* Reset margin on mobile/tablet to avoid overlapping */
  }

  .hero-service-shortcuts {
    margin: 0 auto;
  }
}

@media (max-width: 991px) {
  .desktop-nav {
    display: none !important; /* Hide navigation menus on tablet & mobile */
  }
}

@media (max-width: 1250px) and (min-width: 992px) {
  .desktop-nav {
    margin-left: 2rem;
  }
  .desktop-nav ul {
    gap: 0.85rem;
  }
  .desktop-nav ul a {
    font-size: 0.88rem;
  }
  .nav-cta {
    gap: 1rem;
    margin-left: 1.5rem;
  }
  .phone-link {
    font-size: 1rem;
  }
  .btn-emergency {
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 640px) {
  header {
    padding: 0.9rem 0;
  }
  
  .desktop-nav {
    display: none; /* Hide header menus on mobile devices */
  }

  .nav-cta .btn-emergency {
    display: none !important; /* Offload emergency dispatch button from mobile header */
  }

  .phone-link {
    font-size: 1rem; /* Guarantee phone fits on extremely narrow mobile viewports */
  }

  .hero-split-title {
    font-size: 2.35rem;
  }

  .hero-split-description {
    font-size: 1rem;
  }

  .hero-service-shortcuts {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .brand-logo {
    height: 64px;
    min-width: 64px;
  }

  .footer-logo {
    height: 56px;
  }

  .dispatch-form-card,
  .dispatch-faqs-card {
    padding: 1.75rem;
  }

  /* `.map-wrapper { height: 300px }` lived here and is unreachable now:
     `.dispatch-grid > .dispatch-map-box > .map-wrapper` (0,3,1) outranks it at
     every width. The 900px block above restates it, so behaviour is unchanged —
     this note replaces the rule so the next reader is not misled by a rule that
     never fires. */
}

/* ==========================================================================
   14. Premium Interactive Components (Added Phase 6)
   ========================================================================== */

/* /* A. Before & After Restoration Carousel styles */
.ba-carousel-section {
  background-color: #faf9f6; /* Very bright warm off-white background */
  background-image: 
    linear-gradient(rgba(35, 51, 67, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 51, 67, 0.02) 1px, transparent 1px);
  background-size: 24px 24px; /* Subtle technical grid pattern */
  padding: 2.5rem 2rem;
  border-top: 1px solid rgba(35, 51, 67, 0.08);
  border-bottom: 1px solid rgba(35, 51, 67, 0.08);
  position: relative;
  overflow: hidden;
}

/* Add blueprint technical blueprint circles or details */
.ba-carousel-section::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -150px;
  width: 450px;
  height: 450px;
  border: 1px dashed rgba(35, 51, 67, 0.06);
  border-radius: 50%;
  pointer-events: none;
}

.ba-section-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Two-Column Header */
.ba-section-header {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: flex-end;
  margin-bottom: 4.5rem;
}

.ba-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ba-header-badge {
  background: rgba(154, 67, 62, 0.12);
  color: var(--accent);
  padding: 0.45rem 1rem;
  border-radius: 4px;
  font-family: var(--font-title);
  font-weight: 900;
  font-size: 0.775rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  display: inline-block;
  border: 1px solid rgba(154, 67, 62, 0.2);
}

.ba-header-title {
  font-size: 2.85rem;
  font-weight: 900;
  color: var(--text-dark);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

.ba-header-desc {
  font-size: 1.05rem;
  color: var(--text-body-dark);
  line-height: 1.7;
  margin: 0 0 2rem 0;
}

/* Navigation Controls in Header */
.ba-carousel-controls {
  display: flex;
  gap: 0.85rem;
}

.ba-control-btn {
  background: transparent;
  border: 1.5px solid rgba(35, 51, 67, 0.15);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 4px; /* Hollow square shapes */
}

.ba-control-btn:hover {
  border-color: var(--accent);
  background: rgba(154, 67, 62, 0.05);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(154, 67, 62, 0.1);
}

.ba-control-btn:active {
  transform: translateY(0);
}

/* Viewport and Track System */
.ba-carousel-viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
  padding: 1rem 0 3rem 0;
}

.ba-carousel-track {
  display: flex;
  gap: 2rem;
  transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* Responsive Cards */
.ba-card {
  flex: 0 0 calc(33.333% - 1.333rem); /* 3 cards side-by-side on desktop */
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(35, 51, 67, 0.08);
  border-radius: 16px;
  padding: 1.25rem 1.25rem 2rem 1.25rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  backdrop-filter: none;
  position: relative;
}

.ba-card:hover {
  border-color: var(--accent);
  background: #ffffff;
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* Before & After Slider Container inside Card */
.ba-slider-container {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: visible; /* Needed so overlapping white overlay works */
  user-select: none;
  cursor: ew-resize;
  /* 🔴 This said `touch-action: none` with the comment "prevents mobile scroll
     hijacking while sliding", and it did the opposite of what the comment claims:
     `none` tells the browser that NO gesture starting here pans anything, so a
     reader whose thumb landed on a before/after picture could not scroll the page
     at all. Measured with deploy/find_touch_behaviour.js at 390px: a vertical
     swipe from here moved a city page 0px where the same swipe on plain
     background moved it 205, with 28,032px of document still below. 6 sliders on
     each of 489 city pages, 3 on the homepage — 490 pages.
     `pan-y` is the declaration that means what the old comment meant: vertical
     panning belongs to the page, horizontal gestures are the slider's. It is
     also what lets app.js keep its touchmove listeners passive — see the long
     note beside the axis lock there. The two halves only work together. */
  touch-action: pan-y;
  container-type: inline-size;
  container-name: ba-slider;
}

/* Image wrappers */
.ba-slider-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
}

.ba-slider-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100cqw !important;
  height: 100% !important;
  object-fit: cover;
  pointer-events: none;
}

.ba-slider-after {
  z-index: 1;
}
.ba-slider-after img {
  object-position: center 53% !important; /* Shift after picture a tiny bit downwards */
}

.ba-slider-before {
  z-index: 2;
  width: 50%; /* Initial Split */
  border-right: 2px solid #ffffff;
  box-shadow: 5px 0 25px rgba(0,0,0,0.3);
}
.ba-slider-before img {
  object-position: center 47% !important; /* Shift before picture a tiny bit upwards */
}

/* Split Handle Bar */
.ba-slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: #ffffff;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ba-slider-arrows {
  width: 34px;
  height: 34px;
  background: var(--accent);
  border: 2px solid #ffffff;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(154, 67, 62, 0.6);
  transition: transform 0.2s ease;
}

.ba-slider-container:hover .ba-slider-arrows {
  transform: scale(1.1);
}

/* Center-bottom overlapping circular badge */
.ba-icon-overlay {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 54px;
  height: 54px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.ba-icon-overlay svg {
  color: var(--accent);
  width: 26px;
  height: 26px;
}

/* Labels */
.ba-card-label {
  position: absolute;
  top: 0.85rem;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  user-select: none;
}

.label-before {
  left: 0.85rem;
  background: rgba(154, 67, 62, 0.9);
  color: #ffffff;
}

.label-after {
  right: 0.85rem;
  background: rgba(34, 197, 94, 0.9);
  color: #ffffff;
}

/* Titles and CTA Buttons below image */
.ba-card-title {
  font-size: 1.35rem;
  font-weight: 800;
  text-align: center;
  color: var(--text-dark);
  margin: 2.25rem 0 0.85rem 0; /* Clear overlap margin */
  font-family: var(--font-title);
}

.ba-card-cta-wrapper {
  text-align: center;
}

.ba-card-cta {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.3s ease;
  text-decoration: none;
  font-family: var(--font-title);
}

.ba-card-cta:hover {
  color: var(--accent-hover);
  transform: translateX(4px);
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .ba-section-header {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3.5rem;
  }
  .ba-header-title {
    font-size: 2.5rem;
  }
  .ba-header-desc {
    margin-bottom: 1.5rem;
  }
  .ba-card {
    flex: 0 0 calc(50% - 1rem); /* 2 cards visible on tablet */
  }
}

@media (max-width: 768px) {
  .ba-carousel-section {
    padding: 2.5rem 1.5rem;
  }
  .ba-header-title {
    font-size: 2.2rem;
  }
}

@media (max-width: 640px) {
  .ba-card {
    flex: 0 0 88%; /* 1 card visible + sneak peek on mobile */
  }
  .ba-carousel-viewport {
    padding: 1rem 0 2rem 0;
  }
  .ba-header-title {
    font-size: 1.95rem;
  }
  .ba-header-desc {
    font-size: 0.95rem;
  }
}

/* B. Mascot Diagnostic Symptom Checker */
.section-diagnostics {
  padding: 2.5rem 2rem;
  background-color: var(--primary);
  border-top: 1px solid var(--card-border);
}

.diagnostics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 3.5rem auto 0 auto;
}

@media (min-width: 992px) {
  .diagnostics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .diagnostics-grid .diagnostic-card:nth-child(4) {
    grid-column: 2;
  }
  /* Once app.js §16 windows the set to three, the fourth card is a normal
     member of the row it lands in — the centring rule above exists only to
     stop it sitting alone in column 1 when all four are on screen at once. */
  .diagnostics-grid.diag-carousel-on .diagnostic-card:nth-child(4) {
    grid-column: auto;
  }
}

/* --- Symptom checker carousel (app.js §16) --------------------------------
   The controls are built in JavaScript, so with JS off the section keeps all
   four cards and none of this applies. */

/* .diagnostic-card sets `display: flex`, which beats the user-agent
   `[hidden] { display: none }` — without this rule the carousel would hide
   nothing at all. */
.diagnostic-card[hidden] {
  display: none;
}

/* Opacity only, deliberately: an animation with a `transform` would win the
   cascade against .diagnostic-card:hover and kill the card's lift. */
@media (prefers-reduced-motion: no-preference) {
  .diagnostics-grid.diag-carousel-on .diagnostic-card {
    animation: diagCardIn 0.28s ease;
  }
}

@keyframes diagCardIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.diag-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin: 2rem auto 0 auto;
  max-width: 1200px;
}

.diag-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffffff;
  background: rgba(154, 67, 62, 0.15);
  border: 1px solid rgba(154, 67, 62, 0.3);
  padding: 0.6rem 1.1rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: var(--transition);
}

.diag-nav-btn:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(154, 67, 62, 0.35);
}

.diag-nav-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.diag-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.diag-nav-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 6.5rem;
  text-align: center;
}

.diagnostic-card {
  background: var(--primary-light);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 2.25rem;
  position: relative;
  transition: var(--transition);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.diagnostic-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(154, 67, 62, 0.1);
}

.diagnostic-card::before {
  content: '🩺';
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
  font-size: 2.5rem;
  opacity: 0.05;
  transition: var(--transition);
}

.diagnostic-card:hover::before {
  opacity: 0.15;
  transform: scale(1.1) rotate(-15deg);
}

.diag-symptom-tag {
  background: rgba(154, 67, 62, 0.1);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 1rem;
}

.diagnostic-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.diag-doctor-box {
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid var(--accent);
  padding: 0.85rem 1.15rem;
  margin: 1.25rem 0;
  border-radius: 0 8px 8px 0;
}

.diag-doctor-box strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.diag-doctor-box p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.diag-urgency {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  margin-top: 1rem;
  margin-bottom: 1.25rem;
}

.diag-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffffff;
  background: rgba(154, 67, 62, 0.15);
  border: 1px solid rgba(154, 67, 62, 0.3);
  padding: 0.6rem 1.1rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--transition);
  margin-top: auto;
}

.diag-card-cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(154, 67, 62, 0.35);
}

.urgency-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.urgency-critical { background: #ef4444; box-shadow: 0 0 8px #ef4444; }
.urgency-high { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
.urgency-medium { background: #3b82f6; box-shadow: 0 0 8px #3b82f6; }



/* D. (removed 2026-08-20) the sticky chat widget — see app.js section 10.
   Its markup was never on a page, so these rules styled nothing. */

/* Before & After Responsive adjustments */
@media (max-width: 840px) {
  .ba-slider {
    height: 400px;
  }
  .ba-before img {
    width: 100vw; /* fallback inside wrapper */
  }
}

/* E. Lodi Homeowner Reviews Section */
.section-reviews {
  padding: 2.5rem 1.5rem;
  background: #f1f5f9; /* Premium bright light-blue-gray contrast background */
}

.section-reviews .section-title {
  color: var(--text-dark);
}

.section-reviews .section-subtitle {
  color: var(--text-body-dark);
  opacity: 0.85;
}

.reviews-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  /* 200px, not 280px, and that number is the whole point of this rule: the three
     written reviews must stay on ONE line down to tablet portrait. At 768px the
     container is 704px, where a 280px track minimum fits only two — so the third
     card sat alone on a second row with a gap beside it, which is the exact shape
     B40 removed at 1440px by deleting a review. auto-fit COLLAPSES the tracks no
     card occupies, so three cards are three across at every width from 768 up and
     stay 357px wide at 1440; a fourth card would wrap rather than overflow.
     Below 768px they go one per row — see the max-width: 767px rule below, because
     three 213px columns is where a paragraph of prose stops reading. */
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 2.25rem;
  margin-top: 3.5rem;
}

/* One review per row on a phone. Without this the 200px minimum above puts two
   cards and an orphan on a 600px screen, which is the defect this pair of rules
   exists to remove, moved to a narrower viewport rather than fixed. */
@media (max-width: 767px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}

.review-card {
  background: #ffffff; /* Clean pure white cards */
  border: 1px solid rgba(35, 51, 67, 0.06);
  padding: 2.25rem;
  border-radius: 16px;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px -10px rgba(35, 51, 67, 0.06);
}

.review-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 15px 35px -10px rgba(154, 67, 62, 0.18);
  background: #ffffff;
}

.review-stars {
  color: #fbbf24; /* amber-400 */
  font-size: 1.25rem;
  margin-bottom: 0.85rem;
}

.review-text {
  color: #374151; /* Dark slate text for high contrast on white card */
  font-size: 0.975rem;
  line-height: 1.65;
  font-style: italic;
  margin-bottom: 1.75rem;
  flex-grow: 1;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(154, 67, 62, 0.15);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.review-avatar.google-pfp {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.25rem;
  border: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.review-avatar.avatar-d { background-color: #4285F4; } /* Google Blue */
.review-avatar.avatar-c { background-color: #34A853; } /* Google Green */
.review-avatar.avatar-j { background-color: #FBBC05; } /* Google Yellow */
.review-avatar.avatar-m { background-color: #EA4335; } /* Google Red */

/* A flex item's default min-width is `auto`, which means "never narrower than my
   content" — so at a 213px card (three reviews across at 768px, B13) this block
   pushed 14.2px of "WOODBRIDGE, CA" out through the card's right edge while the
   card itself measured clean. Measured, not guessed: nothing else in the card
   crossed the boundary at any width from 320 to 1440. The wrap on the location
   line is the other half — it is a flex row of a 📍 and a place name, and a place
   name that cannot wrap is a place name that overflows. */
.author-info {
  min-width: 0;
}

.author-info h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 0.15rem 0;
}

.author-info span {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.author-info span::before {
  content: '📍';
  font-size: 0.85rem;
}

/* Three written reviews across at 768px (B13, Sean's call 2026-08-20) means a
   213px card, and the homepage writes 2.25rem of padding onto each one INLINE —
   which leaves 141px of the card for prose and broke "Chanchal" across two lines.
   Below 1024px the card gives that room back. `!important` is not decoration
   here: index.html is hand-written and carries these values in style attributes,
   where no media query can reach them, and the same pattern is used for the
   footer's city links further down. Everything below is a narrow-card override
   only — at 1024px and up the cards are 299px or wider and nothing here applies. */
@media (max-width: 1023px) {
  .section-reviews .review-card {
    padding: 1.35rem !important;
  }
  .section-reviews .review-author {
    gap: 0.6rem !important;
  }
  .section-reviews .review-avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.05rem !important;
  }
  /* A block, not a flex row: as flex, a place name that has to wrap leaves the
     📍 alone on the line above it. As a block the pin is an inline ::before and
     the name wraps after it, the way any other sentence would. */
  .author-info span {
    display: block !important;
  }
  .author-info span::before {
    margin-right: 0.25rem;
  }
  .section-reviews .tech-response-container {
    gap: 0.55rem !important;
  }
  .section-reviews .tech-response-container img {
    width: 30px !important;
    height: 30px !important;
  }
}

/* Reviews Social Verification Badges */
.reviews-trust-badges {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.trust-badge-title {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.trust-badge-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.trust-badge-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  padding: 0.65rem 1.25rem;
  border-radius: 50px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.9rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: var(--transition);
  backdrop-filter: blur(8px);
}

.trust-badge-item .badge-icon {
  font-size: 1.05rem;
  transition: transform 0.3s ease;
}

.trust-badge-item:hover {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 5px 18px rgba(154, 67, 62, 0.45);
  transform: translateY(-2px);
}

.trust-badge-item:hover .badge-icon {
  transform: scale(1.2) rotate(8deg);
}

/* 22. Hero Reviews Ribbon Bar */
.hero-reviews-ribbon {
  background-color: rgba(11, 15, 25, 0.85); /* slate-black matching dark branding folds with transparency */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25rem 2rem;
  width: 100%;
  position: relative;
  z-index: 10;
  margin-top: 0; /* Default margin is 0 for standard pages */
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25), 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Reviews ribbon sits naturally below the hero fold to show the background image in between */
.hero-split + .hero-reviews-ribbon,
.home-hero + .hero-reviews-ribbon {
  margin-top: 0;
}

/* Measured 2026-08-15 at 1440px: the six badges are 1,182.8px of card, and a
   3rem gap put another 240px between them — 1,422.8px of row inside a 1,200px
   container. `flex-wrap: nowrap` plus `body { overflow-x: hidden }` meant the
   sixth badge (Nextdoor) simply ran off the right of the viewport and was
   clipped, silently, on all 526 pages. The cards cannot shrink to fit because
   `.badge-text` is `white-space: nowrap`, so the row has to be given the room
   it actually needs. 1,302.8px now, which fits any viewport ≥1367px.
   Below that it still overflows; that band is B3's, recorded in BACKLOG B14. */
.ribbon-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: nowrap;
}

.ribbon-badge-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none !important;
  color: inherit;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
}

.ribbon-badge-card:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

.ribbon-badge-card .badge-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  padding: 10px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.ribbon-badge-card:hover .badge-logo {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

/* Brand-Specific Circular Badge Colors */
.badge-yelp {
  background: #D32323 !important;
  border-color: #D32323 !important;
}
.badge-yelp svg {
  fill: #ffffff;
}

.badge-google {
  background: #ffffff !important;
  border-color: #ffffff !important;
}

.badge-angi {
  background: #FF6153 !important;
  border-color: #FF6153 !important;
}
.badge-angi svg, .badge-angi svg path {
  fill: #ffffff;
}

.badge-thumbtack {
  background: #00C1DE !important;
  border-color: #00C1DE !important;
}
.badge-thumbtack svg, .badge-thumbtack svg path {
  fill: #ffffff;
}

.badge-bbb {
  background: #005A9C !important;
  border-color: #005A9C !important;
}
.badge-bbb svg, .badge-bbb svg path {
  fill: #ffffff !important;
}

.badge-nextdoor {
  background: #8ED500 !important;
  border-color: #8ED500 !important;
}
.badge-nextdoor svg, .badge-nextdoor svg path {
  fill: #ffffff;
}

.badge-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.badge-text {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.9rem;
  color: #ffffff;
  line-height: 1.25;
  white-space: nowrap;
}

/* Ribbon stars: gold on every platform, and drawn from the rating.
   Two things used to be wrong here. The stars were coloured per platform
   (#D32323 Yelp, #34A853 Google, #005a9c BBB, …), which read as six unrelated
   marks rather than one rating; and every badge carried a literal five-star
   string in the HTML whatever the score — Angi is 4.6, Thumbtack 4.8, BBB has
   no star rating at all and Nextdoor's is null, and all six showed 5.0.
   The element is now a grey five-star track with a gold layer clipped to
   rating/5, which is the only way to draw a partial star without shipping a
   font or an image. A badge with no rating renders empty and `:empty` hides
   it, so nothing is invented.
   app.js §12 rewrites the width from assets/reviews.json on every page load;
   the width in the markup is a build-time snapshot of that same file. */
.badge-stars {
  position: relative;
  align-self: flex-start; /* shrink-wrap: the fill % is a % of THIS box, so it
                             must be the width of the stars, not of the card */
  font-size: 0.85rem;
  letter-spacing: 1px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.25); /* the unfilled track showing through */
}

.badge-stars::before {
  content: "\2605\2605\2605\2605\2605";
}

.badge-stars:empty {
  display: none; /* no rating → no stars, rather than five invented ones */
}

.badge-stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #FFB400; /* one gold, for platforms that publish a 0-5 rating */
}

/* Nextdoor does not publish a 0-5 rating -- it counts recommendations (81 of
   them) -- so the five stars under its badge are a presentation choice, not a
   figure from Nextdoor. They were silver until 2026-08-22 to keep them visually
   distinct from the four badges whose stars are a real rating.

   🔴 SEAN, 2026-08-22, after speaking to Orel: make them the same gold, "he likes
   it to match more." That reverses the silver decision, which had been closed
   twice. It is his business and his call, and it is recorded here rather than
   silently applied, because the reason the silver existed is a real one and the
   next person to read this rule deserves to know it was overruled, not forgotten.

   THE CLASS IS DELIBERATELY KEPT rather than deleted. It still marks "these stars
   are a presentation choice", which app.js uses for the honest aria-label -- the
   unrated badge announces "5 out of 5", never "Rated 5 out of 5". Deleting the
   rule would leave a dangling class that reads like an oversight and invites
   somebody to re-add silver as a fix. See the note in assets/reviews.json. */
.badge-stars-fill--unrated {
  color: #FFB400;   /* same gold as .badge-stars-fill, on purpose */
}

/* Responsive Ribbon Layouts */
/* 1199px, moved up from 1024 on 2026-08-19. B14 measured the six badges
   overflowing the whole band between 1025 and 1366 and handed it to B3; measured
   again today, the band is 1025-1199 and the sixth badge (Nextdoor) is clipped
   with no scrollbar, because `body { overflow-x: hidden }` hides the evidence.
   Verified by screenshot at 1100 before and after.
   THIS BOUNDARY IS COUPLED. The same 1024 line used to switch the city hero to an
   absolutely-positioned ribbon; a wrapped two-row ribbon under that rule would
   cover hero content on 489 pages, which is why B14 said both breakpoints have to
   move together. Both moved in the same commit — see the two
   `.location-page .hero-split` blocks near the end of this file.
   AND THE NUMBER IS MEASURED, NOT CHOSEN. 1200 was the first attempt and the city
   page then overflowed at exactly 1200-1223, because the six badges in one row
   need 1224px with the base 1.5rem gap. The boundary is 1240: below it the ribbon
   sits in the flow and wraps when it must, at and above it one row fits and the
   city hero can go back to holding it absolutely. Re-measure with
   deploy/find_overflow.js before moving it again. */
@media (max-width: 1239px) {
  .ribbon-container {
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .hero-reviews-ribbon {
    padding: 1.5rem 1rem;
    margin-top: 0; /* Reset margin on mobile/tablet to avoid overlapping */
  }
  .ribbon-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1rem;
  }
  .ribbon-badge-card {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .ribbon-container {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .ribbon-badge-card {
    justify-content: flex-start;
    padding-left: 2rem;
  }
}

/* ==========================================================================
   23. Mobile Bottom Sticky CTA Bar & Transitions
   ========================================================================== */

/* Hide bottom CTA on desktop by default */
.mobile-bottom-cta {
  display: none;
}

/* Responsive bottom CTA. Was "CTA & Chat Widget side-by-side": the right inset
   below used to be 5.5rem, reserving 64px + 16px + 8px for the Elfsight chat
   launcher that sat beside it. The chat block came off all 570 pages on
   2026-08-18 (BACKLOG B54 — the widget rendered nothing anywhere, including on
   the client's own site), which left an 88px hole to the right of the button on
   every phone. Full width now.
   If the chat launcher is ever restored, this goes back to 5.5rem or the two
   overlap — that is the whole reason the two shipped together. */
@media (max-width: 640px) {
  .mobile-bottom-cta {
    display: flex;
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    background: transparent;
    border-top: none;
    padding: 0;
    z-index: 999;
    box-shadow: none;
    transform: translateY(150%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  }

  .mobile-bottom-cta.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  .btn-bottom-call {
    width: 100%;
    padding: 0.85rem;
    border-radius: 50px; /* beautiful premium capsule shape */
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 1rem;
    text-align: center;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--accent);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(154, 67, 62, 0.35);
    transition: var(--transition);
  }

  .btn-bottom-call:hover {
    background-color: var(--accent-hover);
    box-shadow: 0 6px 20px rgba(154, 67, 62, 0.55);
    transform: translateY(-2px);
  }

  .btn-bottom-call:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(154, 67, 62, 0.35);
  }

  /* Mascot & Elfsight chat widgets mobile positioning (aligned perfectly next to the floating Call Now button) */
  body > [class*="elfsight-app"],
  body > [class*="eapps-widget"],
  body > div[class*="elfsight"],
  body > div[class*="eapps"],
  body > div[id*="elfsight"],
  body > div[id*="eapps"],
  body > iframe,
  body > [class*="elfsight"],
  body > [class*="eapps"],
  body > [class*="sc-"],
  body > [class*="AnimationFrame"],
  body > [class*="Frame-sc"],
  body > [class*="pulse"],
  body > [class*="Pulse"],
  body > [class*="shadow"],
  body > [class*="Shadow"],
  body > [class*="Bubble"],
  body > [class*="Button"],
  body > [class*="Launcher"] {
    bottom: 1rem !important; /* Perfect baseline alignment at bottom: 1rem side-by-side with CTA button */
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}

/* ==========================================================================
   24. Premium Interactive Highlight Slideshow (Added for Lodi Services)
   ========================================================================== */
.highlight-slideshow-container {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 10px 30px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--card-border);
}

.highlight-slider {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: hidden;
  background-color: #0f172a;
}

.highlight-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(0.98);
  pointer-events: none;
}

.highlight-slide.active {
  opacity: 1;
  z-index: 2;
  transform: scale(1);
  pointer-events: auto;
}

.highlight-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.4) 70%, transparent 100%);
  padding: 2.5rem 1.5rem 1.25rem 1.5rem;
  color: #ffffff;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 3;
  pointer-events: none;
}

/* Slider Controls */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(35, 51, 67, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: var(--transition);
  opacity: 0;
}

.highlight-slideshow-container:hover .slider-btn {
  opacity: 1;
}

.slider-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(154, 67, 62, 0.4);
}

.prev-btn {
  left: 1rem;
}

.next-btn {
  right: 1rem;
}

/* Indicators */
.slider-indicators {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.65rem;
  z-index: 5;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 0.45rem 0.75rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: var(--transition);
}

.slider-dot.active {
  background: var(--accent);
  transform: scale(1.25);
  box-shadow: 0 0 8px var(--accent);
}

/* Mobile Stacking Heights */
@media (max-width: 640px) {
  .highlight-slider {
    height: 340px;
  }
}

/* ==========================================================================
   25. (removed 2026-08-20) Premium Interactive Mascot Chatbot Window
   --------------------------------------------------------------------------
   The chat window, its message bubbles, typing dots, suggestion chips and input
   row. Deleted with app.js section 10 (BACKLOG B35): 0 of the 572 published pages
   have ever carried the markup, so every selector in here matched nothing on
   every page that downloaded it. The number is kept so older notes that cite
   "section 25" still resolve.
   ========================================================================== */

/* 15. Surrounding Cities Showcase Styles */
.section-surrounding-cities {
  padding: 2.5rem 0;
  background: linear-gradient(180deg, #1d2b38 0%, var(--primary) 100%);
  position: relative;
  overflow: hidden;
}

.cities-grid-premium {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}

.city-card-link {
  display: block;
  text-decoration: none;
  border-radius: 12px;
  position: relative;
  transition: var(--transition);
  height: 100%;
}

.city-card-inner {
  background: var(--primary-light);
  border: 1px solid var(--card-border);
  padding: 1.5rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
  z-index: 2;
  overflow: hidden;
  transition: var(--transition);
}

.city-card-accent-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, #d86862 100%);
  opacity: 0.8;
  transition: var(--transition);
}

.city-info-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.city-icon {
  font-size: 1.25rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.city-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-title);
  margin: 0;
}

.city-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
}

.city-distance, .city-response {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.city-action {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-title);
  transition: var(--transition);
  display: flex;
  align-items: center;
  margin-top: auto;
}

/* Hover effects */
.city-card-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(154, 67, 62, 0.15);
}

.city-card-link:hover .city-card-inner {
  border-color: rgba(154, 67, 62, 0.3);
  background: rgba(45, 62, 80, 0.95);
}

.city-card-link:hover .city-card-accent-border {
  height: 6px;
  opacity: 1;
}

.city-card-link:hover .city-action {
  color: #fff;
  transform: translateX(4px);
}

/* Responsive breakdowns */
@media (max-width: 1024px) {
  .cities-grid-premium {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 640px) {
  .cities-grid-premium {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .section-surrounding-cities {
    padding: 2.5rem 1rem;
  }
}

/* ==========================================================================
   Custom Additions: Mascot Badges, Recommendations Grid, & Hours Table
   ========================================================================== */

/* Circular Mascot Section Badge */
.section-badge-mascot {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(154, 67, 62, 0.1);
  color: var(--accent);
  padding: 0.4rem 1rem 0.4rem 0.6rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(154, 67, 62, 0.2);
}

.badge-mascot-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  object-fit: contain;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.section-badge-mascot:hover .badge-mascot-img {
  transform: scale(1.2) rotate(5deg);
}

/* Recommendations Card Grid Layout */
.recommendations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.recommendation-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
}

.recommendation-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 12px 25px rgba(154, 67, 62, 0.15);
  background: rgba(255, 255, 255, 0.05);
}

.recommendation-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: #fff;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.5rem;
  width: fit-content;
}

.recommendation-intro {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted);
  opacity: 0.85;
  margin-bottom: 1.25rem;
}

.recommendation-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.recommendation-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
}

.recommendation-list li a {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
}

.recommendation-list li a:hover {
  color: #fff;
  text-decoration-color: var(--accent);
}

/* Solutions Columns Grid Layout */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.solution-column-card {
  background: #fff;
  border-radius: 12px;
  padding: 2.25rem 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  border-top: 4px solid var(--accent);
  transition: var(--transition);
}

.solution-column-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.solution-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}

.solution-column-card h3 {
  color: var(--text-dark);
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 0.85rem;
}

.solution-column-card p {
  color: var(--text-body-dark);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* FAQ Doctor Tip Bubble */
.faq-doctor-tip {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background: rgba(154, 67, 62, 0.06);
  border: 1px solid rgba(154, 67, 62, 0.15);
  border-left: 5px solid var(--accent);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 2.5rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.faq-doctor-tip-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  padding: 4px;
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
  object-fit: contain;
}

.faq-doctor-tip-content h4 {
  color: var(--accent);
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
}

.faq-doctor-tip-content p {
  color: #334155;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* Premium Business Hours Card & Table */
.dispatch-hours-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1.5rem;
  border-left: 4px solid var(--accent);
}

.dispatch-hours-card h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
  /* 0.9rem = 14.4px, under the 16px legibility bar, in the booking section
     (BACKLOG B60). One row now, so the extra 1.6px costs no wrapping. */
  font-size: 1rem;
  color: var(--text-muted);
}

.hours-table tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hours-table tr:last-child {
  border-bottom: none;
}

.hours-table td {
  padding: 0.5rem 0;
}

.hours-table td.day-cell {
  font-weight: 700;
  color: #fff;
}

.hours-table td.time-cell {
  text-align: right;
  font-weight: 600;
}

/* `color: #22c55e` was here and is deleted rather than kept: it never rendered
   (`td.time-cell { color: #4b5563 !important }` in the light-theme block wins),
   and if it ever did it would be 2.0:1 against #f8fafc — a contrast failure.
   Do not "restore" it. */
.hours-table td.highlight-time {
  font-weight: 800;
}

@media (max-width: 1024px) {
  .recommendations-grid, .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .recommendations-grid, .solutions-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .solution-column-card {
    padding: 1.75rem 1.5rem;
  }
  .faq-doctor-tip {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }
}

/* ==========================================================================
   Redesigned Mascot Header for Dispatch Card
   ========================================================================== */
.dispatch-mascot-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 1.5rem;
}

.dispatch-mascot-header-text {
  text-align: left;
  flex: 1;
}

.dispatch-mascot-header-text h4 {
  font-size: 1.65rem !important;
  color: #fff !important;
  font-family: var(--font-title);
  font-weight: 800;
  margin: 0 0 0.5rem 0 !important;
  line-height: 1.2;
}

.dispatch-mascot-header-text p {
  color: var(--accent) !important;
  font-size: 0.95rem !important;
  font-weight: 700;
  margin: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.dispatch-mascot-header-badge {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.03);
  padding: 0.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.02);
  transition: var(--transition);
}

.dispatch-mascot-header-badge img {
  max-height: 180px;
  width: auto;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
  display: block;
  transition: var(--transition);
}

.dispatch-map-box:hover .dispatch-mascot-header-badge img {
  transform: scale(1.05) rotate(1deg);
  filter: drop-shadow(0 12px 24px rgba(154, 67, 62, 0.35));
}

@media (max-width: 640px) {
  .dispatch-mascot-header-row {
    flex-direction: column-reverse;
    text-align: center;
    align-items: center;
    gap: 1rem;
  }
  .dispatch-mascot-header-text {
    text-align: center;
  }
  .dispatch-mascot-header-badge img {
    max-height: 140px;
  }
}

/* ==========================================================================
   SEO Section 1.5: Spotlight Section Styles
   ========================================================================== */
.section-spotlight {
  padding: 2.5rem 2rem;
  background-color: var(--primary); /* Alternates nicely with the light section above it */
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.spotlight-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  align-items: center;
}

.spotlight-content p {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.spotlight-content p strong {
  color: #fff;
}

.spotlight-content p:last-child {
  margin-bottom: 0;
}

.spotlight-image {
  position: relative;
}

.spotlight-portrait {
  width: 100%;
  max-width: 420px; /* Prevent it from expanding too wide and stretching */
  height: auto; /* Scale height proportionally to maintain aspect ratio */
  object-fit: contain;
  margin: 0 auto; /* Center inside container */
  border-radius: 16px;
  box-shadow: var(--shadow-lg), 0 0 40px rgba(154, 67, 62, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: var(--transition);
  display: block;
}

.spotlight-portrait:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg), 0 0 50px rgba(154, 67, 62, 0.25);
  border-color: rgba(154, 67, 62, 0.3);
}

@media (max-width: 1024px) {
  .spotlight-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .spotlight-image {
    max-width: 600px;
    margin: 0 auto;
  }
}






/* ==========================================================================
   Local Technician & Reviews Showcase Styling
   ========================================================================== */
@keyframes status-pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.status-pulse-green-active {
  animation: status-pulse 2s infinite;
}

.tech-profile-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tech-profile-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(228, 91, 30, 0.4) !important;
}

.tech-profile-card img {
  transition: transform 0.3s ease;
}

.tech-profile-card:hover img {
  transform: scale(1.05);
}

.review-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(228, 91, 30, 0.2) !important;
}

@media (max-width: 992px) {
  .tech-crew-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* ==========================================================================
   PREMIUM GENERIC LANDING PAGE: COUPONS & SOCIAL MEDIA INTEGRATION
   ========================================================================== */

/* Coupons & Specials Section */
.coupons-section {
  padding: 2.5rem 2rem;
  background: radial-gradient(circle at top, var(--primary-light) 0%, var(--primary) 100%);
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  text-align: center;
}

.coupons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 3rem auto 0 auto;
}

.coupon-card {
  background: rgba(255, 255, 255, 0.02);
  border: 2px dashed rgba(154, 67, 62, 0.4);
  border-radius: 16px;
  padding: 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  position: relative;
  transition: var(--transition);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.coupon-card::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 30px;
  height: 30px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: inset -3px -3px 5px rgba(0,0,0,0.2);
}

.coupon-card::after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: inset 3px 3px 5px rgba(0,0,0,0.2);
}

.coupon-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  background: rgba(154, 67, 62, 0.05);
  box-shadow: 0 15px 35px rgba(154, 67, 62, 0.15);
}

.coupon-badge {
  background: rgba(154, 67, 62, 0.1);
  color: var(--accent);
  padding: 0.3rem 0.75rem;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: fit-content;
  margin: 0 auto 1.25rem auto;
  border: 1px solid rgba(154, 67, 62, 0.2);
}

.coupon-amount {
  font-size: 2.75rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.5rem;
  font-family: var(--font-title);
  background: linear-gradient(135deg, #ffffff 40%, #ff8a84 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.coupon-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.75rem;
}

.coupon-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 1.75rem;
  flex-grow: 1;
}

.btn-coupon-claim {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
}

.btn-coupon-claim:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 15px rgba(154, 67, 62, 0.4);
}

/* Social Connect & Media Section */
.social-connect-section {
  padding: 2.5rem 2rem;
  background: #ffffff;
  color: var(--text-dark);
  text-align: center;
}

.social-connect-subtitle {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
  display: block;
}

.social-connect-title {
  font-size: 2.25rem;
  font-weight: 900;
  margin-bottom: 1rem;
}

.social-connect-desc {
  color: var(--text-body-dark);
  max-width: 650px;
  margin: 0 auto 3rem auto;
  font-size: 1.05rem;
  line-height: 1.6;
}

.social-icons-row {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto 4rem auto;
}

.social-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg-light);
  color: var(--text-dark);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
  transition: var(--transition);
}

.social-icon-btn svg {
  width: 26px;
  height: 26px;
  transition: var(--transition);
}

/* Custom Brand Colors for Hover States */
.social-icon-btn.instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(214, 36, 159, 0.35);
  transform: translateY(-4px);
}

.social-icon-btn.facebook:hover {
  background: #1877F2;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(24, 119, 242, 0.35);
  transform: translateY(-4px);
}

.social-icon-btn.nextdoor:hover {
  background: #00B259;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(0, 178, 89, 0.35);
  transform: translateY(-4px);
}

.social-icon-btn.thumbtack:hover {
  background: #00C1DE;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(0, 193, 222, 0.35);
  transform: translateY(-4px);
}

.social-icon-btn.yelp:hover {
  background: #D32323;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(211, 35, 35, 0.35);
  transform: translateY(-4px);
}

.social-icon-btn.bbb:hover {
  background: #005A9C;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(0, 90, 156, 0.35);
  transform: translateY(-4px);
}

/* Media Gallery (YouTube & Instagram) Grid */
.media-channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 2.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.media-channel-card {
  background: var(--bg-light);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 20px;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
  transition: var(--transition);
  text-align: center;
}

.media-channel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.media-icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 6px 15px rgba(0,0,0,0.05);
}

.media-icon-wrapper.youtube-icon {
  background: rgba(255, 0, 0, 0.1);
  color: #FF0000;
}

.media-icon-wrapper.instagram-icon {
  background: rgba(228, 64, 95, 0.1);
  color: #E4405F;
}

.media-icon-wrapper svg {
  width: 38px;
  height: 38px;
}

.media-channel-card h3 {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  color: var(--text-dark);
}

.media-channel-card p {
  color: var(--text-body-dark);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 2rem;
  max-width: 320px;
}

.btn-media-action {
  padding: 0.8rem 2rem;
  border-radius: 50px;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 0.95rem;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-media-action.youtube-btn {
  background: #FF0000;
  color: #fff;
}

.btn-media-action.youtube-btn:hover {
  background: #cc0000;
  box-shadow: 0 4px 15px rgba(255, 0, 0, 0.35);
}

.btn-media-action.instagram-btn {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  color: #fff;
}

.btn-media-action.instagram-btn:hover {
  opacity: 0.9;
  box-shadow: 0 4px 15px rgba(214, 36, 159, 0.35);
}

/* Hero Video Card Styling */
.hero-image-card.video-card:hover .play-overlay-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--accent-hover);
}

/* ==========================================================================
   Premium Location Page Stacked Cards & Highlights Transitions
   ========================================================================== */
.location-hero-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  width: 100% !important;
  max-width: 290px !important;
  margin-left: auto !important;
  margin-top: 0 !important; /* Shrunk massive negative margin to let native grid align it center vertically */
}

@media (max-width: 800px) {
  .location-hero-right {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1.5rem !important; /* Reset and add small space on mobile stack */
  }
}

/* Highlights Image Hover Zoom */
.highlight-portrait {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s ease !important;
}

.highlight-image:hover .highlight-portrait {
  transform: scale(1.03) !important;
  box-shadow: 0 20px 40px rgba(154, 67, 62, 0.22) !important;
}

/* Highlights CTA Enhancements */
.btn-highlight-call:hover {
  box-shadow: 0 8px 25px rgba(154, 67, 62, 0.45) !important;
}

.btn-highlight-quote:hover {
  box-shadow: 0 8px 25px rgba(35, 51, 67, 0.25) !important;
}

/* ==========================================================================
   Service Area Sitemap Sitemap Index (service-areas/index.html) Light Theme Overrides
   ========================================================================== */
body.service-area-index-page {
  background: #faf6f0 !important;
  background-color: #faf6f0 !important;
}

body.service-area-index-page .dispatch-ticker-container {
  background: #f3ede2 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  color: #374151 !important;
}

body.service-area-index-page .dispatch-ticker-container strong {
  color: #111827 !important;
}

body.service-area-index-page .section-coverage {
  background: #faf6f0 !important;
}

body.service-area-index-page .section-title {
  color: #1b2533 !important; /* Dark charcoal title for readability on light background */
}

body.service-area-index-page .section-subtitle {
  color: #4b5563 !important; /* Slate gray subtitle for readability */
}

/* Make surrounding cities showcase background beige behind the accordions */
body.service-area-index-page .section-surrounding-cities {
  background: #faf6f0 !important;
}

/* Warm beige premium reviews ribbon bar on service area index */
body.service-area-index-page .hero-reviews-ribbon {
  background-color: #f3ede2 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
}

body.service-area-index-page .hero-reviews-ribbon .badge-text {
  color: #1f2937 !important;
}

body.service-area-index-page .hero-reviews-ribbon .badge-logo {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.service-area-index-page .hero-reviews-ribbon .badge-yelp {
  background: #D32323 !important;
  border-color: #D32323 !important;
}

body.service-area-index-page .hero-reviews-ribbon .badge-yelp svg {
  fill: #ffffff;
}

body.service-area-index-page .hero-reviews-ribbon .badge-google {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

body.service-area-index-page .hero-reviews-ribbon .badge-bbb {
  background: #005A9C !important;
  border-color: #005A9C !important;
}

body.service-area-index-page .hero-reviews-ribbon .badge-bbb svg,
body.service-area-index-page .hero-reviews-ribbon .badge-bbb text {
  fill: #ffffff !important;
}

body.service-area-index-page .hero-reviews-ribbon .badge-angi {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

body.service-area-index-page .hero-reviews-ribbon .badge-angi svg,
body.service-area-index-page .hero-reviews-ribbon .badge-angi svg path {
  fill: #FF6153 !important;
}

body.service-area-index-page .hero-reviews-ribbon .badge-thumbtack {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

body.service-area-index-page .hero-reviews-ribbon .badge-thumbtack svg,
body.service-area-index-page .hero-reviews-ribbon .badge-thumbtack svg path {
  fill: #00C1DE !important;
}

/* Light styling for search input decorations */
body.service-area-index-page .search-wrapper #city-search-input {
  background: #ffffff !important;
  color: #1b2533 !important;
  border: 2px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

body.service-area-index-page .search-wrapper #city-search-input::placeholder {
  color: #9ca3af !important;
}

body.service-area-index-page .search-wrapper span {
  color: rgba(0, 0, 0, 0.4) !important;
}

body.service-area-index-page .search-wrapper button {
  color: rgba(0, 0, 0, 0.4) !important;
}

/* Keep sitemap cards dark blue-gray as originally styled */
body.service-area-index-page details.county-accordion {
  background: #1b2533 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

body.service-area-index-page details.county-accordion[open] {
  background: #233343 !important;
  border-color: rgba(228, 91, 30, 0.25) !important;
}

body.service-area-index-page summary.accordion-header {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

body.service-area-index-page details.county-accordion[open] summary.accordion-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

body.service-area-index-page .city-card-inner {
  background: #2b3b4d !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.service-area-index-page .city-card-inner:hover {
  background: #34485e !important;
  border-color: var(--accent) !important;
}

body.service-area-index-page .city-name {
  color: #ffffff !important;
}

body.service-area-index-page .city-meta {
  color: #9ca3af !important;
}

body.service-area-index-page .city-action {
  color: #9ca3af !important;
}

body.service-area-index-page .city-card-inner:hover .city-action {
  color: var(--accent) !important;
}

body.service-area-index-page .live-crew-card {
  background: #1b2533 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

body.service-area-index-page .live-crew-card strong {
  color: #ffffff !important;
}

body.service-area-index-page .live-crew-card span {
  color: #e2e8f0 !important;
}

body.service-area-index-page .live-crew-card p {
  color: #cbd5e1 !important;
}

body.service-area-index-page .live-crew-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.service-area-index-page .county-reviews-box {
  background: #1b2533 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

body.service-area-index-page .county-reviews-box strong {
  color: #ffffff !important;
}

body.service-area-index-page .county-reviews-box p {
  color: #cbd5e1 !important;
}

/* Premium Light Beige Theme Overrides for Recommendations Section */
.section-recommendations {
  background-color: #f5f2eb !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.section-recommendations .section-title {
  color: #1b2533 !important;
}

.section-recommendations .section-subtitle {
  color: #4b5563 !important;
}

.section-recommendations .recommendation-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

.section-recommendations .recommendation-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 15px 35px rgba(154, 67, 62, 0.12) !important;
  background: #ffffff !important;
}

.section-recommendations .recommendation-card h3 {
  color: #1b2533 !important;
  border-bottom: 2px solid var(--accent) !important;
}

.section-recommendations .recommendation-intro {
  color: #4b5563 !important;
  opacity: 0.95 !important;
}

.section-recommendations .recommendation-list li {
  color: #374151 !important;
}

.section-recommendations .recommendation-list li a {
  color: #1b2533 !important;
  text-decoration: none !important;
  transition: var(--transition) !important;
}

.section-recommendations .recommendation-list li a:hover {
  color: var(--accent) !important;
  text-decoration: underline !important;
}

/* Premium wide two-column dropdown navigation */
.dropdown-menu-wide {
  min-width: 460px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  /* Column-major fill reproduces the two `.dropdown-column` <div>s this menu
     used to carry. Those were invalid — a <div> is not a legal child of <ul>,
     and it cost the list its semantics — and they are gone from the markup. */
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  /* Matches the narrow menus, so the first column's text lands on the same
     17px inset as every other submenu instead of 33px. */
  padding: 0.5rem 0 !important;
  gap: 0 !important;
}

/* Premium Light Beige Theme Overrides for Coupons & Savings Section on Location Pages */
.coupons-section {
  background: #faf6f0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.coupons-section .section-title {
  color: #1b2533 !important;
}

.coupons-section .section-subtitle {
  color: #4b5563 !important;
}

.coupons-section .coupon-card {
  background: #ffffff !important;
  border: 2px dashed rgba(154, 67, 62, 0.45) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

.coupons-section .coupon-card::before,
.coupons-section .coupon-card::after {
  background: #faf6f0 !important; /* Punched corners blend with the light beige background */
  box-shadow: inset 0 0 5px rgba(0,0,0,0.03) !important;
}

.coupons-section .coupon-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 15px 35px rgba(154, 67, 62, 0.12) !important;
  background: #ffffff !important;
}

.coupons-section .coupon-amount {
  background: linear-gradient(135deg, var(--accent) 40%, #ff8a84 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.coupons-section .coupon-title {
  color: #1b2533 !important;
}

.coupons-section .coupon-desc {
  color: #4b5563 !important;
}

/* Premium Layout Fix: Restrict slideshow caption text inside the right-side info pane (blue box) */
.recent-repairs-slideshow-section .slide-caption {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  background: none !important;
  padding: 0 !important;
  text-shadow: none !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   Premium Light Beige-Slate Theme Overrides for Dispatch Hub (Alternating Color Flow)
   ========================================================================== */

/* 1. Root Section Override */
.section-dispatch {
  background-color: #ede8df !important; /* Premium light beige with a subtle cool slate lean */
  border-top: 1px solid rgba(27, 37, 51, 0.08) !important;
  border-bottom: 1px solid rgba(27, 37, 51, 0.08) !important;
}

/* 2. Title & Descriptions Overrides */
.section-dispatch .section-title,
.dispatch-form-card h3,
.dispatch-faqs-card h3,
.dispatch-mascot-header-text h4,
.dispatch-address-bar h4 {
  color: #1b2533 !important; /* High contrast dark slate-blue for text legibility */
}

.section-dispatch .section-subtitle,
.dispatch-form-card p,
.dispatch-faqs-card p,
.dispatch-address-bar p {
  color: #4b5563 !important; /* Soft dark gray for body descriptions */
}

/* 3. Card Container Overrides (Mascot, Form, Map Card, FAQs Card) */
.dispatch-mascot-card,
.dispatch-form-card,
.dispatch-faqs-card,
.dispatch-map-box {
  background: #ffffff !important; /* Crisp white card background for separation */
  border: 1px solid rgba(27, 37, 51, 0.08) !important;
  box-shadow: 0 12px 35px rgba(27, 37, 51, 0.04) !important;
}

/* 3b. Mascot Trust Checklist (Inside Map Box Card) Overrides for light theme */
.section-dispatch .dispatch-map-box h4 {
  color: #1b2533 !important;
}

.section-dispatch .dispatch-map-box .dispatch-mascot-header-text p {
  color: #4b5563 !important;
}

.section-dispatch .dispatch-map-box ul li {
  color: #1b2533 !important;
}

.section-dispatch .dispatch-map-box ul li strong {
  color: #1b2533 !important;
}

.section-dispatch .dispatch-map-box ul li span {
  /* This targets the checkmark specifically. We want it to stay var(--accent) */
  color: var(--accent) !important;
}

.section-dispatch .dispatch-map-box ul li div span {
  /* This targets the sub-descriptions (e.g. 'We arrive within 2-4 hours...') */
  color: #4b5563 !important;
}

/* Callout container at the bottom */
.section-dispatch .dispatch-map-box div[style*="background"] {
  background: #f8fafc !important; /* Soft off-white light slate background */
  border: 1px solid rgba(27, 37, 51, 0.08) !important;
}

.section-dispatch .dispatch-map-box div[style*="background"] span {
  color: #4b5563 !important;
}

.section-dispatch .dispatch-map-box div[style*="background"] a {
  color: var(--accent) !important;
}

/* 4. Inputs & Dropdowns Overrides */
.form-group label {
  color: #4b5563 !important;
}

.form-group input,
.form-group select {
  background: #f8fafc !important; /* Off-white light slate input fields */
  border: 1px solid rgba(27, 37, 51, 0.12) !important;
  color: #1b2533 !important; /* High contrast dark text inside inputs */
}

.form-group input::placeholder {
  color: #9ca3af !important;
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(154, 67, 62, 0.15) !important;
}

/* 5. Status pulse bubble overrides */
.mascot-status-bubble {
  background: #f8fafc !important;
  border: 1px solid rgba(27, 37, 51, 0.08) !important;
  color: #4b5563 !important;
}

.mascot-status-bubble p {
  color: #4b5563 !important;
}

.mascot-status-bubble strong {
  color: #1b2533 !important;
}

/* 6. Hours Card & Table Overrides */
.dispatch-hours-card {
  background: #f8fafc !important;
  border: 1px solid rgba(27, 37, 51, 0.08) !important;
  border-left: 4px solid var(--accent) !important;
}

.dispatch-hours-card h4 {
  color: #1b2533 !important;
}

.hours-table {
  color: #4b5563 !important;
}

.hours-table tr {
  border-bottom: 1px solid rgba(27, 37, 51, 0.06) !important;
}

/* The `!important` above beat `.hours-table tr:last-child { border-bottom: none }`
   further up this file, which is MORE specific and has no `!important` — so the
   last row has always drawn a divider under itself with nothing beneath it to
   divide. Invisible while the table was one row (a single row is also
   :last-child, so the line sat under the only row and read as the card's own
   edge); obvious the moment it became eight rows, 2026-08-21. The reset has to
   carry `!important` too, because that is the only way to outrank the rule
   directly above. */
.hours-table tr:last-child {
  border-bottom: none !important;
}

.hours-table td.day-cell {
  color: #1b2533 !important;
}

.hours-table td.time-cell {
  color: #4b5563 !important;
}

/* 7. Redesigned Mascot Header (Map-side badge layout) */
.dispatch-mascot-header-row {
  border-bottom: 1px solid rgba(27, 37, 51, 0.08) !important;
}

.dispatch-mascot-header-badge {
  background: #f8fafc !important;
  border: 1px solid rgba(27, 37, 51, 0.08) !important;
}

/* ==========================================================================
   Premium FAQ Section Overrides & Accessibility Fixes
   ========================================================================== */

/* 1. Light FAQ Theme Overrides (Homepage & Light Sections) */
.section-faq:not([style*="background"]) .faq-item,
.section-faq[style*="background: var(--bg-light)"] .faq-item {
  background: #ffffff !important;
  border: 1px solid rgba(27, 37, 51, 0.06) !important;
  box-shadow: 0 4px 15px rgba(27, 37, 51, 0.02) !important;
}

.section-faq:not([style*="background"]) .faq-item[open],
.section-faq[style*="background: var(--bg-light)"] .faq-item[open] {
  border-color: rgba(154, 67, 62, 0.2) !important;
  box-shadow: 0 10px 25px rgba(27, 37, 51, 0.05) !important;
}

.section-faq:not([style*="background"]) .faq-answer,
.section-faq[style*="background: var(--bg-light)"] .faq-answer {
  background: #f8fafc !important; /* Shaded boxed background for answers */
  border-top: 1px solid rgba(27, 37, 51, 0.05) !important;
}

.section-faq:not([style*="background"]) .faq-answer p,
.section-faq[style*="background: var(--bg-light)"] .faq-answer p {
  color: #374151 !important; /* Highly readable dark gray */
  font-weight: 500 !important;
}

.section-faq:not([style*="background"]) .faq-answer strong,
.section-faq[style*="background: var(--bg-light)"] .faq-answer strong {
  color: #1b2533 !important;
  font-weight: 700 !important;
}

/* 2. Dark FAQ Theme Overrides (Services & Additions Pages) */
.section-faq[style*="background: var(--primary-light)"] .faq-item,
.section-faq[style*="background:var(--primary-light)"] .faq-item {
  background: var(--primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.section-faq[style*="background: var(--primary-light)"] .faq-item[open],
.section-faq[style*="background:var(--primary-light)"] .faq-item[open] {
  border-color: rgba(154, 67, 62, 0.4) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

.section-faq[style*="background: var(--primary-light)"] .faq-question,
.section-faq[style*="background:var(--primary-light)"] .faq-question {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.section-faq[style*="background: var(--primary-light)"] .faq-answer,
.section-faq[style*="background:var(--primary-light)"] .faq-answer {
  background: rgba(0, 0, 0, 0.15) !important; /* Shaded boxed background for dark answers */
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.section-faq[style*="background: var(--primary-light)"] .faq-answer p,
.section-faq[style*="background:var(--primary-light)"] .faq-answer p {
  color: #cbd5e1 !important; /* High contrast light gray-blue */
  font-weight: 500 !important;
}

.section-faq[style*="background: var(--primary-light)"] .faq-answer strong,
.section-faq[style*="background:var(--primary-light)"] .faq-answer strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* 3. Link Overrides within FAQs for Optimal Visibility */
.faq-question a {
  color: var(--accent) !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
}

.faq-question a:hover {
  color: var(--accent-hover) !important;
}

.faq-answer a {
  color: var(--accent) !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
}

.faq-answer a:hover {
  color: var(--accent-hover) !important;
}

/* For dark FAQ sections, links should have high contrast */
.section-faq[style*="background: var(--primary-light)"] .faq-question a,
.section-faq[style*="background:var(--primary-light)"] .faq-question a {
  color: #ff8a84 !important; /* Light coral-red link for high contrast on dark */
}

.section-faq[style*="background: var(--primary-light)"] .faq-answer a,
.section-faq[style*="background:var(--primary-light)"] .faq-answer a {
  color: #ff8a84 !important;
}

/* Premium Contrast Overrides for Simplified Contact Sections on Beige Canvas */
.section-dispatch .section-container.text-center h2,
.section-dispatch .section-container.text-center h2[style] {
  color: #1b2533 !important; /* Force high-contrast dark slate-blue */
}

.section-dispatch .section-container.text-center p,
.section-dispatch .section-container.text-center p[style] {
  color: #4b5563 !important; /* Force soft dark gray body copy */
}

.section-dispatch .section-container.text-center .btn-hero-phone,
.section-dispatch .section-container.text-center .btn-hero-phone[style] {
  background: #ffffff !important;
  color: #1b2533 !important;
  border: 1px solid rgba(27, 37, 51, 0.15) !important;
  box-shadow: 0 4px 15px rgba(27, 37, 51, 0.03) !important;
}

.section-dispatch .section-container.text-center .btn-hero-phone:hover {
  background: #f8fafc !important;
  border-color: rgba(27, 37, 51, 0.25) !important;
  transform: translateY(-1px);
}

/* Location Landing Page Overrides for Reviews Ribbon and Card Alignments */
.location-page .hero-split {
  position: relative !important;
  padding-top: 6.5rem !important; /* Shrunk from 8rem to pull all elements upward */
  min-height: 100vh !important; /* Force hero + reviews ribbon to take exactly 100% viewport height, hiding any white background below the fold */
}

@media (min-width: 1240px) {
  .location-page .hero-split {
    padding-bottom: 75px !important; /* Clear padded zone for absolute reviews ribbon */
  }
  .location-page .hero-split-left {
    transform: translateY(-2.8rem) !important; /* Shift left text block upwards a bit more */
  }
  .location-page .location-hero-right {
    transform: translateY(0.2rem) !important; /* Shift right-side cards upwards a tiny tiny bit (moving from 1.5rem to 0.2rem) */
  }
  .location-page .hero-split + .hero-reviews-ribbon,
  .location-page .hero-split .hero-reviews-ribbon {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10 !important;
    margin-top: 0 !important;
    padding: 0.85rem 2rem !important; /* Shrunk from 1.25rem to save vertical height */
    background-color: rgba(11, 15, 25, 0.85) !important;
  }
  
  /* Shift sibling section immediately after absolute reviews ribbon downwards */
  .location-page .hero-reviews-ribbon + section,
  .location-page .hero-reviews-ribbon + div,
  .location-page .hero-reviews-ribbon + * {
    margin-top: 2rem !important;
  }
}

@media (max-width: 1239px) {
  .location-page .hero-split {
    padding-bottom: 2rem !important;
  }
  .location-page .hero-reviews-ribbon {
    position: relative !important;
    margin-top: 1.5rem !important;
    padding: 0.85rem 1rem !important; /* Shrunk padding on mobile as well */
    background-color: rgba(11, 15, 25, 0.85) !important;
  }

  /* B3, measured 2026-08-19 with deploy/find_overflow.js. `.hero-split` is a flex
     row at every width, and on a city page it holds TWO children: the hero
     container and the reviews ribbon. Above 1024px the ribbon is absolutely
     positioned so the row has one item; below it, the rule above returns the
     ribbon to `position: relative` and it becomes a second flex item ON THE SAME
     LINE. With the default `nowrap`, a 390px phone laid the page out at 459px —
     the "26% horizontal overflow" B3 has carried since 2026-08-17, whose element
     nobody had found — and squeezed the hero text into a 157px column while the
     ribbon took 269px beside it.
     Wrapping the row is the whole fix: the ribbon drops to its own line, the hero
     gets the full width back, and the document stops being wider than the phone. */
  .location-page .hero-split {
    flex-wrap: wrap;
  }
  .location-page .hero-split > .hero-split-container {
    flex: 1 1 100%;
    min-width: 0;
  }
  .location-page .hero-split > .hero-reviews-ribbon {
    flex: 0 0 100%;
  }
}







/* ==========================================================================
   24. Mobile Header Navigation Hamburger & Drawer Styles
   ========================================================================== */

/* Hamburger Button */
.nav-toggle {
  display: none; /* Hidden on desktop */
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
}

.nav-toggle .hamburger-bar {
  width: 100%;
  height: 3px;
  background-color: var(--accent); /* Accent color for links and icons */
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Transform hamburger bars to 'X' */
.nav-toggle.active .hamburger-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.active .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active .hamburger-bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

@media (max-width: 1024px) {
  .logo {
    order: 1;
  }

  .nav-cta {
    order: 2;
    margin-left: auto !important;
    margin-right: 1.5rem !important;
  }

  .nav-toggle {
    display: flex; /* Display toggle button on mobile/tablet */
    order: 3;
  }

  .desktop-nav {
    display: none; /* Hide standard nav list by default */
  }

  /* Show navigation as drawer slide-out overlay */
  header.mobile-menu-active .desktop-nav {
    display: block !important;
    position: fixed;
    top: 0;
    right: 0;
    width: 290px;
    height: 100vh;
    background-color: #ffffff !important;
    box-shadow: -8px 0 35px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    padding: 6.5rem 1.75rem 2.5rem 1.75rem;
    overflow-y: auto;
    animation: slideInMobileDrawer 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  @keyframes slideInMobileDrawer {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }

  /* Vertical link stacking inside mobile menu */
  header.mobile-menu-active .desktop-nav ul {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.25rem !important;
    width: 100% !important;
  }

  header.mobile-menu-active .desktop-nav ul li {
    width: 100% !important;
    margin: 0 !important;
    position: relative;
  }

  header.mobile-menu-active .desktop-nav ul li a {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #1b2533 !important;
    display: block;
    width: 100%;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: var(--transition);
  }

  header.mobile-menu-active .desktop-nav ul li a:hover {
    color: var(--accent) !important;
  }

  /* Dropdown sub-menus for mobile clicks */
  header.mobile-menu-active .desktop-nav ul li.dropdown:hover .dropdown-menu {
    display: none !important; /* Block hover expansion */
  }

  header.mobile-menu-active .desktop-nav ul li.dropdown.active .dropdown-menu {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    background: #f8fafc !important;
    padding: 0.75rem 1rem !important;
    border-radius: 8px;
    margin-top: 0.25rem;
    width: 100% !important;
  }

  header.mobile-menu-active .desktop-nav ul li.dropdown.active .dropdown-menu li a {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    border-bottom: none !important;
    padding: 0.4rem 0 !important;
    color: #4b5563 !important;
  }

  header.mobile-menu-active .desktop-nav ul li.dropdown.active .dropdown-menu li a:hover {
    color: var(--accent) !important;
  }

  /* Wide dropdown overrides */
  header.mobile-menu-active .desktop-nav ul li.dropdown.active .dropdown-menu-wide {
    display: flex !important;
    flex-direction: column !important;
    min-width: unset !important;
    gap: 0.5rem !important;
  }
}

/* ==========================================================================
   SEO Cities Footer Layout Rules
   ========================================================================== */
.footer-grid {
  display: grid !important;
  grid-template-columns: 1.2fr 1.3fr 1.3fr 1.3fr !important;
  gap: 2.5rem !important;
  align-items: flex-start !important;
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
}

.footer-locations-col h4 {
  font-size: 1rem !important;
  color: var(--accent) !important;
  border-bottom: 2px solid var(--accent) !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 1rem !important;
  font-weight: 700 !important;
  text-align: left !important;
}

.footer-locations-col h4::after {
  display: none !important;
}

.footer-city-links-wrapper {
  display: block !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

.footer-city-link {
  font-size: 0.75rem !important;
  color: #9ca3af !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-right: 0.65rem !important;
  margin-bottom: 0.35rem !important;
  transition: color 0.2s ease !important;
}

.footer-city-link:hover {
  color: var(--accent) !important;
}


/* ==========================================================================
   25. Expert Repair & Maintenance Pros Section (Global Styles)
   ========================================================================== */
.repair-pros-section {
  padding: 2.5rem 0;
  background-color: #ffffff !important;
  color: #1b2533 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1;
}

.repair-pros-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 992px) {
  .repair-pros-container {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
  }
  .pros-content-col {
    flex: 1.15;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .pros-image-col {
    flex: 0.85;
  }
}

.pros-badge {
  background: rgba(154, 67, 62, 0.08) !important;
  color: var(--accent) !important;
  padding: 0.4rem 1rem !important;
  border-radius: 50px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 1.25rem !important;
  display: inline-block !important;
}

.pros-title {
  font-size: clamp(2rem, 3.5vw, 2.6rem) !important;
  color: #1b2533 !important;
  margin-bottom: 1.25rem !important;
  font-family: var(--font-title) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

.pros-text {
  color: #4b5563 !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  margin-bottom: 2rem !important;
}

.pros-text a {
  color: var(--accent) !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
}

.pros-text a:hover {
  color: var(--accent-hover) !important;
}

.pros-checklist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 2.5rem 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
  width: 100% !important;
}

.pros-checklist-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  font-family: var(--font-title) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #1b2533 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pros-checklist-icon {
  color: var(--accent) !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
  flex-shrink: 0 !important;
}

.pros-buttons {
  display: flex !important;
  gap: 1.25rem !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.btn-pros-call {
  background: var(--accent) !important;
  color: #fff !important;
  padding: 0.85rem 2rem !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: var(--transition) !important;
  box-shadow: 0 4px 12px rgba(154, 67, 62, 0.25) !important;
  border: none !important;
}

.btn-pros-call:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(154, 67, 62, 0.35) !important;
}

.btn-pros-quote {
  background: #1b2533 !important;
  color: #fff !important;
  padding: 0.85rem 2rem !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: var(--transition) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.btn-pros-quote:hover {
  background: #233041 !important;
  transform: translateY(-2px) !important;
}

.pros-image-col {
  position: relative !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-lg), 0 20px 40px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  transition: var(--transition) !important;
  width: 100% !important;
}

.pros-image-col:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg), 0 25px 50px rgba(154, 67, 62, 0.15) !important;
}

.pros-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}


/* Mobile Navigation CTA and Hamburger visibility overrides */
@media (max-width: 1024px) {
  .btn-emergency {
    display: none !important; /* Hide emergency button on smaller screens to free up horizontal space */
  }
  .nav-cta {
    margin-right: 1rem !important;
  }
}

/* Checklist item text node wrapping fix for flex layout */
.pros-checklist-text {
  font-family: var(--font-title) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #1b2533 !important;
  line-height: 1.4 !important;
}
.pros-checklist-text a {
  color: var(--accent) !important;
  text-decoration: underline !important;
}
.pros-checklist-text a:hover {
  color: var(--accent-hover) !important;
}

/* ==========================================================================
   19. Recent Repairs Slideshow Styles
   ========================================================================== */
.slideshow-wrapper {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-2xl);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 0;
  min-height: 480px;
}

.slideshow-images-pane {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 350px;
  background: #0b131a;
}

.slideshow-info-pane {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-left: 1px solid var(--card-border);
  background: rgba(15, 23, 42, 0.3);
}

@media (max-width: 768px) {
  .slideshow-wrapper {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  
  .slideshow-images-pane {
    height: 320px;
    min-height: 320px;
  }
  
  .slideshow-info-pane {
    padding: 1.75rem;
    border-left: none;
    border-top: 1px solid var(--card-border);
  }
}

/* --- Customer Video Review Showcase --- */
.video-reviews-showcase-container {
  margin-top: 4rem;
  padding: 0 1rem;
}

.video-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.video-review-card {
  background: #ffffff;
  border: 1px solid rgba(35, 51, 67, 0.06);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.video-review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -15px rgba(0,0,0,0.1);
}

/* The tiles carry role="button" and tabindex="0" (B57.3), so a keyboard reader
   lands on them — and a focus stop nobody can see is the same trap as a control
   nobody can reach. Matched to the hover treatment so the two read as one
   affordance. */
.video-review-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -15px rgba(0,0,0,0.1);
}

.video-review-card:focus-visible .video-play-btn-circle {
  transform: scale(1.15);
  background: var(--accent);
}

.video-preview-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16; /* Perfect for mobile portrait video reviews */
  background: #0f172a;
  overflow: hidden;
}

.video-preview-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* Let clicks pass through to card */
}

.video-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.1) 60%, rgba(15, 23, 42, 0) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.video-review-card:hover .video-card-overlay {
  background: rgba(15, 23, 42, 0.4);
}

.video-play-btn-circle {
  width: 56px;
  height: 56px;
  background: rgba(154, 67, 62, 0.9); /* Crimson theme accent */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(154, 67, 62, 0.4);
  transition: transform 0.3s ease, background 0.3s ease;
}

.video-review-card:hover .video-play-btn-circle {
  transform: scale(1.15);
  background: var(--accent);
}

.video-play-btn-circle svg {
  fill: #ffffff;
  transform: translateX(2px);
}

.video-review-info {
  padding: 1.25rem;
  text-align: left;
  background: #ffffff;
  border-top: 1px solid rgba(35, 51, 67, 0.04);
}

.video-review-info h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 0.25rem 0;
}

.video-review-info p {
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

/* --- Fullscreen Video Modal --- */
.video-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.96);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  /* `visibility: hidden` is not a duplicate of `opacity: 0` and it is not
     cosmetic. An opacity-0 overlay is still in the TAB ORDER: measured
     2026-08-19 by deploy/find_keyboard_access.js, a closed modal offered two
     focus stops — `button.video-modal-close` and its `<video controls>` — on
     every one of the 490 pages that carry it, so a keyboard reader tabbed into
     an invisible dialog and found nothing on screen responding. `visibility`
     refuses focus and hides the subtree from assistive technology; the fade
     survives because it is transitioned alongside opacity and only steps at the
     end. Do not drop it back to opacity alone. */
  visibility: hidden;
  /* The visibility switch is INSTANT (0s) and delayed only on the way out, so the
     fade-out still plays before the panel is taken away. A plain
     `transition: visibility 0.3s` looks equivalent and is not: it kept the
     overlay computing as `hidden` for the whole 300ms after `.active` was added,
     so `openVideoModal`'s focus() call had nothing focusable to move to and the
     dialog opened with focus still on the tile behind it. Measured both ways. */
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.video-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

/* The two ways out of the dialog, both of which a keyboard reader has to be able
   to SEE they are on. The close button's default focus ring was invisible against
   a #1e293b panel. */
.video-modal-close:focus-visible {
  color: #ffffff;
  outline: 3px solid #ffffff;
  outline-offset: 4px;
  border-radius: 4px;
}

.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 480px; /* Fits portrait videos perfectly on all screens */
  background: #1e293b;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.3s ease;
  text-align: center;
}

.video-modal-overlay.active .video-modal-content {
  transform: scale(1);
}

.video-modal-close {
  position: absolute;
  top: -45px;
  right: 0;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 2rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.video-modal-close:hover {
  color: #ffffff;
}

.video-player-wrapper {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000000;
  aspect-ratio: 9 / 16;
}

.video-player-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#modal-video-title {
  margin: 1.25rem 0 0 0;
  color: #ffffff;
  font-size: 1.15rem;
  font-family: var(--font-title);
  font-weight: 800;
}

#modal-video-subtitle {
  margin: 0.25rem 0 0 0;
  color: #ff9f9a; /* light brand coral */
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
}

@media (min-width: 1025px) {
  /* Our Services: one ambulance in a fixed 40px gutter.
     ------------------------------------------------------------------
     This replaces a block keyed to `li.dropdown:nth-of-type(2)` — "whatever
     the second dropdown happens to be". That counts <li> of any class, so
     moving the plain "Products" item into slot 2 would have matched no element
     at all and dropped the whole treatment with no error. It is keyed to a
     class on the <ul> now.

     Three things changed besides the selector:

     1. The truck FADES, it no longer drives in. The slide-in was implemented by
        growing padding-left from 1.25rem to 2.25rem on hover, which moved the
        label 16px sideways under a stationary cursor — a moving target on a
        menu you are trying to click, with no reduced-motion opt-out. The gutter
        is now the same width in every state.
     2. The hover colours are gone from here entirely, so this menu inherits the
        shared `.dropdown-menu li a:hover` rule (:245) like every other menu.
        What was here was `color: var(--accent)` on a 5% tint — dark red on
        near-navy, 1.70:1, which is *less* legible than not hovering at all.
     3. The truck is a white outline. In #e45b1e it scored 1.73:1 against the
        accent bar it now sits on; white reads on both the menu background
        (10.96:1) and the hovered bar (6.26:1), so it needs no state swap. */
  .dropdown-menu--services li a {
    position: relative;
    padding-left: 2.5rem;
  }

  .dropdown-menu--services li a::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 16H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h8v10z'/%3E%3Cpath d='M14 8h3l3 3v3a2 2 0 0 1-2 2h-4V8z'/%3E%3Cpath d='M9 9v4M7 11h4'/%3E%3Ccircle cx='7' cy='16' r='2' fill='none'/%3E%3Ccircle cx='16' cy='16' r='2' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0;
    transition: opacity 0.15s linear;
  }

  .dropdown-menu--services li a:hover::before,
  .dropdown-menu--services li a:focus-visible::before {
    opacity: 1;
  }
}



/* ==========================================================================
   12b. Footer — columns and the legal bar
   --------------------------------------------------------------------------
   The footer used to carry all 489 service-area cities in three of its four
   columns: 1,925px tall at 1440 and 4,252px on a phone, on every one of the 572
   pages, and 83% of every outbound link on a service page pointed into it. It
   now shows 20 flagship cities and links to the full directory.

   Selectors here are deliberately long. `.footer-col ul` (0,1,1) and
   `.footer-col ul a` (0,1,2) already exist above, and a short
   `.footer-links-list a` (0,1,1) loses to them — that silently cost 88px of
   footer height when it was tried, because the inherited font-size stayed
   0.9rem. Do not shorten them without re-measuring.
   ========================================================================== */

.footer-grid {
  grid-template-columns: 1.6fr 1.1fr 1.1fr 1.5fr !important;
  gap: 2.5rem !important;
}

.footer-col h4 {
  font-size: 1rem;
  margin-bottom: 1.125rem;
  padding-bottom: 0.6rem;
}

/* One heading treatment for all three link columns. The locations column used
   to have its own — 16px accent with a full-width rule — against the white
   accent-bar treatment everywhere else. These !important declarations beat the
   "SEO Cities Footer Layout Rules" block further down the file. */
.footer-locations-col h4 {
  font-size: 1rem !important;
  color: #ffffff !important;
  border-bottom: none !important;
  padding-bottom: 0.6rem !important;
  margin-bottom: 1.125rem !important;
}

.footer-locations-col h4::after {
  display: block !important;
}

.footer-col-lead {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

.footer-col ul.footer-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer-col ul.footer-links-list a {
  display: block;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 8px 0;
  text-decoration: none;
}

.footer-col ul.footer-links-list a:hover {
  color: #ffffff;
}

/* 36px is enough for a mouse; a finger needs 44 — and this rule did not get
   there. Measured 2026-08-19 with deploy/find_tap_targets.js: 12px + 12px around
   a 19.6px line box is **43.6px**, on every one of the 16 footer links on all 572
   pages. The comment claimed 44 and the box was 0.4 short, which is exactly the
   kind of miss an unmeasured "looks about right" leaves behind. min-height rather
   than more padding, so the number is stated instead of arrived at. */
@media (pointer: coarse) {
  .footer-col ul.footer-links-list a {
    padding: 12px 0;
    min-height: 44px;
  }
}

.footer-phone-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0;
  padding: 6px 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  text-decoration: none;
}

.footer-phone-cta:hover {
  color: #e5736e;
}

.footer-more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-top: 0.25rem;
  color: #e5736e;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}

.footer-more-link:hover {
  color: #ffffff;
}

.footer-more-link .arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.footer-more-link:hover .arrow {
  transform: translateX(3px);
}

/* 12px #9ca3af was the smallest text anywhere on the site. */
.footer-city-link {
  font-size: 0.8125rem !important;
  color: #a8b3c1 !important;
  margin-right: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  padding: 2px 0 !important;
}

.social-icon-link {
  width: 44px;
  height: 44px;
}

/* The footer had no focus indicator at all — a keyboard user was invisible for
   every one of its links. */
footer a:focus-visible {
  outline: 2px solid #e5736e;
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- the thin legal bar --------------------------------------------------- */

.footer-legal {
  background: #101820; /* #19242f darkened along the same hue, not a black strip */
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-legal-inner {
  max-width: 1264px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer-copyright {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #a8b3c1;
}

.footer-legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #a8b3c1;
}

/* A border, not a literal "|" character. The old line used four pipes, and a
   screen reader announced "vertical bar" at each one. */
.footer-legal-links li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: 0.75rem;
}

.footer-legal-links .footer-legal-license {
  color: #cbd5e1;
  font-weight: 600;
}

.footer-legal-links a {
  display: inline-block;
  color: #a8b3c1;
  text-decoration: none;
  padding: 12px 2px;  /* a 44px hit box on a 13px line... */
  margin: -12px 0;    /* ...without making the bar any taller */
}

.footer-legal-links a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  .footer-legal-inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 14px 20px;
    gap: 0.35rem;
  }
  .footer-legal-links {
    justify-content: center;
    column-gap: 1.25rem;
    row-gap: 0.35rem;
  }
  /* A border-left on a wrapped row leaves a stray rule at the start of line 2. */
  .footer-legal-links li + li {
    border-left: none;
    padding-left: 0;
  }
}

/* --- responsive: pair the link columns rather than stacking four ----------- */

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem 1.5rem !important;
  }
  .footer-col-main,
  .footer-areas-col {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .footer-city-links-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }
  .footer-city-link {
    display: block !important;
    padding: 12px 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 380px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   B3 · Nothing may be wider than the phone — fixes measured 2026-08-19 with
   deploy/find_overflow.js at a 390px device width.
   ========================================================================== */

/* The city hero's mascot hangs 55px OUTSIDE its video card by design (inline
   `right: -55px; width: 110px` in generate-locations.js). On a 390px screen that
   was the last 6px of horizontal overflow after the hero-split wrap fix: 396px of
   document on a 390px phone. Pull it inside and shrink it rather than deleting it
   — it is a brand element, and `!important` is needed only because the offsets it
   overrides are inline. */
/* 1309px, arrived at by measuring three times rather than by reasoning once. 700px
   was the first guess and a 768px tablet still measured 785px of document; 1239
   still overflowed at 1240 and 1280. The arithmetic the measurements were pointing
   at: the hero container is max-width 1200px and centred, so the room to the right
   of it is (viewport - 1200) / 2, and the mascot needs 55 of it. That is only true
   from 1310px up. Below that it sits inside. */
@media (max-width: 1309px) {
  .location-page .hero-mascot-flyout {
    right: -8px !important;
    width: 84px !important;
  }
}

/* The services hero has the same element and the same trap, and it was still
   shipping: `services/spring-replacement` carries a per-page nudge
   (`mascotStyle: 'right: -60px; …'` in generate-services.js) and measured 420px of
   document on a 390px phone — horizontal overflow at EVERY width from 320 to
   1240, clean only at 1366 and above.
   🔴 It was never found because it was never measured: the sweep that closed B3's
   overflow half covered 14 pages, one per family, and `spring-replacement` was
   not one of them. "14 pages, 0 over" was true of those 14. B56's lesson, in a
   third place — a clean sweep over a sample is not a clean site.
   1319px is the same arithmetic as the block above, not a guess: `.hero-split`
   has 2rem of side padding, so the room to the right of the 1200px-max container
   is 32px until the viewport passes 1264 and (viewport - 1200) / 2 takes over.
   A 60px overhang needs 60px of room, and that first exists at 1320.
   Written against the BASE class rather than that one page, so the next per-page
   mascot nudge is clamped too. `!important` only because the value it overrides
   is inline; the base -25px is inside 32px of padding at every width, so pages
   without a nudge are unaffected. */
@media (max-width: 1319px) {
  .hero-mascot-overlay {
    right: -25px !important;
  }
}

/* BACKLOG B3 lists "nine animations, no opt-out". One of the nine DID have one —
   the brand marquee, handled higher up in this file, which also switches its
   container to `overflow-x: auto` so a reader can still scroll the logos. The rest
   did not: the mascot bounce, the pulsing CTAs and the others all kept running for
   a visitor who has asked their OS to stop motion, which is a WCAG 2.3.3 matter
   rather than a preference. This block is the catch-all and sits after the marquee
   rule, which keeps its own more specific treatment.
   The near-zero duration rather than `animation: none` is the standard idiom: it
   lets an animation a script waits on still fire its `animationend`. */
@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;
  }
}

/* Long words are the last source of horizontal overflow at 320-360px, measured
   2026-08-19: a blog article laid out at 389px on a 360px phone because the
   min-content width of its own headings exceeded the column — an h3 wanted 328px
   inside a 320px box, and the article hero's h1 wanted 331 inside 256. Nothing was
   too wide by design; the text simply could not break.
   `break-word` rather than `anywhere`: it only breaks a word that would otherwise
   overflow, so ordinary headings still wrap between words. */
h1, h2, h3, h4, h5, h6,
p, li, a, figcaption, blockquote, dt, dd, th, td,
.coupon-title, .coupon-desc, .step-info h3, .card-title {
  overflow-wrap: break-word;
}

/* ==========================================================================
   Touch targets — B3, 2026-08-19
   ==========================================================================
   Measured, not guessed: `node --experimental-websocket
   deploy/find_tap_targets.js <url> --width 390 --controls-only` walks the whole
   tree and names every interactive element whose hit box is under 44x44, with
   its nearest-neighbour gap beside it.

   The gap matters because WCAG 2.2 SC 2.5.8 (level AA) asks for 24x24 AND
   exempts an undersized target that no other target's 24px circle touches. By
   that reading this site had **zero AA failures** across 14 pages before this
   block — the spacing exception carried all 42 undersized controls on a city
   page. So nothing here is a conformance fix. It is the 44px ergonomic
   threshold (SC 2.5.5 AAA, and Apple's HIG) on the controls a phone visitor
   actually has to hit, and it is gated on `pointer: coarse` so no desktop
   layout moves — the same shape as the footer-link rule already in section 26.
   ========================================================================== */

/* The hamburger is the one control a phone visitor cannot route around, and it
   shipped as a 28x20 box: three 3px bars, `padding: 0`, nothing around them.
   Both constraints here are deliberate. `box-sizing: border-box` with 12px/8px
   padding keeps the CONTENT box at exactly 28x20, so the bars and the two gaps
   `justify-content: space-between` puts between them are unchanged to the
   pixel. The negative margin gives the extra 16x24 back to the flex row, so the
   button's layout footprint is still 28x20 and the header does not reflow —
   only the hit box grows.
   Not gated on `pointer: coarse`: this button only exists below 1024px, and a
   28x20 hit box is too small for a mouse as well. */
.nav-toggle {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 12px 8px;
  margin: -12px -8px;
}

@media (pointer: coarse) {
  /* .phone-link is the primary conversion action on the site and was 144.9x25.6
     in the header of all 14 pages measured. .ba-card-cta (23px) and .know-more
     (21.8px) read as buttons and are text links with no padding at all. */
  .phone-link,
  .ba-card-cta,
  .know-more,
  .diag-nav-btn {
    min-height: 44px;
    align-items: center;
  }

  /* The secondary CTA beside "Book Urgent Dispatch" on the symptom cards was
     156x23 and had no class at all — `generate-locations.py` now emits
     `diag-card-cta-secondary` on it, because a rule cannot be written against an
     unclassed <a> without matching every link in the card. Its inline style went
     from `inline-block` to `inline-flex; align-items: center` in the same edit:
     an inline `display` beats anything declared here, so the centring has to
     live where the display does, and only the min-height is left for this rule. */
  .diag-card-cta-secondary {
    min-height: 44px;
  }

  /* City-page FAQ headers: 276x26.9, and the whole row is the toggle. Scoped to
     `.faq-item >` because a bare `summary` rule would also hit the service and
     brand accordions, which already carry 21.6px of their own padding and are
     129px tall. `display: flex` costs nothing here — the inline style on these
     already sets `list-style: none`, so there is no marker to lose. */
  .faq-item > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* The add-on pages' hero CTA is an underlined text link, not a filled button —
     169x25.6 with no padding at all. Centring rather than padding, so the
     underline stays where it is and the box grows around it. */
  .btn-hero-split-cta {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* Already padded, and 2-8px short: the brand era CTA (41.6), the product page's
     booking button (42.2) and the 18 brand pages' spec toggles (36.2). No
     alignment change — all three already centre their own content. */
  .btn-era-book,
  .btn-prod-book,
  button[id^="toggle-btn-"] {
    min-height: 44px;
  }

  /* Each logo in the "Brands We Work With" strip is a link to that brand's page,
     and each was 38px tall — the height of the image, with the 72px gap between
     logos coming from padding-right. Flex rather than min-height alone, or the
     image stays pinned to the top of the taller box. */
  .marquee-track > a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* 🔴 44px made the target big enough. It did not make it hittable, and the
     rule above used to say so and leave it open. Measured with
     deploy/find_touch_behaviour.js at 390px: the strip travels 20px in 400ms of
     tap latency against a 193px logo pitch, so **10.4% of the width of the strip
     resolves to a DIFFERENT brand's page** between the moment a reader aims and
     the moment their thumb lands. Not a miss — a wrong destination, the same
     class of defect as the keyword interlinker shipping a link to the wrong city.
     Pausing the animation on touchstart does not fix it and was the first idea:
     the strip moves during the REACH, and touchstart is when the reach ends.
     So on a coarse pointer the strip stops being a marquee and becomes what a
     phone reader can actually use — a row they swipe themselves. This is the same
     treatment prefers-reduced-motion already gets higher up in this file, for the
     same reason: an auto-scrolling row of links is not operable.
     All four declarations are load-bearing:
       * `animation: none` — the target stops moving. This is the fix.
       * `a.marquee-dupe { display: none }` — the track holds two identical sets so
         translateX(-50%) lands on the seam. With no animation the second set is
         just every logo twice in a row the reader scrolls by hand. Measured at
         390px: 24 anchors before, 12 after, and the strip 4391px wide before,
         2196 after.
       * `overflow-x: auto` — with the animation off, something has to reach the
         logos past the fold. Only **2 of the 12** are inside the container's box
         at 390px, so removing this would hide ten brands outright.
       * `overscroll-behavior-x: contain` — a horizontal swipe at the end of the
         strip must not become the browser's back gesture. */
  .marquee-container {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .marquee-container::-webkit-scrollbar {
    display: none;
  }

  .marquee-track {
    animation: none;
  }

  .marquee-track > a.marquee-dupe {
    display: none;
  }
}

/* The page must not scroll behind ANY full-screen overlay — B3, 2026-08-19.
   Measured with real touch gestures, and it was needed in two places, which is
   why the class is no longer called `nav-scroll-locked`: the drawer covers 290px
   of a 390px screen and a swipe on the strip beside it moved a city page from
   1200 to 1616, and with the video modal open a swipe moved the homepage 284px
   behind it while closing it lost the reader's place by the same 284.
   `overflow: hidden` is here for the browsers where it is enough; `position:
   fixed` is what actually holds on iOS Safari, and it is why `app.js` (§10b,
   `scrollLock`) stores the scroll offset in `top` on open and restores it on
   close. Removing either half without the other re-opens the bug or loses the
   reader's place. */
body.scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* The 320px band — B3's last overflow item, closed 2026-08-19.
   Every page has measured clean from 360px up since the overflow work, and two
   pages did not at 320: the homepage laid out at 323 and `services/tune-up` at
   333. Both had the same cause and it took pinning the document to 320px to see
   it, because an element that overflows WIDENS the layout viewport and then reads
   as merely filling it — `find_overflow.js` named `header` at 333, which is a
   passenger, not the cause. With the viewport pinned the answer is one class:
   `.section-container`'s 2rem of side padding leaves 256px of a 320px screen, and
   the diagnostics section wanted 259 while the tune-up estimator wanted 269.
   1rem gives both 288 and is the whole fix. Scoped to 359px and below so nothing
   on a 360px-or-wider phone — which is every current handset — moves at all. */
@media (max-width: 359px) {
  .section-container {
    padding: 0 1rem;
  }

  /* `.section-diagnostics` sets its own `padding: 2.5rem 2rem`, so the shared
     `.section-container` rule above never reached the homepage's diagnostics
     section — it needed 259px inside the 256 that 2rem leaves. Two rules, because
     the side padding on this site comes from two different layers and only
     measuring showed which one was binding on which page. */
  .section-diagnostics {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* With the padding halved the binding constraint moved rather than disappeared,
     which is why this needed measuring twice: the section then wanted 307px in
     288 because `.diag-carousel-nav` is a nowrap flex row holding "← Back",
     "1-3 of 4" and "Next →" — 291px of buttons in a 256px box. Wrapping is the
     fix rather than a smaller padding on the buttons, because a wrap has no
     magic number in it and cannot be off by 3px on the next screen size. */
  .diag-carousel-nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* A three-column table in a blog article needs 323px and the article body
     leaves 256 at 320px, so `blogs/garage-opener-light-blinking-diagnostic-codes`
     laid out at 355. Found only because this sweep measured 320 — the earlier
     ones ran 390 and up, where the same table fits with 3px to spare. Two
     articles carry a table; both are checked.
     `display: block` is what makes `overflow-x` apply to a table at all: the rows
     and cells then generate an anonymous table box inside a block-level scroll
     container, which is the standard treatment for a table too wide for the
     screen. Scoped to 359px and below with everything else here, because from
     360px up the table fits and must keep its normal table layout. */
  .article-body-wrapper table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
}