/* McElroys Complete Auto Repair — design system
   Extracted verbatim from the original single-file homepage.
   Tokens first, then components in source order. */

:root {
  --ink: #1a1410;
  --ink-soft: #4a3f36;
  --ink-faint: #7a6f64;
  --cream: #f7f1e6;
  --cream-warm: #ede4d2;
  --paper: #fdf9f0;
  --clay: #c9532e;
  --clay-dark: #a3401f;
  --amber: #d89635;
  --amber-light: #e8b860;
  --navy: #1c2a33;
  --navy-deep: #0d1418;
  --line: #d8cdb8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
a { color: inherit; text-decoration: none; }

.topbar { background: var(--navy-deep); color: var(--amber-light); font-size: 13px; padding: 10px 0; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.topbar-info { display: flex; gap: 28px; flex-wrap: wrap; }
.topbar-info span { display: inline-flex; align-items: center; gap: 6px; }
.topbar-spanish { font-style: italic; color: var(--amber); font-weight: 600; letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 8px; }
.topbar-spanish::before { content: ''; width: 6px; height: 6px; background: var(--amber); border-radius: 50%; }

.header { background: var(--paper); border-bottom: 1px solid var(--line); padding: 16px 0; position: sticky; top: 0; z-index: 100; }
.header .container { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.logo svg { width: 300px; height: 130px; display: block; }
.nav { display: flex; gap: 32px; font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; }
.nav a { color: var(--ink); padding: 8px 0; border-bottom: 2px solid transparent; transition: border-color 0.2s, color 0.2s; }
.nav a:hover { border-bottom-color: var(--clay); color: var(--clay); }
.header-cta { background: var(--clay); color: var(--paper); padding: 12px 22px; font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: background 0.2s; }
.header-cta:hover { background: var(--clay-dark); }
.menu-toggle { display: none; background: none; border: 1px solid var(--ink); padding: 8px 12px; cursor: pointer; font-size: 18px; font-family: inherit; }

.hero { background: var(--navy); color: var(--paper); padding: 80px 0 0; position: relative; overflow: hidden; border-top: 4px solid var(--clay); }
.hero::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 50%; background: linear-gradient(135deg, transparent 0%, rgba(201,83,46,0.04) 100%); pointer-events: none; }
.hero .container { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 80px; align-items: center; padding-bottom: 56px; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--amber); font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 3px; margin-bottom: 28px; font-weight: 500; text-transform: uppercase; }
.eyebrow::before, .eyebrow::after { content: ''; width: 30px; height: 1px; background: var(--amber); }
.hero h1 { font-family: 'Oswald', sans-serif; font-size: clamp(48px, 6vw, 76px); font-weight: 600; line-height: 1; letter-spacing: -0.5px; margin-bottom: 24px; color: var(--paper); text-transform: uppercase; }
.hero h1 .accent { color: var(--amber); display: block; font-weight: 500; }
.hero p.lead { font-size: 19px; color: #c8b89c; line-height: 1.65; margin-bottom: 14px; font-weight: 300; max-width: 520px; }
.hero p.spanish { font-size: 16px; color: var(--amber); font-style: italic; line-height: 1.5; margin-bottom: 36px; font-weight: 300; }
.btn-group { display: flex; gap: 14px; flex-wrap: wrap; }
.btn { padding: 18px 30px; font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: 1.8px; font-weight: 600; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; transition: all 0.2s; cursor: pointer; border: 2px solid transparent; }
.hero-microline {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 26px;
  font-size: 13px;
  color: #9fb0bb;
  letter-spacing: 0.4px;
}
.hero-microline span { display: inline-flex; align-items: center; gap: 7px; }
.hero-microline svg { width: 14px; height: 14px; color: var(--amber); flex-shrink: 0; }
.btn-primary { background: var(--clay); color: var(--paper); }
.btn-primary:hover { background: var(--clay-dark); }
.btn-ghost { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn-ghost:hover { background: var(--paper); color: var(--navy); }

.proof-card { background: var(--paper); color: var(--ink); padding: 44px 40px; border-top: 4px solid var(--clay); position: relative; box-shadow: 0 30px 60px rgba(0,0,0,0.35); }
.proof-card::before { content: 'VERIFIED'; position: absolute; top: -14px; right: 32px; background: var(--amber); color: var(--navy-deep); font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 2px; padding: 6px 12px; font-weight: 700; }
.proof-rating { display: flex; align-items: baseline; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.proof-stars { font-size: 24px; color: var(--amber); letter-spacing: 3px; }
.proof-num { font-family: 'Oswald', sans-serif; font-size: 56px; font-weight: 600; line-height: 1; color: var(--navy); }
.proof-count { font-size: 13px; color: var(--ink-faint); line-height: 1.4; }
.proof-count strong { color: var(--ink); font-weight: 600; display: block; font-size: 14px; }
.proof-slide { min-height: 110px; }
.proof-slide.hidden { display: none; }
.proof-quote { font-size: 17px; line-height: 1.55; color: var(--ink); font-weight: 400; margin-bottom: 14px; font-style: italic; }
.proof-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-faint); letter-spacing: 0.3px; }
.proof-meta .author { color: var(--ink); font-weight: 600; }
.proof-meta .source { font-family: 'Oswald', sans-serif; letter-spacing: 1.5px; font-size: 11px; }
.proof-counter {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--ink-faint);
  font-weight: 600;
}
.proof-counter-current { color: var(--clay); font-size: 16px; }
.proof-counter-sep { margin: 0 4px; opacity: 0.4; }

.proof-track {
  position: relative;
  min-height: 130px;
  overflow: hidden;
}
.proof-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
}
.proof-slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s;
}

.proof-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.proof-arrow {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s;
  flex-shrink: 0;
}
.proof-arrow svg { width: 14px; height: 14px; }
.proof-arrow:hover {
  background: var(--clay);
  color: var(--paper);
  border-color: var(--clay);
}

.proof-dots {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
}
.proof-dot {
  width: 22px;
  height: 3px;
  background: var(--line);
  cursor: pointer;
  transition: background 0.25s, width 0.25s;
  border: none;
  padding: 0;
}
.proof-dot:hover { background: var(--amber); }
.proof-dot.active { background: var(--clay); width: 32px; }

.proof-progress {
  height: 2px;
  background: var(--cream-warm);
  margin-top: 14px;
  overflow: hidden;
  position: relative;
}
.proof-progress-bar {
  height: 100%;
  background: var(--clay);
  width: 0%;
  transition: width 0.1s linear;
}
.proof-progress-bar.running {
  animation: progressFill 7s linear forwards;
}
@keyframes progressFill {
  from { width: 0%; }
  to { width: 100%; }
}

.hero-trust { background: var(--navy-deep); border-top: 1px solid #2a3a44; padding: 24px 0; }
.hero-trust .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.trust-cell { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--amber-light); }
.trust-cell .trust-num { font-family: 'Oswald', sans-serif; font-size: 32px; font-weight: 600; color: var(--paper); line-height: 1; }
.trust-cell .trust-num .sm { font-size: 16px; color: var(--amber); }
.trust-cell .trust-label { font-size: 11px; color: var(--amber-light); letter-spacing: 2px; text-transform: uppercase; line-height: 1.3; }
.trust-cell .trust-label strong { color: var(--paper); display: block; font-weight: 600; font-size: 13px; letter-spacing: 1.5px; }
.trust-badge { height: 48px; width: auto; display: block; flex-shrink: 0; }
.trust-badge-cell { gap: 12px; }

section { padding: 100px 0; }
.section-head { text-align: center; margin-bottom: 64px; max-width: 720px; margin-left: auto; margin-right: auto; }
.eyebrow-light { display: inline-flex; align-items: center; gap: 12px; color: var(--clay); font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 3px; margin-bottom: 18px; font-weight: 500; text-transform: uppercase; }
.eyebrow-light::before, .eyebrow-light::after { content: ''; width: 30px; height: 1px; background: var(--clay); }
h2 { font-family: 'Oswald', sans-serif; font-size: clamp(38px, 4.5vw, 56px); font-weight: 600; color: var(--navy); letter-spacing: -0.3px; line-height: 1.05; text-transform: uppercase; }
h2 .accent { color: var(--clay); }
.section-sub { font-size: 16px; color: var(--ink-soft); font-style: italic; margin-top: 14px; font-weight: 300; }

