/* assets/theme.css
   Site-wide rules from Eric's UI doc, loaded after pills.css and colors.css
   on every page. Homepage-only selectors simply do not match elsewhere. */

/* Titles are ALL CAPS. */
h1, h2, h3, .kicker { text-transform: uppercase; }

/* EN / ES segmented switch. English blue, Spanish red. The selected side is
   filled with white text; the other side stays visibly blue or red. The
   hidden checkbox is what the existing translation script listens to. */
.lang-switch { display: inline-flex; align-items: center; gap: 0; }
.lang-switch .lang-label { display: none; }
.lang-seg {
  display: inline-flex; border-radius: 999px; overflow: hidden;
  font-size: .58rem; font-weight: 700; letter-spacing: .06em; line-height: 1.4;
  text-transform: uppercase; cursor: pointer;
}
.lang-seg span { padding: 3px 9px; }
.lang-en { background: #2F80ED; color: #fff; box-shadow: inset 0 0 0 1px #2F80ED; }
.lang-es { background: #fff;     color: #E53935; box-shadow: inset 0 0 0 1px #E53935; }
.lang-switch input:checked ~ .lang-seg .lang-en { background: #fff;     color: #2F80ED; }
.lang-switch input:checked ~ .lang-seg .lang-es { background: #E53935; color: #fff; }

/* Hero pills at 150%: Eric, 2026-09-18. */
.hero .cta .btn:not(#_):not(#_):not(#_) { font-size: .87rem; padding: 4.5px 13.5px; }

/* Family-owned paragraph centred. */
.about-local .wrap { text-align: center; }
.about-local p { margin-left: auto; margin-right: auto; }

/* No dead band between the service cards and How it works. */
#parts { padding-bottom: 12px; }

/* "Tell us what you need" is now the navy banner; the junk-cars banner is gone. */
.form-section { background: var(--blue); color: #fff; border-top: 4px solid var(--yellow); }
.form-section .section-head h2 { color: #fff; }
.form-section .section-head p  { color: #dfe4ee; }
.form-section .kicker { color: var(--yellow); }

/* The three form pills sit side by side, centred, at 150%. An open form
   takes the row on its own. */
.form-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: start; gap: 12px; }
.lead-form.is-closed { flex: 0 0 auto; }
.lead-form:not(.is-closed) { flex: 1 1 100%; max-width: 560px; margin: 0 auto; color: var(--ink); }
.lead-form .form-open:not(#_):not(#_):not(#_) { font-size: .87rem; padding: 4.5px 13.5px; }
/* ---- Header: one line, seven items, centred. Contents at 135%. ---- */
.topbar .wrap:not(#_):not(#_):not(#_) {
  max-width: none; min-height: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px; padding: 10px 16px;
}
.topbar .brand { display: inline-flex; margin: 0; }
.topbar .brand-mark:not(#_):not(#_):not(#_) { width: 108px; height: 55px; }
.topbar .btn:not(#_):not(#_):not(#_) { font-size: .78rem; padding: 4px 12px; }
.topbar .lang-seg { font-size: .78rem; }
.topbar .lang-seg span { padding: 4px 12px; }

/* Round icon buttons: WhatsApp and Facebook, header and footer. */
.round-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; color: #fff; text-decoration: none;
  flex: none;
}
.round-btn svg { width: 15px; height: 15px; }
.topbar .round-btn { width: 30px; height: 30px; }
.topbar .round-btn svg { width: 17px; height: 17px; }
.round-btn.act-whatsapp { background: #25d366; }
.round-btn.act-facebook { background: #1877F2; }

/* Reviews pill: star + live rating + live count. Filled in by reviews.js. */
.btn.act-reviews:not(#_):not(#_):not(#_) { background: #ffffff; color: #1a1a1a; }
.btn.act-reviews .rv-star { color: #f2a900; }
.btn.act-reviews .rv-count { font-weight: 600; opacity: .8; text-transform: none; letter-spacing: 0; }

/* Footer: social bottom-left, text to the right. */
footer .wrap { align-items: center; }
.footer-social { display: inline-flex; gap: 8px; margin-right: 6px; }

/* Nav sits directly under the header, already centred. */

/* ================= Batch 3 (2026-09-19) ================= */

/* Header, H&R shape: one row, tabs inside, reviews the star of the show. */
.topbar .wrap:not(#_):not(#_):not(#_) { gap: 12px; padding: 8px 14px; }
.topbar .tabs { display: inline-flex; gap: 2px; }
.topbar .tabs a {
  font-family: var(--head); font-size: .74rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; color: #fff; padding: 6px 9px; border-radius: 999px;
}
.topbar .tabs a:hover { background: rgba(255,255,255,.1); }

/* Reviews pill: five gold stars, big rating, count underneath in small caps. */
.topbar .reviews {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: #fff; color: #1a1a1a; border-radius: 999px; padding: 5px 16px 5px 12px;
  box-shadow: 0 0 0 2px #f2a900;
}
.topbar .reviews .rv-stars { color: #f2a900; font-size: 1.05rem; letter-spacing: .04em; line-height: 1; }
.topbar .reviews .rv-rating { font-family: var(--head); font-size: 1.35rem; font-weight: 900; line-height: 1; color: #b1122d; }
.topbar .reviews .rv-count { font-size: .62rem; font-weight: 700; letter-spacing: .04em; opacity: .85; white-space: nowrap; margin-left: 6px; padding-left: 10px; border-left: 2px solid #f2a900; }

/* EN / ES, H&R model: both halves always coloured; chosen half full colour
   with white letters, the other half dimmed. */
.lang-en { background: #2F80ED; color: #fff; box-shadow: none; }
.lang-es { background: #E53935; color: #fff; box-shadow: none; opacity: .45; }
.lang-switch input:checked ~ .lang-seg .lang-en { background: #2F80ED; color: #fff; opacity: .45; }
.lang-switch input:checked ~ .lang-seg .lang-es { background: #E53935; color: #fff; opacity: 1; }

/* Round text icon beside WhatsApp. */
.round-btn.act-textico { background: #2777e8; }

/* Colours, Eric 2026-09-19. */
.btn.act-call:not(#_):not(#_):not(#_),
.btn.yellow:not(#_):not(#_):not(#_)     { background: #336600; color: #fff; }
.btn.act-junk:not(#_):not(#_):not(#_)   { background: #AA0000; color: #fff; }
.btn.act-textpart:not(#_):not(#_):not(#_) { background: #FFFF00; color: #111; }

/* Search Our Parts Inventory at 200%. */
.btn.btn-2x:not(#_):not(#_):not(#_) { font-size: 1.16rem; padding: 6px 18px; }

/* Spacing, from the marked screenshots. */
.about-local { padding-bottom: 8px; }
#parts { padding-top: 6px; padding-bottom: 4px; }
#parts .section-head { margin-bottom: 14px; }
.howto { padding-top: 6px; }
.howto .section-head { margin-bottom: 14px; }
.form-section { padding-top: 8px; }
.form-section .kicker { display: none; }

/* Service cards: centred as a block and inside. */
.service-grid { max-width: 1060px; margin: 0 auto; }
.service { text-align: center; }

/* Inventory keeps its own colour; it carries a legacy yellow class. */
.btn.act-inventory:not(#_):not(#_):not(#_) { background: #3300cc; color: #fff; }

/* EN/ES as links between the English and Spanish twins. Same look as the
   checkbox version: chosen half full colour, other half dimmed. */
.lang-links a { text-decoration: none; padding: 3px 9px; }
.lang-links .lang-en, .lang-links .lang-es { opacity: .45; }
.lang-links .is-on { opacity: 1; }
.topbar .lang-links a { padding: 4px 12px; }

/* ================= Header: big logo, tight controls, one line (Eric, 2026-09-19) ================= */
.topbar .wrap:not(#_):not(#_):not(#_) { gap: 10px; padding: 6px 14px; }
.topbar .brand-mark:not(#_):not(#_):not(#_) { width: 165px; height: 84px; }
.topbar .tabs { gap: 0; }
.topbar .tabs a { font-size: .7rem; padding: 5px 8px; }
.topbar .btn:not(#_):not(#_):not(#_) { font-size: .7rem; padding: 3px 11px; }
.topbar .lang-seg { font-size: .7rem; }
.topbar .lang-seg span, .topbar .lang-links a { padding: 3px 11px; }
.topbar .round-btn { width: 28px; height: 28px; }
.topbar .round-btn svg { width: 16px; height: 16px; }
.topbar .reviews { gap: 7px; padding: 4px 14px 4px 11px; box-shadow: 0 0 0 2px #f2a900; }
.topbar .reviews .rv-stars { font-size: 1rem; }
.topbar .reviews .rv-rating { font-size: 1.25rem; }
.topbar .reviews .rv-count { font-size: .6rem; margin-left: 5px; padding-left: 9px; border-left-width: 2px; }

/* ================= Featured reviews strip ================= */
.featured-reviews { background: #fff; border-bottom: 1px solid var(--line); padding: 26px 0 30px; }
.featured-reviews .section-head { margin-bottom: 14px; }
.rv-summary { font-family: var(--head); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; color: var(--ink); }
.rv-summary .rv-gold { color: #f2a900; }
.rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1060px; margin: 0 auto; }
@media (max-width: 760px) { .rv-grid { grid-template-columns: 1fr; } }
.rv-card { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid #f2a900; border-radius: 6px; padding: 16px 18px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.rv-card .rv-card-stars { color: #f2a900; letter-spacing: .06em; font-size: 15px; }
.rv-card p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.rv-card .rv-card-by { font-family: var(--head); font-weight: 800; text-transform: uppercase; font-size: 11.5px; letter-spacing: .05em; color: var(--muted); }
.rv-actions { text-align: center; margin-top: 16px; }
.btn.act-reviews-all:not(#_):not(#_):not(#_) { background: #ffffff; color: #1a1a1a; box-shadow: inset 0 0 0 2px #f2a900; }

/* ================= Phone pass, from the marked screenshots (Eric, 2026-09-19) =================
   Judged at iPhone 13-15 (390px). Header regrouped into one top row -- EN/ES, then
   the logo, then Facebook / Text / WhatsApp -- with the Google reviews pill centred
   on its own line under it. Hero copy moves up and drops 25%. The hero's own CTA
   pills give way to the bottom bar, the same way H&R's phone hero does. */
@media (max-width: 760px) {
  .topbar .wrap:not(#_):not(#_):not(#_) {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px; padding: 8px 10px;
  }
  .topbar .lang-links   { order: 1; }
  .topbar .brand        { order: 2; }
  .topbar .act-facebook { order: 3; }
  .topbar .act-textico  { order: 4; }
  .topbar .act-whatsapp { order: 5; }
  .topbar .reviews      { order: 6; flex: 0 0 auto; margin: 0 auto; }
  .topbar .tabs         { order: 7; flex: 1 0 100%; justify-content: center; flex-wrap: wrap; }

  .topbar .brand-mark:not(#_):not(#_):not(#_) { width: 112px; height: 57px; }
  .topbar .lang-links a { padding: 3px 9px; }
  .topbar .round-btn { width: 26px; height: 26px; }
  .topbar .round-btn svg { width: 15px; height: 15px; }

  /* Hero: verbiage up, and 25% off every line of it. */
  .hero .wrap:not(#_):not(#_):not(#_) { padding-top: 18px; padding-bottom: 22px; }
  .hero h1:not(#_):not(#_):not(#_) { font-size: clamp(28px, 9.75vw, 40px); max-width: 290px; }
  .hero p:not(#_):not(#_):not(#_) { font-size: 12px; max-width: 260px; margin-top: 12px; }
  .hero-note:not(#_):not(#_):not(#_) { font-size: 11px; margin-top: 12px; }
  /* The three hero pills now live in the bottom bar. */
  .hero .cta { display: none; }
}

/* ---- Mobile quick-action bar, H&R shape and behaviour ---- */
.mobile-action-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(9,9,11,.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid #27272a; gap: 6px;
  padding: 6px 6px calc(14px + env(safe-area-inset-bottom));
}
.mobile-action-bar a {
  flex: 1 1 0; min-width: 0; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 2px 5px; border: 0; border-radius: 8px; color: #fff;
  font: 800 10px/1.1 var(--head); text-transform: uppercase; letter-spacing: .04em;
  text-align: center; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.mobile-action-bar svg { width: 20px; height: 20px; flex-shrink: 0; }
.mobile-action-bar span { display: block; max-width: 100%; }
.mobile-action-bar a:active { filter: brightness(1.12); }
.mab-junk { background: #AA0000; }
.mab-text { background: #FFFF00; color: #111; }
.mab-wa   { background: #25D366; }
.mab-call { background: #336600; }

@media (max-width: 900px) {
  .mobile-action-bar { display: flex; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* Build stamp (Eric, 2026-09-19): a yellow pill across the very top so he can
   confirm at a glance which version is on screen. Comes off before handover. */
.build-stamp {
  background: #111; color: #FFD400; text-align: center;
  font-family: var(--head); font-weight: 900; font-size: 15px; letter-spacing: .1em;
  text-transform: uppercase; padding: 7px 10px; border-bottom: 3px solid #FFD400;
}

/* EN / ES, Eric's rule (2026-09-19): a side is only filled with its colour when
   it is ON. The side that is off sits on black and shows its colour in the
   letters -- so with English on, ES is black with red letters, never a red pill. */
.lang-links a { opacity: 1; }
.lang-links .lang-en { background: #111; color: #2F80ED; }
.lang-links .lang-es { background: #111; color: #E53935; }
.lang-links .lang-en.is-on { background: #2F80ED; color: #fff; }
.lang-links .lang-es.is-on { background: #E53935; color: #fff; }
/* Same rule for the checkbox version used on the other pages. */
.lang-seg .lang-en { background: #111; color: #2F80ED; opacity: 1; }
.lang-seg .lang-es { background: #111; color: #E53935; opacity: 1; }
.lang-switch input:not(:checked) ~ .lang-seg .lang-en { background: #2F80ED; color: #fff; }
.lang-switch input:checked ~ .lang-seg .lang-es { background: #E53935; color: #fff; }

/* ================= Phone pass 2, from the marked screenshot (Eric, 2026-09-19) =================
   The preview hub prints its own frame label across the top of the window, which
   was landing on the build stamp; the stamp now starts below it. Header: logo hard
   left with EN/ES beside it, the three icons anchored top right, reviews tucked
   under the icons at half size. */
.build-stamp { padding-top: 26px; }

@media (max-width: 760px) {
  .topbar .wrap:not(#_):not(#_):not(#_) { justify-content: flex-start; row-gap: 4px; }

  .topbar .brand        { order: 1; margin-right: 2px; }
  .topbar .lang-links   { order: 2; }
  .topbar .act-facebook { order: 3; margin-left: auto; }
  .topbar .act-textico  { order: 4; }
  .topbar .act-whatsapp { order: 5; }

  /* Reviews: own line, hard right so it sits under the three icons, at 50%. */
  .topbar .reviews:not(#_):not(#_):not(#_) {
    order: 6; flex: 0 0 auto; width: auto;
    margin: -13px 0 -13px auto;
    transform: scale(.5); transform-origin: right center;
  }
  .topbar .tabs { order: 7; flex: 1 0 100%; justify-content: center; }
}

/* Bottom bar: black lettering and black icons (Eric, 2026-09-19). */
.mobile-action-bar a:not(#_):not(#_):not(#_) { color: #111; }

/* ================= Phone pass 3 (Eric, 2026-09-19) =================
   Icons pulled left against EN/ES, reviews readable again, nav on one line at
   120% in indigo, hero copy pinned to the top-left corner of the picture, and
   the bottom bar carrying words only -- bigger and heavier, no icons. */
@media (max-width: 760px) {
  /* The three icons meet EN/ES instead of being pushed to the far right. */
  .topbar .act-facebook { margin-left: 0; }

  /* Reviews back to full size, sitting under that block. */
  .topbar .reviews:not(#_):not(#_):not(#_) {
    transform: none; margin: 0 auto 0 0;
  }

  /* Nav: one line, nothing wraps, 20% bigger, indigo pills. */
  .topbar .tabs:not(#_):not(#_):not(#_) { flex-wrap: nowrap; gap: 3px; width: 100%; }
  .topbar .tabs a:not(#_):not(#_):not(#_) {
    font-size: .84rem; letter-spacing: .02em; padding: 5px 7px;
    white-space: nowrap; background: #3310a8; color: #fff; border-radius: 999px;
  }

  /* Hero copy in the upper-left corner, in view. */
  .hero:not(#_):not(#_):not(#_) { align-items: flex-start; }
  .hero .wrap:not(#_):not(#_):not(#_) { padding-top: 14px; }
}

/* Bottom bar: words only, bigger and thicker. */
.mobile-action-bar svg { display: none; }
.mobile-action-bar a:not(#_):not(#_):not(#_) {
  font-size: 13px; font-weight: 900; letter-spacing: .02em; line-height: 1.15;
}

/* ================= Phone pass 4 (Eric, 2026-09-19) =================
   Nav is plain yellow wording, no pills, all five on one line. EN/ES and the
   three icons spread to the width of the reviews pill, both right-aligned so
   nothing sits under the logo. Hero copy hard into the top-left corner. */
@media (max-width: 760px) {
  /* Nav: yellow verbiage only. */
  .topbar .tabs a:not(#_):not(#_):not(#_) {
    background: none; color: #f2f527; border-radius: 0;
    padding: 2px 4px; letter-spacing: 0; font-size: .84rem;
  }
  .topbar .tabs:not(#_):not(#_):not(#_) { gap: 2px; justify-content: space-between; }

  /* EN/ES + icons: right-aligned and spread to the reviews pill's width. */
  .topbar .lang-links:not(#_):not(#_):not(#_) { margin-left: auto; }
  .topbar .act-facebook { margin-left: 18px; }
  .topbar .act-textico  { margin-left: 18px; }
  .topbar .act-whatsapp { margin-left: 18px; }

  /* Reviews: hard right, clear of the logo. */
  .topbar .reviews:not(#_):not(#_):not(#_) { margin: 0 0 0 auto; }

  /* Hero copy in the corner. */
  .hero .wrap:not(#_):not(#_):not(#_) { padding-top: 4px; }
}

/* Bottom bar wording down 20%, still black. */
.mobile-action-bar a:not(#_):not(#_):not(#_) { font-size: 10.4px; }

/* ================= Phone pass 5 (Eric, 2026-09-19) =================
   One line: logo, EN/ES against it, then the three icons. Reviews centred on the
   line below them. The hero is sized so its bottom edge lands directly on top of
   the fixed buttons, which carries the white stats band below the fold. */
@media (max-width: 760px) {
  .topbar .lang-links:not(#_):not(#_):not(#_) { margin-left: 0; }
  .topbar .act-facebook,
  .topbar .act-textico,
  .topbar .act-whatsapp { margin-left: 0; }

  .topbar .reviews:not(#_):not(#_):not(#_) { margin: 0 auto; }

  /* --topband is the build stamp plus the header, measured in the page. 76px is
     the fixed bar. dvh so the phone's address bar does not throw the sum off. */
  .hero:not(#_):not(#_):not(#_) {
    min-height: calc(100dvh - var(--topband, 150px) - 76px);
    max-height: none;
  }
}

/* ================= Phone pass 6 (Eric, 2026-09-19) =================
   Header as a grid: the logo holds column 1; the four objects -- the EN|ES switch
   (one piece, never split), Facebook, Text, WhatsApp -- take four equal columns
   beside it, evenly spread. The reviews pill spans those same four columns, so it
   is exactly as wide as the row above it and never sits under the logo. */
@media (max-width: 760px) {
  .topbar .wrap:not(#_):not(#_):not(#_) {
    display: grid;
    grid-template-columns: auto repeat(4, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center; column-gap: 0; row-gap: 6px;
    padding: 8px 10px;
  }
  .topbar .brand        { grid-column: 1; grid-row: 1; margin-right: 10px; }
  .topbar .lang-links   { grid-column: 2; grid-row: 1; justify-self: start; }
  .topbar .act-facebook { grid-column: 3; grid-row: 1; justify-self: center; margin: 0; }
  .topbar .act-textico  { grid-column: 4; grid-row: 1; justify-self: center; margin: 0; }
  .topbar .act-whatsapp { grid-column: 5; grid-row: 1; justify-self: end;    margin: 0; }

  .topbar .reviews:not(#_):not(#_):not(#_) {
    grid-column: 2 / -1; grid-row: 2;
    display: flex; width: 100%; margin: 0; justify-content: center;
  }

  .topbar .tabs:not(#_):not(#_):not(#_) { grid-column: 1 / -1; grid-row: 3; width: 100%; }
}

/* ================= Phone pass 7 (Eric, 2026-09-19) =================
   Even gaps, measured: auto-width columns with the free space distributed
   between them, so every gap between the logo, the EN|ES switch and the three
   icons is identical. Equal columns were not equal gaps -- that was the bug. */
@media (max-width: 760px) {
  .topbar .wrap:not(#_):not(#_):not(#_) {
    grid-template-columns: auto auto auto auto auto;
    justify-content: space-between;
  }
  .topbar .lang-links,
  .topbar .act-facebook,
  .topbar .act-textico,
  .topbar .act-whatsapp { justify-self: stretch; }
  .topbar .brand { margin-right: 0; }
}

/* Reviews pill: the count is the hero, wording 25% up and a little heavier,
   with a warm glow around the pill (Eric, 2026-09-19). */
.topbar .reviews:not(#_):not(#_):not(#_) {
  box-shadow: 0 0 0 2px #f2a900, 0 0 16px 5px rgba(242,169,0,.55);
}
.topbar .reviews .rv-stars  { font-size: 1.25rem; }
.topbar .reviews .rv-rating { font-size: 1.56rem; }
.topbar .reviews .rv-count  { font-size: .95rem; font-weight: 800; opacity: 1; }

/* Pass 7 correction: grid items default to stretching, which re-sized the switch
   and the logo; and the enlarged reviews pill was forcing the whole grid wider
   than the screen, squeezing the logo. Items sit at their natural width, the
   pill is allowed to shrink, and the stars give up room so the count can grow. */
@media (max-width: 760px) {
  .topbar .brand,
  .topbar .lang-links,
  .topbar .act-facebook,
  .topbar .act-textico,
  .topbar .act-whatsapp { justify-self: start; }
  .topbar .act-whatsapp { justify-self: end; }
  .topbar .reviews:not(#_):not(#_):not(#_) { min-width: 0; }
  .topbar .reviews .rv-stars  { font-size: .85rem; }
  .topbar .reviews .rv-rating { font-size: 1.15rem; }
  .topbar .reviews .rv-count  { font-size: .8rem; font-weight: 800; }
}

/* ================= Phone pass 8 (Eric, 2026-09-19) =================
   Grid was the wrong tool: an item spanning columns widens those columns, so the
   reviews pill kept pushing the gaps out of true. Flex with space-between gives
   genuinely equal gaps between the five objects; the pill's left edge is then set
   from a measurement taken in the page, so it always starts level with EN|ES. */
@media (max-width: 760px) {
  .topbar .wrap:not(#_):not(#_):not(#_) {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between;
    column-gap: 0; row-gap: 6px; padding: 8px 10px;
  }
  .topbar .brand,
  .topbar .lang-links,
  .topbar .act-facebook,
  .topbar .act-textico,
  .topbar .act-whatsapp { flex: 0 0 auto; margin: 0; }

  .topbar .reviews:not(#_):not(#_):not(#_) {
    flex: 0 0 calc(100% - var(--rv-left, 146px));
    margin: 0 0 0 var(--rv-left, 146px);
    min-width: 0; justify-content: center;
  }
  .topbar .tabs:not(#_):not(#_):not(#_) { flex: 0 0 100%; }
}

/* ================= Phone pass 9 (Eric, 2026-09-19) =================
   The four objects sit on the top edge of the header, level with the top of the
   logo, and the reviews pill is pulled up to sit directly under them beside the
   logo rather than below it. --rv-shift is measured in the page. */
@media (max-width: 760px) {
  .topbar .wrap:not(#_):not(#_):not(#_) { align-items: flex-start; }
  .topbar .reviews:not(#_):not(#_):not(#_) {
    margin-top: calc(-1 * var(--rv-shift, 0px));
  }
}

/* Reviews wording capitalised. */
.topbar .reviews .rv-count { text-transform: uppercase; }

/* ================= Reviews pill, H&R's exactly (Eric, 2026-09-19) =================
   Copied from H&R's .hdr-rating: gold-tinted glass pill, gold hairline border and
   glow, a gold star ahead of the score, score in #ffc233, count small and grey.
   H&R hides the five little stars on phones and shows one star before the number,
   so this does the same. */
.topbar .reviews:not(#_):not(#_):not(#_) {
  position: relative; align-items: center; gap: 8px; white-space: nowrap;
  padding: 6px 14px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(242,169,0,.20) 0%, rgba(242,169,0,.07) 55%, rgba(242,169,0,.12) 100%);
  border: 1px solid rgba(242,169,0,.48);
  box-shadow: 0 0 16px rgba(242,169,0,.20), inset 0 1px 0 rgba(255,214,120,.35), inset 0 -6px 12px rgba(0,0,0,.22);
  color: #fff;
}
.topbar .reviews .rv-stars { display: none; }
.topbar .reviews .rv-rating:not(#_):not(#_):not(#_) {
  color: #ffc233; font-weight: 700; font-size: 17px; line-height: 1;
  font-family: var(--head);
}
.topbar .reviews .rv-rating::before { content: "\2605 "; color: #f2a900; }
.topbar .reviews .rv-count:not(#_):not(#_):not(#_) {
  color: #a1a1aa; font-size: 11.5px; font-weight: 600; letter-spacing: 0;
  text-transform: none; border-left: 0; margin-left: 0; padding-left: 0; opacity: 1;
}

/* ================= Reviews pill: tight and centred (Eric, 2026-09-19) =================
   No longer stretched across the band -- it hugs its text the way H&R's does, and
   sits centred in the space between the EN|ES switch and WhatsApp, so it still
   never runs under the logo. --rv-centre is measured in the page. */
.hdr-break { display: none; }
@media (max-width: 760px) {
  .hdr-break { display: block; flex: 0 0 100%; height: 0; order: 6; }
  .topbar .reviews:not(#_):not(#_):not(#_) {
    order: 7; flex: 0 0 auto; width: max-content;
    margin-left: var(--rv-centre, 146px); margin-right: 0;
  }
  .topbar .tabs:not(#_):not(#_):not(#_) { order: 8; }
}

/* ================= Phone pass 10 (Eric, 2026-09-19) =================
   The EN|ES switch and the three icons close up into one tight cluster, centred
   in the space beside the logo, with the reviews pill and its "Leave a review"
   link centred directly under it. Both offsets are measured in the page. */
@media (max-width: 760px) {
  .topbar .wrap:not(#_):not(#_):not(#_) { justify-content: flex-start; }
  .topbar .lang-links:not(#_):not(#_):not(#_) { margin-left: var(--cluster-left, 24px); }
  .topbar .act-facebook,
  .topbar .act-textico,
  .topbar .act-whatsapp { margin-left: 8px; }
  .topbar .reviews:not(#_):not(#_):not(#_) { margin-left: var(--rv-centre, 146px); }
  .rv-leave { order: 7; margin-left: 8px; }
}

/* "Leave a review": thin outline pill beside the reviews button. */
.rv-leave {
  display: inline-flex; align-items: center; text-decoration: none;
  font-family: var(--head); font-weight: 700; font-size: 10.5px;
  letter-spacing: .04em; text-transform: uppercase;
  color: #ffc233; padding: 4px 11px; border-radius: 999px;
  border: 1px solid rgba(242,169,0,.48); background: rgba(242,169,0,.08);
  white-space: nowrap;
}

/* The reviews button glows. */
.topbar .reviews:not(#_):not(#_):not(#_) {
  box-shadow: 0 0 18px rgba(242,169,0,.55), 0 0 34px rgba(242,169,0,.28),
              inset 0 1px 0 rgba(255,214,120,.35), inset 0 -6px 12px rgba(0,0,0,.22);
}

/* The pill and its Leave-a-review link have to share the band beside the logo,
   so both give up a little padding to fit on one line at 390px. */
@media (max-width: 760px) {
  .topbar .reviews:not(#_):not(#_):not(#_) { padding: 5px 11px; gap: 6px; }
  .topbar .reviews .rv-rating:not(#_):not(#_):not(#_) { font-size: 15px; }
  .topbar .reviews .rv-count:not(#_):not(#_):not(#_) { font-size: 10.5px; }
  .rv-leave { font-size: 9.5px; padding: 4px 9px; }
}

/* The Leave-a-review link rides with the pill: the pill is pulled up under the
   cluster, and without the same shift the link sat a line lower. */
@media (max-width: 760px) {
  .rv-leave { margin-top: calc(-1 * var(--rv-shift, 0px)); }
}

/* ================= Reviews band, H&R's shape (Eric, 2026-09-19) =================
   Big score with a gold star, the count under it, Google's top two snippets side
   by side, a summary line, then the two links -- SIDE BY SIDE, which is the one
   thing Eric wanted changed from H&R's stacked pair. */
.featured-reviews { background: #0d0f14; border-top: 3px solid #f2a900; border-bottom: 3px solid #f2a900; padding: 30px 0 34px; }
.featured-reviews .wrap { text-align: center; }
.rv-score { display: flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; }
.rv-score-num { font-family: var(--head); font-weight: 900; font-size: 58px; color: #f2a900; letter-spacing: .01em; }
.rv-score-star { font-size: 34px; color: #f2a900; }
.rv-score-count { font-family: var(--head); font-weight: 800; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: #e8eaf0; margin-top: 8px; }
.featured-reviews .rv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px;
  margin: 20px auto 0; }
.featured-reviews .rv-card { background: #14171e; border: 1px solid rgba(242,169,0,.45); border-top: 3px solid #f2a900;
  border-radius: 6px; padding: 16px 18px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.featured-reviews .rv-card p { color: #dfe3ea; font-size: 13.5px; line-height: 1.5; margin: 0; }
.featured-reviews .rv-card .rv-card-stars { color: #f2a900; letter-spacing: .1em; font-size: 14px; }
.featured-reviews .rv-card .rv-card-by { font-family: var(--head); font-weight: 800; text-transform: uppercase;
  font-size: 11px; letter-spacing: .05em; color: #f2a900; }
.rv-line { font-family: var(--head); font-weight: 800; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #f2a900; margin-top: 18px; }
.featured-reviews .rv-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 14px; }
.btn.act-reviews-all:not(#_):not(#_):not(#_) { background: #0e7490; color: #fff; box-shadow: none; }
.btn.act-reviews-leave:not(#_):not(#_):not(#_) { background: #1e40af; color: #fff; }
.featured-reviews .rv-actions .btn:not(#_):not(#_):not(#_) { font-size: .8rem; padding: 7px 16px; min-height: 0; }

@media (max-width: 760px) {
  .featured-reviews { padding: 22px 0 26px; }
  .rv-score-num { font-size: 46px; }
  .rv-score-star { font-size: 27px; }
  .featured-reviews .rv-grid { gap: 10px; margin-top: 16px; }
  .featured-reviews .rv-card { padding: 12px 12px; gap: 8px; }
  .featured-reviews .rv-card p { font-size: 12px; }
  .featured-reviews .rv-actions .btn:not(#_):not(#_):not(#_) { font-size: .72rem; padding: 6px 12px; }
}

/* ================= Desktop pass 1 (Eric, 2026-09-19) =================
   Header wording yellow at every width, hero pill lettering black, the reviews
   score and count glowing, and the inventory button shorter and narrower. */

/* Nav sections yellow on desktop too, not only on phones. */
.topbar .tabs a:not(#_):not(#_):not(#_) { color: #f2f527; background: none; }

/* Hero pills: black lettering on all three. */
.hero .cta .btn:not(#_):not(#_):not(#_) { color: #111; }

/* The tape strip reads all yellow. */
.phone-tape,
.phone-tape strong:not(#_):not(#_):not(#_),
.phone-tape a:not(#_):not(#_):not(#_) { color: #f2f527; }

/* Reviews band: count 50% bigger and glowing, score and star glowing with it. */
.rv-score-count:not(#_):not(#_):not(#_) {
  font-size: 19.5px; color: #f2f527;
  text-shadow: 0 0 10px rgba(242,245,39,.75), 0 0 22px rgba(242,169,0,.45);
}
.rv-score-num:not(#_):not(#_):not(#_),
.rv-score-star:not(#_):not(#_):not(#_) {
  text-shadow: 0 0 14px rgba(242,169,0,.85), 0 0 34px rgba(242,169,0,.45);
}

/* Inventory button: 30% narrower and no arrow. */
.btn.act-inventory:not(#_):not(#_):not(#_) { padding-left: 12.6px; padding-right: 12.6px; }
.btn.btn-2x:not(#_):not(#_):not(#_) { padding-left: 12.6px; padding-right: 12.6px; }

@media (max-width: 760px) {
  .rv-score-count:not(#_):not(#_):not(#_) { font-size: 16px; }
}

/* ================= Lifted red and green (Eric, 2026-09-19) =================
   Black lettering could not be read on #AA0000 and #336600. These are lifted
   until black passes comfortably: black on #FF3B30 is 5.9:1, on #7CB342 8.4:1
   (4.5:1 is the readable threshold). The olive green also stays distinct from
   WhatsApp's mint tile beside it. */
.btn.act-junk:not(#_):not(#_):not(#_)   { background: #FF3B30; color: #111; }
.btn.act-call:not(#_):not(#_):not(#_),
.btn.yellow:not(#_):not(#_):not(#_)     { background: #7CB342; color: #111; }
.mab-junk:not(#_):not(#_):not(#_) { background: #FF3B30; }
.mab-call:not(#_):not(#_):not(#_) { background: #7CB342; }

/* ================= Header reviews pill: the count is the star (Eric, 2026-09-19) ==========
   "19 REVIEWS" in yellow, capitalised, 25% bigger, and centred on the same line
   as the score instead of sitting low. line-height 1 on both is what actually
   centres them; align-items alone was centring two different line boxes. */
.topbar .reviews:not(#_):not(#_):not(#_) { align-items: center; padding: 6px 15px; }
.topbar .reviews .rv-rating:not(#_):not(#_):not(#_) { font-size: 19px; line-height: 1; }
.topbar .reviews .rv-count:not(#_):not(#_):not(#_) {
  color: #f2f527; text-transform: uppercase; font-weight: 800;
  font-size: 14.4px; line-height: 1; letter-spacing: .03em;
}
@media (max-width: 760px) {
  .topbar .reviews:not(#_):not(#_):not(#_) { padding: 5px 12px; }
  .topbar .reviews .rv-rating:not(#_):not(#_):not(#_) { font-size: 17px; }
  .topbar .reviews .rv-count:not(#_):not(#_):not(#_) { font-size: 13.1px; }
}

/* ================= Build 22 (Eric, 2026-09-19) =================
   Score bigger and heavier, pulled apart from the count, and the two aligned on
   their glyph centres rather than their boxes -- digits and capitals sit
   differently inside a line box, which is what kept looking a shade off. */
.topbar .reviews:not(#_):not(#_):not(#_) { gap: 14px; align-items: baseline; }
.topbar .reviews .rv-rating:not(#_):not(#_):not(#_) {
  font-size: 24px; font-weight: 900; line-height: 1;
}
.topbar .reviews .rv-count:not(#_):not(#_):not(#_) {
  font-size: 14.4px; line-height: 1;
  position: relative; top: -3.4px;   /* half the cap-height difference */
}
@media (max-width: 760px) {
  .topbar .reviews:not(#_):not(#_):not(#_) { gap: 10px; }
  .topbar .reviews .rv-rating:not(#_):not(#_):not(#_) { font-size: 21px; }
  .topbar .reviews .rv-count:not(#_):not(#_):not(#_) { font-size: 13.1px; top: -2.8px; }
}

/* Hero pills, Eric's colours. White lettering on the two dark ones: black
   measured 2.08:1 on the blue and 1.33:1 on the green, well under readable. */
.hero .cta .btn.act-junk:not(#_):not(#_):not(#_)     { background: #D12828; color: #fff; }
.hero .cta .btn.act-textpart:not(#_):not(#_):not(#_) { background: #2828D1; color: #fff; }
.hero .cta .btn.act-call:not(#_):not(#_):not(#_)     { background: #1F3008; color: #fff; }

/* Read all reviews button. */
.btn.act-reviews-all:not(#_):not(#_):not(#_) { background: #DB9C2E; color: #111; }

/* Build 23 (Eric, 2026-09-19): nav sections 35% bigger so they read, and the
   Text-a-part pill in his new colour. */
.topbar .tabs a:not(#_):not(#_):not(#_) { font-size: 1.134rem; padding: 5px 9px; }
.hero .cta .btn.act-textpart:not(#_):not(#_):not(#_) { background: #D8DB2E; color: #111; }
@media (max-width: 760px) {
  .topbar .tabs a:not(#_):not(#_):not(#_) { font-size: 1.134rem; padding: 2px 4px; }
}

/* ================= Build 25 (Eric, 2026-09-19) =================
   Bottom bar recoloured to match what the buttons actually are: the desktop
   red, the header's text blue, WhatsApp's own green, and the dark green
   sampled from FOLD NARROW (#003300). Lettering is whatever reads on each --
   black only survives on WhatsApp green; on #003300 it measures 1.16:1. */
.mab-junk:not(#_):not(#_):not(#_) { background: #D12828; color: #fff; }
.mab-text:not(#_):not(#_):not(#_) { background: #2777e8; color: #fff; }
.mab-wa:not(#_):not(#_):not(#_)   { background: #25D366; color: #111; }
.mab-call:not(#_):not(#_):not(#_) { background: #003300; color: #fff; }

/* Nav sized to sit inside the phone's margins. */
@media (max-width: 760px) {
  .topbar .tabs a:not(#_):not(#_):not(#_) { font-size: 3.55vw; padding: 2px 3px; letter-spacing: 0; }
}
/* A hair smaller: 3.55vw landed flush against both edges with no slack. */
@media (max-width: 760px) {
  .topbar .tabs a:not(#_):not(#_):not(#_) { font-size: 3.35vw; }
}

/* Color preview 026 · 10-06 02:55 UTC · approved local review.
   One shared action map for every English/Spanish page and mobile control.
   Four specificity guards win over the older three-guard color overrides. */
:root {
  --millan-call: #34D399;
  --millan-text: #60A5FA;
  --millan-junk: #F87171;
  --millan-inventory: #F2C14E;
  --millan-parts: #7C3AED;
  --millan-tow: #14B8A6;
  --millan-whatsapp: #25D366;
}

:is(.act-call, .mab-call) { --action-fill: var(--millan-call); --action-label: #111111; }
:is(.act-text, .act-textpart, .act-textico, .mab-text) { --action-fill: var(--millan-text); --action-label: #111111; }
:is(.act-junk, .mab-junk) { --action-fill: var(--millan-junk); --action-label: #111111; }
.act-inventory { --action-fill: var(--millan-inventory); --action-label: #111111; }
.act-parts { --action-fill: var(--millan-parts); --action-label: #FFFFFF; }
.act-tow { --action-fill: var(--millan-tow); --action-label: #111111; }
:is(.act-whatsapp, .mab-wa) { --action-fill: var(--millan-whatsapp); --action-label: #111111; }

:is(.act-call, .act-text, .act-textpart, .act-textico, .act-junk,
    .act-inventory, .act-parts, .act-tow, .act-whatsapp,
    .mab-call, .mab-text, .mab-junk, .mab-wa):not(#_):not(#_):not(#_):not(#_) {
  background: var(--action-fill);
  color: var(--action-label);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
  filter: none;
}

/* State feedback preserves each action's identity and measured text contrast. */
:is(.act-call, .act-text, .act-textpart, .act-textico, .act-junk,
    .act-inventory, .act-parts, .act-tow, .act-whatsapp,
    .mab-call, .mab-text, .mab-junk, .mab-wa):not(#_):not(#_):not(#_):not(#_):hover {
  box-shadow: inset 0 0 0 2px rgba(17,17,17,.25), 0 2px 7px rgba(0,0,0,.25);
}
:is(.act-call, .act-text, .act-textpart, .act-textico, .act-junk,
    .act-inventory, .act-parts, .act-tow, .act-whatsapp,
    .mab-call, .mab-text, .mab-junk, .mab-wa):not(#_):not(#_):not(#_):not(#_):active {
  box-shadow: inset 0 0 0 2px rgba(17,17,17,.4);
  transform: translateY(1px);
}
:is(.act-call, .act-text, .act-textpart, .act-textico, .act-junk,
    .act-inventory, .act-parts, .act-tow, .act-whatsapp,
    .mab-call, .mab-text, .mab-junk, .mab-wa):not(#_):not(#_):not(#_):not(#_):focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #14213D;
}
.hero .cta .act-call:not(#_):not(#_):not(#_):not(#_) {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 0 12px rgba(52,211,153,.3);
}

/* Visible local version so the review can be identified without guessing. */
body::before {
  content: "MILLAN · BUILD 044 · 10-07 04:28 UTC";
  display: block;
  padding: 4px 8px;
  background: #14213D;
  color: #F2C14E;
  text-align: center;
  font: 700 11px/1.4 Arial, sans-serif;
  letter-spacing: .04em;
}

/* Preview 027: center the two contact headings marked by Eric. */
.contact-panel h3 { text-align: center; }

/* Preview 028: three centered section links, then two, on phones. */
@media (max-width: 760px) {
  .topbar .tabs:not(#_):not(#_):not(#_):not(#_) {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    padding-top: 4px;
  }
  .topbar .tabs a:not(#_):not(#_):not(#_):not(#_) {
    grid-column: span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 38px;
    padding: 5px 6px;
    font-size: 12px;
    line-height: 1.15;
    letter-spacing: .02em;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    border-radius: 999px;
    color: #F2C14E;
    box-shadow: inset 0 0 0 1px rgba(242,193,78,.55);
  }
  .topbar .tabs a:nth-child(n+4):not(#_):not(#_):not(#_):not(#_) {
    grid-column: span 3;
  }
  .topbar .tabs a:not(#_):not(#_):not(#_):not(#_):focus-visible {
    outline: 2px solid #F2C14E;
    outline-offset: 2px;
  }
}

/* Preview 032: compact service pills, using the existing action colors. */
.service-link:not(#_):not(#_):not(#_):not(#_) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  height: auto;
  max-width: 100%;
  box-sizing: border-box;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  text-align: center;
  white-space: normal;
  text-decoration: none;
}

/* Preview 034 (Eric, 2026-10-06): header sections are plain text tabs, not buttons. No fill, no ring, wide gaps. */
.topbar .tabs:not(#_):not(#_):not(#_):not(#_):not(#_) {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; padding-top: 6px;
}
.topbar .tabs a:not(#_):not(#_):not(#_):not(#_):not(#_) {
  display: inline-block; grid-column: auto; min-height: 0; padding: 6px 2px;
  background: none; box-shadow: none; border-radius: 0;
  color: #F2C14E; font-size: 14px; letter-spacing: .04em; white-space: nowrap;
}
.topbar .tabs a:not(#_):not(#_):not(#_):not(#_):not(#_):hover,
.topbar .tabs a:not(#_):not(#_):not(#_):not(#_):not(#_):active { background: none; text-decoration: underline; text-underline-offset: 5px; }
.topbar .tabs a:not(#_):not(#_):not(#_):not(#_):not(#_):focus-visible { outline: 2px solid #F2C14E; outline-offset: 3px; }

/* Preview 035 (Eric, 2026-10-06): Mexican palette on the page buttons. Same action map, new fills; labels re-measured. */
:root {
  --millan-call: #0B7A4B;
  --millan-text: #2E6FD8;
  --millan-junk: #C8102E;
  --millan-inventory: #F2A900;
  --millan-parts: #E8702A;
  --millan-tow: #0E7C86;
}
:is(.act-call, .mab-call):not(#_):not(#_):not(#_):not(#_):not(#_) { --action-label: #FFFFFF; }
:is(.act-text, .act-textpart, .act-textico, .mab-text):not(#_):not(#_):not(#_):not(#_):not(#_) { --action-label: #FFFFFF; }
:is(.act-junk, .mab-junk):not(#_):not(#_):not(#_):not(#_):not(#_) { --action-label: #FFFFFF; }
.act-inventory:not(#_):not(#_):not(#_):not(#_):not(#_) { --action-label: #111111; }
.act-parts:not(#_):not(#_):not(#_):not(#_):not(#_) { --action-label: #111111; }
.act-tow:not(#_):not(#_):not(#_):not(#_):not(#_) { --action-label: #FFFFFF; }
.hero .cta .act-call:not(#_):not(#_):not(#_):not(#_):not(#_) { box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 0 12px rgba(11,122,75,.4); }

/* Preview 036 (accessibility): skip link, visible focus everywhere, touch-target minimums. */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 10000; padding: 10px 16px; background: #F2C14E; color: #111111; font: 700 14px/1.2 Arial, sans-serif; border-radius: 4px; text-decoration: none; }
.skip-link:focus { top: 8px; outline: 3px solid #14213D; outline-offset: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible { outline: 3px solid #F2C14E; outline-offset: 2px; }
main a:focus-visible, main button:focus-visible { outline-color: #14213D; box-shadow: 0 0 0 5px #FFFFFF; }
.btn:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.service-link.btn:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { min-height: 44px; }
.topbar .tabs a:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; }
.lang-links a:not(#_):not(#_):not(#_):not(#_) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; box-sizing: border-box; }
.round-btn:not(#_):not(#_):not(#_):not(#_) { min-width: 36px; min-height: 36px; }
.topbar a.reviews:not(#_):not(#_):not(#_):not(#_) { min-height: 44px; display: inline-flex; align-items: center; }

/* Contrast fixes (proposal from the site audit, 2026-10-07). Measured against WCAG 2.2 AA (4.5:1 text).
   Light-section kickers: dark gold #7A5800 (5.5-6.5:1) replaces yellow #F2C14E (1.4-1.7:1).
   Gray body copy #5A5F66 (5.5-6.4:1) replaces #6B7078 (4.2:1 on the tan section).
   EN toggle: white on #1B66CC (5.5:1). ES toggle: #EF5350 on black (5.4:1), white on #D32F2F when selected (5.0:1). */
.about-local .kicker:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_), #parts .kicker:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_), .howto .kicker:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_), .promise .kicker:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { color: #7A5800; }
.howto p:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_), .quote-layout p:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_), .service p:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_), .step p:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { color: #5A5F66; }
.lang-links .lang-en:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_), .lang-seg .lang-en:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { color: #5B9BFF; }
.lang-links .lang-en.is-on:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_), .lang-switch .lang-seg .lang-en:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_), .lang-switch input:not(:checked) ~ .lang-seg .lang-en:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { background: #1B66CC; color: #fff; }
.lang-links .lang-es:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_), .lang-seg .lang-es:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { color: #EF5350; }
.lang-links .lang-es.is-on:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_), .lang-switch input:checked ~ .lang-seg .lang-es:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { background: #D32F2F; color: #fff; }

/* Small staff sign-in link under the contact panels. */
.staff-row{text-align:right;padding-top:10px}
.staff-link{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6b7078);text-decoration:none;padding:8px 2px}
.staff-link:hover,.staff-link:focus-visible{color:var(--red);text-decoration:underline}

/* Revised pill-button header retained; original hero styling stays unchanged. */
.topbar .reviews {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 3px 10px !important;
  gap: 6px !important;
  box-sizing: border-box;
}
.topbar .reviews .rv-rating { font-size: 13px !important; line-height: 1 !important; }
.topbar .reviews .rv-count { font-size: 10px !important; line-height: 1 !important; }
.topbar .lang-links {
  display: inline-flex !important;
  align-items: center !important;
  height: 28px !important;
  flex: 0 0 auto;
  border-radius: 999px;
}
.topbar .lang-links a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}
.topbar .round-btn {
  width: 28px !important; min-width: 28px !important;
  height: 28px !important; min-height: 28px !important;
}
.topbar .round-btn svg { width: 15px; height: 15px; }
.topbar .tabs a {
  --nav-color: #F2A900;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 5px 11px !important;
  border: 1px solid var(--nav-color) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--nav-color) 14%, #17212b) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px #ffffff08 !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  font-weight: 800;
  letter-spacing: .025em !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.topbar .tabs a:is([href="#parts"], [href^="/used-auto-parts"], [href^="/es/partes-usadas"]) { --nav-color: #E8702A; }
.topbar .tabs a:is([href="#junk"], [href^="/sell-junk-car"], [href^="/es/vender-carro"]) { --nav-color: #C8102E; }
.topbar .tabs a:is([href="#repair"], [href^="/auto-repair"], [href^="/es/reparacion"], [href^="/towing"], [href^="/es/grua"]) { --nav-color: #0E7C86; }
.topbar .tabs a[href="#contact"] { --nav-color: #0B7A4B; }
.topbar .tabs a:hover { filter: brightness(1.18); }
@media (min-width: 901px) {
  .topbar .wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 1200px !important;
    min-height: 76px !important;
    margin: 0 auto !important;
    padding: 10px 20px !important;
    gap: 10px !important;
  }
  .topbar .brand { order: 0 !important; margin: 0 !important; flex: 0 0 auto; }
  .topbar .brand-mark { width: 112px !important; height: 57px !important; }
  .topbar .tabs {
    display: flex !important; flex: 0 1 auto !important; order: 1 !important;
    width: auto !important; flex-wrap: wrap !important;
    align-items: center !important; justify-content: center !important;
    gap: 6px !important; padding: 0 !important; margin: 0 !important;
  }
  .topbar .reviews { order: 2 !important; margin: 0 !important; transform: none !important; }
  .topbar .lang-links { order: 3 !important; margin: 0 !important; }
  .topbar .round-btn { order: 4 !important; margin: 0 !important; }
  .topbar .hdr-break { display: none !important; }
  .topbar .brand picture,.topbar .brand img { display: block; }
}