/* Pro Pots of NE Oklahoma — shared styles
   Palette: forest green primary, safety amber CTA, warm charcoal-green anchor.
   No dark blue anywhere. Large readable type, high contrast. */

:root {
  --ink:        #262C34;   /* charcoal with a blue tint (Yavid request 2026-08-15) */
  --ink-deep:   #191E25;   /* darkest anchor, blue-tinted */
  --ink-soft:   #3B434E;   /* hover states */
  --amber:      #E07B1F;   /* THE action color — CTAs only */
  --amber-deep: #B5650F;   /* CTA hover */
  --anchor:     #262C34;   /* alias kept for existing rules */
  --paper:      #FFFFFF;   /* page background */
  --panel:      #EFEFED;   /* alternating section bg — warm light gray */
  --white:      #FFFFFF;
  --text:       #2A2D30;   /* body text — high contrast on cream/white */
  --text-light: #F2F1EC;   /* body text on dark anchor */
  --line:       #C9C9C5;
  --hazard:     repeating-linear-gradient(135deg, var(--amber) 0 14px, var(--ink-deep) 14px 28px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
}

h1, h2, h3, h4 {
  font-family: Arial, Helvetica, sans-serif; font-weight: bold;
}
.btn, .nav, .eyebrow, .chat-panel, .stat-num {
  font-family: 'Arial Black', 'Segoe UI', Arial, Helvetica, sans-serif;
}

img { max-width: 100%; display: block; }
a { color: var(--ink); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- Top utility bar ---------- */
.topbar {
  background: var(--anchor);
  color: var(--text-light);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  padding: 8px 0;
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar a { color: #F3A653; text-decoration: none; font-weight: bold; }
.topbar a:hover { text-decoration: underline; }

/* ---------- Header / Nav ---------- */
header.site {
  background: var(--white);
  border-bottom: 4px solid var(--ink);
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 10px rgba(30,42,34,.08);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; gap: 16px; flex-wrap: wrap;
}
.brand { text-decoration: none; display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 128px; height: auto; display: block; }
.brand-name {
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 20px; line-height: 1.15; color: var(--anchor);
}
.brand-name span { color: var(--ink); }

.nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.nav a {
  text-decoration: none; color: var(--anchor);
  font-size: 16px; font-weight: 800; letter-spacing: .3px;
  padding: 10px 14px; border-radius: 8px;
}
.nav a:hover { background: #E9E9E6; color: var(--ink-deep); }
.nav a.active { background: var(--ink); color: #fff; }
.nav a.header-phone.active {
  background: var(--amber-deep); color: #fff !important;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.25);
}
.nav a.header-phone.active:hover { background: var(--amber-deep) !important; }

.header-phone {
  background: var(--amber); color: var(--ink-deep) !important;
  padding: 9px 14px !important; border-radius: 4px;
  font-size: 15px !important;
  box-shadow: 0 2px 0 var(--amber-deep);
}
.header-phone:hover { background: #EC8A31 !important; color: var(--ink-deep) !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  font-size: 15px; font-weight: 800; letter-spacing: .3px;
  padding: 10px 18px; border-radius: 4px; border: none; cursor: pointer;
}
.btn-amber { background: var(--amber); color: var(--ink-deep); box-shadow: 0 4px 0 var(--amber-deep); }
.btn-amber:hover { background: #EC8A31; transform: translateY(1px); box-shadow: 0 3px 0 var(--amber-deep); }
.btn-green { background: var(--ink); color: #fff; box-shadow: 0 4px 0 #000; }
.btn-green:hover { background: var(--ink-deep); }
.btn-ghost {
  background: transparent; color: var(--ink-deep);
  border: 2px solid var(--ink-deep);
}
.btn-ghost:hover { background: rgba(38,44,52,.06); }
.btn-big { font-size: 16px; padding: 12px 22px; }

/* ---------- Hero ---------- */
.hero {
  background: var(--paper);
  color: var(--ink-deep);
  padding: 26px 0 30px;
  border-bottom: 10px solid transparent;
  border-image: var(--hazard) 10;
  position: relative;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: url('img/logo.png');
  background-size: 300px auto; background-repeat: space;
  opacity: .09; pointer-events: none;
}
.hero .wrap { position: relative; }
.hero-photo, .section-photo {
  display: block; width: 100%; max-width: 760px; height: auto;
  border: 2px solid var(--ink); border-radius: 4px;
  box-shadow: 5px 5px 0 rgba(36,44,52,.12);
  margin: 28px 0 4px;
}
.hero-photos {
  display: flex; gap: 20px; align-items: stretch; margin: 16px 0 4px;
  max-width: 980px;
}
.hero-photos .hero-photo {
  margin: 0; flex: 1 1 0; min-width: 0;
  object-fit: cover; height: auto; max-width: none;
}
@media (max-width: 640px) {
  .hero-photos { flex-direction: column; }
}
.section-photo { margin: 0 0 28px; }
.hero .eyebrow {
  display: inline-block; background: none; border: none; border-left: 5px solid var(--ink);
  color: var(--ink); font-size: 15px; font-weight: 800;
  padding: 2px 0 2px 12px; margin-bottom: 10px;
}
.hero h1 {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2; margin-bottom: 10px; color: var(--ink-deep);
}

.hero p.lede {
  font-size: 19px; max-width: 58ch; margin-bottom: 16px; color: #43474C;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero-phone-line {
  margin-top: 20px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #5A5E62;
}
.hero-phone-line a { color: var(--amber-deep); font-weight: bold; text-decoration: none; font-size: 17px; }

/* ---------- Sections ---------- */
section.block { padding: 68px 0; }
section.block.alt { background: var(--panel); }
section.block.dark { background: var(--anchor); color: var(--text-light); }
section.block.dark h2, section.block.dark h3 { color: #fff; }

.eyebrow {
  display: inline-block; color: var(--ink); font-size: 16px; font-weight: 800;
  letter-spacing: .4px; text-transform: none; border-left: 6px solid var(--ink);
  padding-left: 12px; margin-bottom: 12px;
}
h2.sec { font-size: clamp(25px, 3vw, 32px); line-height: 1.15; color: var(--anchor); margin-bottom: 16px; }
p.sec-sub { font-size: 20px; max-width: 62ch; margin-bottom: 40px; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  background: var(--white); border: 2px solid var(--anchor); border-radius: 4px;
  padding: 30px 28px; box-shadow: 5px 5px 0 rgba(30,42,34,.12);
}
.card .icon {
  width: 54px; height: 54px; border-radius: 4px; background: var(--ink);
  color: #fff; display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.card.featured .icon { background: var(--amber-deep); }
.card .icon svg { width: 28px; height: 28px; }
.card .icon.num {
  font-family: 'Arial Black', Arial, sans-serif; font-size: 26px;
}
.card h3 { font-size: 23px; color: var(--anchor); margin-bottom: 10px; }
.card p { font-size: 18px; }
.card .card-link {
  display: inline-block; margin-top: 16px; font-family: Arial, sans-serif;
  font-weight: bold; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: 17px;
}
.card .card-link:hover { text-decoration: underline; }
.card.featured { border-color: var(--amber-deep); box-shadow: 6px 6px 0 var(--amber); }

/* ---------- Checklist signature block ---------- */
.checklist {
  background: var(--white); border: 2px solid var(--anchor); border-radius: 4px;
  border-left: 10px solid var(--amber);
  padding: 38px 34px; box-shadow: 6px 6px 0 rgba(36,40,43,.16);
}
.checklist h3 { font-size: 26px; color: var(--ink-deep); margin-bottom: 8px; }
.checklist p.small { font-size: 17px; margin-bottom: 22px; }
.checklist ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 28px; }
.checklist li {
  font-size: 18px; padding-left: 36px; position: relative;
}
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 3px;
  background: var(--ink); color: #fff; font-family: Arial, sans-serif; font-weight: bold;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}

/* ---------- Stats strip ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; text-align: center; }
.stat-num { font-size: 28px; color: #F3A653; line-height: 1; margin-bottom: 8px; }
.stat-label { font-size: 15px; font-family: Arial, sans-serif; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--amber);
  color: var(--ink-deep); text-align: center; padding: 40px 0;
  border-top: 12px solid transparent;
  border-image: var(--hazard) 12;
}
.cta-band h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 12px; }
.cta-band p { font-size: 17px; margin-bottom: 18px; }
.cta-band .btn-green { box-shadow: 0 4px 0 #000; }
.cta-band .phone-huge {
  display: block; font-family: 'Arial Black', Arial, sans-serif;
  font-size: clamp(26px, 3.6vw, 38px); color: var(--ink-deep); text-decoration: none; margin-bottom: 20px;
  letter-spacing: 1px;
}
.trust-strip {
  font-family: Arial, sans-serif; font-size: 13px; font-weight: bold;
  color: var(--ink-deep); margin-top: 26px; opacity: .92;
}
.cta-band .phone-huge:hover { text-decoration: underline; }

/* ---------- Quote form ---------- */
.quote-form {
  background: var(--white); border: 2px solid var(--anchor); border-radius: 4px;
  padding: 36px; box-shadow: 0 8px 24px rgba(30,42,34,.08);
}
.quote-form label {
  display: block; font-family: Arial, sans-serif; font-weight: bold;
  font-size: 16px; margin: 18px 0 6px; color: var(--anchor);
}
.quote-form input, .quote-form select, .quote-form textarea {
  width: 100%; font-size: 18px; font-family: Arial, sans-serif;
  padding: 13px 14px; border: 2px solid #9AA294; border-radius: 4px; background: #FFFFFF;
  color: var(--text);
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline: 3px solid rgba(224,123,31,.45); border-color: var(--amber);
}
.quote-form .btn { width: 100%; margin-top: 20px; }
.form-note { font-size: 15px; font-family: Arial, sans-serif; color: #5A6058; margin-top: 14px; text-align: center; }

/* ---------- Contact info panel ---------- */
.info-panel { display: grid; gap: 18px; }
.info-row {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--white); border: 2px solid var(--anchor); border-radius: 4px; padding: 22px;
}
.info-row .icon { color: var(--ink-deep); }
.info-row .icon { line-height: 1; flex-shrink: 0; width: 44px; height: 44px; background: var(--ink); color:#fff; border-radius: 4px; display:flex; align-items:center; justify-content:center; }
.info-row h4 { font-size: 18px; color: var(--anchor); margin-bottom: 4px; }
.info-row a { font-size: 19px; font-weight: bold; text-decoration: underline; text-underline-offset: 3px; color: var(--ink-deep); }
.info-row a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
footer.site {
  background: var(--anchor); color: var(--text-light); padding: 54px 0 30px;
  font-family: Arial, Helvetica, sans-serif; font-size: 16px;
}
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px; margin-bottom: 34px; }
footer h4 { font-family: 'Arial Black', Arial, sans-serif; font-size: 17px; color: #F3A653; margin-bottom: 14px; }
footer a { color: var(--text-light); text-decoration: none; }
footer a:hover { color: #F3A653; text-decoration: underline; }
footer ul { list-style: none; }
footer li { margin-bottom: 9px; }
footer address { font-style: normal; line-height: 1.7; }
.footer-bottom { border-top: 1px solid #3B3F42; padding-top: 22px; font-size: 14px; color: #ABAEA9; text-align: center; }

/* ---------- Chat widget ---------- */
.chat-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  background: var(--amber); color: var(--ink-deep); border: none; cursor: pointer;
  font-family: 'Arial Black', Arial, sans-serif; font-size: 14px; letter-spacing: .3px;
  padding: 11px 16px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  display: flex; align-items: center; gap: 10px;
}
.chat-fab:hover { background: var(--amber-deep); }
.chat-fab .dot {
  width: 11px; height: 11px; border-radius: 50%; background: #1E9E4A;
  box-shadow: 0 0 0 4px rgba(30,158,74,.25);
}

.chat-panel {
  position: fixed; right: 22px; bottom: 92px; z-index: 210;
  width: 350px; max-width: calc(100vw - 32px);
  background: var(--white); border-radius: 6px; overflow: hidden;
  box-shadow: 0 16px 44px rgba(0,0,0,.32);
  display: none; flex-direction: column;
  border: 1px solid var(--line);
}
.chat-panel.open { display: flex; }
.chat-head {
  background: var(--ink); color: #fff; padding: 16px 18px;
  display: flex; justify-content: space-between; align-items: center;
}
.chat-head h4 { font-size: 17px; }
.chat-head small { display: block; font-family: Arial, sans-serif; font-weight: normal; font-size: 13px; color: #C4C3BE; }
.chat-close { background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; line-height: 1; }
.chat-body {
  padding: 16px; height: 320px; overflow-y: auto; background: #F4F6F3;
  font-family: Arial, sans-serif; font-size: 16px;
}
.msg { max-width: 85%; padding: 11px 14px; border-radius: 14px; margin-bottom: 10px; line-height: 1.45; }
.msg.bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.user { background: var(--ink); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.chat-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.chat-choices button {
  background: #fff; border: 2px solid var(--ink); color: var(--ink-deep);
  font-family: Arial, sans-serif; font-weight: bold; font-size: 15px;
  padding: 9px 14px; border-radius: 4px; cursor: pointer;
}
.chat-choices button:hover { background: var(--ink); color: #fff; }
.chat-input-row { display: flex; gap: 8px; padding: 12px; background: #fff; border-top: 1px solid var(--line); }
.chat-input-row input {
  flex: 1; font-size: 16px; font-family: Arial, sans-serif;
  padding: 11px 12px; border: 2px solid #9AA294; border-radius: 4px;
}
.chat-input-row button {
  background: var(--amber); color: var(--ink-deep); border: none; border-radius: 10px;
  font-family: 'Arial Black', Arial, sans-serif; font-size: 15px; padding: 0 18px; cursor: pointer; border-radius: 4px;
}
.chat-actions { display: grid; gap: 8px; margin-top: 4px; }
.chat-actions a {
  display: block; text-align: center; text-decoration: none;
  font-family: Arial, sans-serif; font-weight: bold; font-size: 15px;
  padding: 11px; border-radius: 4px;
}
.chat-actions a.call { background: var(--amber); color: var(--ink-deep); }
.chat-actions a.text { background: var(--ink); color: #fff; }
.chat-actions a.email { background: #fff; border: 2px solid var(--ink); color: var(--ink-deep); }

/* ---------- Hamburger toggle (mobile only) ---------- */
.nav-toggle {
  display: none;
  background: var(--ink); border: none; border-radius: 4px;
  width: 52px; height: 48px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav-toggle span {
  display: block; width: 26px; height: 3px; border-radius: 2px;
  background: #fff; transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---------- Sticky mobile call bar ---------- */
.mobile-callbar { display: none; }

@media (max-width: 760px) {
  body { font-size: 18px; }
  .hero { padding: 30px 0 34px; }
  .header-inner { flex-wrap: nowrap; }
  .nav-toggle { display: flex; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white); border-bottom: 4px solid var(--ink);
    box-shadow: 0 10px 24px rgba(30,42,34,.18);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px 16px 18px;
  }
  .nav.open { display: flex; }
  .nav a {
    font-size: 18px; padding: 15px 14px;
    border-bottom: 1px solid var(--line); border-radius: 0;
  }
  .nav a:last-of-type { border-bottom: none; }
  .nav a.header-phone {
    margin-top: 12px; border-radius: 4px; text-align: center;
    border-bottom: none;
  }
  .mobile-callbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 190;
    background: var(--ink-deep);
  }
  .mobile-callbar a {
    flex: 1; text-align: center; color: #fff; text-decoration: none;
    font-family: 'Arial Black', Arial, sans-serif; font-size: 14px; padding: 12px 8px;
  }
  .mobile-callbar a.call-side { background: var(--amber); color: var(--ink-deep); }
  .chat-fab { bottom: 74px; }
  .chat-panel { bottom: 140px; }
  footer.site { padding-bottom: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---- v2.2 hero-first additions ---- */
.hero h1 em { font-style: normal; color: var(--amber-deep); }
.hero-geo {
  margin-top: 18px; font-family: Arial, Helvetica, sans-serif;
  font-size: 14px; color: #6A6E72; border-top: 1px solid #D8D8D4; padding-top: 14px;
}
.hero-geo a { color: var(--amber-deep); font-weight: bold; text-decoration: none; }
.hero-geo a:hover { text-decoration: underline; }

/* v3.5: hero Call button VISUAL parity — box + 4px shadow = quote button height (Yavid) */
.hero-ctas { align-items: flex-start; }
.hero-ctas .btn-amber {
  padding: 8px 18px;
  font-size: 15px;
  border: 2px solid transparent;
}

/* v3.7: footer logo under Contact column (Yavid) */
.footer-logo {
  width: 180px; height: auto; display: block;
  margin: 18px auto 0;
}

/* v3.7: dark-bg logo under footer Contact column (Yavid) — larger than header's 128px */
.footer-logo {
  width: 80%; max-width: 190px; height: auto; display: block;
  margin: 18px auto 0;
}

/* v4.0: septic CTA band — "Book Service Now" + "Free Inspection" side by side (Yavid) */
.cta-band .cta-pair {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}

/* v4.1: contact info cards — let long links (email) wrap so the row fits a 390px phone (Yavid) */
.info-row, .info-row > div { min-width: 0; }
.info-row a { overflow-wrap: anywhere; }

/* v4.2: in-page jump to the town list clears the sticky header (Yavid) */
#towns { scroll-margin-top: 110px; }

/* v4.6: header phone as an IMAGE — DIN Condensed Bold digits converted to vector paths
   (img/phone-918-825-7687.svg, no font dependency), colored #B5650F to match "Doesn't"
   in the hero h1. Height = the straight part of the Home button's left side
   (46.4px tall − 8px top radius − 8px bottom radius = 30.4px). Shadow: see v4.8 (Yavid) */
.brand { flex-shrink: 0; }
.header-call {
  display: inline-flex; align-items: center; min-height: 44px; padding: 7px 0;
  text-decoration: none;
}
.header-call img {
  height: 30.4px; width: auto; max-width: none; display: block;
  filter: drop-shadow(-1.75px 1.75px 0 #B5650F);   /* v4.11: black digits, orange (#B5650F) shadow 1.75px down-left, no blur (Yavid) */
}
@media (min-width: 1000px) and (max-width: 1039px) { .header-call img { height: 25px; } }      /* 1000–1039 */
/* phones: no Home button on screen — sized to fit between logo and menu button */
@media (max-width: 760px) {
  .header-inner { gap: 10px; }
  .header-call img { height: 30.4px; }                                   /* 414–760 */
}
@media (max-width: 413px) { .header-call img { height: 26px; } }         /* 390–413 */
@media (max-width: 389px) { .header-call img { height: 24px; } }         /* 375–389 */
@media (max-width: 374px) { .header-call img { height: 21.5px; } }       /* 360–374 */
@media (max-width: 359px) { .header-call img { height: 17px; } }         /* 320–359 */

/* v4.7: logos served as right-sized WebP (PNG fallback) — header 299KB → 21–38KB,
   footer 237KB → 37–66KB. <picture> wrappers must not change layout (Yavid) */
.brand picture, footer picture { display: block; }
.hero::before {
  background-image: url('img/logo-256.png');
  background-image: image-set(url('img/logo-384.webp') type('image/webp'), url('img/logo-256.png') type('image/png'));
}

/* v4.9: 761–999px — logo + phone + full menu can't share one line, so tablets get the
   phone-style menu button (same rules as the ≤760 block, menu only). The header
   number now shows at EVERY width (Yavid) */
@media (min-width: 761px) and (max-width: 999px) {
  .header-inner { flex-wrap: nowrap; gap: 10px; }
  .nav-toggle { display: flex; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white); border-bottom: 4px solid var(--ink);
    box-shadow: 0 10px 24px rgba(30,42,34,.18);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px 16px 18px;
  }
  .nav.open { display: flex; }
  .nav a { font-size: 18px; padding: 15px 14px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav a:last-of-type { border-bottom: none; }
  .nav a.header-phone { margin-top: 12px; border-radius: 4px; text-align: center; border-bottom: none; }
  .header-call img { height: 30.4px; }
}


/* v4.12: phone/tablet menu (≤999px) — compact pills that sit end to end and wrap,
   instead of one full-width row per link (was 390px / 6 rows tall and covered most
   of the screen). Same pill shape as the desktop menu; ≥44px tap targets (Yavid) */
@media (max-width: 999px) {
  .nav {
    flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 8px; padding: 12px 12px 14px;
  }
  .nav a {
    font-size: 16px; padding: 10px 14px; min-height: 44px;
    display: inline-flex; align-items: center;
    border-bottom: none; border-radius: 8px;
  }
  .nav a.header-phone { margin-top: 0; padding: 10px 14px !important; }
}

/* v4.16: narrow-phone overflow fix — grid tracks may shrink below their minimum when
   the screen itself is narrower (360px Androids ≈4.5% of US phone visits overflowed
   8px; 320px overflowed 48px). min(…, 100%) is identical to the old value on any
   screen wide enough for it (Yavid) */
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.checklist ul { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.stats { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.footer-grid { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }

/* v4.17: header logo = tight crop (artwork + 4px, from the full-res original) at the same
   128px width — visible logo ~97x84 → 128x112 (+32%), header 105 → ~132px (Yavid: Option A).
   Hero watermark keeps the padded original so the wallpaper spacing is unchanged */
.brand-logo { width: 128px; height: auto; }
#towns { scroll-margin-top: 140px; }   /* clears the taller sticky header */

/* v4.18: 8px of space left of the header logo, off the left edge (Yavid). Note: the
   header row zeroes the site's 24px side gutter (.header-inner padding: 8px 0) */
.brand { margin-left: 8px; }

/* v4.19: homepage hero slider — replaces the photo pair. Manual only (arrows, dots,
   swipe, arrow keys). One 4:3 frame the width of the old pair; caption = approved
   headline + line + link on a dark gradient. Site vernacular: 2px ink border, hard
   offset shadow, squared corners (Yavid) */
.slider { max-width: 980px; margin: 16px 0 4px; }
.slider-frame {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border: 2px solid var(--ink); border-radius: 4px; background: var(--ink-deep);
  box-shadow: 5px 5px 0 rgba(36,44,52,.12);
}
.slide { position: absolute; inset: 0; }
.slide[hidden] { display: none !important; }
.slide.is-active { animation: slide-in .25s ease-out; }
@keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }
.slide-link { display: block; width: 100%; height: 100%; color: #fff; text-decoration: none; }
.slide-link:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
.slide img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.slide-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding: 56px 72px 22px 24px;
  background: linear-gradient(to top, rgba(25,30,37,.9) 0%, rgba(25,30,37,.72) 55%, rgba(25,30,37,0) 100%);
}
.slide-title { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.2; }
.slide-line { font-size: 17px; line-height: 1.45; max-width: 58ch; }
.slide-cta { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 16px; text-decoration: underline; text-underline-offset: 4px; margin-top: 2px; }
.slide-link:hover .slide-cta { color: #FFC97E; }
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border: none; border-radius: 4px; cursor: pointer;
  background: rgba(25,30,37,.78); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.slider-arrow:hover { background: var(--ink-deep); }
.slider-arrow:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.slider-prev { left: 10px; }
.slider-next { right: 10px; }
.slider-dots { display: flex; justify-content: center; gap: 2px; margin-top: 6px; }
.slider-dot { width: 44px; height: 44px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.slider-dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: transparent; }
.slider-dot[aria-current="true"]::before { background: var(--ink); }
.slider-dot:focus-visible { outline: 3px solid var(--amber); outline-offset: -6px; }
@media (max-width: 600px) {   /* phones: headline + link only, so the photo stays visible */
  .slide-caption { padding: 34px 14px 12px; gap: 4px; }
  .slide-title { font-size: 18px; }
  .slide-line { display: none; }
  .slide-cta { font-size: 15px; }
  .slider-arrow { top: 36%; }
}
@media (prefers-reduced-motion: reduce) { .slide.is-active { animation: none; } }

/* v4.20: slider pause/play button — plain icon in the dots row, 44px target (Yavid) */
.slider-toggle {
  width: 44px; height: 44px; border: none; background: none; cursor: pointer;
  color: var(--ink); display: flex; align-items: center; justify-content: center;
}
.slider-toggle[hidden] { display: none; }
.slider-toggle .i-play { display: none; }
.slider-toggle.is-paused .i-play { display: block; }
.slider-toggle.is-paused .i-pause { display: none; }
.slider-toggle:focus-visible { outline: 3px solid var(--amber); outline-offset: -6px; }

/* v4.21: slider frame 16:9 (was 4:3) so the golden-hour slide shows both porta-johns,
   the trailer and the whole honey wagon; desktop frame 980x551 (was 980x735) (Yavid) */
.slider-frame { aspect-ratio: 16 / 9; }
.slide picture { display: block; width: 100%; height: 100%; }
/* v4.21: shorter 16:9 frame on phones → tighter caption so the photo stays visible */
@media (max-width: 600px) {
  .slide-caption { padding: 22px 12px 9px; gap: 2px; }
  .slide-title { font-size: 16px; line-height: 1.2; }
  .slide-cta { font-size: 14px; }
  .slider-arrow { top: 30%; }   /* stays 44x44 — minimum tap target */
}
@media (max-width: 374px) {
  .slide-title { font-size: 15px; }
}

/* ================= v4.23: BUTTON SYSTEM — "B / Industrial signage" (Yavid) =================
   One system site-wide: squared 2px corners, uppercase Arial Bold with tracking, flat color
   (no 3D ledge shadows), one height (48px; header CTA 44px). Amber = primary action only.
   Menu = uppercase text links; current page = 4px amber bar (no dark block). */
.btn {
  font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .08em; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 22px; border-radius: 2px;
  border: 2px solid transparent; box-shadow: none !important; transform: none !important;
}
.btn-big, .hero-ctas .btn-amber { height: 48px; padding: 0 24px; font-size: 14px; border: 2px solid transparent; }
.btn-amber { background: var(--amber); color: var(--ink-deep); }
.btn-amber:hover { background: #CC6C16; }
.btn-ghost { background: transparent; border-color: var(--ink-deep); color: var(--ink-deep); }
.btn-ghost:hover { background: var(--ink-deep); color: #fff; }
.btn-green { background: var(--ink); color: #fff; }
.btn-green:hover { background: var(--ink-deep); }
.cta-band .btn-green { box-shadow: none; }
.quote-form .btn { height: 52px; }
/* hero Call button: bigger phone number (Yavid) — 18px desktop, 16px phones, 15px smallest */
.hero-ctas .btn-amber { font-size: 18px; }
@media (max-width: 600px) { .hero-ctas .btn-amber { font-size: 16px; } }
@media (max-width: 374px) { .hero-ctas .btn-amber { font-size: 15px; padding: 0 16px; } }

/* header menu */
.nav a {
  font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 10px 12px; border-radius: 0; color: var(--ink-deep); position: relative;
}
.nav a.active, .nav a:hover { background: none; color: var(--ink-deep); }
.nav a:not(.header-phone)::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 4px; background: transparent;
}
.nav a.active:not(.header-phone)::after { background: var(--amber); }
.nav a:not(.active):not(.header-phone):hover::after { background: var(--ink-deep); }
.nav a.header-phone, .nav a.header-phone.active {
  display: inline-flex; align-items: center; height: 44px; margin-left: 8px;
  padding: 0 18px !important; font-size: 14px !important; border-radius: 2px; box-shadow: none !important;
}
.nav a.header-phone:hover { background: #CC6C16 !important; }
.nav a:focus-visible, .btn:focus-visible { outline: 3px solid var(--ink-deep); outline-offset: 2px; }

/* phone/tablet menu (≤999px): same pills, squared; menu PUSHES the page down instead of
   covering it, so the whole homepage tagline stays visible when it's open (Yavid) */
@media (max-width: 999px) {
  .header-inner { flex-wrap: wrap; }
  .nav { position: static; flex-basis: 100%; order: 3; box-shadow: none; border-bottom: none; padding: 4px 0 12px; }
  .nav a { font-size: 14px; padding: 10px 14px; border-radius: 2px; }
  .nav a:not(.header-phone)::after { left: 14px; right: 14px; }
  .nav a.header-phone { margin-left: 0; }
}
/* v4.30: 7th menu item (Trailers) — the menu button now runs to 1199px (was 999), and the
   desktop menu (≥1200) tracks .06em / 10px padding so logo + number + menu stay one line
   (was v4.23: 1000–1079px band only) */
@media (min-width: 1200px) {
  .nav a { letter-spacing: .06em; padding: 10px 10px; }
  .nav a:not(.header-phone)::after { left: 10px; right: 10px; }
  .nav a.header-phone { padding: 0 15px !important; }
}

/* v4.24: dark borders cut in half site-wide (Yavid) — header rule 4→2px; every black/ink
   outline on buttons, photos and page boxes 2→1px. Amber accents (checklist left bar,
   featured cards), hazard stripes and focus outlines unchanged */
header.site { border-bottom-width: 2px; }
.btn, .btn-big, .hero-ctas .btn-amber { border-width: 1px; }
.card:not(.featured) { border-width: 1px; }
.checklist { border-width: 1px 1px 1px 10px; }
.info-row { border-width: 1px; }
.quote-form { border-width: 1px; }
.hero-photo, .section-photo { border-width: 1px; }
.slider-frame { border-width: 1px; }
.chat-choices button { border-width: 1px; }
.chat-actions a.email { border-width: 1px; }
.slider-dot::before { border-width: 1px; }

/* v4.25: hazard-stripe dividers thinner (Yavid) — under the hero 10 → 6px (asked −35% =
   6.5px; browsers snap half-pixel borders inconsistently, so whole 6px), top of the
   footer CTA band 12 → 6px (−50%) */
.hero { border-bottom-width: 6px; }
.cta-band { border-top-width: 6px; }

/* v4.27: button system B carried to the last three holdouts (Yavid) — Chat Now button,
   mobile call bar, slider arrows. Same type as .btn (uppercase Arial Bold 14px, .08em
   tracking), flat amber hover. Chat Now KEEPS its rounded pill corners (Yavid); its float
   shadow stays so it reads over page content. Call bar + chat button 48px = .btn height */
.chat-fab {
  font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .08em; line-height: 1;
  height: 48px; padding: 0 20px;
}
.chat-fab:hover { background: #CC6C16; }
.mobile-callbar a {
  font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .08em; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 8px;
}
.mobile-callbar a.call-side:hover { background: #CC6C16; }
.slider-arrow { border-radius: 2px; }

/* v4.30: four-card sections on the restroom trailer page sit 2×2 (grid-2 fits 3 columns
   on desktop and left one card alone on a second row); one column on phones */
.grid-2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .grid-2x2 { grid-template-columns: 1fr; } }

/* v4.33: laptops (1000–1199px) get the FULL menu again — v4.30 had moved them to the menu
   button, which read as a broken mobile header on a full-size screen (Yavid). Compact
   menu in this band only: 13px, .04em tracking, 8px padding; header number 25px.
   Menu button is back to ≤999px */
@media (min-width: 1000px) and (max-width: 1199px) {
  .nav { gap: 0; }
  .nav a { font-size: 13px; letter-spacing: .04em; padding: 10px 8px; }
  .nav a:not(.header-phone)::after { left: 8px; right: 8px; }
  .nav a.header-phone { padding: 0 12px !important; margin-left: 6px; }
  .header-call img { height: 25px; }
}

/* v4.35: header phone OPTION 1 — two-line contact block at the far right of the header
   (after the quote button on desktop; beside the menu button on phones/tablets). Live type
   replaces the v4.6–v4.11 SVG image + orange shadow; label "CALL NOW" (no hours — Yavid:
   "I don't want to discourage the call"). img/header-phone.svg is now unreferenced */
.header-call {
  flex-direction: column; align-items: flex-end; justify-content: center;
  padding: 4px 0; margin-right: 8px; line-height: 1.1; color: var(--ink-deep);
}
.hc-label {
  font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .12em; color: #5B636E;
}
.hc-num {
  font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 22px;
  letter-spacing: .01em; color: var(--ink-deep); white-space: nowrap;
}
.header-call:hover .hc-num { color: var(--amber-deep); }
@media (min-width: 1000px) {
  .nav { order: 1; margin-left: auto; }
  .header-call { order: 2; margin-left: 14px; }
}
@media (min-width: 1000px) and (max-width: 1199px) { .hc-num { font-size: 19px; } .header-call { margin-left: 8px; } }
@media (max-width: 999px) {
  .header-call { margin-left: auto; margin-right: 0; }
  .nav-toggle { margin-right: 8px; }
}
@media (max-width: 413px) { .hc-num { font-size: 19px; } .hc-label { font-size: 10px; } }
@media (max-width: 374px) { .hc-num { font-size: 17px; } }
@media (max-width: 339px) {
  .header-inner { gap: 6px; }
  .hc-num { font-size: 14.5px; } .hc-label { font-size: 9px; }
  .nav-toggle { margin-right: 6px; }
}

/* v4.36: header phone OPTION 2 — outlined call button beside the amber quote button, in the
   button B system (1px ink outline, 2px corners, uppercase tracked Arial Bold 14px, 44px tall,
   flat ink fill on hover). Replaces v4.35's two-line block. Phones/tablets: number-only
   outlined button beside the menu button */
.header-call {
  flex-direction: row; align-items: center; gap: .5em;
  height: 44px; min-height: 44px; padding: 0 16px; margin-right: 8px;
  border: 1px solid var(--ink-deep); border-radius: 2px; background: transparent;
  font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .08em; line-height: 1; color: var(--ink-deep);
}
.hc-label, .hc-num { font: inherit; letter-spacing: inherit; color: inherit; }
.header-call:hover { background: var(--ink-deep); color: #fff; }
.header-call:hover .hc-num { color: #fff; }
@media (min-width: 1000px) { .header-call { margin-left: 8px; } }
@media (min-width: 1200px) { .header-call { letter-spacing: .06em; padding: 0 15px; } }
@media (min-width: 1000px) and (max-width: 1199px) {
  .header-call { font-size: 13px; letter-spacing: .04em; padding: 0 12px; margin-left: 6px; }
  .hc-label { display: none; }
}
@media (max-width: 999px) {
  .hc-label { display: none; }
  .header-call { font-size: 15px; letter-spacing: .03em; padding: 0 14px; margin-left: auto; margin-right: 0; }
}
@media (max-width: 413px) { .header-call { font-size: 14px; padding: 0 10px; } }
@media (max-width: 374px) { .header-call { font-size: 13px; letter-spacing: .01em; padding: 0 8px; } }
@media (max-width: 339px) { .header-call { font-size: 12px; letter-spacing: 0; padding: 0 6px; } }

/* v4.37: header CALL is the lead action (ideas A + C, Yavid) — call button = solid amber with a
   desk-phone icon (handset resting on its cradle — Yavid: no tilted handset glyph); Get My Free
   Quote steps down to an outlined button. Icon is inline SVG in currentColor */
.header-call { background: var(--amber); border-color: var(--amber); color: var(--ink-deep); }
.header-call:hover { background: #CC6C16; border-color: #CC6C16; color: var(--ink-deep); }
.header-call:hover .hc-num { color: var(--ink-deep); }
.hc-icon { width: 1.35em; height: 1.35em; flex-shrink: 0; fill: currentColor; margin-right: .1em; }
.nav a.header-phone, .nav a.header-phone.active {
  background: transparent !important; color: var(--ink-deep) !important;
  border: 1px solid var(--ink-deep);
}
.nav a.header-phone:hover { background: var(--ink-deep) !important; color: #fff !important; }
@media (max-width: 374px) { .hc-icon { width: 1.2em; height: 1.2em; margin-right: 0; } .header-call { gap: .3em; } }
/* v4.37: the desk-phone icon stands in for the word "CALL" (icon + number at every width — the
   word made the desktop header 19px too wide for one line); narrowest phones (≤359px) show the
   number only — the icon doesn't fit beside the logo and menu button there */
.hc-label { display: none; }
@media (max-width: 359px) { .hc-icon { display: none; } }

/* v4.38: header given weight (Yavid: "looks anemic"; desktop too small, don't rob mobile).
   1) wider header on big screens (content 1120 → 1320px at ≥1360) · 2) bigger menu type
   (16px ≥1360 · 15px 1200–1359 · 14px laptops · 16px pills in the phone/tablet menu)
   3) CALL button = the lead: amber, icon + two lines "CALL NOW" over the number, taller than
   anything else on the right, at the far right where the Z-scan line ends · 4) Get My Free
   Quote = solid charcoal (second) · 5) header bottom rule 2 → 2.75px */
header.site { border-bottom-width: 2.75px; }
@media (min-width: 1360px) { header.site .wrap { max-width: 1320px; } }

/* call button: icon + stacked command/number */
.header-call {
  height: 54px; min-height: 54px; padding: 0 18px 0 14px; gap: 10px;
  letter-spacing: 0; text-transform: none;
}
.hc-icon { width: 26px; height: 26px; margin-right: 0; }
.hc-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.header-call .hc-label {
  display: block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
}
.header-call .hc-num { display: block; font-size: 19px; letter-spacing: .01em; }
@media (max-width: 359px) { .hc-icon { display: none; } }

/* quote button: solid charcoal, second to the call */
.nav a.header-phone, .nav a.header-phone.active {
  background: var(--ink-deep) !important; color: #fff !important; border: 1px solid var(--ink-deep);
  height: 48px;
}
.nav a.header-phone:hover { background: var(--ink-soft) !important; color: #fff !important; }

/* menu type */
@media (min-width: 1360px) {
  .nav a { font-size: 16px; letter-spacing: .06em; padding: 10px 11px; }
  .nav a:not(.header-phone)::after { left: 11px; right: 11px; }
  .nav a.header-phone { font-size: 15px !important; padding: 0 18px !important; margin-left: 10px; }
  .header-call { margin-left: 14px; }
}
@media (min-width: 1200px) and (max-width: 1359px) {
  .nav a { font-size: 15px; letter-spacing: .04em; padding: 10px 8px; }
  .nav a:not(.header-phone)::after { left: 8px; right: 8px; }
  .nav a.header-phone { font-size: 14px !important; padding: 0 14px !important; margin-left: 6px; }
  .header-call { margin-left: 10px; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .nav a { font-size: 14px; letter-spacing: .02em; padding: 10px 7px; }
  .nav a:not(.header-phone)::after { left: 7px; right: 7px; }
  .nav a.header-phone { font-size: 13px !important; padding: 0 11px !important; margin-left: 4px; }
  .header-call { margin-left: 8px; padding: 0 12px 0 10px; gap: 8px; }
  .header-call .hc-num { font-size: 17px; } .header-call .hc-label { font-size: 12px; }
}
/* phones/tablets: bigger pills in the open menu; call button sized to the space beside logo + menu button */
@media (max-width: 999px) {
  .nav a { font-size: 16px; }
  .header-call { height: 52px; min-height: 52px; padding: 0 14px 0 12px; gap: 9px; }
  .header-call .hc-num { font-size: 18px; } .header-call .hc-label { font-size: 12px; }
}
@media (max-width: 413px) {
  .header-call { padding: 0 10px 0 8px; gap: 7px; }
  .hc-icon { width: 22px; height: 22px; }
  .header-call .hc-num { font-size: 16px; } .header-call .hc-label { font-size: 11px; letter-spacing: .12em; }
}
@media (max-width: 374px) {
  .header-call { padding: 0 8px 0 7px; gap: 6px; }
  .hc-icon { width: 19px; height: 19px; }
  .header-call .hc-num { font-size: 14.5px; } .header-call .hc-label { font-size: 10px; letter-spacing: .1em; }
}
@media (max-width: 339px) {
  .header-call { padding: 0 6px; }
  .header-call .hc-num { font-size: 13.5px; } .header-call .hc-label { font-size: 9.5px; }
}
/* v4.38 fit tuning (measured): 375–389 needed 2px more; spare room used at 1100–1199 and ≥1360 */
@media (min-width: 375px) and (max-width: 389px) { .header-call { padding: 0 8px 0 7px; gap: 6px; } }
@media (min-width: 1100px) and (max-width: 1199px) { .nav a { font-size: 15px; } }
@media (min-width: 1360px) {
  .nav a { font-size: 17px; letter-spacing: .05em; }
  .header-call .hc-num { font-size: 20px; } .header-call .hc-label { font-size: 13.5px; }
}

/* v4.39: header rule 3px (Yavid — 2.75 rendered as 2px in Chrome/Firefox) · desktop Get My Free
   Quote = same 54px height as the CALL NOW button, font scaled with it (54/48 = +12.5%):
   15 → 17px ≥1360 · 14 → 15.75px 1200–1359 · 13 → 14.6px 1000–1199; side padding scaled the same */
header.site { border-bottom-width: 3px; }
@media (min-width: 1000px) { .nav a.header-phone, .nav a.header-phone.active { height: 54px; } }
@media (min-width: 1360px) { .nav a.header-phone { font-size: 17px !important; padding: 0 20px !important; } }
@media (min-width: 1200px) and (max-width: 1359px) { .nav a.header-phone { font-size: 15.75px !important; padding: 0 16px !important; } }
@media (min-width: 1000px) and (max-width: 1199px) { .nav a.header-phone { font-size: 14.6px !important; padding: 0 12px !important; } }
/* v4.39: 1200–1359 needed 16px more for the taller quote button — the header uses the full width
   there (screen − 24px gutters each side: 1152–1311px), like the wider ≥1360 header */
@media (min-width: 1200px) and (max-width: 1359px) { header.site .wrap { max-width: none; } }

/* v4.41: header buttons swapped on desktop (Yavid) — CALL NOW now sits where the quote button
   was, Get My Free Quote is at the far right. The quote link is a second copy after the call
   button (.header-quote, desktop only); the copy inside the menu shows only in the ≤999px menu.
   Spacing mirrors v4.39 so the header width is unchanged: menu → first button 16/12/4px,
   first → second button 30/26/24px (≥1360 / 1200–1359 / 1000–1199), 8px off the right edge (the
   call button's old margin-right; the call button keeps its 8px as part of the gap). Phones/tablets unchanged */
.header-quote { display: none; }
@media (min-width: 1000px) {
  nav.nav a.header-phone, nav.nav a.header-phone.active { display: none; }
  .nav.header-quote { display: flex; order: 3; margin-left: 6px; margin-right: 8px; }
  .nav.header-quote a.header-phone { margin-left: 0; }
  .header-call { margin-left: 0; }
}
@media (min-width: 1200px) and (max-width: 1359px) {
  .nav.header-quote { margin-left: 2px; }
  .header-call { margin-left: -4px; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .nav.header-quote { margin-left: 0; }
  .header-call { margin-left: -12px; }
}
/* v4.41: on the quote page the active quote button keeps its older 8px left margin at every
   width, so the call button's offset there is matched to it (header width same as v4.39) */
@media (min-width: 1000px) { .header-inner:has(.header-quote a.active) .header-call { margin-left: -2px; } }
@media (min-width: 1000px) and (max-width: 1199px) { .header-inner:has(.header-quote a.active) .header-call { margin-left: -8px; } }