.services-section { background: var(--cream); }
.services-feature { background: var(--navy); color: var(--paper); padding: 48px 56px; margin-bottom: 28px; display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; border-left: 6px solid var(--clay); }
.services-feature-icon { background: var(--clay); width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; color: var(--paper); }
.services-feature-badge { background: var(--amber); color: var(--navy-deep); font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 2px; padding: 5px 12px; font-weight: 700; margin-bottom: 10px; display: inline-block; }
.services-feature h3 { font-family: 'Oswald', sans-serif; font-size: 30px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.services-feature p { font-size: 15px; color: #c8b89c; line-height: 1.6; max-width: 520px; font-weight: 300; }
.services-feature-link { color: var(--amber); font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--amber); padding-bottom: 3px; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service { background: var(--paper); padding: 36px 28px; border: 1px solid var(--line); transition: all 0.25s; cursor: pointer; }
.service:hover { border-color: var(--clay); transform: translateY(-3px); }
.service .icon-wrap { width: 52px; height: 52px; background: var(--cream-warm); color: var(--clay); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: background 0.25s, color 0.25s; }
.service:hover .icon-wrap { background: var(--clay); color: var(--paper); }
.service h3 { font-family: 'Oswald', sans-serif; font-size: 19px; font-weight: 600; color: var(--navy); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.service p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

.expect-section { background: var(--paper); }
.expect-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.expect-item { text-align: center; }
.expect-num { font-family: 'Oswald', sans-serif; font-size: 56px; font-weight: 600; color: var(--clay); line-height: 1; margin-bottom: 12px; }
.expect-item h3 { font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 600; color: var(--navy); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.8px; }
.expect-item p { font-size: 14px; color: var(--ink-soft); line-height: 1.65; }

.team-section { background: var(--cream-warm); }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.team-member { background: var(--paper); padding: 36px 28px; text-align: center; border: 1px solid var(--line); }
.team-avatar { width: 88px; height: 88px; border-radius: 50%; background: var(--navy); color: var(--amber); display: flex; align-items: center; justify-content: center; font-family: 'Oswald', sans-serif; font-size: 30px; font-weight: 600; margin: 0 auto 18px; border: 3px solid var(--clay); }
.team-member h3 { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600; color: var(--navy); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.team-member .role { font-size: 12px; color: var(--clay); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.team-member p { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }

/* On the Air / Radio sponsorship section */
.radio-section {
  background: linear-gradient(135deg, #1c2a33 0%, #0d1418 100%);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.radio-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--clay), var(--amber), var(--clay), transparent);
}
.radio-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.radio-visual {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(216,150,53,0.25);
  padding: 48px 40px;
  text-align: center;
  position: relative;
}
.radio-visual::before {
  content: 'ON AIR';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--clay);
  color: var(--paper);
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  padding: 6px 16px;
  font-weight: 700;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(201,83,46,0.4); }
  50% { opacity: 0.85; box-shadow: 0 0 0 8px rgba(201,83,46,0); }
}
.radio-station {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 1px;
  font-size: 14px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.radio-show-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4vw, 52px);
  color: var(--paper);
  line-height: 1;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.radio-show-title .or {
  color: var(--clay);
  font-style: italic;
  font-weight: 500;
  font-size: 0.7em;
  margin: 0 0.15em;
}
.radio-show-acronym {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  color: var(--amber-light);
  letter-spacing: 4px;
  margin-bottom: 24px;
  font-weight: 500;
}
.radio-time {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border: 1px solid var(--amber);
  color: var(--amber);
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  margin-top: 8px;
}
.radio-time .day {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amber-light);
  padding-right: 14px;
  border-right: 1px solid rgba(216,150,53,0.4);
}
.radio-time .hour {
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--paper);
}
.radio-content h2 { color: var(--paper); }
.radio-content h2 .accent { color: var(--amber); }
.radio-content p {
  font-size: 17px;
  line-height: 1.75;
  color: #b8c4cc;
  font-weight: 300;
  margin-bottom: 18px;
}
.radio-content p strong { color: var(--paper); font-weight: 500; }
.radio-content .eyebrow-light { color: var(--clay); }
.radio-content .eyebrow-light::before, .radio-content .eyebrow-light::after { background: var(--clay); }
.radio-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--amber);
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 4px;
  margin-top: 12px;
}
.radio-cta:hover { color: var(--paper); border-bottom-color: var(--paper); }

.reviews-section { background: var(--navy); color: var(--paper); }
.reviews-section h2 { color: var(--paper); }
.reviews-section .section-sub { color: var(--amber-light); }
.reviews-section .eyebrow-light { color: var(--amber); }
.reviews-section .eyebrow-light::before, .reviews-section .eyebrow-light::after { background: var(--amber); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.review-card { background: rgba(255,255,255,0.04); border-left: 3px solid var(--amber); padding: 32px 28px; }
.review-stars { color: var(--amber); font-size: 16px; letter-spacing: 3px; margin-bottom: 16px; }
.review-quote { font-size: 16px; line-height: 1.6; color: var(--paper); margin-bottom: 20px; font-style: italic; font-weight: 300; }
.review-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--amber-light); }
.review-meta .author { color: var(--paper); font-weight: 600; }
.reviews-cta { text-align: center; }
.reviews-cta a { color: var(--amber); font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: 2px; border-bottom: 1px solid var(--amber); padding-bottom: 4px; font-weight: 600; text-transform: uppercase; }

.story-section { background: var(--paper); }
.story-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; }
.story-section p { font-size: 17px; color: var(--ink-soft); line-height: 1.75; margin-bottom: 18px; font-weight: 300; }
.story-section p .names { color: var(--ink); font-weight: 500; }
.story-section .spanish { font-size: 15px; color: var(--clay); font-style: italic; margin-bottom: 28px; }
.story-link { color: var(--clay); font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid var(--clay); padding-bottom: 3px; }
.partner-card { background: var(--cream-warm); border-left: 4px solid var(--clay); padding: 40px 36px; }
.partner-card .tag { font-family: 'Oswald', sans-serif; font-size: 11px; color: var(--clay); letter-spacing: 2.5px; margin-bottom: 18px; font-weight: 700; text-transform: uppercase; }
.partner-card p { font-size: 19px; color: var(--navy); line-height: 1.55; margin-bottom: 18px; font-weight: 400; font-style: italic; }
.partner-card .attribution { font-family: 'Oswald', sans-serif; font-size: 12px; color: var(--clay-dark); letter-spacing: 1.5px; font-weight: 600; text-transform: uppercase; }

.visit-section { background: var(--navy-deep); color: var(--paper); }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.visit-section h2 { color: var(--paper); }
.visit-info-block { margin-bottom: 28px; }
.visit-info-block h4 { font-family: 'Oswald', sans-serif; font-size: 12px; color: var(--amber); letter-spacing: 2.5px; margin-bottom: 10px; font-weight: 600; text-transform: uppercase; }
.visit-info-block p, .visit-info-block a { font-size: 18px; color: var(--paper); line-height: 1.6; font-weight: 300; }
.amenities { display: flex; flex-wrap: wrap; gap: 10px; }
.amenities span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--paper);
  border: 1px solid rgba(216,150,53,0.35);
  padding: 8px 14px;
}
.amenities svg { width: 15px; height: 15px; color: var(--amber); flex-shrink: 0; }
.visit-buttons { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.visit-map { background: var(--navy); border: 1px solid #2a3a44; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.visit-map svg { width: 100%; height: 100%; display: block; }
.visit-map-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); color: var(--clay); }
.visit-map-label { position: absolute; bottom: 24px; left: 24px; background: var(--paper); color: var(--navy); padding: 16px 22px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
.visit-map-label small { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink-soft); margin-top: 4px; }

