:root {
  --fg: #2b2b2b;
  --fg-soft: #585551;
  --fg-muted: #6b665f;
  --bg: #FAF9F6;
  --bg-warm: #F2F0EA;
  --white: #FFFFFF;
  --accent: #3C5A4E;
  --accent-light: #547061;
  --accent-bg: rgba(60,90,78,0.06);
  --line: #E6E2DA;
  --line-soft: #EFEBE3;
  --gold: #D2AE74;
  --shadow: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lift: 0 10px 30px rgba(0,0,0,0.06);
  --max: 1140px;
  /* Variables used by inline styles carried over from the legacy pages */
  --red: var(--accent);
  --dark: var(--fg);
  --offwhite: var(--bg-warm);
  --cream: #e8dcc8;
  --gray: var(--fg-soft);
  --steel: #30353a;
  --lgray: var(--line);
  --border: var(--line);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-wrap: break-word; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 0;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-light); }
h1, h2, h3, h4 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; line-height: 1.2; color: var(--fg); }
strong { font-weight: 600; color: var(--fg); }

/* ── TOP BAR ── */
.pds-topbar {
  background: var(--accent);
  color: rgba(255,255,255,0.92);
  text-align: center;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.3px;
}
.pds-topbar a { color: #fff; text-decoration: none; margin: 0 10px; font-weight: 500; }
.pds-topbar a:hover { text-decoration: underline; }
.pds-topbar .sep { opacity: 0.4; }

/* ── HEADER ── */
.pds-header {
  background: rgba(250,249,246,0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 200;
}
.pds-header-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 74px;
}
.pds-logo {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 21px;
  color: var(--fg);
  text-decoration: none;
  line-height: 1.15;
  letter-spacing: 0.2px;
}
.pds-logo span {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 3px;
}
.pds-nav { display: flex; align-items: center; gap: 2px; list-style: none; }
.pds-nav a {
  color: var(--fg-soft);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 9px 13px;
  text-decoration: none;
  border-radius: 5px;
  transition: color 0.2s, background 0.2s;
}
.pds-nav a:hover, .pds-nav a.active { color: var(--accent); background: var(--accent-bg); }
.pds-nav-cta {
  color: var(--accent) !important;
  border: 1px solid var(--accent);
  margin-left: 10px;
  font-weight: 600 !important;
}
.pds-nav-cta:hover { background: var(--accent) !important; color: #fff !important; }
.pds-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px; }
.pds-menu-toggle span { margin-left: auto; margin-right: auto; }
.pds-menu-toggle span { display: block; width: 22px; height: 1.5px; background: var(--fg); margin: 5px 0; transition: 0.2s; }

/* ── HERO (full-width image, overlay) ── */
.page-content .hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 600px;
  overflow: hidden;
  background: var(--fg);
}
.page-content .hero-slides { position: absolute; inset: 0; }
.page-content .hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
  background-size: cover;
  background-position: center;
}
.page-content .hero-slide.active { opacity: 1; }
.page-content .hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.page-content .hero-slides::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(28,30,29,0.92) 0%, rgba(28,30,29,0.78) 42%, rgba(28,30,29,0.40) 75%, rgba(28,30,29,0.20) 100%);
  z-index: 1;
}
.page-content .hero .hi {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 80px 28px;
}
.page-content .hero .hi > * { max-width: 620px; }
.page-content .hero .badge {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #e8dcc8;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(232,220,200,0.45);
  width: fit-content;
  max-width: 620px;
}
.page-content .hero h1 {
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 700;
  color: #fff;
  line-height: 1.12;
  margin-bottom: 22px;
}
.page-content .hero h1 span { color: #e8dcc8; }
.page-content .hero h1 a { color: inherit; }
.page-content .hero-sub {
  color: rgba(255,255,255,0.88);
  font-size: 16px;
  line-height: 1.85;
  font-weight: 300;
  margin-bottom: 30px;
}
.page-content .hero-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}
.page-content .hero-rating .stars { color: var(--gold); font-size: 17px; letter-spacing: 2px; }
.page-content .hero-rating span:last-child { color: rgba(255,255,255,0.78); font-size: 13px; font-weight: 300; }
.page-content .hctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 38px; }
.page-content .hstats {
  display: flex; gap: 44px; flex-wrap: wrap;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.2);
  max-width: 720px;
}
.page-content .hstats > div { min-width: 78px; }
.page-content .hstats .sn { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 700; color: #fff; line-height: 1; }
.page-content .hstats .sl { font-size: 11.5px; color: rgba(255,255,255,0.65); margin-top: 6px; line-height: 1.45; font-weight: 300; }
.page-content .hero .btn-o { border-color: rgba(255,255,255,0.55); color: #fff !important; }
.page-content .hero .btn-o:hover { background: #fff; color: var(--accent) !important; border-color: #fff; }

/* Trust strip */
.trust-band, .trust-bar { background: var(--bg-warm); border-bottom: 1px solid var(--line); padding: 18px 28px; }
.trust-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 36px; }
.trust-item { font-size: 13px; font-weight: 400; color: var(--fg-soft); display: flex; align-items: center; gap: 8px; }
.trust-icon:empty { display: none; }
.trust-item::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* ── BUTTONS ── */
.btn, .btn-r, .btn-red, .btn-primary {
  background: var(--accent);
  color: #fff !important;
  padding: 14px 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 6px;
  display: inline-block;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.btn:hover, .btn-r:hover, .btn-primary:hover { background: var(--accent-light); transform: translateY(-1px); }
.btn-o, .btn-outline, .btn-secondary {
  background: transparent;
  color: var(--accent) !important;
  border: 1px solid var(--accent);
  padding: 13px 28px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.5px;
  border-radius: 6px;
  text-decoration: none !important;
  display: inline-block;
  transition: all 0.2s;
}
.btn-o:hover, .btn-outline:hover, .btn-secondary:hover { background: var(--accent); color: #fff !important; }
.btn-w { background: var(--white); color: var(--accent) !important; padding: 14px 30px; font-weight: 600; font-size: 13px; letter-spacing: 0.5px; border-radius: 6px; text-decoration: none !important; display: inline-block; }
.btn-w:hover { background: var(--bg-warm); }

/* ── SECTIONS ── */
.inner, .wrap, .wrap-wide { max-width: var(--max); margin: 0 auto; padding: 80px 28px; }
.slabel, .section-label { font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.stitle, .sec-title, .section-title { font-size: clamp(26px, 3vw, 36px); font-weight: 700; color: var(--fg); line-height: 1.2; margin-bottom: 14px; }
.stitle.lgt, .sec-title-w { color: var(--white); }
.div, .divider, .divider-line { width: 48px; height: 1px; background: var(--accent); margin: 12px 0 30px; }

/* Service cards */
.services-section { background: var(--bg-warm); }
.services-section .inner, .promise-section .inner, .cities-section .inner, .faq-section .inner { padding: 80px 28px; }

.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.service-card, .card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s;
  height: 100%;
}
.service-card:hover, .card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.sc-body, .card { padding: 32px; }
.sc-icon, .card-icon { font-size: 22px; margin-bottom: 14px; color: var(--accent); opacity: 0.85; }
.sc-icon:empty, .card-icon:empty { display: none; }
.service-card h3, .card h3 { font-size: 19px; font-weight: 600; color: var(--fg); margin-bottom: 14px; line-height: 1.35; }
.service-card p, .card p { font-size: 14px; color: var(--fg-soft); line-height: 1.8; margin-bottom: 16px; font-weight: 300; }
.sc-links { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.sc-link, .clink { color: var(--accent) !important; font-weight: 600; font-size: 13px; letter-spacing: 0.3px; text-decoration: none !important; }
.sc-link:hover, .clink:hover { color: var(--accent-light) !important; }
.sc-link.filled { background: var(--accent); color: #fff !important; padding: 11px 18px; border-radius: 6px; text-align: center; transition: background 0.2s; }
.sc-link.filled:hover { background: var(--accent-light); }

/* Page hero (inner pages) */
.page-hero {
  background: var(--accent);
  padding: 84px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 240px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43,43,43,0.18), rgba(43,43,43,0.32)); z-index: 1; }
.page-hero > * { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 700; color: #fff; margin-bottom: 14px; }
.page-hero h1 span { color: #e8dcc8; }
.page-hero p { color: rgba(255,255,255,0.85); max-width: 640px; font-weight: 300; }
.hero-cta { margin-top: 24px; }

/* Locator band */
.pds-locator { background: var(--fg); color: #fff; padding: 64px 28px; text-align: center; }
.pds-locator h2 { font-size: 30px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.pds-locator p { opacity: 0.7; margin-bottom: 28px; font-weight: 300; }
.pds-locator-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.pds-locator-actions a { background: var(--white); color: var(--fg); padding: 14px 32px; font-weight: 600; font-size: 13px; letter-spacing: 0.5px; border-radius: 6px; text-decoration: none; transition: background 0.2s; }
.pds-locator-actions a:hover { background: var(--bg-warm); }
.pds-locator-actions a:first-child { background: var(--accent); color: #fff; }
.pds-locator-actions a:first-child:hover { background: var(--accent-light); }

/* Why choose us */
.pds-why { background: var(--white); padding: 80px 28px; }
.pds-why-inner { max-width: var(--max); margin: 0 auto; }
.pds-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 44px; }
.pds-why-item h3 { font-size: 21px; font-weight: 600; color: var(--fg); margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--accent); }
.pds-why-item p { font-size: 14px; color: var(--fg-soft); line-height: 1.85; font-weight: 300; }

/* Emergency / CTA */
.emergency, .emg { background: var(--bg-warm); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 60px 28px; }
.emergency-inner, .emg-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 28px; }
.emergency h2, .emg h2 { color: var(--fg); font-size: clamp(24px, 3vw, 32px); font-weight: 700; line-height: 1.25; }
.emergency p, .emg p { color: var(--fg-soft); font-weight: 300; margin-top: 8px; max-width: 620px; }

/* Stats */
.stats-section { background: var(--fg); }
.stats-section .slabel { color: #c7b89c; }
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 36px; }
.stat-box { text-align: center; padding: 28px 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; }
.stat-icon { display: none; }
.stat-num, .sn { font-family: 'Playfair Display', serif; font-size: 34px; font-weight: 700; color: var(--fg); }
.stat-label, .sl { font-size: 12px; color: var(--fg-soft); margin-top: 8px; line-height: 1.55; font-weight: 300; }

/* Cities */
.cities-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
.city-card, .city-link { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 20px; text-decoration: none !important; color: inherit; transition: all 0.2s; display: block; }
.city-card:hover, .city-link:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.city-name, .city-link-name { font-family: 'Playfair Display', serif; font-weight: 600; color: var(--fg); font-size: 17px; }
.city-zip, .city-link-zip { font-size: 12px; color: var(--fg-muted); margin-top: 5px; }
.city-phone { color: var(--accent); font-weight: 600; font-size: 13px; margin-top: 8px; }
.region-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 600; margin: 36px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.region-title span { color: var(--accent); }

/* Reviews */
.rcard { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 30px; }
.rstars { color: #8a6a2f; font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
.rq { font-size: 14px; color: var(--fg-soft); line-height: 1.85; font-style: italic; margin-bottom: 18px; font-weight: 300; }
.rauth { display: flex; gap: 12px; align-items: center; }
.rav { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; font-family: 'Playfair Display', serif; }
.rn { font-weight: 600; font-size: 14px; color: var(--fg); }
.rl { font-size: 12px; color: var(--fg-muted); }
.rs { font-size: 11px; color: var(--accent); font-weight: 600; display: block; margin-top: 4px; }

/* FAQ */
.faqlist .fqi, .faq-item { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 24px 28px; margin-bottom: 12px; }
.fqq, .faq-item h3 { font-size: 17px; font-weight: 600; color: var(--fg); margin-bottom: 10px; }
.fqa, .faq-item p { font-size: 14px; color: var(--fg-soft); line-height: 1.85; font-weight: 300; }

/* Promise list */
.promise-list { list-style: none; }
.promise-list li { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
.promise-icon { color: var(--accent); flex-shrink: 0; }
.promise-icon:empty { display: none; }

/* Dealers */
.dealers-section { background: var(--bg-warm); text-align: center; padding: 60px 28px; border-top: 1px solid var(--line); }
.dealer-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.dealer-badge { background: var(--white); border: 1px solid var(--line); padding: 11px 20px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--fg-soft); }

/* Steps */
.steps .step { display: flex; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line-soft); }
.step-num { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; font-family: 'Playfair Display', serif; }

/* Showroom */
.filters-wrap { background: var(--bg-warm); border-bottom: 1px solid var(--line); padding: 16px 28px; position: sticky; top: 74px; z-index: 50; }
.filters-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-btn { background: var(--white); border: 1px solid var(--line); padding: 8px 16px; border-radius: 6px; font-size: 13px; cursor: pointer; font-family: inherit; color: var(--fg-soft); transition: all 0.2s; }
.filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.showroom-wrap { max-width: var(--max); margin: 0 auto; padding: 48px 28px; }
.showroom-wrap .grid { grid-template-columns: repeat(3, 1fr); gap: 28px; display: grid; }
.door-card { background: var(--white); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: pointer; transition: box-shadow 0.25s, transform 0.25s; }
.door-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.door-img { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.door-img img { width: 100%; height: 100%; object-fit: cover; }
.door-info { padding: 22px; }
.door-name { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 18px; margin: 6px 0; }
.door-cta { width: 100%; padding: 13px; background: var(--bg-warm); border: none; border-top: 1px solid var(--line); font-weight: 600; color: var(--accent); cursor: pointer; font-size: 13px; letter-spacing: 0.3px; }
.lightbox { display: none; position: fixed; inset: 0; background: rgba(43,43,43,0.78); z-index: 1000; align-items: center; justify-content: center; padding: 24px; }
.lightbox.open { display: flex; }
.lb-inner { background: var(--white); border-radius: 8px; max-width: 900px; width: 100%; max-height: 90vh; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; }

/* Breadcrumbs */
.breadcrumbs { max-width: var(--max); margin: 0 auto; padding: 16px 28px; font-size: 12px; color: var(--fg-muted); letter-spacing: 0.3px; }
.breadcrumbs a { color: var(--accent); font-weight: 500; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* Map */
.map-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.map-frame { width: 100%; height: 320px; border: 0; }
.map-address { padding: 18px; text-align: center; }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th { background: var(--fg); color: #fff; padding: 13px 18px; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
td { padding: 12px 18px; border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--fg-soft); font-weight: 300; }
tr:nth-child(even) { background: var(--bg); }

/* ── FOOTER ── */
.pds-footer { background: var(--fg); color: rgba(255,255,255,0.7); padding: 64px 28px 32px; }
.footer-grid { max-width: var(--max); margin: 0 auto 32px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; text-align: left; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-brand { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.footer-col h4, .footer-col .footer-h { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: 16px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: rgba(255,255,255,0.72); font-size: 13px; text-decoration: none; font-weight: 300; }
.footer-col a:hover { color: #fff; }
.footer-phone { color: #c7b89c !important; font-size: 20px !important; font-weight: 600 !important; display: inline-block; margin-top: 12px; font-family: 'Playfair Display', serif; }

.network-mentions { max-width: var(--max); margin: 24px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.06); }
.network-mentions-title { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-bottom: 14px; text-align: center; }
.network-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 14px; }
.network-grid li { font-size: 11px; color: rgba(255,255,255,0.62); overflow-wrap: anywhere; line-height: 1.7; text-transform: lowercase; letter-spacing: 0.2px; }
.pds-footer-copy { max-width: var(--max); margin: 24px auto 0; text-align: center; font-size: 12px; color: rgba(255,255,255,0.62); font-weight: 300; letter-spacing: 0.2px; }

/* ── STICKY MOBILE BAR ── */
.pds-sticky-mobile { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 300; grid-template-columns: 1fr 1fr; height: 56px; box-shadow: 0 -2px 12px rgba(0,0,0,0.08); }
.pds-sticky-mobile a { display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; letter-spacing: 0.5px; text-decoration: none; }
.pds-sticky-call { background: var(--fg); color: #fff; }
.pds-sticky-book { background: var(--accent); color: #fff; }
.float-call { display: none; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .pds-why-grid { grid-template-columns: 1fr; }
  .page-content .hero { min-height: 520px; }
  .page-content .hero .hi { padding: 64px 24px; }
}
@media (max-width: 600px) {
  .page-content .hstats { gap: 24px 32px; }
  .page-content .hero .hi { padding: 52px 18px; }
}
@media (max-width: 768px) {
  .pds-nav { display: none; position: absolute; top: 74px; left: 0; right: 0; background: rgba(250,249,246,0.98); backdrop-filter: blur(14px); flex-direction: column; padding: 16px 20px 24px; gap: 6px; border-bottom: 1px solid var(--line); }
  .pds-nav.active { display: flex; }
  .pds-nav a { padding: 12px 14px; }
  .pds-menu-toggle { display: block; }
  .pds-header-inner { padding: 0 18px; height: 64px; }
  .filters-wrap { top: 64px; }
  .g2, .g3, .g4, .cities-grid, .showroom-wrap .grid, .footer-grid, .network-grid, .lb-inner { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .cities-grid { grid-template-columns: repeat(2, 1fr); }
  .pds-sticky-mobile { display: grid; }
  body { padding-bottom: 56px; }
  .inner, .wrap, .wrap-wide, .services-section .inner, .pds-why, .promise-section .inner, .cities-section .inner, .faq-section .inner { padding: 52px 18px; }
  .emergency-inner, .emg-inner { flex-direction: column; text-align: center; }
  .footer-grid { text-align: center; }
}

/* ════════ PROFESSIONAL REFINEMENTS ════════ */

/* Equal-height service cards with bottom-aligned CTAs */
.service-card { display: flex; flex-direction: column; }
.sc-body { display: flex; flex-direction: column; flex: 1; }
.sc-links { margin-top: auto; padding-top: 4px; }

/* Promise list: label on its own line (fixes run-on text) */
.promise-list li > div { display: flex; flex-direction: column; }
.promise-list strong { display: block; margin-bottom: 4px; color: var(--fg); font-size: 15px; }
.promise-list li > div { font-size: 14px; color: var(--fg-soft); font-weight: 300; line-height: 1.75; }

/* Centered, symmetric section intros */
.services-section .inner > .slabel,
.services-section .inner > .stitle,
.cities-section .inner > .slabel,
.cities-section .inner > .stitle,
.cities-section .inner > p,
.stats-section .inner > .slabel,
.stats-section .inner > .stitle { text-align: center; }
.services-section .inner > .div,
.cities-section .inner > .div,
.stats-section .inner > .div { margin-left: auto; margin-right: auto; }
.cities-section .inner > p { max-width: 640px; margin-left: auto; margin-right: auto; margin-bottom: 36px; }

/* Dealers section heading */
.dealers-section h2 { font-size: 26px; margin-bottom: 8px; }
.dealers-section p { color: var(--fg-soft); font-weight: 300; max-width: 600px; margin: 0 auto; }

/* Emergency band button visible on light background */
.emergency .btn-w, .emg .btn-w { background: var(--accent); color: #fff !important; }
.emergency .btn-w:hover, .emg .btn-w:hover { background: var(--accent-light); }

/* CTA strip (closing band) */
.ctastrip { background: var(--fg); color: #fff; text-align: center; padding: 72px 28px; }
.ctastrip h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); margin-bottom: 16px; line-height: 1.25; }
.ctastrip p { color: rgba(255,255,255,0.6); font-weight: 300; margin-bottom: 30px; max-width: 680px; margin-left: auto; margin-right: auto; }
.ctastrip .btn-w { background: #fff; color: var(--accent) !important; }
.ctastrip .btn-w:hover { background: var(--bg-warm); }

/* Promise / FAQ headings stay left (override center safety) */
.promise-section .stitle, .faq-section .stitle { text-align: left; }

/* Consistent vertical rhythm for stacked content sections */
.page-content > .inner:not(:first-child) { padding-top: 72px; }

/* Buttons: tidy inline arrow spacing */
.btn { white-space: nowrap; }

/* Service card icons removed but keep tidy heading spacing */
.sc-icon:empty + h3, .card-icon:empty + h3 { margin-top: 0; }

/* Reviews grid equal height */
.g3 > .rcard { display: flex; flex-direction: column; }
.g3 > .rcard .rauth { margin-top: auto; }

/* Region cards symmetry (location pages) */
.region-item { display: flex; flex-direction: column; }

/* ════════ CONTENT COMPONENTS (from source pages) ════════ */

/* Section scaffolding */
.sec { padding: 72px 0; }
.sec.section-alt { background: var(--bg-warm); }
.sec-dark { background: var(--fg); color: #fff; padding: 72px 0; }
.sec-dark h2, .sec-dark h3, .sec-dark h4, .sec-dark .sec-title, .sec-dark .stitle { color: #fff; }
.sec-dark p, .sec-dark li, .sec-dark .sec-sub { color: rgba(255,255,255,0.62); }
.sec-dark .slabel, .sec-dark .eyebrow { color: #c7b89c; }
.si { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.sec-sub, .sub { color: var(--fg-soft); font-weight: 300; max-width: 720px; line-height: 1.85; }
.sec-sub.st-w, .st-w { color: rgba(255,255,255,0.62); }
.div-g { width: 48px; height: 1px; background: var(--accent); margin: 12px 0 28px; }
.highlight { color: var(--accent); font-weight: 600; }
.content, .page-body { max-width: var(--max); margin: 0 auto; }

/* Generic responsive grids */
.zip-grid, .road-grid, .parts-grid, .signs-grid, .rules-grid, .drive-grid,
.acc-grid, .repair-grid, .reviews-grid, .promise-grid, .toc-grid,
.spring-specs, .repair-list, .rlist, .slist, .cat-section, .brand-body,
.model-features, .city-grid, .road-grid, .signs-grid {
  display: grid; gap: 20px; align-items: stretch;
}
.zip-grid, .road-grid, .parts-grid, .signs-grid, .rules-grid, .drive-grid, .acc-grid, .city-grid {
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
.repair-grid, .reviews-grid, .promise-grid, .toc-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.stat-grid, .hero-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.g5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.g6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Generic cards */
.zip-card, .drive-card, .road-card, .part-card, .sign-card, .town-card,
.repair-card, .acc-card, .call-card, .promise-card, .review-card,
.safety-card, .warranty-card, .sidebar-card, .cat-section, .model-item,
.ocard, .rule, .coast, .wbox, .wb-item, .spring-type, .info-box, .tip-box,
.harbor-box, .water-box, .estate-box, .stat-card, .spec, .sign-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px;
  transition: box-shadow 0.25s, transform 0.25s;
}
.zip-card:hover, .drive-card:hover, .road-card:hover, .part-card:hover,
.sign-card:hover, .town-card:hover, .repair-card:hover, .acc-card:hover,
.promise-card:hover, .review-card:hover, .ocard:hover, .model-item:hover {
  box-shadow: var(--shadow-lift); transform: translateY(-3px);
}
.sec-dark .zip-card, .sec-dark .drive-card, .sec-dark .road-card, .sec-dark .part-card,
.sec-dark .repair-card, .sec-dark .acc-card, .sec-dark .ocard, .sec-dark .spring-type,
.sec-dark .safety-card, .sec-dark .wbox, .sec-dark .wb-item, .sec-dark .model-item,
.sec-dark .sign-card, .sec-dark .stat-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}

/* Card titles / numbers */
.zip-code, .road-name, .part-name, .model-name, .rule-title, .step-title,
.promise-title, .review-name, .town-tag, .snum, .lb-title, .spring-type h3,
.stat-num, .hstat-num, .spec-label {
  font-family: 'Playfair Display', serif; font-weight: 600; color: var(--fg);
}
.zip-code, .snum, .stat-num, .hstat-num, .rec-badge { color: var(--accent); }
.sec-dark .zip-code, .sec-dark .snum, .sec-dark .stat-num, .sec-dark .road-name,
.sec-dark .part-name, .sec-dark .model-name, .sec-dark .rule-title { color: #fff; }
.zip-name, .city-name { font-weight: 600; color: var(--fg); }

/* Card text / descriptions */
.zip-area, .road-desc, .part-desc, .model-desc, .fi-tx, .review-text,
.quote-text, .coast-tx, .lb-subtitle, .step-text, .promise-text, .city-desc,
.part-body, .stat-lab, .hstat-lab, .lf {
  color: var(--fg-soft); font-size: 14px; font-weight: 300; line-height: 1.75;
}
.sec-dark .zip-area, .sec-dark .road-desc, .sec-dark .part-desc, .sec-dark .model-desc,
.sec-dark .lf, .sec-dark .stat-lab { color: rgba(255,255,255,0.6); }

/* Icons (most emojis stripped; hide empties, tint the rest) */
.fi-ic, .sign-icon, .rule-icon, .cat-icon, .drive-icon, .acc-icon, .part-icon,
.coast-ic, .rc-icon, .ml-icon, .mf-icon, .quote-mark, .warn-icon, .alert-icon,
.step-icon-wrap, .brand-icon, .ocard-ic, .sign-icon, .rbul {
  color: var(--accent);
}
.fi-ic:empty, .sign-icon:empty, .rule-icon:empty, .cat-icon:empty, .drive-icon:empty,
.acc-icon:empty, .part-icon:empty, .coast-ic:empty, .rc-icon:empty, .ml-icon:empty,
.warn-icon:empty, .alert-icon:empty, .brand-icon:empty, .ocard-ic:empty, .stat-icon:empty,
.sign-icon:empty { display: none; }

/* Feature items (icon + text rows) */
.fi { display: flex; gap: 14px; align-items: flex-start; }
.fi::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 9px; }
.fi-ic { display: none; }

/* Bulleted review/feature lists */
.rbul { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 10px; vertical-align: middle; flex-shrink: 0; }
.rlist li, .slist li, .repair-list li, .maintenance-list li, .checklist li, .faq-list li { line-height: 1.8; }

/* Boxes & alerts (subtle, not loud) */
.warn-box, .alert-box, .emg-box, .tip-box, .info-box, .danger, .step-warn {
  border-radius: 8px; padding: 22px 26px; border: 1px solid var(--line);
}
.warn-box, .alert-box, .emg-box, .danger, .step-warn {
  background: #FBF4F0; border-color: #EAD9CE;
}
.tip-box, .info-box, .safe { background: var(--accent-bg); border-color: rgba(60,90,78,0.2); }
.alert-inner, .alert-text { color: var(--fg-soft); }

/* Coupon / CTA bands */
.coupon {
  background: var(--bg-warm); border: 1px dashed var(--accent);
  border-radius: 8px; padding: 22px 26px; margin: 24px 0; text-align: center;
}
.coupon strong { color: var(--accent); }
.cta-section, .cta-bar, .warranty-bar { background: var(--fg); color: #fff; padding: 56px 28px; text-align: center; }
.cta-inner, .warranty-bar-inner { max-width: var(--max); margin: 0 auto; }
.cta-section h2, .cta-bar h2, .warranty-bar h2, .warranty-bar h3 { color: #fff; }
.cta-text, .cta-hours { color: rgba(255,255,255,0.65); font-weight: 300; }

/* Quote / testimonial block */
.quote-section { background: var(--bg-warm); padding: 72px 28px; }
.quote-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.quote-mark { font-size: 48px; color: var(--accent); opacity: 0.3; font-family: 'Playfair Display', serif; }
.quote-text { font-family: 'Playfair Display', serif; font-size: 22px; font-style: italic; color: var(--fg); line-height: 1.5; margin: 12px 0 20px; }
.quote-author { color: var(--accent); font-weight: 600; font-size: 14px; }

/* Review cards (aboutus) */
.review-card { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 28px; display: flex; flex-direction: column; }
.review-stars { color: #8a6a2f; letter-spacing: 2px; margin-bottom: 12px; }
.review-text { font-style: italic; margin-bottom: 16px; }
.review-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 600; font-family: 'Playfair Display', serif; }
.review-name { font-weight: 600; font-size: 14px; color: var(--fg); }
.review-loc { font-size: 12px; color: var(--fg-muted); }
.review-badge { font-size: 11px; color: var(--accent); font-weight: 600; }

/* Steps (process) */
.step-body { flex: 1; }
.step-icon-wrap { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-family: 'Playfair Display', serif; }
.step-title { font-weight: 600; font-size: 17px; margin-bottom: 6px; color: var(--fg); }
.step-highlight { color: var(--accent); font-weight: 600; }

/* Tables */
.cmp-table, .data-table, .size-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.spec-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.spec-val { font-weight: 600; color: var(--fg); }
.color-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); vertical-align: middle; margin-right: 8px; }

/* Badges & tags */
.part-badge, .spec-tag, .door-badge, .drive-badge, .model-badge, .model-tag,
.rec-badge, .town-tag, .tag, .badge-pro, .badge-diy, .badge-law, .badge-danger {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
  padding: 4px 12px; border-radius: 20px; background: var(--accent-bg); color: var(--accent);
}
.badge-danger, .danger .part-badge { background: #FBEDE6; color: #9C4322; }
.badge-pro, .safe { background: var(--accent-bg); color: var(--accent); }
.recommended, .popular, .new { position: absolute; top: 12px; left: 12px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 20px; z-index: 2; }

/* Door showroom meta */
.door-style { font-size: 12px; color: var(--accent); font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.door-desc { font-size: 14px; color: var(--fg-soft); font-weight: 300; line-height: 1.7; margin: 8px 0; }
.door-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.door-price { font-size: 14px; color: var(--fg-soft); }
.door-price span { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--accent); font-weight: 700; }
.door-tags { display: flex; gap: 6px; }

/* Lightbox detail */
.lb-img { width: 100%; height: 100%; object-fit: cover; }
.lb-panel { padding: 32px; }
.lb-badge { font-size: 12px; color: var(--accent); font-weight: 600; text-transform: uppercase; }
.lb-title { font-size: 24px; margin: 6px 0 12px; }
.lb-price { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--accent); font-weight: 700; margin-bottom: 16px; }
.lb-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.lb-features { list-style: none; margin-bottom: 20px; }
.lb-features li { padding: 5px 0 5px 20px; position: relative; font-size: 14px; color: var(--fg-soft); }
.lb-features li::before { content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.lb-tel, .lb-cta { background: var(--accent); color: #fff; border: none; padding: 14px 24px; border-radius: 6px; font-weight: 600; cursor: pointer; width: 100%; }
.lb-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.9); border: none; cursor: pointer; font-size: 18px; z-index: 3; }

/* aboutus hero (alternate markup) */
.hero-bg, #heroBg { position: absolute; inset: 0; background-size: cover; background-position: center; background-image: url('../images/truck-hero.jpg'); background-image: image-set(url('../images/truck-hero-1400.avif') type('image/avif'), url('../images/truck-hero-1400.webp') type('image/webp'), url('../images/truck-hero.jpg') type('image/jpeg')); }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,30,29,0.9), rgba(28,30,29,0.5)); }
.hero-content { position: relative; z-index: 2; max-width: 620px; padding: 80px 28px; margin: 0 auto; width: 100%; }
.hero-content, .hero-content h1, .hero-content p { color: #fff; }
.hero-eyebrow { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: #e8dcc8; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(232,220,200,0.45); }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.btn-white { background: #fff; color: var(--accent) !important; padding: 14px 28px; border-radius: 6px; font-weight: 600; font-size: 13px; text-decoration: none !important; }

/* Brand showcase (openers) */
.brand-section { padding: 72px 0; }
.brand-header { text-align: center; margin-bottom: 32px; }
.brand-body { gap: 24px; }
.brand-icon { font-size: 20px; color: var(--accent); }

/* TOC (Parts) */
.toc { background: var(--bg-warm); border: 1px solid var(--line); border-radius: 8px; padding: 28px; }
.toc-inner { max-width: var(--max); margin: 0 auto; }
.toc-grid { margin-top: 16px; }
.toc-item { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; color: var(--fg-soft); }
.toc-num { font-family: 'Playfair Display', serif; color: var(--accent); font-weight: 700; }

/* Sidebar (Parts) */
.sidebar { display: flex; flex-direction: column; gap: 20px; }
.sidebar-card { background: var(--bg-warm); }

/* Map embeds on location pages */
.map-embed { width: 100%; height: 320px; border: 0; border-radius: 8px; }
.map-hd { text-align: center; margin-bottom: 16px; }

/* FAQ accordion (safety) */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-q { font-family: 'Playfair Display', serif; font-weight: 600; color: var(--fg); }
.faq-a { color: var(--fg-soft); font-weight: 300; }
.faq-inner { max-width: var(--max); margin: 0 auto; }

/* Warranty / spring spec rows */
.warranty-card, .spring-type { display: flex; flex-direction: column; }
.wb-item { text-align: center; }

/* Responsive for content grids */
@media (max-width: 768px) {
  .g5, .g6, .lb-specs { grid-template-columns: repeat(2, 1fr); }
  .lb-inner { grid-template-columns: 1fr; }
  .si, .sec .si { padding: 0 18px; }
  .quote-text { font-size: 19px; }
}

/* ──— component corrections —── */
.spec { background: transparent; border: none; padding: 6px 0; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-soft); }
.spec-label { font-weight: 400; color: var(--fg-soft); font-family: 'Inter', sans-serif; }
.spec-val { font-weight: 600; color: var(--fg); }
.cat-section { background: transparent; border: none; padding: 0; display: block; margin-bottom: 32px; }
.cat-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cat-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.part-item { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 22px; }
.part-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.part-specs { margin-top: 12px; }
.part-divider { height: 1px; background: var(--line); border: none; margin: 28px 0; }
.spring-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

/* ════════ COSMETIC POLISH — dark-surface legibility ════════ */

/* Inline links on dark/colored backgrounds: light, legible, underlined */
.page-content .hero a:not(.btn):not(.btn-r):not(.btn-o):not(.btn-w),
.sec-dark a:not(.btn):not(.btn-r):not(.btn-o):not(.btn-w),
.stats-section a:not(.btn):not(.btn-r):not(.btn-o):not(.btn-w),
.ctastrip a:not(.btn):not(.btn-r):not(.btn-o):not(.btn-w),
.pds-locator a:not(.btn):not(.btn-r):not(.btn-o):not(.btn-w),
.page-hero a:not(.btn):not(.btn-r):not(.btn-o):not(.btn-w),
.cta-section a:not(.btn):not(.btn-r):not(.btn-o):not(.btn-w),
.cta-bar a:not(.btn):not(.btn-r):not(.btn-o):not(.btn-w),
.warranty-bar a:not(.btn):not(.btn-r):not(.btn-o):not(.btn-w),
.hero-content a:not(.btn):not(.btn-r):not(.btn-o):not(.btn-w) {
  color: #ecdfca;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(236,223,202,0.5);
}
.page-content .hero a:not(.btn):hover,
.sec-dark a:not(.btn):hover,
.stats-section a:not(.btn):hover,
.ctastrip a:not(.btn):hover,
.pds-locator a:not(.btn):hover,
.page-hero a:not(.btn):hover,
.cta-section a:not(.btn):hover,
.cta-bar a:not(.btn):hover,
.warranty-bar a:not(.btn):hover,
.hero-content a:not(.btn):hover { color: #fff; text-decoration-color: #fff; }

/* Bold text on dark surfaces must stay white (was inheriting dark --fg) */
.page-content .hero strong, .page-content .hero em,
.sec-dark strong, .sec-dark em,
.stats-section strong,
.ctastrip strong, .ctastrip em,
.pds-locator strong,
.page-hero strong,
.cta-section strong, .cta-bar strong, .warranty-bar strong,
.hero-content strong, .hero-content em { color: #fff; }

/* Subtle legibility shadow over hero imagery */
.page-content .hero h1, .hero-content h1 { text-shadow: 0 1px 14px rgba(0,0,0,0.28); }
.page-content .hero-sub, .hero-content p { text-shadow: 0 1px 8px rgba(0,0,0,0.22); }

/* Tidy hero paragraph rhythm */
.page-content .hero-sub { max-width: 600px; }

/* Inline body links: gentle underline on hover for clarity (light surfaces) */
.page-content p a:not(.btn):not(.sc-link):not(.clink):hover,
.fqa a:hover, .card p a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Emergency band: keep text dark/legible on warm background */
.emergency a:not(.btn), .emg a:not(.btn) { color: var(--accent); font-weight: 500; }
.emergency strong, .emg strong { color: var(--fg); }

/* Prevent awkward orphan underline on phone-number links */
a[href^="tel:"] { white-space: nowrap; }

/* Footer links: consistent, no stray underline */
.pds-footer a { text-decoration: none; }
.pds-footer a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Card hover lift consistency (avoid jump on transform) */
.service-card, .card, .zip-card, .drive-card, .road-card, .part-card,
.review-card, .promise-card, .city-card, .city-link, .door-card, .ocard,
.model-item, .town-card, .sign-card, .acc-card { will-change: transform; }

/* Section title balance for multi-line headings */
.stitle, .sec-title, .section-title, .page-hero h1, .page-content .hero h1 { text-wrap: balance; }

/* Consistent paragraph color inside generic content boxes */
.warn-box p, .tip-box p, .info-box p, .alert-box p, .coupon p { color: var(--fg-soft); }
.warn-box strong, .tip-box strong, .info-box strong { color: var(--fg); }

/* Remove stray bottom margin collapse between stacked dark bands */
.pds-locator + .emergency, .emergency + .stats-section { border-top: none; }

/* ════════ MOBILE — comprehensive responsive pass ════════ */

/* Horizontally scrollable tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 18px 0; border: 1px solid var(--line); border-radius: 8px; }
.table-scroll table { margin: 0; border: none; min-width: 480px; }

@media (max-width: 900px) {
  .g3, .reviews-grid, .repair-grid, .promise-grid { grid-template-columns: 1fr; }
  .pds-why-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* Topbar: keep only the phone, drop the descriptive line */
  .pds-topbar { font-size: 12px; padding: 8px 14px; }
  .pds-topbar .sep { display: none; }

  /* Header */
  .pds-header-inner { padding: 0 16px; height: 60px; }
  .pds-logo { font-size: 18px; }
  .pds-logo span { font-size: 9px; letter-spacing: 2px; }

  /* Hero */
  .page-content .hero { min-height: 0; }
  .page-content .hero .hi { padding: 48px 18px; }
  .page-content .hero h1 { font-size: clamp(28px, 7vw, 38px); }
  .page-content .hero-sub { font-size: 15px; }
  .page-content .hero-slides::after { background: linear-gradient(180deg, rgba(28,30,29,0.82) 0%, rgba(28,30,29,0.72) 60%, rgba(28,30,29,0.78) 100%); }
  .page-content .hstats { gap: 20px 28px; padding-top: 24px; }
  .page-content .hstats .sn { font-size: 26px; }
  .page-content .hstats .sl { font-size: 11px; }

  /* Full-width tap-friendly buttons in primary action rows */
  .hctas .btn, .hctas .btn-r, .hctas .btn-o,
  .btn-row .btn, .hero-btns .btn-r, .hero-btns .btn-o, .hero-btns .btn-white,
  .pds-locator-actions a {
    display: block; width: 100%; text-align: center;
  }
  .hctas, .hero-btns, .pds-locator-actions { width: 100%; max-width: 360px; }

  /* Section padding */
  .inner, .wrap, .wrap-wide, .si,
  .services-section .inner, .pds-why, .promise-section .inner,
  .cities-section .inner, .faq-section .inner, .sec, .quote-section,
  .brand-section, .cta-section { padding-left: 18px; padding-right: 18px; }
  .inner, .wrap, .wrap-wide { padding-top: 52px; padding-bottom: 52px; }
  .sec { padding-top: 48px; padding-bottom: 48px; }

  /* Grids collapse */
  .g2, .footer-grid, .faq-section .g2, .promise-section .g2,
  .lb-inner, .lb-specs, .cat-body, .spring-specs { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: 1fr; }
  .cities-grid, .city-grid, .zip-grid, .road-grid, .parts-grid,
  .signs-grid, .rules-grid, .drive-grid, .acc-grid, .toc-grid,
  .g5, .g6, .stat-grid, .hero-stat-row, .dealer-badges { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .network-grid { grid-template-columns: repeat(2, 1fr); }

  /* Bands stack & center */
  .emergency-inner, .emg-inner, .cta-inner, .warranty-bar-inner { flex-direction: column; text-align: center; align-items: center; }
  .emergency .btn-w, .emg .btn-w { width: auto; }

  /* Promote readability */
  .stitle, .sec-title, .section-title { font-size: clamp(24px, 6vw, 30px); }
  .quote-text { font-size: 19px; }
  .page-hero { padding: 56px 18px; min-height: 180px; }

  /* Footer centered */
  .footer-grid { text-align: center; gap: 28px; }
  .footer-col ul { display: inline-block; text-align: left; }

  /* Steps stack icon over text */
  .steps .step { gap: 16px; }
  .fi { gap: 12px; }
}

@media (max-width: 480px) {
  .pds-header-inner { height: 56px; }
  .cities-grid, .city-grid, .zip-grid, .road-grid, .parts-grid,
  .signs-grid, .rules-grid, .drive-grid, .acc-grid, .toc-grid,
  .g5, .g6, .dealer-badges, .stat-grid, .hero-stat-row { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .page-content .hstats { gap: 18px 24px; }
  .page-content .hstats > div { min-width: 64px; }
  .page-content .hero h1 { font-size: clamp(26px, 8vw, 34px); }
  .hero-rating { flex-direction: column; align-items: flex-start; gap: 6px; }
  .breadcrumbs { padding: 12px 18px; font-size: 11px; }
  .dealer-badge { width: 100%; text-align: center; }
}

/* ════════ UNIFORMITY — left-aligned headers & consistent hero backgrounds ════════ */
:root { --gutter: max(28px, calc((100% - 1140px) / 2 + 28px)); }

/* All inner-page heroes: identical background image + overlay, left-aligned */
.page-hero {
  display: block;
  text-align: left;
  padding: 88px var(--gutter);
  min-height: 0;
  background: var(--fg) url('../images/truck-hero.jpg') center/cover no-repeat;
  background-image: image-set(url('../images/truck-hero-1400.avif') type('image/avif'), url('../images/truck-hero-1400.webp') type('image/webp'), url('../images/truck-hero.jpg') type('image/jpeg'));
}
.page-hero::after { background: linear-gradient(90deg, rgba(28,30,29,0.92) 0%, rgba(28,30,29,0.72) 58%, rgba(28,30,29,0.45) 100%); }
.page-hero h1, .page-hero p, .page-hero .hero-cta { position: relative; z-index: 2; margin-left: 0; margin-right: 0; }
.page-hero h1 { margin-bottom: 12px; }
.page-hero p { max-width: 640px; }

/* aboutus alternate hero aligned to the same gutter & left */
.hero-content { max-width: none; width: 100%; margin: 0; padding: 92px var(--gutter); text-align: left; }
.hero-content h1 { max-width: 760px; }
.hero-content p { max-width: 620px; }

/* Section intros: ALL left-aligned (remove earlier centering) */
.services-section .inner > .slabel, .services-section .inner > .stitle,
.cities-section .inner > .slabel, .cities-section .inner > .stitle, .cities-section .inner > p,
.stats-section .inner > .slabel, .stats-section .inner > .stitle,
.pds-why-inner, .brand-header, .dealers-section { text-align: left; }
.services-section .inner > .div, .cities-section .inner > .div, .stats-section .inner > .div { margin-left: 0; margin-right: 0; }
.cities-section .inner > p { margin-left: 0; margin-right: 0; max-width: 720px; }

/* Dealers + CTA bands: left-aligned, same gutter */
.dealers-section { padding: 56px var(--gutter); }
.dealers-section p { margin: 0; max-width: 720px; }
.dealers-section .dealer-badges { justify-content: flex-start; }
.pds-locator, .ctastrip { text-align: left; padding: 64px var(--gutter); }
.pds-locator h2, .pds-locator p, .ctastrip h2, .ctastrip p { margin-left: 0; margin-right: 0; max-width: 760px; }
.pds-locator-actions { justify-content: flex-start; }

/* Quote block left-aligned for consistency */
.quote-section { text-align: left; }
.quote-inner { margin: 0; max-width: var(--max); padding: 0 var(--gutter); text-align: left; }
.quote-text { font-style: italic; }

/* Generic source-page section intros left (sec/si wrappers) */
.sec .si { text-align: left; }
.sec-title, .sec-sub, .eyebrow { text-align: left; }

@media (max-width: 768px) {
  .page-hero { padding: 52px 18px; }
  .hero-content { padding: 56px 18px; }
  .pds-locator, .ctastrip, .dealers-section { padding: 44px 18px; }
  .quote-inner { padding: 0; }
}

/* ════════ SEO / QA PASS — accessibility, legacy-markup legibility, mobile ════════ */

/* Skip link + visible keyboard focus */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; background: #fff; color: var(--accent); padding: 12px 18px; border-radius: 6px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; border-radius: 3px; }
.page-content .hero :focus-visible, .page-hero :focus-visible, .pds-footer :focus-visible, .pds-topbar :focus-visible,
.pds-locator :focus-visible, .ctastrip :focus-visible, .stats-section :focus-visible, .pds-sticky-mobile :focus-visible,
.sec-dark :focus-visible, .cta-section :focus-visible, [style*="var(--dark)"] :focus-visible, [style*="var(--red)"] :focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px rgba(0,0,0,0.6); }
main:focus { outline: none; }

/* Header: toggle sits before the menu in the DOM (keyboard order) but stays on the right */
.pds-navwrap { order: 2; }
.pds-menu-toggle { order: 3; }
.pds-nav-cta { white-space: nowrap; }

/* Screen-reader-only text */
.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; }

/* Headings whose level was corrected for document outline keep their original size */
h2[data-h="3"], h3[data-h="4"] { font-size: 1.17em; }
h2[data-h="4"], h3[data-h="5"], h2[data-h="5"] { font-size: 1em; }
h3[data-h="4"] { font-size: 1em; }
.stats-section .stat-num { color: #fff; }

/* Breadcrumb */
.breadcrumbs [aria-current] { color: var(--fg-soft); }

/* Towns we serve but have no dedicated page for: plain (non-link) cards/text */
.no-link { cursor: default; }
a.city-link, .city-card > a { color: inherit; text-decoration: none; }
div.city-link.no-link:hover { border-color: var(--line); box-shadow: none; transform: none; }
.city-card > a, .city-card > .no-link { display: block; }
.city-card span.city-link { background: none; border: none; padding: 0; margin-top: 8px; display: inline-block; color: var(--accent); font-weight: 600; font-size: 13px; }

/* Link lists (contact, 404) */
.link-list { list-style: none; margin-top: 12px; }
.link-list li { padding: 4px 0; }
.link-list a { display: inline-block; padding: 8px 0; font-weight: 600; }

/* Body links must be distinguishable without relying on colour alone */
.page-content a:not([class]):not([style*="display:block"]) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.link-list a, .footer-col a, .city-card > a, .breadcrumbs a, .page-content :is(h2, h3, h4) > a:only-child { text-decoration: none; }

/* Legacy town/service pages: text that sits on dark or image backgrounds.
   "Dark context" = .sec-dark or any block whose inline legacy style paints a dark background. */
.page-content .hero .hi p { color: rgba(255,255,255,0.9); font-size: 16px; line-height: 1.85; margin-bottom: 30px; text-shadow: 0 1px 8px rgba(0,0,0,0.22); }
.page-content .hero .hi > .badge a { color: inherit; }
.stats-section .stat-num, .stats-section .sn { color: #fff; }
.stats-section .stat-label { color: rgba(255,255,255,0.75); }
:is([style*="background:var(--dark)"], [style*="background:var(--red)"], [style*="background:var(--steel)"]) { color: rgba(255,255,255,0.86); }
:is(.sec-dark, [style*="background:var(--dark)"], [style*="background:var(--red)"], [style*="background:var(--steel)"]) :is(strong, h2, h3, h4, .sn, .stat-num, .hstat-num, .snum, .part-name, .road-name, .zip-code, .model-name, .rule-title, .step-title) { color: #fff; }
:is(.sec-dark, [style*="background:var(--dark)"], [style*="background:var(--red)"], [style*="background:var(--steel)"]) :is(p, li, .sl, .stat-label, .stat-lab, .hstat-lab, .fi-tx, .zip-area, .road-desc, .part-desc, .model-desc, .coast-tx, .step-text, .city-desc, .lf, .sec-sub) { color: rgba(255,255,255,0.8); }
:is(.sec-dark, [style*="background:var(--dark)"], [style*="background:var(--red)"], [style*="background:var(--steel)"]) a:not([class*="btn"]) { color: #ecdfca; text-decoration: underline; text-underline-offset: 2px; }
:is(.sec-dark, [style*="background:var(--dark)"], [style*="background:var(--red)"], [style*="background:var(--steel)"]) :is(.zip-card, .drive-card, .road-card, .part-card, .sign-card, .town-card, .repair-card, .acc-card, .call-card, .promise-card, .safety-card, .warranty-card, .model-item, .ocard, .rule, .coast, .wbox, .wb-item, .spring-type, .harbor-box, .water-box, .estate-box, .stat-card, .card, .fqi, .lf, .city-card, .city-link) { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
:is(.sec-dark, [style*="background:var(--dark)"], [style*="background:var(--steel)"]) :is(.step-num, .step-icon-wrap, .snum) { background: rgba(255,255,255,0.1); color: #fff; }
:is(.sec-dark, [style*="background:var(--dark)"], [style*="background:var(--steel)"]) .step { border-bottom-color: rgba(255,255,255,0.12); }
:is(.sec-dark, [style*="background:var(--dark)"], [style*="background:var(--steel)"]) :is(.fqq, .fqa) { color: rgba(255,255,255,0.9); }
:is([style*="background:var(--dark)"], [style*="background:var(--red)"], [style*="background:var(--steel)"]) .btn-w { background: #fff; color: var(--accent) !important; }
:is(.sec-dark, [style*="background:var(--dark)"], [style*="background:var(--red)"], [style*="background:var(--steel)"]) :is(.city-name, .city-link-name, .zip-name) { color: #fff; }
:is(.sec-dark, [style*="background:var(--dark)"], [style*="background:var(--red)"], [style*="background:var(--steel)"]) :is(.city-zip, .city-link-zip, .city-phone) { color: rgba(255,255,255,0.75); }
:is(.sec-dark, [style*="background:var(--dark)"], [style*="background:var(--red)"], [style*="background:var(--steel)"]) :is(.town-tag, .tag, .spec-tag, .model-tag, .part-badge, .drive-badge) { background: rgba(255,255,255,0.14); color: #fff; }
:is(.sec-dark, [style*="background:var(--dark)"], [style*="background:var(--red)"], [style*="background:var(--steel)"]) .city-card span.city-link { color: #ecdfca; }
/* Legacy inline text colours that were tuned for the old palette */
.page-content [style*="color:rgba(255,255,255,.4)"], .page-content [style*="color:rgba(255,255,255,.5)"] { color: rgba(255,255,255,0.72) !important; }
/* Light boxes keep dark text even when nested in a dark section */
:is(.warn-box, .alert-box, .emg-box, .danger, .step-warn, .tip-box, .info-box, .safe, .coupon, .table-scroll) { color: var(--fg-soft); }
:is(.warn-box, .alert-box, .emg-box, .danger, .step-warn, .tip-box, .info-box, .safe, .coupon) :is(strong, h3, h4, .rule-title) { color: var(--fg) !important; }
:is(.warn-box, .alert-box, .emg-box, .danger, .step-warn, .tip-box, .info-box, .safe, .coupon) :is(p, li) { color: var(--fg-soft) !important; }
:is(.warn-box, .alert-box, .emg-box, .danger, .step-warn, .tip-box, .info-box, .safe, .coupon, .table-scroll) a { color: var(--accent) !important; text-decoration: underline; }
.table-scroll { background: var(--white); }
.table-scroll td { color: var(--fg-soft) !important; }
.table-scroll td strong { color: var(--fg) !important; }
/* Gold accent text is only legible on dark surfaces: on light surfaces use the dark accent */
.page-content [style*="color:var(--gold)"] { color: #7a5c24 !important; }
:is(.sec-dark, .hero, .page-hero, .stats-section, .cta-section, .cta-bar, .warranty-bar, [style*="background:var(--dark)"], [style*="background:var(--red)"], [style*="background:var(--steel)"]) [style*="color:var(--gold)"] { color: var(--gold) !important; }
:is(.warn-box, .alert-box, .danger, .step-warn, .tip-box, .info-box, .table-scroll) [style*="color:var(--gold)"] { color: #7a5c24 !important; }
.faq-inner { padding: 72px 28px; }
.faq-section .stitle.lgt { color: var(--fg); }
/* "recommended/popular/new" are badge modifiers, not card styles */
.drive-card.recommended { position: static; background: var(--white); color: inherit; font-size: inherit; font-weight: inherit; padding: 26px; border-radius: 8px; border: 2px solid var(--accent); }
.pds-locator .pds-locator-actions a { color: var(--fg) !important; text-decoration: none !important; }
.pds-locator .pds-locator-actions a:first-child { color: #fff !important; }
.rlist { list-style: none; }
.rlist li { display: flex; gap: 4px; align-items: baseline; }
.rlist li strong { display: block; }
.map-hd { padding: 56px 28px 20px; }
.map-hd h2 { color: #fff; font-size: clamp(22px, 3vw, 30px); margin-bottom: 8px; }
.map-hd p { color: rgba(255,255,255,0.75); }
.map-embed { display: block; border-radius: 0; }
.coupon span { font-weight: 700; color: var(--accent); }

/* FAQ: native accordion on the safety page */
details.faq-item { padding: 0; }
details.faq-item > summary { cursor: pointer; list-style: none; padding: 20px 52px 20px 28px; position: relative; font-size: 17px; }
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary::after { content: '+'; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--accent); font-family: Arial, sans-serif; }
details.faq-item[open] > summary::after { content: '\2212'; }
details.faq-item > .faq-a { padding: 0 28px 22px; }

/* Showroom cards are keyboard-focusable buttons */
.door-card:focus-visible { outline-offset: 4px; }
.lb-close::before { content: '\00d7'; }
.door-img img { background: var(--bg-warm); }

/* Scrollable tables */
.table-scroll:focus-visible { outline-offset: 0; }

/* Sticky mobile call bar: respect the iPhone home indicator, never cover content */
.pds-sticky-mobile { padding-bottom: env(safe-area-inset-bottom, 0px); height: auto; min-height: 56px; background: var(--fg); }
.pds-sticky-mobile a { min-height: 56px; font-size: 14px; }

@media (max-width: 768px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .pds-nav { top: 100%; max-height: calc(100vh - 120px); overflow-y: auto; }
  .pds-nav li { width: 100%; }
  .pds-nav a { display: block; }
  .pds-nav-cta { margin-left: 0; text-align: center; }
  /* Legacy sections carry inline desktop padding (72px 40px): tighten on phones */
  .page-content > div[style*="padding:72px 40px"] { padding: 8px 0 !important; }
  .page-content > div[style*="padding:40px"] { padding: 36px 18px !important; }
  .page-content > div[style*="padding:40px"] > .inner { padding: 0; }
  .page-content [style*="white-space:nowrap"] { white-space: normal !important; }
  .page-content [style*="font-size:36px"] { font-size: 26px !important; }
  .btn { white-space: normal; text-align: center; }
  .map-hd { padding: 40px 18px 16px; }
  .rlist li { display: block; }
  /* Page hero image: smaller file on phones */
  .page-hero, .hero-bg, #heroBg { background-image: url('../images/truck-hero.jpg'); background-image: image-set(url('../images/truck-hero-800.avif') type('image/avif'), url('../images/truck-hero-800.webp') type('image/webp'), url('../images/truck-hero.jpg') type('image/jpeg')); }
  /* Comfortable tap targets */
  .footer-col li { margin-bottom: 0; }
  .footer-col a { display: inline-block; padding: 9px 0; }
  .breadcrumbs a { display: inline-block; padding: 6px 0; }
}

/* Grid children may shrink below their content width (tables, long words) */
.g2 > *, .g3 > *, .g4 > *, .g5 > *, .g6 > *, .cat-body > *, .page-body > *, .content > *, .footer-grid > *,
.zip-grid > *, .road-grid > *, .parts-grid > *, .spring-specs > *, .repair-grid > *, .cities-grid > * { min-width: 0; }
@media (max-width: 768px) {
  .page-content [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; gap: 24px !important; }
  .page-content [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .service-card:hover, .card:hover, .city-link:hover, .door-card:hover, .btn:hover, .btn-r:hover { transform: none; }
}

@media print {
  .pds-sticky-mobile, .pds-menu-toggle, .skip-link { display: none !important; }
}

/* Outline buttons on image heroes */
.page-hero .btn-o, .hero-content .btn-o { border-color: rgba(255,255,255,0.6); color: #fff !important; }
.page-hero .btn-o:hover, .hero-content .btn-o:hover { background: #fff; color: var(--accent) !important; }

/* Long call-to-action phone links may wrap on small screens (prevents horizontal scroll) */
@media (max-width: 768px) {
  a[href^="tel:"] { white-space: normal; }
  .btn-r, .btn-w, .btn-o { max-width: 100%; text-align: center; }
}

/* WhatsApp chat button (owner 2026-10-15) — floats above the mobile call bar */
.wa-float { position: fixed; right: 18px; bottom: 20px; z-index: 310; display: flex; align-items: center; gap: 8px; background: #25D366; color: #fff !important; text-decoration: none; font-weight: 700; font-size: 15px; padding: 12px 16px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.wa-float svg { width: 24px; height: 24px; flex: none; }
.wa-float:hover { filter: brightness(1.05); }
.wa-float:focus-visible { outline: 3px solid #0b6b35; outline-offset: 3px; }
@media (max-width: 768px) { .wa-float { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); right: 14px; padding: 12px; } .wa-float span { display: none; } }
@media print { .wa-float { display: none !important; } }