/* Certifications section */
.certs-section { background: var(--cream-warm); padding: 72px 0; border-top: 1px solid var(--line); }
.certs-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.certs-title { font-family: 'Oswald', sans-serif; font-size: clamp(28px, 3vw, 38px); font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: -0.3px; line-height: 1.1; margin-bottom: 18px; }
.certs-title .accent { color: var(--clay); }
.certs-text { font-size: 16px; color: var(--ink-soft); line-height: 1.75; font-weight: 300; }
.certs-text strong { color: var(--navy); font-weight: 600; }
.certs-badges { display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; }
.cert-badge { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 180px; text-align: center; }
.cert-badge img { height: 96px; width: auto; display: block; }
.cert-badge span { font-family: 'Oswald', sans-serif; font-size: 12px; color: var(--ink-soft); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; line-height: 1.3; }

.footer { background: #050a0d; color: #8a9ba6; padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 44px; }
.footer-brand p { font-size: 13px; line-height: 1.7; margin-top: 20px; color: #6a7a86; max-width: 260px; }
.footer-col h4 { font-family: 'Oswald', sans-serif; font-size: 12px; color: var(--amber); letter-spacing: 2.5px; margin-bottom: 18px; font-weight: 600; text-transform: uppercase; }
.footer-col p, .footer-col a { font-size: 14px; line-height: 1.8; color: #b8c4cc; display: block; }
.footer-col a:hover { color: var(--amber); }
.social { display: flex; gap: 12px; margin-top: 16px; }
.social a { width: 38px; height: 38px; border: 1px solid #2a3a44; display: inline-flex; align-items: center; justify-content: center; color: var(--amber); transition: all 0.2s; }
.social a:hover { background: var(--amber); color: var(--navy-deep); border-color: var(--amber); }
.footer-bottom { border-top: 1px solid #1a2832; padding-top: 24px; text-align: center; font-family: 'Oswald', sans-serif; font-size: 11px; color: #4a5a64; letter-spacing: 2px; text-transform: uppercase; }

.ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; }

/* Sticky mobile call bar — hidden on desktop, shown on mobile via media query */
.mobile-call-bar { display: none; }

@media (max-width: 1024px) {
  .container { padding: 0 32px; }
  .hero { padding: 60px 0 0; }
  .hero-grid { gap: 48px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .expect-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: 1fr; }
  .story-grid, .visit-grid { grid-template-columns: 1fr; gap: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .certs-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .radio-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .radio-content .eyebrow-light { justify-content: center; }
  .radio-cta { justify-content: center; }
  .services-feature { grid-template-columns: auto 1fr; gap: 28px; }
  .services-feature-link { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .topbar { font-size: 12px; }
  .topbar .container { justify-content: center; gap: 14px; }
  .topbar-info { gap: 14px; justify-content: center; font-size: 11px; }
  .topbar-info span:nth-child(3) { display: none; }
  .topbar-spanish { display: inline-flex; font-size: 11px; }
  .topbar-spanish::before { width: 5px; height: 5px; }
  .header { padding: 12px 0; }
  .header .container { gap: 12px; }
  .logo svg { width: 200px; height: 90px; }
  .nav { display: none; }
  .nav.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); flex-direction: column; padding: 20px; gap: 18px; border-bottom: 1px solid var(--line); }
  .menu-toggle { display: block; }
  .header-cta { display: none; }
  .hero { padding: 48px 0 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
  .hero p.lead { font-size: 17px; }
  .btn { padding: 14px 22px; font-size: 13px; flex: 1 1 auto; justify-content: center; }
  .proof-card { padding: 32px 24px; }
  .proof-counter { top: 16px; right: 16px; font-size: 11px; }
  .proof-counter-current { font-size: 14px; }
  .proof-track { min-height: 160px; }
  .proof-num { font-size: 44px; }
  .proof-quote { font-size: 15px; }
  .hero-trust .container { grid-template-columns: 1fr 1fr; gap: 20px; }
  .trust-cell { justify-content: flex-start; }
  .trust-cell .trust-num { font-size: 26px; }
  section { padding: 64px 0; }
  .section-head { margin-bottom: 40px; }
  .services-feature { grid-template-columns: 1fr; padding: 32px 24px; gap: 20px; text-align: left; }
  .services-feature-icon { width: 60px; height: 60px; }
  .services-feature h3 { font-size: 24px; }
  .services-grid { grid-template-columns: 1fr; }
  .expect-grid { grid-template-columns: 1fr; gap: 32px; }
  .team-grid { grid-template-columns: 1fr; gap: 16px; }
  .team-member { padding: 28px 24px; }
  .partner-card { padding: 28px 24px; }
  .partner-card p { font-size: 17px; }
  .visit-grid { gap: 32px; }
  .visit-info-block p, .visit-info-block a { font-size: 16px; }
  .hero-microline { gap: 12px 18px; font-size: 12px; margin-top: 20px; }
  .amenities span { font-size: 12px; padding: 7px 11px; }
  .radio-section .container { padding: 0 20px; }
  .radio-grid { grid-template-columns: 1fr; gap: 32px; }
  .radio-visual { padding: 36px 24px; order: -1; }
  .radio-show-title { font-size: 38px; }
  .radio-content p { font-size: 16px; }
      .certs-section { padding: 48px 0; }
  .certs-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .certs-badges { gap: 32px; }
  .cert-badge img { height: 80px; }
      .footer { padding: 48px 0 24px; }
  /* Add bottom padding to body so sticky button doesn't cover footer */
  body { padding-bottom: 70px; }
  /* Sticky mobile call button */
  .mobile-call-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--clay);
    color: var(--paper);
    padding: 0;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
    border-top: 2px solid var(--amber);
  }
  .mobile-call-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 16px;
    color: var(--paper);
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
  }
  .mobile-call-bar a + a {
    border-left: 1px solid rgba(255,255,255,0.25);
    background: var(--clay-dark);
  }
  .mobile-call-bar svg { width: 18px; height: 18px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   Multi-page additions
   Everything above this line is the original homepage design system, verbatim.
   Everything below extends it for the service, story and utility pages using
   the same tokens, sharp corners and Oswald/Inter pairing.
   ========================================================================== */

/* --- Nav: Services dropdown ---------------------------------------------- */
.nav-item { position: relative; display: flex; }
.nav-item > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-caret { width: 12px; height: 12px; margin-top: 1px; transition: transform 0.2s; }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); }
.nav a.is-active { border-bottom-color: var(--clay); color: var(--clay); }

.nav-sub {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 268px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--clay);
  padding: 8px 0;
  margin: 0;
  list-style: none;
  box-shadow: 0 18px 40px rgba(0,0,0,0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 120;
}
.nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.nav-sub a {
  display: block;
  padding: 11px 22px;
  font-size: 13px;
  letter-spacing: 1.2px;
  border-bottom: none;
  border-left: 3px solid transparent;
  white-space: nowrap;
}
.nav-sub a:hover { background: var(--cream); color: var(--clay); border-left-color: var(--clay); }
.nav-sub-all { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.nav-sub-all a { color: var(--ink-faint); }
.nav-cta { display: none; }

/* --- Breadcrumbs --------------------------------------------------------- */
.breadcrumbs { background: var(--cream-warm); border-bottom: 1px solid var(--line); padding: 14px 0; font-size: 12px; }
.breadcrumbs .container { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.breadcrumbs a, .breadcrumbs span { font-family: 'Oswald', sans-serif; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 500; }
.breadcrumbs a { color: var(--ink-soft); border-bottom: 1px solid transparent; }
.breadcrumbs a:hover { color: var(--clay); border-bottom-color: var(--clay); }
.breadcrumbs [aria-current] { color: var(--clay); }
.crumb-sep { color: var(--ink-faint); opacity: 0.6; }

/* --- Page hero (interior pages) ------------------------------------------ */
.page-hero { background: var(--navy); color: var(--paper); padding: 76px 0 68px; border-top: 4px solid var(--clay); position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 45%; background: linear-gradient(135deg, transparent 0%, rgba(201,83,46,0.05) 100%); pointer-events: none; }
.page-hero .container { position: relative; z-index: 2; max-width: 940px; }
.page-hero h1 { font-family: 'Oswald', sans-serif; font-size: clamp(38px, 5vw, 62px); font-weight: 600; line-height: 1.03; letter-spacing: -0.5px; text-transform: uppercase; color: var(--paper); margin-bottom: 22px; }
.page-hero h1 .accent { color: var(--amber); }
.page-hero p.lead { font-size: 19px; color: #c8b89c; line-height: 1.65; font-weight: 300; max-width: 680px; }
.page-hero p.spanish { font-size: 16px; color: var(--amber); font-style: italic; font-weight: 300; margin-top: 12px; }
.page-hero .btn-group { margin-top: 32px; }

/* --- Long-form content --------------------------------------------------- */
.prose-section { background: var(--paper); }
.prose { max-width: 780px; }
.prose h2 { font-size: clamp(30px, 3.4vw, 40px); margin-bottom: 18px; }
.prose h2:not(:first-child), .prose h3:not(:first-child) { margin-top: 46px; }
.prose h3 { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 12px; }
.prose p { font-size: 17px; color: var(--ink-soft); line-height: 1.75; margin-bottom: 18px; font-weight: 300; }
.prose p strong, .prose li strong { color: var(--navy); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 20px 0; padding-left: 0; list-style: none; }
.prose li { font-size: 16px; color: var(--ink-soft); line-height: 1.7; font-weight: 300; padding-left: 26px; margin-bottom: 10px; position: relative; }
.prose ul > li::before { content: ''; position: absolute; left: 0; top: 11px; width: 10px; height: 2px; background: var(--clay); }
.prose ol { counter-reset: step; }
.prose ol > li { counter-increment: step; padding-left: 38px; }
.prose ol > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 600; color: var(--clay); letter-spacing: 1px; }
.prose .spanish { color: var(--clay); font-style: italic; }
.prose a:not(.btn) { color: var(--clay); border-bottom: 1px solid var(--clay); font-weight: 400; }
.prose a:not(.btn):hover { color: var(--clay-dark); }

.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }

/* --- Sidebar rail -------------------------------------------------------- */
.rail { position: sticky; top: 200px; display: flex; flex-direction: column; gap: 20px; }
.rail-card { background: var(--cream); border: 1px solid var(--line); border-top: 4px solid var(--clay); padding: 28px 26px; }
.rail-card.dark { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.rail-card h4 { font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--clay); font-weight: 600; margin-bottom: 14px; }
.rail-card.dark h4 { color: var(--amber); }
.rail-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.65; font-weight: 300; margin-bottom: 14px; }
.rail-card.dark p { color: #b8c4cc; }
.rail-card .btn { width: 100%; justify-content: center; padding: 14px 20px; }
.rail-list { display: flex; flex-direction: column; }
.rail-list a { font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 500; color: var(--navy); padding: 11px 0; border-bottom: 1px solid var(--line); }
.rail-list a:last-child { border-bottom: none; }
.rail-list a:hover { color: var(--clay); }
.rail-facts { list-style: none; margin: 0; padding: 0; }
.rail-facts li { font-size: 14px; color: var(--ink-soft); line-height: 1.5; padding: 9px 0; border-bottom: 1px solid var(--line); font-weight: 300; }
.rail-facts li:last-child { border-bottom: none; }
.rail-facts strong { display: block; font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin-bottom: 2px; }

/* --- Symptom / checklist cards ------------------------------------------- */
.symptoms { background: var(--cream); }
.symptom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.symptom { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--clay); padding: 28px 26px; }
.symptom h3 { font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.symptom p { font-size: 14px; color: var(--ink-soft); line-height: 1.65; font-weight: 300; }

/* --- Numbered process steps ---------------------------------------------- */
.steps { display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); }
.step { background: var(--paper); padding: 30px 32px; display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: start; }
.step-num { font-family: 'Oswald', sans-serif; font-size: 34px; font-weight: 600; color: var(--clay); line-height: 1; }
.step h3 { font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--ink-soft); line-height: 1.7; font-weight: 300; }

/* --- Tucson angle callout ------------------------------------------------ */
.tucson-note { background: var(--navy); color: var(--paper); padding: 44px 48px; border-left: 6px solid var(--amber); margin: 40px 0; }
.tucson-note h3 { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--paper); margin-bottom: 14px; }
.tucson-note p { font-size: 16px; color: #c8b89c; line-height: 1.75; font-weight: 300; margin-bottom: 12px; }
.tucson-note p:last-child { margin-bottom: 0; }
.tucson-note strong { color: var(--amber); font-weight: 500; }

/* --- FAQ ----------------------------------------------------------------- */
.faq-section { background: var(--cream-warm); }
.faq-list { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 24px 44px 24px 0;
  cursor: pointer;
  position: relative;
  list-style: none;
  line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  font-weight: 400;
  color: var(--clay);
  line-height: 1;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover { color: var(--clay); }
.faq-answer { padding: 0 44px 26px 0; }
.faq-answer p { font-size: 16px; color: var(--ink-soft); line-height: 1.75; font-weight: 300; margin-bottom: 12px; }
.faq-answer p:last-child { margin-bottom: 0; }

/* --- Related services ---------------------------------------------------- */
.related-section { background: var(--paper); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related { background: var(--paper); border: 1px solid var(--line); padding: 30px 28px; transition: all 0.25s; display: block; }
.related:hover { border-color: var(--clay); transform: translateY(-3px); }
.related h3 { font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.related p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; font-weight: 300; margin-bottom: 14px; }
.related span { font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--clay); font-weight: 600; }

/* --- CTA band ------------------------------------------------------------ */
.cta-band { background: linear-gradient(135deg, #1c2a33 0%, #0d1418 100%); color: var(--paper); padding: 76px 0; text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--clay), var(--amber), var(--clay), transparent); }
.cta-band h2 { color: var(--paper); margin-bottom: 16px; }
.cta-band h2 .accent { color: var(--amber); }
.cta-band p { font-size: 17px; color: #b8c4cc; line-height: 1.7; font-weight: 300; max-width: 620px; margin: 0 auto 32px; }
.cta-band .btn-group { justify-content: center; }
.cta-band .spanish { color: var(--amber); font-style: italic; font-size: 15px; margin-top: 22px; }

/* --- Review pull-quote --------------------------------------------------- */
.pull-review { background: var(--cream); border-left: 4px solid var(--amber); padding: 32px 34px; margin: 36px 0; }
.pull-review .review-stars { color: var(--amber); font-size: 15px; letter-spacing: 3px; margin-bottom: 14px; }
.pull-review p { font-size: 18px; line-height: 1.6; color: var(--navy); font-style: italic; font-weight: 300; margin-bottom: 14px; }
.pull-review .review-meta { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--ink-faint); flex-wrap: wrap; }
.pull-review .author { color: var(--ink); font-weight: 600; }
.pull-review .source { font-family: 'Oswald', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }

/* --- Coupons ------------------------------------------------------------- */
.coupon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.coupon { background: var(--paper); border: 2px dashed var(--clay); padding: 34px 32px; position: relative; }
.coupon-tag { display: inline-block; background: var(--amber); color: var(--navy-deep); font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 2px; padding: 5px 12px; font-weight: 700; margin-bottom: 14px; text-transform: uppercase; }
.coupon h3 { font-family: 'Oswald', sans-serif; font-size: 26px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; line-height: 1.15; }
.coupon p { font-size: 15px; color: var(--ink-soft); line-height: 1.65; font-weight: 300; margin-bottom: 14px; }
.coupon .fine { font-size: 12px; color: var(--ink-faint); border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 0; }

/* --- Notice / owner-input placeholder ------------------------------------ */
.notice { background: var(--cream-warm); border-left: 4px solid var(--amber); padding: 28px 30px; margin: 32px 0; }
.notice h3 { font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.notice p { font-size: 15px; color: var(--ink-soft); line-height: 1.7; font-weight: 300; margin-bottom: 0; }

/* --- Forms --------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--navy); font-weight: 600; }
.field input, .field select, .field textarea {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 13px 15px;
  width: 100%;
  transition: border-color 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--clay); }
.field textarea { resize: vertical; min-height: 130px; }
.field .hint { font-size: 12px; color: var(--ink-faint); }
.form-note { font-size: 13px; color: var(--ink-faint); margin-top: 16px; line-height: 1.6; }

/* --- Team grid on About -------------------------------------------------- */
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); margin: 44px 0; }
.about-stat { background: var(--paper); padding: 30px 24px; text-align: center; }
.about-stat .num { font-family: 'Oswald', sans-serif; font-size: 42px; font-weight: 600; color: var(--clay); line-height: 1; margin-bottom: 8px; }
.about-stat .lbl { font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; line-height: 1.4; }

/* --- Timeline ------------------------------------------------------------ */
.timeline { border-left: 2px solid var(--line); padding-left: 34px; margin: 36px 0; }
.timeline-item { position: relative; padding-bottom: 34px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: -42px; top: 6px; width: 14px; height: 14px; background: var(--clay); border: 3px solid var(--paper); }
.timeline-year { font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 2.5px; color: var(--clay); font-weight: 700; margin-bottom: 6px; }
.timeline-item p { font-size: 16px; color: var(--ink-soft); line-height: 1.7; font-weight: 300; margin-bottom: 0; }

/* --- Service hub grid ---------------------------------------------------- */
.hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.hub-card { background: var(--paper); border: 1px solid var(--line); padding: 36px 34px; display: block; transition: all 0.25s; }
.hub-card:hover { border-color: var(--clay); transform: translateY(-3px); }
.hub-card .icon-wrap { width: 52px; height: 52px; background: var(--cream-warm); color: var(--clay); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: background 0.25s, color 0.25s; }
.hub-card:hover .icon-wrap { background: var(--clay); color: var(--paper); }
.hub-card h3 { font-family: 'Oswald', sans-serif; font-size: 21px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.hub-card p { font-size: 15px; color: var(--ink-soft); line-height: 1.65; font-weight: 300; margin-bottom: 14px; }
.hub-card .more { font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--clay); font-weight: 600; }

/* --- Contact split ------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact-map { border: 1px solid var(--line); aspect-ratio: 4/3; display: block; position: relative; overflow: hidden; background: var(--navy); }
.contact-map svg { width: 100%; height: 100%; display: block; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  /* The expanded menu needs more room than the tablet header can give it,
     so the hamburger takes over one breakpoint earlier than the original. */
  .nav { display: none; }
  .nav.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    flex-direction: column;
    padding: 20px;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    box-shadow: 0 18px 40px rgba(0,0,0,0.16);
  }
  .nav.open > a, .nav.open .nav-item > a { padding: 12px 0; border-bottom: 1px solid var(--line); width: 100%; }
  .menu-toggle { display: block; }
  .header-cta { display: none; }

  .nav-item { display: block; width: 100%; }
  .nav-item > a { justify-content: space-between; }
  .nav-caret { display: none; }
  .nav-sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--line);
    min-width: 0;
    padding: 4px 0 8px 0;
    margin: 0 0 4px 12px;
    transition: none;
  }
  .nav-sub a { padding: 9px 16px; white-space: normal; }
  .nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--clay);
    color: var(--paper);
    padding: 15px 22px;
    margin-top: 14px;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: none;
  }
  .nav-cta:hover { background: var(--clay-dark); color: var(--paper); }

  .content-grid { grid-template-columns: 1fr; gap: 48px; }
  .rail { position: static; }
  .symptom-grid, .related-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .page-hero { padding: 52px 0 48px; }
  .page-hero p.lead { font-size: 17px; }
  .prose p { font-size: 16px; }
  .symptom-grid, .related-grid, .hub-grid, .coupon-grid, .form-grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 10px; padding: 26px 24px; }
  .tucson-note { padding: 30px 26px; margin: 32px 0; }
  .cta-band { padding: 56px 0; }
  .breadcrumbs { padding: 12px 0; font-size: 11px; }
  .breadcrumbs .container { gap: 7px; }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .timeline { padding-left: 26px; }
  .timeline-item::before { left: -34px; }
  .pull-review { padding: 26px 24px; }
  .coupon { padding: 28px 24px; }
  .faq-item summary { font-size: 16px; padding-right: 38px; }
}

/* <picture> is a wrapper only — let the <img> stay the real layout box. */
picture { display: contents; }

/* --- Service request: visual type picker ---------------------------------- */
.request-section { background: var(--cream); }
.request-form { max-width: 900px; margin: 0 auto; }
.form-step { margin-bottom: 44px; }
.form-step-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.form-step-num { font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--clay); }
.form-step-head h2 { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.6px; line-height: 1.2; }
.form-step-head .opt { font-size: 12px; color: var(--ink-faint); font-family: 'Inter', sans-serif; text-transform: none; letter-spacing: 0; font-weight: 400; }

.picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.picker input { position: absolute; opacity: 0; width: 0; height: 0; }
.picker label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 22px 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
  height: 100%;
}
.picker label:hover { border-color: var(--clay); transform: translateY(-2px); }
.picker svg { width: 28px; height: 28px; color: var(--clay); flex-shrink: 0; }
.picker .picker-label { font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.8px; line-height: 1.25; }
.picker input:checked + label { border-color: var(--clay); border-width: 2px; background: var(--cream-warm); padding: 21px 13px; }
.picker input:checked + label svg { color: var(--clay-dark); }
.picker input:focus-visible + label { outline: 2px solid var(--clay); outline-offset: 2px; }

.urgency { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.urgency input { position: absolute; opacity: 0; width: 0; height: 0; }
.urgency label {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.urgency label:hover { border-color: var(--clay); }
.urgency input:checked + label { border-color: var(--clay); border-width: 2px; background: var(--cream-warm); padding: 17px 19px; }
.urgency input:focus-visible + label { outline: 2px solid var(--clay); outline-offset: 2px; }
.urgency strong { display: block; font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px; }
.urgency span { font-size: 13px; color: var(--ink-soft); line-height: 1.5; font-weight: 300; }

.form-submit { border-top: 1px solid var(--line); padding-top: 28px; margin-top: 8px; }
.form-submit .btn { padding: 20px 40px; font-size: 15px; }

/* Confirmation page */
.thanks-mark { width: 84px; height: 84px; background: var(--clay); color: var(--paper); display: flex; align-items: center; justify-content: center; margin: 0 auto 28px; }
.thanks-mark svg { width: 44px; height: 44px; }

@media (max-width: 1024px) {
  .picker { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .picker { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .picker label { padding: 18px 10px; }
  .urgency { grid-template-columns: 1fr; }
  .form-step { margin-bottom: 34px; }
  .form-step-head { flex-wrap: wrap; gap: 6px 12px; }
  .form-submit .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Accessibility pass — WCAG 2.1 AA
   Measured with a contrast audit across all 16 pages. Everything below either
   fixes a real failure or hardens focus/motion behaviour. Colour changes keep
   the original hue and only darken/lighten enough to clear the threshold.
   ========================================================================== */

:root {
  /* was #c9532e — 4.20:1 on paper, 3.92 on cream, 3.49 on cream-warm (all fail AA
     for small text), and 4.20:1 under paper-coloured button labels. Darkening to
     #ac4727 clears 4.5:1 on every light surface and inside the primary button. */
  --clay: #ac4727;
  --clay-dark: #8a3319;

  /* --clay on navy is only 2.59:1 after darkening, so dark sections get their own
     accent. Amber on navy measures 5.83:1. */
  --accent-on-dark: #d89635;

  /* was #7a6f64 — 4.36:1 on cream, 3.88 on cream-warm. */
  --ink-faint: #6f655b;

  /* Gold is unreadable on light backgrounds (2.24:1). Used only where a star or
     label sits on cream/paper; the bright --amber stays for dark sections. */
  --amber-on-light: #926624;

  /* Footer greys on #050a0d measured 2.78:1 and 4.49:1. */
  --footer-text: #9fb0bb;
  --footer-muted: #7d909c;
}

/* --- Invisible text: .prose p strong (0,1,2) outranked .tucson-note strong
       (0,1,1), so emphasised phrases inside the dark callout rendered navy on
       navy. Raise specificity so the callout wins inside prose. ------------- */
.prose .tucson-note strong,
.tucson-note p strong { color: var(--amber); }

/* --- Eyebrows and accents sitting on dark sections ---------------------- */
.radio-content .eyebrow-light { color: var(--accent-on-dark); }
.radio-content .eyebrow-light::before,
.radio-content .eyebrow-light::after { background: var(--accent-on-dark); }

/* --- Gold rating stars on light surfaces -------------------------------- */
.pull-review .review-stars,
.proof-stars { color: var(--amber-on-light); }

/* --- Footer ------------------------------------------------------------- */
.footer { color: var(--footer-text); }
.footer-brand p { color: var(--footer-muted); }
.footer-bottom { color: var(--footer-muted); }

/* --- Breadcrumb separator on cream-warm --------------------------------- */
.crumb-sep { color: var(--ink-soft); opacity: 1; }

/* --- Focus visibility ---------------------------------------------------
   .field *:focus removed the outline and replaced it with a 1px border colour
   change, which is not a sufficient focus indicator. Restore a real ring
   everywhere, keyboard-only so mouse users see no change. ----------------- */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 2px;
  border-radius: 1px;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--clay); outline-offset: 1px; }
/* On dark sections the clay ring is low-contrast — use amber there. */
.hero :focus-visible, .page-hero :focus-visible, .cta-band :focus-visible,
.reviews-section :focus-visible, .visit-section :focus-visible,
.radio-section :focus-visible, .footer :focus-visible,
.mobile-call-bar :focus-visible { outline-color: var(--amber); }

/* --- Motion ------------------------------------------------------------
   The hero carousel auto-advances and the ON AIR badge pulses indefinitely.
   Respect a stated preference for reduced motion. ------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .proof-slide { transition: none; }
}

/* --- Legibility: cap measure on centred prose blocks --------------------
   /schedule/ ran to 96 characters per line; comfortable is 45-85. --------- */
.prose[style*="text-align:center"], .prose.narrow { max-width: 62ch; }

/* --- Carousel pause control (WCAG 2.2.2 Pause, Stop, Hide) -------------- */
.proof-pause {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}
.proof-pause:hover { background: var(--clay); color: var(--paper); border-color: var(--clay); }
.proof-pause svg { width: 12px; height: 12px; }

/* Visually hidden, still announced by screen readers and counted in the outline. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.prose.narrow { max-width: 62ch; }

/* --- Spam protection widget --------------------------------------------
   Netlify injects the reCAPTCHA iframe into [data-netlify-recaptcha]. Give it
   room and let it scroll rather than overflow on narrow phones. */
.captcha-step [data-netlify-recaptcha] { min-height: 78px; max-width: 100%; overflow-x: auto; }
.captcha-step [data-netlify-recaptcha]:empty::after {
  content: 'Spam check appears here once the site is deployed.';
  display: block;
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  background: var(--paper);
}

/* Section labels moved from <h4> to <h3> to keep the heading outline contiguous
   (they sat directly under an <h2>, skipping a level). Styling is unchanged. */
.footer-col h3 { font-family: 'Oswald', sans-serif; font-size: 12px; color: var(--amber); letter-spacing: 2.5px; margin-bottom: 18px; font-weight: 600; text-transform: uppercase; }
.visit-info-block h3 { font-family: 'Oswald', sans-serif; font-size: 12px; color: var(--amber); letter-spacing: 2.5px; margin-bottom: 10px; font-weight: 600; text-transform: uppercase; }

/* ==========================================================================
   Alignment fix — one left rail down the page
   .page-hero .container was capped at 940px and centred, which pushed interior
   hero text 170px right of the header, breadcrumbs, body copy and footer (all
   of which sit on the 1280px container). The homepage hero was never capped, so
   the two hero styles disagreed with each other as well.

   The container now matches every other section; the reading measure is held by
   the text elements instead, which is what should have been carrying it.
   ========================================================================== */
.page-hero .container { max-width: 1280px; }
.page-hero h1 { max-width: 20ch; }
.page-hero p.lead { max-width: 680px; }
.page-hero .eyebrow { margin-bottom: 22px; }

/* Confirmation and error pages stay deliberately centred — there is no body
   content for their hero to align to. Opt in explicitly. */
.page-hero.is-centered .container { max-width: 940px; }
.page-hero.is-centered h1,
.page-hero.is-centered p.lead { max-width: 100%; }

@media (max-width: 768px) {
  .page-hero h1 { max-width: 100%; }
}

/* ==========================================================================
   Mobile audit fixes
   Measured across all 17 pages at 320 / 375 / 414px.
   ========================================================================== */

/* Carousel dots were 22x3 and 32x3 — a 3px-tall tap target. Padding grows the hit
   area to 25px while a ::before keeps the visible bar at 3px.
   The element's own background MUST be cleared for every state: the base rules
   use the `background` shorthand at (0,2,0) — `.proof-dot.active { background:
   var(--clay) }` — which outranks a plain `.proof-dot` override AND resets
   background-clip, so the clay would paint across the full padded box as a solid
   block. These selectors match that specificity and come later. */
.proof-dot {
  height: 3px;
  padding: 11px 0;
  box-sizing: content-box;
  border: none;
}
.proof-dot,
.proof-dot:hover,
.proof-dot.active { background: transparent; }
.proof-dot::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--line);
  transition: background 0.25s;
}
.proof-dot:hover::before { background: var(--amber); }
.proof-dot.active::before { background: var(--clay); }
.proof-dots { align-items: center; }

/* The review track was locked to min-height:130px with overflow:hidden, so the
   longest quote (the MerchantCircle A/C review, 183 chars) was clipped by 9px.
   Stacking the slides in one grid cell makes the track size itself to the tallest
   slide — no magic number, and no height jump as it rotates. */
.proof-track {
  display: grid;
  min-height: 0;
  overflow: visible;
}
.proof-track > .proof-slide {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
}

/* Nothing under 12px on a phone. These are secondary chrome (top bar,
   breadcrumbs, footer legal line) that measured 11px at mobile widths. */
@media (max-width: 768px) {
  .topbar { font-size: 12px; }
  .topbar-info { font-size: 12px; }
  .topbar-spanish { font-size: 12px; }
  .breadcrumbs { font-size: 12px; }
  .footer-bottom { font-size: 12px; }
  .proof-counter { font-size: 12px; }
}

/* Micro-labels that carry reading content (not just a tracked uppercase badge)
   were 11px on mobile. The uppercase badges — .trust-label, .services-feature-badge,
   .tag, .day — stay at 11px: heavy letter-spacing makes them legible at that size
   and enlarging them breaks the four-up trust strip on a 320px screen. */
@media (max-width: 768px) {
  .rail-facts strong { font-size: 12px; }
  .about-stat .lbl { font-size: 12px; }
  .pull-review .source, .review-meta .source { font-size: 12px; }
}

/* Rail and notice headings promoted from h4/h3 so the outline stays contiguous
   under an <h2>. Styling deliberately unchanged. */
.rail-card h3 { font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--clay); font-weight: 600; margin-bottom: 14px; }
.rail-card.dark h3 { color: var(--amber); }
.notice h2 { font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }

/* Links on dark surfaces. --clay is only 2.58:1 on navy, so prose links inside a
   dark callout, rail card or CTA band must use amber (5.83:1) instead.
   NOTE the specificity: `.prose a:not(.btn)` is (0,2,1) because :not() inherits
   its argument's weight, so `.tucson-note a` at (0,1,1) loses to it. These
   selectors are deliberately scoped through .prose to outrank it — the same trap
   that made .tucson-note strong render navy-on-navy. */
.prose .tucson-note a:not(.btn),
.prose .rail-card.dark a:not(.btn),
.rail-card.dark a:not(.btn),
.cta-band a:not(.btn),
.page-hero a:not(.btn),
.reviews-section a:not(.btn) {
  color: var(--amber);
  border-bottom-color: var(--amber);
}
.prose .tucson-note a:not(.btn):hover,
.rail-card.dark a:not(.btn):hover,
.cta-band a:not(.btn):hover {
  color: var(--amber-light);
  border-bottom-color: var(--amber-light);
}

/* --- Page hero with a provider badge (e.g. the warranty page) -------------
   Two columns on desktop: the claim on the left, the mark that backs it on the
   right. The badge is eager-loaded and carries width/height because it sits
   above the fold and is a likely LCP candidate. */
.page-hero.has-badge .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 64px;
  align-items: center;
}
.page-hero-badge { text-align: center; }
.page-hero-badge img {
  width: 100%;
  /* The source badge is only 252px wide — all the original artwork gave us. At a
     165px display width a 2x screen upscales it ~1.3x, which is not noticeable.
     Pushing it larger (210px+) makes the shield edges visibly soft on retina.
     TODO: if the owner can obtain a higher-resolution badge from Certified Auto
     Repair's brand assets, this cap can be raised for more presence. */
  max-width: 165px;
  height: auto;
  display: block;
  margin: 0 auto;
  /* lifts the shield off the navy without altering its colours */
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.45));
}
.page-hero-badge span {
  display: block;
  margin-top: 16px;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.5;
  color: var(--amber);
}

@media (max-width: 1024px) {
  .page-hero.has-badge .container { grid-template-columns: 1fr; gap: 40px; }
  .page-hero-badge { text-align: left; }
  .page-hero-badge img { margin: 0; }
}
@media (max-width: 768px) {
  .page-hero-badge img { max-width: 140px; }
  .page-hero-badge span { font-size: 11px; letter-spacing: 1.6px; }
}

/* --- Review carousel pacing -----------------------------------------------
   The slide interval and the progress-bar animation must be the same number or
   the bar finishes out of step with the advance. Declared once here; js/main.js
   reads this value rather than keeping its own copy. Was 7s. */
:root { --proof-interval: 4.9s; }
.proof-progress-bar.running { animation: progressFill var(--proof-interval) linear forwards; }

/* --- Section padding symmetry ---------------------------------------------
   The CTA band read 76px of space above its heading but 108px below the last
   line, because `.cta-band p` puts a 32px bottom margin on the trailing Spanish
   line. Trailing margins inside a padded band are always wrong — the band's own
   padding is what should set the spacing. */
.cta-band .container > *:last-child,
.page-hero .container > *:last-child,
.page-hero-content > *:last-child { margin-bottom: 0; }

/* Hero padding was 76px top / 68px bottom, which read as top-heavy once the
   eyebrow's line box was included. Even it up. */
.page-hero { padding: 76px 0; }
@media (max-width: 768px) { .page-hero { padding: 52px 0; } }

/* Same class of bug, generalised: a first/last child's own margin fighting the
   section's padding. The section padding owns the spacing; children should not
   add to it at the edges. */
section > .container > *:last-child { margin-bottom: 0; }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }

/* --- Payment methods strip ------------------------------------------------
   Generic card glyphs until the owner confirms which networks are accepted;
   the markup is structured so official acceptance marks drop straight in. */
.payment-methods { margin-top: 8px; }
.payment-methods-title {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  color: var(--clay);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
}
.payment-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.payment-marks li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 9px 14px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1;
}
.payment-marks svg { width: 30px; height: 21px; flex-shrink: 0; color: var(--navy); }
.payment-marks span { white-space: nowrap; }
.payment-note { font-size: 14px; color: var(--ink-soft); line-height: 1.65; font-weight: 300; margin: 0; }
.payment-note a { color: var(--clay); border-bottom: 1px solid var(--clay); }

/* On dark surfaces (the visit section) invert the chip treatment. */
.visit-section .payment-marks li { background: transparent; border-color: rgba(216,150,53,0.35); color: var(--paper); }
.visit-section .payment-marks svg { color: var(--amber); }
.visit-section .payment-methods-title { color: var(--amber); }
.visit-section .payment-note { color: #b8c4cc; }

@media (max-width: 768px) {
  .payment-marks { gap: 8px; }
  .payment-marks li { padding: 8px 11px; font-size: 12px; }
  .payment-marks svg { width: 26px; height: 18px; }
}

/* The eyebrow is inline-flex, so it sits inside a line box and inherits the
   body's 1.6 line-height — adding ~12px of half-leading above it and making
   every hero read top-heavy. Making it a block-level flex box sized to its
   content removes the line box without changing how it looks. */
.page-hero .eyebrow, .hero .eyebrow { display: flex; width: fit-content; }

/* A visually-hidden heading is position:absolute, so the next element is the
   first thing in flow but not :first-child — its top margin still applied. */
.prose > .sr-only:first-child + * { margin-top: 0; }

/* --- Live Google Map embed ------------------------------------------------
   Replaces a hand-drawn SVG map that showed the wrong cross street (the shop is
   at S 6th Ave & W 31st St). A real embed cannot go stale. */
.map-embed {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background: var(--cream-warm);
  overflow: hidden;
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* On the dark visit section the frame should read as part of the panel. */
.visit-section .map-embed { border-color: #2a3a44; background: var(--navy); }

.map-directions {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clay);
  border-bottom: 1px solid var(--clay);
  padding-bottom: 3px;
}
.map-directions:hover { color: var(--clay-dark); border-bottom-color: var(--clay-dark); }
.visit-section .map-directions { color: var(--amber); border-bottom-color: var(--amber); }
.visit-section .map-directions:hover { color: var(--amber-light); border-bottom-color: var(--amber-light); }

@media (max-width: 768px) { .map-embed { aspect-ratio: 3 / 2; } }

/* --- Required / optional field markers ------------------------------------
   The native `required` attribute alone shows nothing until submit, so the
   state is invisible while filling the form in. Screen readers already get it
   from `required`, so these markers are visual reinforcement. */
.form-legend {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.65;
  font-weight: 300;
  margin: 0 0 34px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  max-width: 68ch;
}
.field label .req {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper);
  background: var(--clay);
  padding: 2px 7px;
  margin-left: 7px;
  vertical-align: 1px;
}
.field label .opt-tag {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--ink-faint);
  margin-left: 6px;
}
/* A required field left empty gets a clay edge — but only after the user has
   actually interacted with it. :user-invalid avoids scolding an untouched form. */
.field input:user-invalid,
.field textarea:user-invalid,
.field select:user-invalid {
  border-color: var(--clay);
  border-width: 2px;
  padding: 12px 14px;
}
@media (max-width: 768px) {
  .form-legend { font-size: 14px; margin-bottom: 26px; }
  .field label .req { font-size: 10px; padding: 2px 6px; }
}

/* --- Interior page alignment ----------------------------------------------
   The homepage centres its section headings — that is the original design and
   is left alone (body.page-home). Interior pages read left / centre / left,
   which fights the hero and the prose either side of it. On those pages the
   section head joins the same left rail as everything else. */
.page-interior .section-head {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 760px;
}
.page-interior .thanks-mark--left { margin-left: 0; margin-right: 0; }
.page-interior .prose.narrow { margin-left: 0; margin-right: 0; }

/* Component-scoped colours. `.visit-info-block h3/p` are (0,1,1) and were
   overriding the payment component's (0,1,0) rules wherever it was nested —
   turning the note paper-on-paper. Two-class selectors here are (0,2,0) and win
   regardless of the container the component is dropped into. */
.payment-methods .payment-methods-title { color: var(--clay); }
.payment-methods .payment-note { color: var(--ink-soft); font-size: 14px; line-height: 1.65; font-weight: 300; }
.payment-methods .payment-marks li { color: var(--ink-soft); }
.visit-section .payment-methods .payment-methods-title { color: var(--amber); }
.visit-section .payment-methods .payment-note { color: #b8c4cc; }
.visit-section .payment-methods .payment-marks li { color: var(--paper); }

/* --- One left rail on interior pages, continued ---------------------------
   .section-head was only part of it. These blocks also centre themselves, which
   is what produced the left / centre / left rhythm down a service page:
     .faq-list      max-width + margin:0 auto   (every service page, about, classic cars)
     .request-form  max-width + margin:0 auto   (/schedule/)
     .cta-band      text-align:center            (15 interior pages)
   The homepage keeps all of its original centring via body.page-home. */
.page-interior .faq-list { margin-left: 0; margin-right: 0; }
.page-interior .request-form { margin-left: 0; margin-right: 0; }

.page-interior .cta-band { text-align: left; }
.page-interior .cta-band p { margin-left: 0; margin-right: 0; }
.page-interior .cta-band .btn-group { justify-content: flex-start; }

/* --- Mobile nav panel scrolling -------------------------------------------
   js/main.js sets an exact max-height on open (viewport minus the panel's own
   offset minus the fixed call bar). These are the no-JS fallback and the touch
   behaviour: dvh tracks mobile browser chrome, and overscroll-behavior stops a
   scroll at the panel's end from scrolling the page underneath it. */
@media (max-width: 1024px) {
  .nav.open {
    max-height: calc(100dvh - 100%);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* clears the sticky call bar if JS has not sized the panel yet */
    padding-bottom: 84px;
  }
}

/* --- Hamburger toggle -----------------------------------------------------
   The ☰ character fell back to a colour font on macOS, and a colour font paints
   its own colours — CSS `color` has no effect, which is why it stayed blue after
   the colour was declared. The mark below is traced from that glyph's measured
   metrics (44x37 ink box, bars 8/8/7 units, 7-unit gaps) so it looks the same,
   but as a drawn shape it always takes currentColor on every platform.
   The button keeps its original 42x36 footprint. */
.menu-toggle {
  color: var(--ink);
  width: 42px;
  height: 36px;
  padding: 0;
  line-height: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
/* `display` is set to block by the breakpoint rules above, which makes
   align-items/justify-content inert. Flex, so the mark actually centres. */
@media (max-width: 1024px) {
  .menu-toggle { display: flex; align-items: center; justify-content: center; }
}
/* Explicit height, never `auto`: Safari/iOS does not resolve an SVG's intrinsic
   aspect ratio from a viewBox, so `height: auto` collapsed it to zero and the
   bars vanished — leaving only the button's border visible. */
.menu-toggle svg { width: 18px; height: 15px; display: block; fill: currentColor; }
/* Open state reads as active, without altering the mark. */
.menu-toggle[aria-expanded="true"] {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--paper);
}

/* ---------------------------------------------------------------------------
   Narrow-viewport overflow containment
   ---------------------------------------------------------------------------
   Reported on a Galaxy S22 Ultra: the hero review card rendered wider than the
   screen and was cut off at the right edge.

   Cause: grid and flex items default to `min-width: auto`, which means they
   refuse to shrink below their min-content width. `.proof-rating` is a flex row
   (stars + "4.9" + review count) with no wrapping, so its min-content was a
   fixed 360px. Plus the card's padding that made the card demand 408px, and the
   hero grid track widened to accommodate it — at EVERY viewport below 408px.

   It never showed up in overflow testing because `.hero` is `overflow: hidden`:
   the page scrollWidth stayed equal to the viewport, so automated checks passed
   while the card was quietly being sliced off. Only a real device showed it.

   Two-part fix: let the containers shrink, and give the rating row permission
   to wrap so it has a small min-content to shrink TO. One without the other
   does nothing.
   --------------------------------------------------------------------------- */

/* Grid/flex children that are allowed to be narrower than their contents. */
.hero-grid > *,
.proof-card,
.proof-track > .proof-slide,
.proof-count { min-width: 0; }

/* The actual escape valve: the review count drops to its own line when the
   stars and the score no longer leave room for it. */
.proof-rating { flex-wrap: wrap; }

/* Long unbroken strings (a model name, a URL a customer typed) shouldn't be
   able to reintroduce the same blowout from the text side. */
.proof-quote, .proof-count, .proof-attrib { overflow-wrap: break-word; }

/* Small phones: buy back horizontal room so the rating still fits on one line
   where it can, and the card doesn't feel padding-heavy at 360px wide. */
@media (max-width: 400px) {
  .proof-card { padding: 28px 18px; }
  .proof-stars { font-size: 21px; letter-spacing: 2px; }
  .proof-num { font-size: 38px; }
  .proof-card::before { right: 18px; }
}

/* --- Same min-content trap, two levels deeper -------------------------------
   Fixing .proof-card exposed two more instances that had been hidden inside it
   (and inside .hero's overflow:hidden). Both are the identical bug, so both get
   the identical treatment: remove the min-width:auto floor, then give the row a
   way to reflow.

   .proof-dots: flex:1 1 0% looks shrinkable but min-width:auto pinned it at its
   min-content — 8 dots (186px) + 7 gaps (42px) = 228px — so the four controls
   demanded 360px inside a 284px card. Dots are decorative dashes, so squeezing
   them is fine; wrapping them would not be.

   .trust-cell: badge/number sits beside a label whose longest word ("Nationwide")
   set a floor wider than a half-width column below ~380px. Wrapping is better
   than a breakpoint here — the label drops under the badge exactly when it stops
   fitting, at whatever width that turns out to be, on devices that don't exist
   yet. */

.proof-dots, .proof-dot { min-width: 0; }

.trust-cell { flex-wrap: wrap; }
.trust-cell > * { min-width: 0; }

@media (max-width: 400px) {
  .proof-controls { gap: 10px; }
  .proof-dots { gap: 4px; }
  .proof-dot { width: 14px; }
  .proof-dot.active { width: 20px; }
}

/* --- Mobile audit follow-ups -----------------------------------------------
   From the sitewide sweep at 360px and 412px. Everything else the sweep flagged
   was deliberate — the skip link and .sr-only headings are clipped on purpose,
   the 9px text is lettering inside the logo SVG, and links sitting inside a
   sentence are explicitly exempt from the WCAG target-size rule. These five are
   real. */

/* 1. Breadcrumbs were 20px tall — under the 24px minimum, and they are the only
      way back up the hierarchy on a phone. Grow the target, not the bar: the
      padding removed from the strip is handed to the links, so the row is the
      same height it always was and only the tappable area changes. */
@media (max-width: 768px) {
  .breadcrumbs { padding: 7px 0; }
  .breadcrumbs a { display: inline-block; padding: 5px 0; }
}

/* 2. Phone numbers in body copy were 20px tall. An inline <a> is only as tall as
      its font box, so a tel: link in a paragraph is a smaller target than it
      looks — and on this site calling is the conversion. Excludes the buttons
      and the fixed call bar, which are already large. */
a[href^="tel:"]:not(.btn):not(.call-bar-btn) {
  display: inline-block;
  padding-block: 4px;
}

/* 3. Same problem in the sidebar fact lists ("See current offers"), at 17px. */
.rail-facts a { display: inline-block; padding-block: 4px; }

/* 4. The carousel dots cannot be both eight-across and finger-sized on a phone —
      squeezing them to fit made them 14px wide, which is worse than not having
      them. Below 480px they come out entirely: the arrows stay, the rotation
      keeps running, and the "3 / 8" counter already in the card carries the
      position information the dots were there to convey. */
@media (max-width: 479px) {
  .proof-dots { display: none; }
}

/* 5. The REQUIRED badge shrank to 10px on mobile, working against the whole
      point of it. Phones are where the form actually gets filled in. */
@media (max-width: 768px) {
  .field label .req { font-size: 11px; padding: 3px 7px; }
}

/* 6. "Read the full story" landed exactly on the 24px minimum, close enough to
      round under it. It is a standalone link, so give it clearance. */
.story-link { display: inline-block; padding-block: 4px; }

/* --- Call bar: re-assert layout after the tel: rule -------------------------
   The tel: target-size rule above sets display:inline-block, and a flex item
   with inline-block gets blockified to display:block — which silently drops the
   centring on the Call Now button while Directions (not a tel: link) kept it.
   One button centred, one not.

   Both bar links now carry .call-bar-btn so the exclusion actually matches, but
   a class exclusion is exactly the kind of thing that goes stale when markup
   changes. This re-states the layout AFTER the tel: rule in source order, so
   the bar stays centred even if that exclusion is broken again later. */
@media (max-width: 768px) {
  .mobile-call-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 16px;
  }
}